/*--------------------------------- IMPORTS -----------------------------------*/ /*@import url(fonts/fontawesome/font-awesome-4.0.3/css/font-awesome.min.css); @import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,700); @font-face { font-family: 'OswaldLight'; src: url('/assets/css/fonts/oswald-light-webfont.eot'); src: url('/assets/css/fonts/oswald-light-webfont.eot?#iefix') format('embedded-opentype'), url('/assets/css/fonts/oswald-light-webfont.woff') format('woff'), url('/assets/css/fonts/oswald-light-webfont.ttf') format('truetype'), url('/assets/css/fonts/oswald-light-webfont.svg#OswaldLight') format('svg'); font-weight: normal; font-style: normal; }*/ /*@import url(http://fonts.googleapis.com/css?family=Nunito:400,700);*/ /*--------------------------------- OVERRIDES -----------------------------------*/ html, body { position: relative; height: 100% } #XXcontent { -webkit-animation: fadein 1s; -moz-animation: fadein 1s; -ms-animation: fadein 1s; -o-animation: fadein 1s; animation: fadein 1s; } @keyframes fadein { from { opacity: .0; } to { opacity: 1; } } @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes fadein { from { opacity: .0; } to { opacity: 1; } } @-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } h1, h2, h3, h4, h5, h6, .bigText { font-family: 'Oswald', arial, verdana, sans-serif; line-height: 120%; /*-webkit-font-smoothing: antialiased; -webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px; */ } h1, .bigText { font-size: 2.5em; margin: 10px 0 20px 0; color: #777; } .biggerText { font-size: 1.7rem; } .bigText { font-size: 180%; } .slogan { font-size: 2.5em; border-bottom: 1px solid #ccc; padding: 6px 6px 6px 0px; line-height: 150%; margin-top: -12px; } h2 { font-size: 1.8em; margin: 10px 0 10px 0; } h3 { font-size: 1.5em; margin: 10px 0 10px 0; } h3.subhead { font-size: 13pt; line-height: 16pt; color: #ff6600; text-align: center; } h4 { font-size: 1.4em; margin: 10px 0 10px 0; } h5 { font-size: 1.3em; margin: 10px 0 10px 0; } h6 { font-size: 1.2em; margin: 10px 0 5px 0; } p { margin: 10px 0; } a { text-decoration: none; } thead th, tbody th { font-family: "Open Sans", arial, verdana, sans-serif; } button, a.btn, input[type="submit"], input[type="reset"], input[type="button"] { font-family: "Open Sans", arial, verdana, sans-serif; } .menu { font-family: "Open Sans", arial, verdana, sans-serif; } blockquote { font-family: "Open Sans", arial, verdana, sans-serif; } ul, ol { padding: 0; margin: 0 0 20px 55px; } .nosee { display: none; } #information input[type="text"], #information input[type="tel"], #information input[type="email"], #information textarea { width: 90%; } #geotrust img { vertical-align: middle } /*--------------------------------- LAYOUT -----------------------------------*/ body { margin: 0; padding: 0 0 0 0; color: #000; background: #fff; font: normal 16px 'Open Sans', arial, verdana, sans-serif; line-height: 150%; text-shadow: 0px 0px 1px transparent; /* google font pixelation fix */ } #container { min-height: 87%; position: relative; } #progress { position: fixed; top: 0px; left: 0; width: 100%; height: 150%; z-index: 99999; background: url('/assets/dim.png'); display: none; ; text-align: left; } #pbar { position: fixed; width: 300px; z-index: 200; border: 5px solid #222; text-align: center; padding-bottom: 40px; padding-top: 40px; background: #FFF; transform: translate(-50%, -50%); /* Yep! */ top: 50%; left: 50%; margin-top: 0px; display:; box-shadow: 0 0 18px rgba(0,0,0,.8) } #pbar h2 { font-size: 1.4em; color: #456CD3; text-align: center; } #supportTel { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; background: #000; color: #fff; font-size: 1.3em; font-weight: bold; padding: 6px; } #aweber { width: 600px; max-width: 100%; background: #FF9900; padding: 1em; color: #fff; top: -200px } #aweber * { color: #fff; } #aweber textarea, #aweber input[type="email"] { color: #000; font-size: larger; } #logo { float: left; margin-right: 56px; } #logoMenu { display: none; float: left; } a#logoMenu img { max-height: 23px; width: auto; } a#logoMenu { padding: 0em!important; text-align: center; } a#logoMenu:hover { background: none!important; } #tag { margin: 16px 0 0 0; display: inline-block; text-align: center; color: #777; font-size: 120%; line-height: 90%!important; } #tag span { font-size: smaller; } #logo img { margin: 30px 0; } #tag h2 { font-size: 1.6em; margin: 8px 0 10px 0; } .hand { position: absolute; margin-left: -40px; display: inline-block; text-decoration: blink; } footer { background: #222; background-image: url(/assets/bg_aside.png); ; color: #fff; padding: 12px 0 2em; position: static; bottom: 0; width: 100%; float: left; z-index: 9999; font-size: smaller } footer a { text-decoration: none } footer h4 { font-size: 1.8em; } footer ul { list-style: none; margin: 0 0 0 6px; padding: 0 } footer ul li { padding: 0; margin: 0; } footer ul li a { color: #ccc; padding: 0; } #ccardslogos { vertical-align: middle; } #content { padding-bottom: 22px; } #rightcolumn { padding-left: 12px; border-left: 1px solid #ccc; display: none; } #leftcolumn { padding: 4em 12px 0 0; border-right: 1px solid #ccc; display: block; } a strong { color: #3366CC; } .align-center { display: flex; align-items: center; } .bigText { font-size: 180%; } .largeText { font-size: larger } .blueItalic { color: #33C; font-style: italic; } .bigMaroon { color: #672421!important; font-size: 1.2em } .bigOrange { color: #FF6600!important; font-size: 1.2em } .borderR { padding-right: 12px; border-right: 1px dotted #ccc; } .tdiv { height: 260px; overflow: visible } .tdiv2 { height: 190px; overflow: visible } .tcell { display: table-cell; height: 100%; position: relative; } .menu li.orderBut { float: right; margin: 0 8px; position: absolute; right: 12px; left: auto } .menu ul { XXXtransition: all 0.5s ease 3s; -webkit-transition-delay: 3.1s; -moz-transition-delay: 3.1s; -ms-transition-delay: 3.1s; -o-transition-delay: 3.1s; transition-delay: 3.1s; } .menu li:hover > ul { transition: all 3.5s ease 0s; } /*.menu li.searchButton { float: right; margin: 0 8px; position: absolute; right: 90px; left: auto }*/ #searchButton { padding-right: 1em; font-size: 1.2em; } .searchFormNav { display: none; position: absolute; top: -60px; right: 0; border: 1px solid #ccc; padding: .25em 1em 1em; background: #fff; z-index: 9; text-align: right; } .searchFormNav form { } .searchFormNav input#query_t { height: 36px; width: 300px; box-shadow: none; border-radius: 0; margin-right: -20px; } .suggest { font-size: 0.8em; position: absolute; width: 150px; background-color: #EEEEEE; margin: 0px; padding: 0px; } .suggest ul { list-style-type: none; margin: 0px; padding: 0px; } .suggest ul li.selected { background-color: #C3E3CC; } .suggest ul li { list-style-type: none; display: block; margin: 0; padding: 2px; height: 12px; cursor: pointer; } .navbar li.searchButton a { font-size: 1.5em; padding-top: .45em; padding-bottom: .5em; } header { margin: 80px 0 12px 24px } #link-top { display: none; } .hpd {display:none!important;} /* NAV BAR*/ .navbar { position: fixed; top: 35px; left: 0; width: 100%; background: #32528e; color: #fff; z-index: 1000; } .navbar li.orderBut a { margin: .2em 0; padding: 0; } .navbar li.orderBut a:hover { background: none; } .navbar li.orderBut a#searchButton { margin: 0em 1em 0 0; padding: .75em .6em; } .navbar li.orderBut a#searchButton:hover { background: #000; } .navbar #logo { position: absolute; top: 0; right: 0; padding: 0.5em 1em; font-size: 1.7em; color: #efefef; text-decoration: none; } .navbar span { color: #881c1b; } .navbar ul { margin: 0 auto; padding: 0; } .navbar li { margin: 0; padding: 0; list-style-type: 0; display: inline-block; vertical-align: middle; } .navbar li a { display: inline-block; color: #efefef; padding: 1em .6em; text-decoration: none; text-transform: uppercase; line-height: 100%; font-size: 1em; } .navbar li ul li a { font-size: .9em; } /*#sidenav ul, #sidenav ul li { list-style: none; margin: 0 0 0 6px; padding: 0; } #sidenav ul li a { display: block; color: #333; text-decoration: none; padding: 2px 4px 2px 8px; font-size: .9em; width: 100%; margin: 1px 0; border-radius: 6px; } #sidenav ul li a:hover { background: #333; color: #fff; zoom: 1.0 }*/ #sidenav ul li a.act { background: #32528e; color: #fff; zoom: 1.00 } .callout { padding: 1em 1em; color: #fff!important; /*box-shadow: inset 0px 0px 10px rgba(0,0,0,0.2);*/ text-align: center; /*text-shadow: 0px 1px 3px rgba(0,0,0,0.2); */display: block; border-radius: 4px; } .callout { } .callout + div.grid { margin-top: 50px; } .callout a { text-decoration: none; color: #ffa; } a.callout { cursor: pointer; } .callout i.icon-4x { font-size: 6em; } .callout h4 { color: #fff; font-weight: bold; font-size: 1.5em; } .callout-top { margin: 50px 0 0 0; } .callout p { margin-bottom: 0; } .callout .button { margin-top: 10px; } .callout.red { background: #900; font-size: 1.3em; margin: 4.5em 0 0em; text-shadow: 0 -1px 0 #B21203; color: #fff; border: 1px solid #B21203; background: rgb(229,60,22); background: -moz-linear-gradient(top, rgba(229,60,22,1) 0%, rgba(207,4,4,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(229,60,22,1)), color-stop(100%, rgba(207,4,4,1))); background: -webkit-linear-gradient(top, rgba(229,60,22,1) 0%, rgba(207,4,4,1) 100%); background: -o-linear-gradient(top, rgba(229,60,22,1) 0%, rgba(207,4,4,1) 100%); background: linear-gradient(top, rgba(229,60,22,1) 0%, rgba(207,4,4,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e53c16', endColorstr='#cf0404', GradientType=0 ); } .callout.red2 { font-size: 1.3em; margin: 0.5em 0 0em; text-shadow: 0 -1px 0 #B21203; color: #fff; border: 1px solid #B21203; background: rgb(158, 37, 10); } .callout.red2 * { color: #fff!important; } .callout.orange2 { font-size: 1.2em; margin: 0.5em 0 0em; text-shadow: 0 -1px 0 #B21203; color: #fff; border: 1px solid #B21203; background: #FF9900; } .callout.orange2 * { color: #fff!important; } .callout.green { background: #1f8026;/*#86dc00;*/ } .callout.grey { background: #ddd;/*#86dc00;*/ } #pricingPop h2, #pricingPop h3 { text-align: center; margin: 5px 0 5px 0; } #pricingPop { max-width: 270px; } #price_form { line-height: 120%; } #price_form .shipNotice { color: #fff; background: #000; padding: .35em; border-radius: 8px; } #pricingPop { } #pricingPop { } #pricingPop { } #mc_embed_signup { padding: 30px 0; } #ui-preview { border: 5px solid #ddd; margin: 30px 0; display: block; } #sTrade ul { } .showside { display: block!important; left: 0!important; right: 0!important; position: relative!important; background: #efefef!important; box-shadow: none!important; opacity: 1!important; margin-bottom: 1em!important; } ul.showside li a { color: #000!important; padding-left: 2em!important; } ul.showside li a:hover, ul.showside li a.act { color: #fff!important; } #finders { float: right; position: relative; top: 32px; } th { background: #555!important; color: #fff; } thead th { background: #000!important; color: #fff; } tr.alt { background: #ddd!important; } td { text-align: left; } table.center td, table.center th { text-align: center!important; } tr:hover, tr.alt:hover { background: #ccc!important; } tr:hover th { background: #000!important } .Kbar { background: #000; color: #fff; padding: 12px; } .margin-up12 { margin-top: -12px; } .margin-up { margin-top: 0; } .socIcons a { vertical-align: middle; display: inline-block; } .box1 { padding: 12px; border-radius: 12px; } .box2 { padding: 12px; background: #efefef; } .halo { box-shadow: 0 0 8px rgba(0,0,0,.8) } .border { border: 1px solid #000 } .blueText, h1.slogan, h4 { color: #32528e; } .question { margin: 12px 0; cursor: pointer; } .answer { display: none; margin: 1em 3em; font-size: 1em } #content img { vertical-align: middle; } .sampleThumb { cursor: pointer } .sampleThumb:active { box-shadow: none } small { line-height: 1.4em; } ul.icons { list-style: none; margin-left: 42px; text-indent: -12px; } ul.icons li i.fa { padding-right: 8px; } /*.templateDiv { min-width: 195px; height: 290px; position:relative; display: inline-table; Xfloat: left; text-align:center; margin: 6px; padding: 8px; border:1px solid #ccc;} .templateDiv h5{ } .templateDiv a.button{ position: static; bottom: 0; top:auto; margin: 0 auto; width: 200px; max-height: 50px; } img.tempThmb{ max-height: 160px; width:auto;margin: 0 auto; } .templateDiv a.lightbox {display: table-cell; min-width: 184px; Xheight: 147px; vertical-align: middle; }*/ .tempGroup { width: 100%; text-align: center; Xdisplay: table; } .templateDiv, .templateDivV { border-radius: 8px; border: 1px solid #ccc; text-align: center; margin: 6px; padding: 8px; position: relative; display: inline-table; } .templateDiv:hover, .templateDivV:hover { box-shadow: 0 0 8px rgba(51,51,51,1) } .templateDiv { min-width: 195px; XXXwidth: 240px; height: 160px; overflow-style: auto } .templateDiv h5 { } .templateDiv a.button { position: static; bottom: 0; top: auto; margin: 0 auto; width: 200px; max-height: 50px; } img.tempThmb {/*max-height: 100px; width:auto;*/ margin: 0 auto; Xzoom: .15; XXX-moz-transform: scale(.15); Xmax-width: 240px } .tgMetric img.tempThmb {/*max-height: 100px; width:auto;*/ margin: 0 auto; Xzoom: .20; } .templateDiv a.lightbox { display: block; min-width: 134px; min-height: 120px; text-align: center; vertical-align: middle; } .tgMetric .templateDiv a.lightbox { display: block; min-width: 134px; min-height: 180px; text-align: center; vertical-align: middle; } .templateDivV { max-width: 250px; height: 200px; } .templateDivV a.lightbox { display: table; min-height: 180px; width: 100%; vertical-align: middle; text-align: center } .tgMetric .templateDivV a.lightbox { display: table; min-height: 250px; width: 100%; vertical-align: middle; text-align: center } img.tempThmbv {/* max-width: 100px; */ Xzoom: .15; margin: 0 auto; } .tgMetric img.tempThmbv {/* max-width: 100px; */ Xzoom: .20; margin: 0 auto; Xmax-width: 240px } .templateDiv { min-width: 195px; height: 290px; position: relative; display: inline-table; Xfloat: left; text-align: center; margin: 6px; padding: 8px; border: 1px solid #ccc; } .templateDiv h5 { } .templateDiv a.button { position: static; bottom: 0; top: auto; margin: 0 auto; width: 200px; max-height: 50px; } img.tempThmb { max-height: 160px; width: auto; margin: 0 auto; } img.tempThmbv { max-width: 160px; height: auto; margin: 0 auto; } .templateDiv a.lightbox { display: table-cell; min-width: 184px; Xheight: 147px; vertical-align: middle; } /*Forms*/ label { font-weight: bold; margin-left: 2px; } input[type="radio"], input[readonly="readonly"], input[readonly] { box-shadow: none; -webkit-box-shadow: none; margin-right: 4px; vertical-align: middle; } .bottom { position: absolute!important; bottom: 0; width: 100%; padding: 12px } .two_columns { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } .dropcaps { float: left; margin: 4px 7px 0 0; font-size: 34px; color: rgb(255, 255, 255); text-shadow: 0 0 1px #fff; line-height: 1.2em; background: #32528e; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; width: 57px; height: 52px; overflow: hidden; text-align: center; padding-top: 5px; font-weight: bold; } #center, #container, #sidenav, #rightcolumn, #content, #leftcolumn, .templateDiv, .templateDivV { -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; } .priceInput { font-size: 16px; } input[type="text"].priceInput { width: 60px; font-size: 16px; border: none; background: #fff; padding: 0px; } input[type="radio"], input[readonly="readonly"], input[readonly]:focus, .readonly { box-shadow: none; -webkit-box-shadow: none; margin-right: 4px; vertical-align: middle; background: none; border: none; } .box { padding: 12px; border-radius: 12px; background: rgb(232,232,232); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2U4ZThlOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5ZTllOWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(232,232,232,1) 1%, rgba(158,158,158,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, rgba(232,232,232,1)), color-stop(100%, rgba(158,158,158,1))); background: -webkit-linear-gradient(top, rgba(232,232,232,1) 1%, rgba(158,158,158,1) 100%); background: -o-linear-gradient(top, rgba(232,232,232,1) 1%, rgba(158,158,158,1) 100%); background: -ms-linear-gradient(top, rgba(232,232,232,1) 1%, rgba(158,158,158,1) 100%); background: linear-gradient(to bottom, rgba(232,232,232,1) 1%, rgba(158,158,158,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#9e9e9e', GradientType=0 ); border: 1px solid #555; width: 90%; margin: 0 auto; } .box2 { padding: 12px; border-radius: 2px; background: rgb(232,232,232); overflow: auto; } .sizer { font-size: 1.4em; font-weight: bold; } small br { display: block; margin: -8px 0; content: " "; } label.error { font-size: 12px; } /* Wallpaper Slideshow */ #slideshow { list-style: none; color: #fff; background: #000; } #slideshow span { display: none } #Swrapper { width: 100%; /*width:406px; */ margin: 0px auto; display: none } #Swrapper * { margin: 0; padding: 0 } #fullsize { position: relative; width: 100%; /*width:406px; */ height: 240px; padding: 2px; border: 1px solid #ccc; background: #000; margin-left: -6px; } #Swrapper #information { position: absolute; bottom: 0; width: 100%; /*width:406px; */ height: 0; background: #000; color: #fff; overflow: hidden; z-index: 200; opacity: .7; filter: alpha(opacity=70) } address{font-style:normal} #information h3 { padding: 4px 8px 3px; font-size: 14px; color: #fff; } #information p { padding: 0 8px 8px; text-align: left; font-size: 90%; line-height: 120%; } #image { width: 400px; } #image img { position: absolute; z-index: 25; width: auto; height: 240px; overflow: hidden; } .imgnav { position: absolute; width: 25%; height: 206px; cursor: pointer; z-index: 150; } #imgprev { left: 0; background: url(/assets/icons/left.gif) left center no-repeat } #imgnext { right: 0; background: url(/assets/icons/right.gif) right center no-repeat } #imglink { position: absolute; height: 206px; width: 100%; z-index: 100; opacity: .4; filter: alpha(opacity=40) } .linkhover { background: url(/assets/icons/link.gif) center center no-repeat } #thumbnails { margin-top: 15px } #slideleft { float: left; width: 20px; height: 81px; background: url(/assets/icons/scroll-left.gif) center center no-repeat; background-color: #222 } #slideleft:hover { background-color: #333 } #slideright { float: right; width: 20px; height: 81px; background: #222 url(/assets/icons/scroll-right.gif) center center no-repeat } #slideright:hover { background-color: #333 } #slidearea { float: left; position: relative; width: 356px; margin-left: 5px; height: 81px; overflow: hidden } #slider { position: absolute; left: 0; top: 0; height: 81px } #slider img { cursor: pointer; border: 1px solid #666; padding: 2px } #information input:not([value=""]):not(:focus):invalid { border: 1px solid red; color:red; } #information input#t_email:not([value=""]):not(:focus):invalid ~ .input-validation::after { content: "\A Please provide a valid email"; color: red; font-size:12px; } #information input:not([value=""]):not(:focus):invalid ~ .input-validation::before { content: " \2718"; color: red; } #information input:required, #information textarea:required { max-width: 95% } #information input:required:valid, #information textarea:required:valid { border: 1px solid green; } #information input:valid ~ .input-validation::before, #information textarea:valid ~ .input-validation::before { content: " \2714"; color: green; } /* Mail POP */ #mailBox { min-width: 45px !important; width: 263px; bottom: 0 !important; animation-duration: 0.1s !important; animation-fill-mode: both !important; animation-timing-function: ease-in !important; right: 60px !important; cursor: default; position: fixed !important; border-radius: 6px !important; border-bottom-left-radius: 0 !important; z-index: 9999999 !important; } #callBar { color: #fff; background: #32528e; padding: .45em .75em; font-size: 0.9em; border-radius: 6px !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; cursor: pointer; } #mailBox input, #mailBox textarea { width: 100%; margin: .25em 0; box-shadow: none; padding: 10px; border: 1px solid #0000004d; } #mailBox textarea { height: 4em; resize: none; } #mailBoxInner { padding: 0px; height: 0px; background: #efefef; } #emailPopFormWrapper {/*float: left; width: 100%; */ background: #fff; padding: 10px 16px 16px 16px; margin-bottom: 2em; box-shadow: 1px 1px 4px rgba(0,0,0,0.4) !important; } #mailBox input[type="submit"] { width: auto; display: block; margin: .35em auto; } #mailBox .callMsgOpen { padding: 14px .75em; font-size: 1.2em; } #mailBox .callMsgClosed { padding: 0px; } #mailBox .arrow { position: absolute; right: 12px; font-size: 1.8em; border: 1px solid rgba(255, 255, 255, 0.4); top: 2px; padding: 0 6px; border-radius: 4px; } #mailBox .callMsgOpen .arrow { top: 11px; font-size: 2.2em; } #mailBox .callMsgClosed .arrow { top: 4px; } #mailBox .arrow:hover { border: 1px solid rgba(255, 255, 255, 1); transition: all .5s } /* PORTFOLIO */ .portgrid { position: relative; } .grid-item, .grid-item2 { width: 31.666666666667%; margin: .1em; } .grid-item--width2 { width: 400px; } #bottomdiv, #topdiv { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } #topdiv { z-index: 10; } .blackBG { background: #222; color: #fff; } .sidetag { text-align: center; padding: .5em; font-size: 1.8em; font-family: 'Oswald', arial, verdana, sans-serif; line-height: 120%; width: 40% } .nomargin *[class*="col_"] { margin: 0; } .flexCenter { display: flex; align-items: center; } input[class*="col_"] { margin: 0 } a img:not(.nohover):hover { box-shadow: 0 0 8px rgba(0,0,0,.8); /*transition: all 0.5s ease 3s; */ } #orderArea a img:hover { box-shadow: 0 0 0px rgba(0,0,0,.8); /*transition: all 0.5s ease 3s; */ } /* Floatbox v3.24 */ /* December 01, 2008 */ #fbOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; border-width: 0; margin: 0; padding: 0; } /* overlay color */ div.fbOverlay_black { background-color: #000; } div.fbOverlay_white { background-color: #000; } div.fbOverlay_blue { background-color: #0b183b; } div.fbOverlay_yellow { background-color: #752; } div.fbOverlay_red { background-color: #280000; } div.fbOverlay_custom { background-color: #1b2642; } #fbBox { position: absolute; border-style: solid; border-width: 0; margin: 0; padding: 0; } div.fbBox_black { border-color: #888; /* outerBorder color */ background-color: #000; /* main floatbox color */ } div.fbBox_white { border-color: #888; background-color: #000; } div.fbBox_blue { border-color: #4060a8; background-color: #0b183b; } div.fbBox_yellow { border-color: #680c0c; background-color: #ed9; } div.fbBox_red { border-color: #945848; background-color: #580808; } div.fbBox_custom { border-color: #da7b4d; background-color: #eed39e; } #fbBox div, #fbBox a, #fbBox img, #fbBox iframe { border-width: 0; margin: 0; padding: 0; outline: none; -moz-outline: none; /* for older Netscape, doesn't validate, remove if you like */ } #fbBox a { background: url(/assets/graphics/blank.gif); zoom: 1; } #fbZoomDiv, a.fbPopup img, #fbBox #fbIndexLinks img { position: absolute; left: 0; top: -9999px; /* border-width is set in js code */ border-style: solid; border-color: black; margin: 0; padding: 0; } #fbBox #fbLoader { position: absolute; top: 0; left: 0; min-width: 100%; min-height: 100%; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; } /* animated 'loading' graphic */ #fbBox .fbLoader_black { background-image: url(/assets/graphics/loading_black.gif); } #fbBox .fbLoader_white { background-image: url(/assets/graphics/loading_white.gif); } #fbBox .fbLoader_blue { background-image: url(/assets/graphics/loading_black.gif); } #fbBox .fbLoader_yellow { background-image: url(/assets/graphics/loading_white.gif); } #fbBox .fbLoader_red { background-image: url(/assets/graphics/loading_black_small.gif); } #fbBox .fbLoader_custom { background-image: url(/assets/graphics/loading_black_small.gif); } #fbBox #fbShadowTop, #fbShadowRight, #fbBox #fbShadowBottom, #fbBox #fbShadowLeft, #fbBox #fbShadowCorner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; } #fbBox #fbShadowTop { background-position: top left; } #fbBox .fbShadowTop_halo8 { background-image: url(/assets/graphics/shadowTop_halo8.png); } #fbBox .fbShadowTop_halo12 { background-image: url(/assets/graphics/shadowTop_halo12.png); } #fbBox .fbShadowTop_halo16 { background-image: url(/assets/graphics/shadowTop_halo16.png); } #fbBox .fbShadowTop_halo24 { background-image: url(/assets/graphics/shadowTop_halo24.png); } #fbBox #fbShadowRight { background-position: top right; } #fbBox .fbShadowRight_drop8 { background-image: url(/assets/graphics/shadowRight_drop8.png); } #fbBox .fbShadowRight_drop12 { background-image: url(/assets/graphics/shadowRight_drop12.png); } #fbBox .fbShadowRight_drop16 { background-image: url(/assets/graphics/shadowRight_drop16.png); } #fbBox .fbShadowRight_drop24 { background-image: url(/assets/graphics/shadowRight_drop24.png); } #fbBox .fbShadowRight_halo8 { background-image: url(/assets/graphics/shadowRight_halo8.png); } #fbBox .fbShadowRight_halo12 { background-image: url(/assets/graphics/shadowRight_halo12.png); } #fbBox .fbShadowRight_halo16 { background-image: url(/assets/graphics/shadowRight_halo16.png); } #fbBox .fbShadowRight_halo24 { background-image: url(/assets/graphics/shadowRight_halo24.png); } #fbBox #fbShadowBottom { background-position: bottom right; } /* overridden in code for drop shadow */ #fbBox .fbShadowBottom_drop8 { background-image: url(/assets/graphics/shadowBottom_drop8.png); } #fbBox .fbShadowBottom_drop12 { background-image: url(/assets/graphics/shadowBottom_drop12.png); } #fbBox .fbShadowBottom_drop16 { background-image: url(/assets/graphics/shadowBottom_drop16.png); } #fbBox .fbShadowBottom_drop24 { background-image: url(/assets/graphics/shadowBottom_drop24.png); } #fbBox .fbShadowBottom_halo8 { background-image: url(/assets/graphics/shadowBottom_halo8.png); } #fbBox .fbShadowBottom_halo12 { background-image: url(/assets/graphics/shadowBottom_halo12.png); } #fbBox .fbShadowBottom_halo16 { background-image: url(/assets/graphics/shadowBottom_halo16.png); } #fbBox .fbShadowBottom_halo24 { background-image: url(/assets/graphics/shadowBottom_halo24.png); } #fbBox #fbShadowLeft { background-position: bottom left; } #fbBox .fbShadowLeft_halo8 { background-image: url(/assets/graphics/shadowLeft_halo8.png); } #fbBox .fbShadowLeft_halo12 { background-image: url(/assets/graphics/shadowLeft_halo12.png); } #fbBox .fbShadowLeft_halo16 { background-image: url(/assets/graphics/shadowLeft_halo16.png); } #fbBox .fbShadowLeft_halo24 { background-image: url(/assets/graphics/shadowLeft_halo24.png); } #fbBox #fbShadowCorner { background-position: bottom right; } #fbBox .fbShadowCorner_drop8 { background-image: url(/assets/graphics/shadowCorner_drop8.png); } #fbBox .fbShadowCorner_drop12 { background-image: url(/assets/graphics/shadowCorner_drop12.png); } #fbBox .fbShadowCorner_drop16 { background-image: url(/assets/graphics/shadowCorner_drop16.png); } #fbBox .fbShadowCorner_drop24 { background-image: url(/assets/graphics/shadowCorner_drop24.png); } #fbBox #fbCanvas { position: relative; /* won't fade in ie6 if absolute */ left: 0; top: 0; width: 100%; height: 100%; } #fbBox #fbMainDiv, #fbBox #fbInfoPanel, #fbBox #fbControlPanel { position: absolute; border-style: solid; overflow: hidden; } #fbBox #fbMainDiv { background-color: #000; } #fbContent { background-image: url(/assets/bg-pops.png); background-repeat: repeat-x; background-position: left top; } #fbContent.fbContent_white { background-image: none; background: #fff; } #fbContent.fbContent_white html body { font-family: Arial, Helvetica, sans-serif } /* innerBorder color */ #fbBox .fbMainDiv_black { border-color: #ccc; background-color: #000; } #fbBox .fbMainDiv_white { border-color: #000; } #fbBox .fbMainDiv_blue { border-color: #aaa8be; } #fbBox .fbMainDiv_yellow { border-color: #700; } #fbBox .fbMainDiv_red { border-color: #b64; } #fbBox .fbMainDiv_custom { border-color: #b64; } #fbBox #fbResizer { position: absolute; width: 25px; /* = dimensions of the resize button (see note below) */ height: 25px; left: 0; top: 0; } /* resize button graphic */ #fbBox .fbResizer_black { background-image: url(/assets/graphics/resize_black.gif); } #fbBox .fbResizer_white { background-image: url(/assets/graphics/resize_white.gif); } #fbBox .fbResizer_blue { background-image: url(/assets/graphics/resize_blue.gif); } #fbBox .fbResizer_yellow { background-image: url(/assets/graphics/resize_yellow.gif); } #fbBox .fbResizer_red { background-image: url(/assets/graphics/resize_red.gif); } #fbBox .fbResizer_custom { background-image: url(/assets/graphics/resize_red.gif); } /* note: if you want the smaller resize button, change #fbResizer width and height to 19px and also add "_small" to the resize gif name (e.g., /assets/graphics/resize_black_small.gif) */ #fbBox #fbLeftNav, #fbBox #fbRightNav { position: absolute; height: 100%; } #fbBox #fbLeftNav, #fbBox #fbOverlayPrev { left: 0; } #fbBox #fbRightNav, #fbBox #fbOverlayNext { right: 0; } #fbBox #fbOverlayPrev, #fbBox #fbOverlayNext { position: absolute; width: 49px; /* = dimensions of the upper prev and next /assets/graphics */ height: 23px; background-repeat: no-repeat; } /* on-mouse-over upper nav prev graphic */ #fbBox .fbOverlayPrev_black { background-image: url(/assets/graphics/prev_upr_black.gif); } #fbBox .fbOverlayPrev_white { background-image: url(/assets/graphics/prev_upr_white.gif); } #fbBox .fbOverlayPrev_blue { background-image: url(/assets/graphics/prev_upr_blue.gif); } #fbBox .fbOverlayPrev_yellow { background-image: url(/assets/graphics/prev_upr_yellow.gif); } #fbBox .fbOverlayPrev_red { background-image: url(/assets/graphics/prev_upr_red.gif); } #fbBox .fbOverlayPrev_custom { background-image: url(/assets/graphics/prev_upr_blue.gif); } /* on-mouse-over upper nav next graphic */ #fbBox .fbOverlayNext_black { background-image: url(/assets/graphics/next_upr_black.gif); } #fbBox .fbOverlayNext_white { background-image: url(/assets/graphics/next_upr_white.gif); } #fbBox .fbOverlayNext_blue { background-image: url(/assets/graphics/next_upr_blue.gif); } #fbBox .fbOverlayNext_yellow { background-image: url(/assets/graphics/next_upr_yellow.gif); } #fbBox .fbOverlayNext_red { background-image: url(/assets/graphics/next_upr_red.gif); } #fbBox .fbOverlayNext_custom { background-image: url(/assets/graphics/next_upr_blue.gif); } #fbBox #fbInfoPanel { line-height: 1.25em; /* caption and info link text */ font-family: Verdana, Helvetica, sans-serif; font-size: 120%; font-weight: bold; } #fbBox #fbCaption { cursor: default; } #fbBox #fbInfoLink, #fbBox #fbPrintLink { padding-bottom: .1em; } #fbBox #fbItemNumber { font-size: 10px; /* 'image x of y' text */ white-space: nowrap; cursor: default; } /* 'image x of y' and indexLinks color */ #fbBox .fbItemNumber_black, #fbBox #fbIndexLinks.fbIndexLinks_black, #fbBox #fbIndexLinks.fbIndexLinks_black a:link, #fbBox #fbIndexLinks.fbIndexLinks_black a:visited { color: #aaa; } #fbBox .fbItemNumber_white, #fbBox #fbIndexLinks.fbIndexLinks_white, #fbBox #fbIndexLinks.fbIndexLinks_white a:link, #fbBox #fbIndexLinks.fbIndexLinks_white a:visited { color: #666; } #fbBox .fbItemNumber_blue, #fbBox #fbIndexLinks.fbIndexLinks_blue, #fbBox #fbIndexLinks.fbIndexLinks_blue a:link, #fbBox #fbIndexLinks.fbIndexLinks_blue a:visited { color: #fff; } #fbBox .fbItemNumber_yellow, #fbBox #fbIndexLinks.fbIndexLinks_yellow, #fbBox #fbIndexLinks.fbIndexLinks_yellow a:link, #fbBox #fbIndexLinks.fbIndexLinks_yellow a:visited { color: #700; } #fbBox .fbItemNumber_red, #fbBox #fbIndexLinks.fbIndexLinks_red, #fbBox #fbIndexLinks.fbIndexLinks_red a:link, #fbBox #fbIndexLinks.fbIndexLinks_red a:visited { color: #ca8; } #fbBox .fbItemNumber_custom, #fbBox #fbIndexLinks.fbIndexLinks_custom, #fbBox #fbIndexLinks.fbIndexLinks_custom a:link, #fbBox #fbIndexLinks.fbIndexLinks_custom a:visited { color: #965f74; } /* caption, infoLink, printLink, & indexLinks:hover color */ #fbBox .fbInfoPanel_black, #fbBox .fbInfoPanel_black a:link, #fbBox .fbInfoPanel_black a:visited, #fbBox #fbIndexLinks.fbIndexLinks_black a:hover { color: #d7d7d7; } #fbBox .fbInfoPanel_white, #fbBox .fbInfoPanel_white a:link, #fbBox .fbInfoPanel_white a:visited, #fbBox #fbIndexLinks.fbIndexLinks_white a:hover { color: #000; } #fbBox .fbInfoPanel_blue, #fbBox .fbInfoPanel_blue a:link, #fbBox .fbInfoPanel_blue a:visited, #fbBox #fbIndexLinks.fbIndexLinks_blue a:hover { color: #FFCC00; } #fbBox .fbInfoPanel_yellow, #fbBox .fbInfoPanel_yellow a:link, #fbBox .fbInfoPanel_yellow a:visited, #fbBox #fbIndexLinks.fbIndexLinks_yellow a:hover { color: #700; } #fbBox .fbInfoPanel_red, #fbBox .fbInfoPanel_red a:link, #fbBox .fbInfoPanel_red a:visited, #fbBox #fbIndexLinks.fbIndexLinks_red a:hover { color: #ec9; } #fbBox .fbInfoPanel_custom, #fbBox .fbInfoPanel_custom a:link, #fbBox .fbInfoPanel_custom a:visited, #fbBox #fbIndexLinks.fbIndexLinks_custom a:hover { color: #735; } #fbBox #fbControls { height: 14px; /* height of control widget /assets/graphics - they should all be the same */ font-size: 1px; } #fbBox #fbNavControls { width: 88px; /* sum of lowerprev and lowernext widths */ height: 14px; /* height of 1 sprite panel in lowerprev and lowernext /assets/graphics */ } #fbBox #fbPrev { float: left; width: 44px; /* = dimensions of the lower nav 'prev' graphic */ height: 14px; background-repeat: no-repeat; } /* lower nav 'prev' graphic */ #fbBox .fbPrev_black { background-image: url(/assets/graphics/prev_lwr_black.gif); } #fbBox .fbPrev_white { background-image: url(/assets/graphics/prev_lwr_white.gif); } #fbBox .fbPrev_blue { background-image: url(/assets/graphics/prev_lwr_blue.gif); } #fbBox .fbPrev_yellow { background-image: url(/assets/graphics/prev_lwr_yellow.gif); } #fbBox .fbPrev_red { background-image: url(/assets/graphics/prev_lwr_red.gif); } #fbBox .fbPrev_custom { background-image: url(/assets/graphics/prev_lwr_yellow.gif); } /* lower nav greyed-out 'prev' graphic */ #fbBox .fbPrev_black_off { background-image: url(/assets/graphics/prev_lwr_off_black.gif); } #fbBox .fbPrev_white_off { background-image: url(/assets/graphics/prev_lwr_off_white.gif); } #fbBox .fbPrev_blue_off { background-image: url(/assets/graphics/prev_lwr_off_blue.gif); } #fbBox .fbPrev_yellow_off { background-image: url(/assets/graphics/prev_lwr_off_yellow.gif); } #fbBox .fbPrev_red_off { background-image: url(/assets/graphics/prev_lwr_off_red.gif); } #fbBox .fbPrev_custom_off { background-image: url(/assets/graphics/prev_lwr_off_yellow.gif); } #fbBox #fbNext { float: right; width: 44px; /* = dimensions of the lower nav 'next' graphic */ height: 14px; background-repeat: no-repeat; } /* lower nav 'next' graphic */ #fbBox .fbNext_black { background-image: url(/assets/graphics/next_lwr_black.gif); } #fbBox .fbNext_white { background-image: url(/assets/graphics/next_lwr_white.gif); } #fbBox .fbNext_blue { background-image: url(/assets/graphics/next_lwr_blue.gif); } #fbBox .fbNext_yellow { background-image: url(/assets/graphics/next_lwr_yellow.gif); } #fbBox .fbNext_red { background-image: url(/assets/graphics/next_lwr_red.gif); } #fbBox .fbNext_custom { background-image: url(/assets/graphics/next_lwr_yellow.gif); } /* lower nav greyed-out 'next' graphic */ #fbBox .fbNext_black_off { background-image: url(/assets/graphics/next_lwr_off_black.gif); } #fbBox .fbNext_white_off { background-image: url(/assets/graphics/next_lwr_off_white.gif); } #fbBox .fbNext_blue_off { background-image: url(/assets/graphics/next_lwr_off_blue.gif); } #fbBox .fbNext_yellow_off { background-image: url(/assets/graphics/next_lwr_off_yellow.gif); } #fbBox .fbNext_red_off { background-image: url(/assets/graphics/next_lwr_off_red.gif); } #fbBox .fbNext_custom_off { background-image: url(/assets/graphics/next_lwr_off_yellow.gif); } #fbBox #fbPlay, #fbBox #fbPause { position: absolute; background-repeat: no-repeat; } #fbBox #fbPlayPause, #fbBox #fbPlay, #fbBox #fbPause { width: 46px; /* = dimensions of the 'play' and 'pause' /assets/graphics (they need to be the same size) */ height: 14px; text-align: justify; } /* 'play' and 'pause' /assets/graphics */ #fbBox .fbPlay_black { background-image: url(/assets/graphics/play_black.gif); } #fbBox .fbPlay_white { background-image: url(/assets/graphics/play_white.gif); } #fbBox .fbPlay_blue { background-image: url(/assets/graphics/play_blue.gif); } #fbBox .fbPlay_yellow { background-image: url(/assets/graphics/play_yellow.gif); } #fbBox .fbPlay_red { background-image: url(/assets/graphics/play_red.gif); } #fbBox .fbPlay_custom { background-image: url(/assets/graphics/play_yellow.gif); } #fbBox .fbPause_black { background-image: url(/assets/graphics/pause_black.gif); } #fbBox .fbPause_white { background-image: url(/assets/graphics/pause_white.gif); } #fbBox .fbPause_blue { background-image: url(/assets/graphics/pause_blue.gif); } #fbBox .fbPause_yellow { background-image: url(/assets/graphics/pause_yellow.gif); } #fbBox .fbPause_red { background-image: url(/assets/graphics/pause_red.gif); } #fbBox .fbPause_custom { background-image: url(/assets/graphics/pause_yellow.gif); } #fbBox #fbClose { width: 46px; /* = dimensions of the 'close' graphic */ height: 14px; background-repeat: no-repeat; } /* 'close' graphic */ #fbBox .fbClose_black { background-image: url(/assets/graphics/close_black.gif); } #fbBox .fbClose_white { background-image: url(/assets/graphics/close_white.gif); } #fbBox .fbClose_blue { background-image: url(/assets/graphics/close_blue.gif); } #fbBox .fbClose_yellow { background-image: url(/assets/graphics/close_yellow.gif); } #fbBox .fbClose_red { background-image: url(/assets/graphics/close_red.gif); } #fbBox .fbClose_custom { background-image: url(/assets/graphics/close_yellow.gif); } #fbBox #fbIndexLinks { clear: both; font-size: 11px; cursor: default; } #fbBox #fbIndexLinks a:hover { font-weight: bold; } /* posLeft, posCenter & posRight are dynamically assigned classes that allow layout of the info and control panels depending on which side they're on */ /* info panel */ #fbInfoPanel.posCenter, #fbInfoDiv.posCenter, #fbIndexLinks.posCenter { margin: 0 auto; } #fbInfoPanel.posRight, #fbInfoDiv.posRight, #fbIndexLinks.posRight { float: right; } #fbInfoPanel.posLeft, #fbInfoDiv.posLeft, #fbIndexLinks.posLeft { float: left; } /* control panel */ #fbControlPanel.posRight, #fbControls.posRight, #fbClose.posRight, #fbSubControls.posRight, #fbNavControls.posLeft, #fbPlayPause.posLeft { float: right; } #fbControlPanel.posLeft, #fbControls.posLeft, #fbClose.posLeft, #fbSubControls.posLeft, #fbNavControls.posRight, #fbPlayPause.posRight { float: left; } /* IE6 wants these, maybe for layout? */ #fbSubControls, #fbClose, #fbIndexLinks, #fbPlayPause, #fbNavControls { float: left; } /*Search page body */ @media all and (min-width: 1024px) and (max-width: 1280px) { .grid *[class*="col_"] { } .grid { max-width: 100%; } } @media all and (max-width: 1078px) { .tdiv, .tdiv2 { height: auto; } .bottom { position: relative!important; } .navbar li a { padding: 1em .5em; font-size: 1em; } #tag { display: none; } #supportTel, #supportTel .right { text-align: center; } a#logoMenu { width: 100%; } .grid { padding: 0 } } @media all and (min-width: 768px) and (max-width: 1023px) { .grid *[class*="col_"] { } h1, #tag { font-size: 1.5em; } .grid { max-width: 99%; } .navbar li a { padding: 1em .5em; font-size: 1em; } #tag h1 { font-size: 1.5em; } .templateDiv a.button { position: relative; bottom: 0; top: auto; margin: 0 auto; width: auto; max-height: 50px; } .navbar li a { font-size: .9em; padding: 1em .3em; } .grid .photothumb .col_4 .column { max-width: 42%; } .photothumb { width: 48%!important; float: left!important; clear: none!important; margin: .25em; } .photothumb { /* max-width: 260px; */ /* max-height: 230px; */ } } @media all and (min-width: 480px) and (max-width: 768px) { h1, #tag { font-size: 1.5em; } .grid *[class*="col_"] { float: none; width: auto; clear: both; display: block; } /* columns inside of columns */ .grid *[class*="col_"] [class*="col_"] { margin-left: 0; margin-right: 0; width: 100%; } .grid { max-width: 95%; } .toggle-order { display: block!important; position: relative!important; right: 22px!important; top: 6px; float: right; z-index: 99999; } li.orderBut { display: none!important; } #supportTel { font-size: 1em; } #tag h1 { font-size: 1.0em; } #finders { text-align: center; float: none; position: relative; top: 0px; } #finders img { float: none!important; } #logo { float: none; } .photothumb { width: 48%!important; float: left!important; clear: none!important; margin: .25em; } #orderArea .right { text-align: left } #orderArea .col_6 { float: left!important; width: inherit!important; clear: none!important; display: inline-block!important; } } @media all and (max-width: 601px) { #orderArea .right { text-align: left } .grid { padding: 0 1em; } #logo { float: none; margin-right: 0; text-align: center; } #logo img { margin: 50px 0 22px; } #leftcolumn, #rightcolumn { border: none; padding: 0; } #leftcolumn { display: none } #rightcolumn { display: block } h1.slogan { line-height: 120%; } #tag { display: none; } .grid *[class*="col_"] { float: none; width: auto; clear: both; display: block; } /* columns inside of columns */ .grid *[class*="col_"] [class*="col_"] { margin-left: 0; margin-right: 0; width: 100%; } .grid { max-width: 100%;/*320*/ } .toggle-order { display: block!important; position: relative!important; right: 2px!important; top: 3px; float: right; z-index: 99999; } li.orderBut { display: none!important; } #supportTel { font-size: 1em; } #tag h1 { font-size: 1.0em; } .navbar { top: 54px; max-height: 100%; overflow-y: scroll; -webkit-overflow-scrolling:touch;} #finders { text-align: center; float: none; position: relative; top: 0px; } #finders img { float: none!important; } footer { text-align: center; } a#logoMenu { width: 100%; } .grid-item { width: 100%; margin: .1em; } } @media (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 13/10), (min-device-pixel-ratio: 1.3), (min-resolution: 2dppx), (min-resolution: 120dpi) and (min-width: 1025px) { body { /*font-size:10px;*/ } /* h1 {font-size: 2.5em;} .grid {max-width: 100%; width: 100%}*/ } body.fancybox-active { overflow: hidden } body.fancybox-iosfix { position: fixed; left: 0; right: 0 } .fancybox-is-hidden { position: absolute; top: -9999px; left: -9999px; visibility: hidden } .fancybox-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99992; -webkit-tap-highlight-color: transparent; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif } .fancybox-bg, .fancybox-inner, .fancybox-outer, .fancybox-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0 } .fancybox-outer { overflow-y: auto; -webkit-overflow-scrolling: touch } .fancybox-bg { width:100vw; height:100vh; background: #1e1e1e; opacity: 0; transition-duration: inherit; transition-property: opacity; transition-timing-function: cubic-bezier(.47, 0, .74, .71) } .fancybox-is-open .fancybox-bg { opacity: .87; transition-timing-function: cubic-bezier(.22, .61, .36, 1) } .fancybox-caption-wrap, .fancybox-infobar, .fancybox-toolbar { position: absolute; direction: ltr; z-index: 99997; opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s linear .25s; box-sizing: border-box } .fancybox-show-caption .fancybox-caption-wrap, .fancybox-show-infobar .fancybox-infobar, .fancybox-show-toolbar .fancybox-toolbar { opacity: 1; visibility: visible; transition: opacity .25s, visibility 0s } .fancybox-infobar { top: 0; left: 0; font-size: 13px; padding: 0 10px; height: 44px; min-width: 44px; line-height: 44px; color: #ccc; text-align: center; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: subpixel-antialiased; mix-blend-mode: exclusion } .fancybox-toolbar { top: 0; right: 0; margin: 0; padding: 0 } .fancybox-stage { overflow: hidden; direction: ltr; z-index: 99994; -webkit-transform: translateZ(0) } .fancybox-is-closing .fancybox-stage { overflow: visible } .fancybox-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; overflow: auto; outline: none; white-space: normal; box-sizing: border-box; text-align: center; z-index: 99994; -webkit-overflow-scrolling: touch; display: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform } .fancybox-slide:before { content: ""; display: inline-block; vertical-align: middle; height: 100%; width: 0 } .fancybox-is-sliding .fancybox-slide, .fancybox-slide--current, .fancybox-slide--next, .fancybox-slide--previous { display: block } .fancybox-slide--image { overflow: visible } .fancybox-slide--image:before { display: none } .fancybox-slide--video .fancybox-content, .fancybox-slide--video iframe { background: #000 } .fancybox-slide--map .fancybox-content, .fancybox-slide--map iframe { background: #e5e3df } .fancybox-slide--next { z-index: 99995 } .fancybox-slide>* { display: inline-block; position: relative; padding: 24px; margin: 44px 0; border-width: 0; vertical-align: middle; text-align: left; /*background-color: #fff; */overflow: auto; box-sizing: border-box } .fancybox-slide>base, .fancybox-slide>link, .fancybox-slide>meta, .fancybox-slide>script, .fancybox-slide>style, .fancybox-slide>title { display: none } .fancybox-slide .fancybox-image-wrap { position: absolute; top: 0; left: 0; margin: 0; padding: 0; border: 0; z-index: 99995; background: transparent; cursor: default; overflow: visible; -webkit-transform-origin: top left; transform-origin: top left; background-size: 100% 100%; background-repeat: no-repeat; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform } .fancybox-can-zoomOut .fancybox-image-wrap { cursor: zoom-out } .fancybox-can-zoomIn .fancybox-image-wrap { cursor: zoom-in } .fancybox-can-drag .fancybox-image-wrap { cursor: -webkit-grab; cursor: grab } .fancybox-is-dragging .fancybox-image-wrap { cursor: -webkit-grabbing; cursor: grabbing } .fancybox-image, .fancybox-spaceball { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; max-width: none; max-height: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .fancybox-spaceball { z-index: 1 } .fancybox-slide--iframe .fancybox-content { padding: 0; width: 100%; height: 100%; max-width: calc(100% - 100px); max-height: calc(100% - 88px); overflow: visible; /*background: #fff */} .fancybox-iframe { display: block; padding: 0; border: 0; height: 100%; background: transparent!important; } .fancybox-error, .fancybox-iframe { margin: 0; width: 100%;/* background: #fff*/ } .fancybox-error { padding: 40px; max-width: 380px; cursor: default } .fancybox-error p { margin: 0; padding: 0; color: #444; font-size: 16px; line-height: 20px } .fancybox-button { box-sizing: border-box; display: inline-block; vertical-align: top; width: 44px; height: 44px; margin: 0; padding: 10px; border: 0; border-radius: 0; background: rgba(30,30,30,.6); transition: color .3s ease; cursor: pointer; outline: none } .fancybox-button, .fancybox-button:link, .fancybox-button:visited { color: #ccc } .fancybox-button:focus, .fancybox-button:hover { color: #fff; background: #000; } .fancybox-button[disabled] { color: #ccc; cursor: default; opacity: .6 } .fancybox-button svg { display: block; position: relative; overflow: visible; shape-rendering: geometricPrecision } .fancybox-button svg path { fill: currentColor; stroke: currentColor; stroke-linejoin: round; stroke-width: 3 } .fancybox-button--share svg path { stroke-width: 1 } .fancybox-button--pause svg path:nth-child(1), .fancybox-button--play svg path:nth-child(2) { display: none } .fancybox-button--zoom svg path { fill: transparent } .fancybox-navigation { display: none } .fancybox-show-nav .fancybox-navigation { display: block } .fancybox-navigation button { position: absolute; top: 50%; margin: -50px 0 0; z-index: 99997; background: transparent; width: 60px; height: 100px; padding: 17px } .fancybox-navigation button:before { content: ""; position: absolute; top: 30px; right: 10px; width: 40px; height: 40px; background: rgba(30,30,30,.6) } .fancybox-navigation .fancybox-button--arrow_left { left: 0 } .fancybox-navigation .fancybox-button--arrow_right { right: 0 } .fancybox-close-small { position: absolute; top: 0; right: 0; width: 40px; height: 40px; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; z-index: 10; cursor: pointer } .fancybox-close-small:after { content: "×"; position: absolute; top: 5px; right: 5px; width: 30px; height: 30px; font: 22px/30px Arial, Helvetica Neue, Helvetica, sans-serif; color: #888; font-weight: 300; text-align: center; border-radius: 50%; border-width: 0; background-color: transparent; transition: background-color .25s; box-sizing: border-box; z-index: 2 } .fancybox-close-small:focus { outline: none } .fancybox-close-small:focus:after { outline: 1px dotted #888 } .fancybox-close-small:hover:after { color: #555; background: #eee } .fancybox-slide--iframe .fancybox-close-small, .fancybox-slide--image .fancybox-close-small { top: 0; right: -40px } .fancybox-slide--iframe .fancybox-close-small:after, .fancybox-slide--image .fancybox-close-small:after { font-size: 35px; color: #aaa } .fancybox-slide--iframe .fancybox-close-small:hover:after, .fancybox-slide--image .fancybox-close-small:hover:after { color: #fff; background: transparent } .fancybox-is-scaling .fancybox-close-small, .fancybox-is-zoomable.fancybox-can-drag .fancybox-close-small { display: none } .fancybox-caption-wrap { bottom: 0; left: 0; right: 0; padding: 60px 2vw 0; background: linear-gradient(180deg, transparent 0, rgba(0,0,0,.1) 20%, rgba(0,0,0,.2) 40%, rgba(0,0,0,.6) 80%, rgba(0,0,0,.8)); pointer-events: none } .fancybox-caption { padding: 30px 0; border-top: 1px solid hsla(0,0%,100%,.4); font-size: 18px; text-align:center; color: #fff; line-height: 20px; -webkit-text-size-adjust: none } .fancybox-caption a, .fancybox-caption button, .fancybox-caption select { pointer-events: all; position: relative } .fancybox-caption a { color: #fff; text-decoration: underline } .fancybox-slide>.fancybox-loading { border: 6px solid hsla(0,0%,39%,.4); border-top: 6px solid hsla(0,0%,100%,.6); border-radius: 100%; height: 50px; width: 50px; -webkit-animation: a .8s infinite linear; animation: a .8s infinite linear; background: transparent; position: absolute; top: 50%; left: 50%; margin-top: -30px; margin-left: -30px; z-index: 99999 } @-webkit-keyframes a { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg) } to { -webkit-transform: rotate(359deg); transform: rotate(359deg) } } @keyframes a { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg) } to { -webkit-transform: rotate(359deg); transform: rotate(359deg) } } .fancybox-animated { transition-timing-function: cubic-bezier(0, 0, .25, 1) } .fancybox-fx-slide.fancybox-slide--previous { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); opacity: 0 } .fancybox-fx-slide.fancybox-slide--next { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); opacity: 0 } .fancybox-fx-slide.fancybox-slide--current { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } .fancybox-fx-fade.fancybox-slide--next, .fancybox-fx-fade.fancybox-slide--previous { opacity: 0; transition-timing-function: cubic-bezier(.19, 1, .22, 1) } .fancybox-fx-fade.fancybox-slide--current { opacity: 1 } .fancybox-fx-zoom-in-out.fancybox-slide--previous { -webkit-transform: scale3d(1.5, 1.5, 1.5); transform: scale3d(1.5, 1.5, 1.5); opacity: 0 } .fancybox-fx-zoom-in-out.fancybox-slide--next { -webkit-transform: scale3d(.5, .5, .5); transform: scale3d(.5, .5, .5); opacity: 0 } .fancybox-fx-zoom-in-out.fancybox-slide--current { -webkit-transform: scaleX(1); transform: scaleX(1); opacity: 1 } .fancybox-fx-rotate.fancybox-slide--previous { -webkit-transform: rotate(-1turn); transform: rotate(-1turn); opacity: 0 } .fancybox-fx-rotate.fancybox-slide--next { -webkit-transform: rotate(1turn); transform: rotate(1turn); opacity: 0 } .fancybox-fx-rotate.fancybox-slide--current { -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1 } .fancybox-fx-circular.fancybox-slide--previous { -webkit-transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0); transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0); opacity: 0 } .fancybox-fx-circular.fancybox-slide--next { -webkit-transform: scale3d(0, 0, 0) translate3d(100%, 0, 0); transform: scale3d(0, 0, 0) translate3d(100%, 0, 0); opacity: 0 } .fancybox-fx-circular.fancybox-slide--current { -webkit-transform: scaleX(1) translateZ(0); transform: scaleX(1) translateZ(0); opacity: 1 } .fancybox-fx-tube.fancybox-slide--previous { -webkit-transform: translate3d(-100%, 0, 0) scale(.1) skew(-10deg); transform: translate3d(-100%, 0, 0) scale(.1) skew(-10deg) } .fancybox-fx-tube.fancybox-slide--next { -webkit-transform: translate3d(100%, 0, 0) scale(.1) skew(10deg); transform: translate3d(100%, 0, 0) scale(.1) skew(10deg) } .fancybox-fx-tube.fancybox-slide--current { -webkit-transform: translateZ(0) scale(1); transform: translateZ(0) scale(1) } .fancybox-share { padding: 30px; border-radius: 3px; background: #f4f4f4; max-width: 90%; text-align: center } .fancybox-share h1 { color: #222; margin: 0 0 20px; font-size: 35px; font-weight: 700 } .fancybox-share p { margin: 0; padding: 0 } p.fancybox-share__links { margin-right: -10px } .fancybox-share__button { display: inline-block; text-decoration: none; margin: 0 10px 10px 0; padding: 0 15px; min-width: 130px; border: 0; border-radius: 3px; background: #fff; white-space: nowrap; font-size: 14px; font-weight: 700; line-height: 40px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #fff; transition: all .2s } .fancybox-share__button:hover { text-decoration: none } .fancybox-share__button--fb { background: #3b5998 } .fancybox-share__button--fb:hover { background: #344e86 } .fancybox-share__button--pt { background: #bd081d } .fancybox-share__button--pt:hover { background: #aa0719 } .fancybox-share__button--tw { background: #1da1f2 } .fancybox-share__button--tw:hover { background: #0d95e8 } .fancybox-share__button svg { position: relative; top: -1px; width: 25px; height: 25px; margin-right: 7px; vertical-align: middle } .fancybox-share__button svg path { fill: #fff } .fancybox-share__input { box-sizing: border-box; width: 100%; margin: 10px 0 0; padding: 10px 15px; background: transparent; color: #5d5b5b; font-size: 14px; outline: none; border: 0; border-bottom: 2px solid #d7d7d7 } .fancybox-thumbs { display: none; position: absolute; top: 0; bottom: 0; right: 0; width: 212px; margin: 0; padding: 2px 2px 4px; background: #fff; -webkit-tap-highlight-color: transparent; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; box-sizing: border-box; z-index: 99995 } .fancybox-thumbs-x { overflow-y: hidden; overflow-x: auto } .fancybox-show-thumbs .fancybox-thumbs { display: block } .fancybox-show-thumbs .fancybox-inner { right: 212px } .fancybox-thumbs>ul { list-style: none; position: absolute; position: relative; width: 100%; height: 100%; margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; font-size: 0; white-space: nowrap } .fancybox-thumbs-x>ul { overflow: hidden } .fancybox-thumbs-y>ul::-webkit-scrollbar { width:7px } .fancybox-thumbs-y>ul::-webkit-scrollbar-track { background:#fff; border-radius:10px; box-shadow:inset 0 0 6px rgba(0,0,0,.3) } .fancybox-thumbs-y>ul::-webkit-scrollbar-thumb { background:#2a2a2a; border-radius:10px } .fancybox-thumbs>ul>li { float: left; overflow: hidden; padding: 0; margin: 2px; width: 100px; height: 75px; max-width: calc(50% - 4px); max-height: calc(100% - 8px); position: relative; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-sizing: border-box } li.fancybox-thumbs-loading { background: rgba(0,0,0,.1) } .fancybox-thumbs>ul>li>img { position: absolute; top: 0; left: 0; max-width: none; max-height: none; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .fancybox-thumbs>ul>li:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 4px solid #4ea7f9; z-index: 99991; opacity: 0; transition: all .2s cubic-bezier(.25, .46, .45, .94) } .fancybox-thumbs>ul>li.fancybox-thumbs-active:before { opacity: 1 } @media (max-width:800px) { .fancybox-thumbs { width: 110px } .fancybox-show-thumbs .fancybox-inner { right: 110px } .fancybox-thumbs>ul>li { max-width: calc(100% - 10px) } }