/* ------------------------------------------------------------ ------------------------------------------------------------ FONTS ------------------------------------------------------------ ------------------------------------------------------------ */ /* ------------------------ Open Sans ---------------------------*/ @font-face { font-family: 'Open Sans'; font-weight: normal; font-style: normal; src: url('/includes/fonts/Open-Sans-regular/Open-Sans-regular.eot'); src: url('/includes/fonts/Open-Sans-regular/Open-Sans-r.accegular.eot?#iefix') format('embedded-opentype'), local('Open Sans'), local('Open-Sans-regular'), url('/includes/fonts/Open-Sans-regular/Open-Sans-regular.woff2') format('woff2'), url('/includes/fonts/Open-Sans-regular/Open-Sans-regular.woff') format('woff'), url('/includes/fonts/Open-Sans-regular/Open-Sans-regular.ttf') format('truetype'), url('/includes/fonts/Open-Sans-regular/Open-Sans-regular.svg#OpenSans') format('svg'); } /*@font-face { font-family: 'Open Sans'; font-weight: bold; font-style: normal;loa src: url('/includes/fonts/Open-Sans-700/Open-Sans-700.eot'); src: url('/includes/fonts/Open-Sans-700/Open-Sans-700.eot?#iefix') format('embedded-opentype'), local('Open Sans Bold'),c local('Open-Sans-700'), url('/includes/fonts/Open-Sans-700/Open-Sans-700.woff2') format('woff2'), url('/includes/fonts/Open-Sans-700/Open-Sans-700.woff') format('woff'), url('/includes/fonts/Open-Sans-700/Open-Sans-700.ttf') format('truetype'), url('/includes/fonts/Open-Sans-700/Open-Sans-700.svg#OpenSans') format('svg'); }*/ /*@font-face { font-family: 'Open Sans'; font-weight: 400; font-style: italic; src: url('/includes/fonts/Open-Sans-italic/Open-Sans-italic.eot'); src: url('/includes/fonts/Open-Sans-italic/Open-Sans-italic.eot?#iefix') format('embedded-opentype'), local('Open Sans Italic'), local('Open-Sans-italic'), url('/includes/fonts/Open-Sans-italic/Open-Sans-italic.woff2') format('woff2'), url('/includes/fonts/Open-Sans-italic/Open-Sans-italic.woff') format('woff'), url('/includes/fonts/Open-Sans-italic/Open-Sans-italic.ttf') format('truetype'), url('/includes/fonts/Open-Sans-italic/Open-Sans-italic.svg#OpenSans') format('svg'); }*/ /* ------------------------ Titillium Web ---------------------------*/ @font-face { font-family: 'Titillium Web'; font-weight: normal; font-style: normal; src: url('/includes/fonts/Titillium-Web-regular/Titillium-Web-regular.eot'); src: url('/includes/fonts/Titillium-Web-regular/Titillium-Web-regular.eot?#iefix') format('embedded-opentype'), local('Titillium Web'), local('Titillium-Web-regular'), url('/includes/fonts/Titillium-Web-regular/Titillium-Web-regular.woff2') format('woff2'), url('/includes/fonts/Titillium-Web-regular/Titillium-Web-regular.woff') format('woff'), url('/includes/fonts/Titillium-Web-regular/Titillium-Web-regular.ttf') format('truetype'), url('/includes/fonts/Titillium-Web-regular/Titillium-Web-regular.svg#TitilliumWeb') format('svg'); } @font-face { font-family: 'Titillium Web'; font-weight: bold; font-style: normal; src: url('/includes/fonts/Titillium-Web-700/Titillium-Web-700.eot'); src: url('/includes/fonts/Titillium-Web-700/Titillium-Web-700.eot?#iefix') format('embedded-opentype'), local('Titillium WebBold'), local('Titillium-Web-700'), url('/includes/fonts/Titillium-Web-700/Titillium-Web-700.woff2') format('woff2'), url('/includes/fonts/Titillium-Web-700/Titillium-Web-700.woff') format('woff'), url('/includes/fonts/Titillium-Web-700/Titillium-Web-700.ttf') format('truetype'), url('/includes/fonts/Titillium-Web-700/Titillium-Web-700.svg#TitilliumWeb') format('svg'); } /*@font-face { font-family: 'Titillium Web'; font-weight: 400; font-style: italic; src: url('/includes/fonts/Titillium-Web-italic/Titillium-Web-italic.eot'); src: url('/includes/fonts/Titillium-Web-italic/Titillium-Web-italic.eot?#iefix') format('embedded-opentype'), local('Titillium WebItalic'), local('Titillium-Web-italic'), url('/includes/fonts/Titillium-Web-italic/Titillium-Web-italic.woff2') format('woff2'), url('/includes/fonts/Titillium-Web-italic/Titillium-Web-italic.woff') format('woff'), url('/includes/fonts/Titillium-Web-italic/Titillium-Web-italic.ttf') format('truetype'), url('/includes/fonts/Titillium-Web-italic/Titillium-Web-italic.svg#TitilliumWeb') format('svg'); }*/ /* ------------------------ ROBOTO CONDENSED ---------------------------*/ @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400; src: url('/includes/fonts/Roboto-Condensed/roboto-condensed-v18-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), url('/includes/fonts/Roboto-Condensed/roboto-condensed-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/includes/fonts/Roboto-Condensed/roboto-condensed-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('/includes/fonts/Roboto-Condensed/roboto-condensed-v18-latin-regular.woff') format('woff'), /* Modern Browsers */ url('/includes/fonts/Roboto-Condensed/roboto-condensed-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/includes/fonts/Roboto-Condensed/roboto-condensed-v18-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */ } @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: bold; src: url('/includes/fonts/Roboto-Condensed/roboto-condensed-v18-latin-700.eot'); /* IE9 Compat Modes */ src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'), url('/includes/fonts/Roboto-Condensed/roboto-condensed-v18-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/includes/fonts/Roboto-Condensed/roboto-condensed-v18-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('/includes/fonts/Roboto-Condensed/roboto-condensed-v18-latin-700.woff') format('woff'), /* Modern Browsers */ url('/includes/fonts/Roboto-Condensed/roboto-condensed-v18-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('/includes/fonts/Roboto-Condensed/roboto-condensed-v18-latin-700.svg#RobotoCondensed') format('svg'); /* Legacy iOS */ } /* ------------------------------------------------------------ ------------------------------------------------------------ BASE ------------------------------------------------------------ ------------------------------------------------------------ */ /* #Reset & Basics ================================================== */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1.6; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* #Basic Styles ================================================== */ body { background: #fff; font: 16px Open Sans, Arial, Verdana, sans-serif; -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%; color: rgba(0,0,0,0.87); } html, html a { /* bug in IE Fixed by shadow in 2 lines*/ text-shadow: 0 0 1em transparent, 1px 1px 1px rgba(0,0,0,0.004); } /* #Typography ================================================== */ h1, h2, h3, h4, h5, h6 { color: rgba(0,0,0,0.87); font-family: Titillium Web, Open Sans, Arial, Verdana, sans-serif; font-weight: bold; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } /* h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;} */ h1 { font-size: 24px; line-height: 24px; margin-bottom: 10px; } h2 { font-size: 22px; line-height: 23px; margin-bottom: 7px; } h2 a, a.clink { color: #EC640E; text-decoration: none; } h2 a:hover, h2 a:visited, a:hover.clink, a:visited.clink { color: #EC640E; text-decoration: underline; } h3 { font-size: 20px; line-height: 21px; margin-bottom: 7px; } h4 { font-size: 19px; line-height: 21px; margin-bottom: 5px; } h5, h6 { font-size: 15px; line-height: 21px; } .subheader { color: #777; } p { margin: 0 0 20px 0; line-height: 27px; text-align: justify; } p img { margin: 0; } p.lead { font-size: 21px; line-height: 27px; color: #777; } em { font-style: italic; } strong { font-weight: bold; color: #4D4D4D; } small { font-size: 80%; } /* Blockquotes */ blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; background-color: #F9FAFB; } blockquote { margin: 0 0 20px; padding: 9px 20px 9px 10px; border-left: 2px dotted #D5D5D5; } blockquote cite { display: block; font-size: 12px; color: #555; } blockquote cite:before { content: "\2014 \0020"; } blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; } hr { border: solid #E7E7E7; border-width: 1px 0 0; clear: both; margin: 12px 0px 15px; height: 0; } hr.hr2 { border: solid #E7E7E7; border-width: 2px 0 0; clear: both; margin: 12px 0px 15px; height: 0; } hr.hr3 { border: solid #E7E7E7; border-width: 1px 0 0; clear: both; margin: 5px 0px 10px; height: 0; } /* #Links ================================================== */ p a, p a:visited { line-height: inherit; } /* #Lists ================================================== */ ul, ol { margin-bottom: 20px; } ul { list-style: none outside; } ol { list-style: decimal; } ol, ul.square, ul.circle, ul.disc { margin-left: 30px; } ul.square { list-style: square outside; } ul.circle { list-style: circle outside; } ul.disc { list-style: disc outside; } ul ul, ul ol, ol ol, ol ul { margin: 4px 0 5px 15px; } ul ul li, ul ol li, ol ol li, ol ul li { margin-bottom: 6px; } li { line-height: 18px; margin-bottom: 12px; } ul.large li { line-height: 21px; } li p { line-height: 21px; } /* #Images ================================================== */ img.scale, img#scale { max-width: 100%; height: auto; margin: 2px 0 2px 0; } img.m0 { margin: 0px; } /* #Buttons ================================================== */ .button, button, input[type="submit"], input[type="reset"], input[type="button"], a.action { border: 1px solid #D3D3D3; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; color: #474747; display: inline-block; font-size: 15px; font-weight: bold; text-decoration: none; text-shadow: #fff 1px 1px; cursor: pointer; margin-bottom: 10px; line-height: normal; padding: 8px 12px; text-transform: uppercase; background: #EEEEEE; background: -webkit-linear-gradient(top, #FFF 0%, #F7F7F7 100%); background: -moz-linear-gradient(top, #FFF 0%, #F7F7F7 100%); background: -o-linear-gradient(top, #FFF 0%, #F7F7F7 100%); background: -ms-linear-gradient(top, #FFF 0%, #F7F7F7 100%); background: linear-gradient(top, #FFF 0%, #F7F7F7 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFF', endColorstr='#F7F7F7',GradientType=0 ); } .button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, a:hover.action { color: #222; background: #F3F3F3; /* Old browsers */ border: 1px solid #AFAFAF; border-top: 1px solid #C4C4C4; border-left: 1px solid #C4C4C4; -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.35); -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.35); box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.35); } .button:active, button:active, input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active { background: #ccc; /* Old browsers */ } .button.full-width, button.full-width, input[type="submit"].full-width, input[type="reset"].full-width, input[type="button"].full-width, a.action.full-width { width: 100%; padding-left: 0 !important; padding-right: 0 !important; text-align: center; } /* Fix for odd Mozilla border & padding issues */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } .button:disabled , button:disabled , input[type="submit"]:disabled , input[type="reset"]:disabled , input[type="button"]:disabled { color: #A8A8A8; background: #F3F3F3; /* Old browsers */ border: 1px solid #AFAFAF; border-top: 1px solid #C4C4C4; border-left: 1px solid #C4C4C4; -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.35); -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.35); box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.35); } /* #Forms ================================================== */ form { margin-bottom: 20px; } fieldset { margin-bottom: 20px; } input[type="text"], input[type="password"], input[type="email"], textarea, select { border: 1px solid #ccc; padding: 6px 4px; outline: none; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; font: 15px Arial, Verdana, sans-serif;; color: #777; margin: 0; min-width: 60px; max-width: 100%; /*display: block;*/ margin-bottom: 5px; background: #fff; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus { color: #444; border: 1px solid #318ABA; -moz-box-shadow: 0 0 5px rgba(0, 196, 250, 0.4); -webkit-box-shadow: 0 0 5px rgba(0, 196, 250, 0.4); box-shadow: 0 0 5px rgba(0, 196, 250, 0.4); } textarea { min-height: 60px; } label, legend { display: block; font-weight: normal; } /* select { width: 220px; }*/ input[type="checkbox"] { display: inline; } label span, legend span { font-weight: normal; font-size: 14px; color: #444; } /* #Misc ================================================== */ .remove-bottom { margin-bottom: 0 !important; } .half-bottom { margin-bottom: 10px !important; } .add-bottom { margin-bottom: 20px !important; } /* ~~ BASE ENDS - SKELETON V1.2 STARTS ~~ */ /* ------------------------------------------------------------ ------------------------------------------------------------ GRID ------------------------------------------------------------ ------------------------------------------------------------ */ /* #Base 960 Grid ================================================== */ .container { position: relative; width: 960px; margin: 0 auto; padding: 0; } .containerSlider { position: relative; width: 100%; margin: 0 auto; padding: 0; overflow: hidden; margin-top: -15px; } .container .column, .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; } /*.row { margin-bottom: 20px; }*/ /* Nested Column Classes */ .column.alpha, .columns.alpha { margin-left: 0; } .column.omega, .columns.omega { margin-right: 0; } /* Base Grid */ .container .one.column, .container .one.columns { width: 40px; } .container .two.columns { width: 100px; } .container .three.columns { width: 160px; } .container .four.columns { width: 220px; } .container .five.columns { width: 290px; } .container .six.columns { width: 340px; } .container .seven.columns { width: 400px; } .container .eight.columns { width: 460px; } .container .nine.columns { width: 520px; } .container .ten.columns { width: 580px; } .container .eleven.columns { width: 630px; } .container .twelve.columns { width: 700px; } .container .thirteen.columns { width: 760px; } .container .fourteen.columns { width: 820px; } .container .fifteen.columns { width: 880px; } .container .sixteen.columns { width: 940px; } .container .one-third.column { width: 300px; } .container .two-thirds.column { width: 620px; } /* Offsets */ .container .offset-by-one { padding-left: 60px; } .container .offset-by-two { padding-left: 120px; } .container .offset-by-three { padding-left: 180px; } .container .offset-by-four { padding-left: 240px; } .container .offset-by-five { padding-left: 300px; } .container .offset-by-six { padding-left: 360px; } .container .offset-by-seven { padding-left: 420px; } .container .offset-by-eight { padding-left: 480px; } .container .offset-by-nine { padding-left: 540px; } .container .offset-by-ten { padding-left: 600px; } .container .offset-by-eleven { padding-left: 650px; } .container .offset-by-twelve { padding-left: 720px; } .container .offset-by-thirteen { padding-left: 780px; } .container .offset-by-fourteen { padding-left: 840px; } .container .offset-by-fifteen { padding-left: 900px; } /* Center BM */ .center { width : 50%; margin-left: auto ; margin-right: auto ; } /* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 768px */ @media only screen and (min-width: 768px) and (max-width: 959px) { .container { width: 768px; } .container .column, .container .columns { margin-left: 10px; margin-right: 10px; } .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; } .column.omega, .columns.omega { margin-right: 0; margin-left: 10px; } .alpha.omega { margin-left: 0; margin-right: 0; } .container .one.column, .container .one.columns { width: 28px; } .container .two.columns { width: 76px; } .container .three.columns { width: 124px; } .container .four.columns { width: 172px; } .container .five.columns { width: 230px; } .container .six.columns { width: 268px; } .container .seven.columns { width: 316px; } .container .eight.columns { width: 364px; } .container .nine.columns { width: 412px; } .container .ten.columns { width: 460px; } .container .eleven.columns { width: 498px; } .container .twelve.columns { width: 556px; } .container .thirteen.columns { width: 600px; } /* original 604px BM*/ .container .fourteen.columns { width: 652px; } .container .fifteen.columns { width: 700px; } .container .sixteen.columns { width: 748px; } .container .one-third.column { width: 236px; } .container .two-thirds.column { width: 492px; } /* Offsets */ .container .offset-by-one { padding-left: 48px; } .container .offset-by-two { padding-left: 96px; } .container .offset-by-three { padding-left: 144px; } .container .offset-by-four { padding-left: 192px; } .container .offset-by-five { padding-left: 240px; } .container .offset-by-six { padding-left: 288px; } .container .offset-by-seven { padding-left: 336px; } .container .offset-by-eight { padding-left: 384px; } .container .offset-by-nine { padding-left: 432px; } .container .offset-by-ten { padding-left: 480px; } .container .offset-by-eleven { padding-left: 528px; } .container .offset-by-twelve { padding-left: 576px; } .container .offset-by-thirteen { padding-left: 624px; } .container .offset-by-fourteen { padding-left: 672px; } .container .offset-by-fifteen { padding-left: 720px; } /* Center BM */ .center { width : 50%; margin-left: auto ; margin-right: auto ; } } /* #Mobile (Portrait) ================================================== */ /* Note: Design for a width of 320px */ /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { .container { width: 95%; } .container .columns, .container .column { margin: 0; } .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column { width: 100%; } /* Offsets */ .container .offset-by-one, .container .offset-by-two, .container .offset-by-three, .container .offset-by-four, .container .offset-by-five, .container .offset-by-six, .container .offset-by-seven, .container .offset-by-eight, .container .offset-by-nine, .container .offset-by-ten, .container .offset-by-eleven, .container .offset-by-twelve, .container .offset-by-thirteen, .container .offset-by-fourteen, .container .offset-by-fifteen { padding-left: 0; } /* Center BM */ .center { width : 100%; margin-left: auto ; margin-right: auto ; } } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { .container { width: 95%; } .container .columns, .container .column { margin: 0; } .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column { width: 100%; } } /* #Clearing ================================================== */ /* Self Clearing Goodness */ .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } /* Use clearfix class on parent to clear nested columns, or wrap each row of columns in a
*/ .clearfix:before, .clearfix:after, .row:before, .row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .row:after, .clearfix:after { clear: both; } .row, .clearfix { zoom: 1; } /* You can also use a
to clear columns */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } /* ------------------------------------------------------------ ------------------------------------------------------------ PHOTOSWIPE ------------------------------------------------------------ ------------------------------------------------------------ */ /*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */ /* Styles for basic PhotoSwipe functionality (sliding area, open/close transitions) */ /* pswp = photoswipe */ .pswp { display: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0; overflow: hidden; -ms-touch-action: none; touch-action: none; z-index: 1500; -webkit-text-size-adjust: 100%; /* create separate layer, to avoid paint on window.onscroll in webkit/blink */ -webkit-backface-visibility: hidden; backface-visibility: hidden; outline: none; } .pswp * { -webkit-box-sizing: border-box; box-sizing: border-box; } .pswp img { max-width: none; } /* style is added when JS option showHideOpacity is set to true */ .pswp--animate_opacity { /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */ opacity: 0.001; will-change: opacity; /* for open/close transition */ -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--open { display: block; } .pswp--zoom-allowed .pswp__img { /* autoprefixer: off */ cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .pswp--zoomed-in .pswp__img { /* autoprefixer: off */ cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .pswp--dragging .pswp__img { /* autoprefixer: off */ cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; } /* Background is added as a separate element. As animating opacity is much faster than animating rgba() background-color. */ .pswp__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: opacity; } .pswp__scroll-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; } .pswp__container, .pswp__zoom-wrap { -ms-touch-action: none; touch-action: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } /* Prevent selection and tap highlights */ .pswp__container, .pswp__img { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-touch-callout: none; } .pswp__zoom-wrap { position: absolute; width: 100%; -webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; /* for open/close transition */ -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp__bg { will-change: opacity; /* for open/close transition */ -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } .pswp--animated-in .pswp__bg, .pswp--animated-in .pswp__zoom-wrap { -webkit-transition: none; transition: none; } .pswp__container, .pswp__zoom-wrap { -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; } .pswp__item { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden; } .pswp__img { position: absolute; width: auto; height: auto; top: 0; left: 0; -webkit-transition: opacity 0.15s; transition: opacity 0.15s; } /* stretched thumbnail or div placeholder element (see below) style is added to avoid flickering in webkit/blink when layers overlap */ .pswp__img--placeholder { -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* div element that matches size of large image large image loads on top of it */ .pswp__img--placeholder--blank { background: #222; } .pswp--ie .pswp__img { width: 100%; height: auto; left: 0; top: 0; } /* Error message appears when image is not loaded (JS option errorMsg controls markup) */ .pswp__error-msg { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; font-size: 14px; line-height: 16px; margin-top: -8px; color: #CCC; } .pswp__error-msg a { color: #CCC; text-decoration: underline; } /* ---------------------------------------------------------------------------------- PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */ /* ---------------------------------------------------------------------------------- Contents: 1. Buttons 2. Share modal and links 3. Index indicator ("1 of X" counter) 4. Caption 5. Loading indicator 6. Additional styles (root element, top bar, idle state, hidden state, etc.) */ /* 1. Buttons */ /*