/* Opac Bootstrap 4 for SLiMS 8.x.x v. 1.6 Customized by: Hasan Syaiful Rizal email: hsr@yudharta.ac.id blog: http://hsr-share.blogspot.com last modifided: 3 Februari 2020 2:45 PM =================================== BASE STYLE BACKGROUND & GRADIENT COLORS Gradients Background HEADER AND MAIN NAVIGATION Mobile Navigation TOP SECTION & SEARCH FORM MAIN PAGE & MAIN CONTENT SIDEBAR Sidebar Buttons FOOTER AREA Footer Upper Back to Top Button Footer Language Select FEATURED BOOKS BIBLIOGRAPHY Biblio Record BiblioRecord Social Icon Biblio List Form Checker Custom Checkbox BiblioInput PAGING BUTTON DETAIL RECORD Comments Form LIBRARIAN MEMBER AREA ADMIN LOGIN AREA VISITOR COUNTER NEWS CHAT MISCELLANEOUS Cbox Overlay Labeled Button Social Side Menu Advanced Search Modal Cluster Other Things */ @import url(bootstrap.min.css); @import url(font-awesome.min.css); @import url(font.min.css); /* BASE STYLE */ html, body { margin: 0px; overflow: auto; } body { background: #f4f4f4; overflow: hidden; padding: 0 !important; margin: 0 !important; height: 100%; direction: ltr; font-family: 'Open Sans', sans-serif; font-weight: lighter; -webkit-text-size-adjust: none; font-size: 16px; } hr { border-color: rgba(0, 0, 0, .125) } a, .btn-link { color: #43679c; text-decoration: none !important; transition: color .5s; -moz-transition: color .5s; -webkit-transition: color .5s } .btn-link:hover, .btn-link:focus, .news .btn-link:hover, .news .btn-link:focus { text-decoration: none; color: #111; background: none !important } a:hover { color: #111 } .btn { border-radius: .25rem } .btn-default { background: #282828; color: #fff; border-radius: .25rem; transition: all .5s; border: 1px solid transparent } button { cursor: pointer } .form-control, .custom-select { border-radius: .25rem; border: 2px solid #ccc; box-shadow: none; transition: all 500ms ease; } .custom-select:focus, .form-control:focus, .custom-select.focus, .form-control.focus { border-color: #777; box-shadow: 0 0 10px rgba(0, 0, 0, .15); color: #000; } .btn-default, .btn-secondary, .btn-dark, .btn-primary, .btn-success, .btn-warning, .btn-danger, .btn-info { color: #fff !important; border-radius: .25rem; transition: 500ms ease-in-out !important; border: 0 !important; } .btn-light { background-color: #e9e9e9; border-radius: .25rem; transition: all 500ms; border: 0 !important; } .btn-default.btn-shadow { box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(40, 40, 40, 0.9) } .btn-secondary.btn-shadow { box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(108, 117, 125, 0.9) } .btn-dark.btn-shadow { box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(52, 58, 64, 0.9) } .btn-primary.btn-shadow { box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(0, 123, 255, 0.9) } .btn-success.btn-shadow { box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(40, 167, 69, 0.9) } .btn-warning.btn-shadow { box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(255, 193, 7, 0.9) } .btn-danger.btn-shadow { box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(220, 53, 69, 0.9) } .btn-info.btn-shadow { box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(23, 162, 184, 0.9) } .btn-light.btn-shadow { box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(52, 58, 64, 0.5) } .btn:hover, .btn:focus, .btn.focus, .btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-secondary:hover, .btn-secondary:focus, .btn-secondary.focus, .btn-dark:hover, .btn-dark:focus, .btn-dark.focus, .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-success:hover, .btn-success:focus, .btn-success.focus, .btn-warning:hover, .btn-warning:focus, .btn-warning.focus, .btn-danger:hover, .btn-danger:focus, .btn-danger.focus, .btn-info:hover, .btn-info:focus, .btn-info.focus { background: #000 !important; box-shadow: none; } .btn-light:hover, .btn-light:focus, .btn-light.focus { background: #000 !important; color: #fff; box-shadow: none; } .itemList { line-height: 16px; font-size: 14px; } .alert { border-radius: .4375rem; } ::-webkit-scrollbar { width: 8px; height: 6px; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece { background-color: #fff; } ::-webkit-scrollbar-thumb { background-color: #ccc; width: 8px; height: 4px; } ::-webkit-input-placeholder { color: #333; transition: opacity 500ms ease; -moz-transition: opacity 500ms ease; -webkit-transition: opacity 500ms ease; opacity: 1; } ::-moz-placeholder { color: #333; transition: opacity 500ms ease; -moz-transition: opacity 500ms ease; -webkit-transition: opacity 500ms ease; opacity: 1; } :-ms-input-placeholder { color: #333; transition: opacity 500ms ease; -webkit-transition: opacity 500ms ease; opacity: 1; } /* BACKGROUND & GRADIENT COLORS */ .s-background { z-index: -1; position: fixed; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .s-background>video { position: absolute; top: 0; left: 0; width: 100%; height: auto; background-size: cover; } .s-background .slider { -webkit-filter: grayscale(100%); filter: grayscale(100%); width: 100%; height: 100%; background-size: cover; } /* Gradients Background */ .gradients { background-position: center center; background-repeat: no-repeat; height: 100%; position: absolute; width: 100%; z-index: 1099; opacity: .8; } .gradients div { height: 100%; position: absolute; width: 100%; } .blue, .default { background: #05c6d1; background: -webkit-gradient(left bottom, right 45deg, color-stop(0, #194fb8), color-stop(100%, #05c6d1)); background: -webkit-linear-gradient(45deg, #194fb8 0, #05c6d1 100%); background: -moz-linear-gradient(45deg, #194fb8 0, #05c6d1 100%); background: -o-linear-gradient(45deg, #194fb8 0, #05c6d1 100%); background: -ms-linear-gradient(45deg, #194fb8 0, #05c6d1 100%); background: linear-gradient(45deg, #194fb8 0, #05c6d1 100%) } .blue-angular { background: linear-gradient(52deg, rgba(163, 163, 163, 0.09) 0%, rgba(163, 163, 163, 0.09) 33.3%, rgba(100, 100, 100, 0.09) 33.3%, rgba(100, 100, 100, 0.09) 66.6%, rgba(162, 162, 162, 0.09) 66.6%, rgba(162, 162, 162, 0.09) 99%), linear-gradient(258deg, rgba(193, 193, 193, 0.06) 0%, rgba(193, 193, 193, 0.06) 33.3%, rgba(169, 169, 169, 0.06) 33.3%, rgba(169, 169, 169, 0.06) 66.6%, rgba(92, 92, 92, 0.06) 66.6%, rgba(92, 92, 92, 0.06) 99%), linear-gradient(129deg, rgba(45, 45, 45, 0.03) 0%, rgba(45, 45, 45, 0.03) 33.3%, rgba(223, 223, 223, 0.03) 33.3%, rgba(223, 223, 223, 0.03) 66.6%, rgba(173, 173, 173, 0.03) 66.6%, rgba(173, 173, 173, 0.03) 99%), linear-gradient(280deg, rgba(226, 226, 226, 0.06) 0%, rgba(226, 226, 226, 0.06) 33.3%, rgba(81, 81, 81, 0.06) 33.3%, rgba(81, 81, 81, 0.06) 66.6%, rgba(186, 186, 186, 0.06) 66.6%, rgba(186, 186, 186, 0.06) 99%), linear-gradient(85deg, rgba(225, 225, 225, 0.04) 0%, rgba(225, 225, 225, 0.04) 33.3%, rgba(95, 95, 95, 0.04) 33.3%, rgba(95, 95, 95, 0.04) 66.6%, rgba(39, 39, 39, 0.04) 66.6%, rgba(39, 39, 39, 0.04) 99%), linear-gradient(128deg, rgba(184, 184, 184, 0.06) 0%, rgba(184, 184, 184, 0.06) 33.3%, rgba(0, 0, 0, 0.06) 33.3%, rgba(0, 0, 0, 0.06) 66.6%, rgba(140, 140, 140, 0.06) 66.6%, rgba(140, 140, 140, 0.06) 99.89999999999999%), linear-gradient(323deg, rgba(40, 40, 40, 0.07) 0%, rgba(40, 40, 40, 0.07) 33.3%, rgba(214, 214, 214, 0.07) 33.3%, rgba(214, 214, 214, 0.07) 66.6%, rgba(190, 190, 190, 0.07) 66.6%, rgba(190, 190, 190, 0.07) 99.89999999999999%), linear-gradient(61deg, rgba(230, 230, 230, 0) 0%, rgba(230, 230, 230, 0) 33.3%, rgba(241, 241, 241, 0) 33.3%, rgba(241, 241, 241, 0) 66.6%, rgba(55, 55, 55, 0) 66.6%, rgba(55, 55, 55, 0) 99%), linear-gradient(0deg, #2625e3, #0bbaef) } .red { background: linear-gradient(0deg, rgb(94, 5, 4),rgb(253, 19, 61)) } .red-angular { background: linear-gradient(126deg, rgba(101, 101, 101, 0.09) 0%, rgba(101, 101, 101, 0.09) 68%, rgba(200, 200, 200, 0.09) 68%, rgba(200, 200, 200, 0.09) 100%), linear-gradient(164deg, rgba(238, 238, 238, 0.03) 0%, rgba(238, 238, 238, 0.03) 90%, rgba(14, 14, 14, 0.03) 90%, rgba(14, 14, 14, 0.03) 100%), linear-gradient(27deg, rgba(214, 214, 214, 0.04) 0%, rgba(214, 214, 214, 0.04) 34%, rgba(104, 104, 104, 0.04) 34%, rgba(104, 104, 104, 0.04) 100%), linear-gradient(175deg, rgba(20, 20, 20, 0.01) 0%, rgba(20, 20, 20, 0.01) 4%, rgba(9, 9, 9, 0.01) 4%, rgba(9, 9, 9, 0.01) 100%), linear-gradient(257deg, rgba(14, 14, 14, 0.01) 0%, rgba(14, 14, 14, 0.01) 28%, rgba(164, 164, 164, 0.01) 28%, rgba(164, 164, 164, 0.01) 100%), linear-gradient(311deg, rgba(68, 68, 68, 0.07) 0%, rgba(68, 68, 68, 0.07) 33%, rgba(213, 213, 213, 0.07) 33%, rgba(213, 213, 213, 0.07) 100%), linear-gradient(244deg, rgba(43, 43, 43, 0.02) 0%, rgba(43, 43, 43, 0.02) 80%, rgba(161, 161, 161, 0.02) 80%, rgba(161, 161, 161, 0.02) 100%), linear-gradient(130deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.04) 49%, rgba(105, 105, 105, 0.04) 49%, rgba(105, 105, 105, 0.04) 100%), linear-gradient(90deg, rgb(190, 33, 111), rgb(97, 3, 0)) } .oranye { background: linear-gradient(45deg, rgb(217, 134, 15), rgb(225, 99, 66)) } .oranye-angular { background: linear-gradient(46deg, rgba(18, 18, 18, 0.01) 0%, rgba(18, 18, 18, 0.01) 50%, rgba(10, 10, 10, 0.01) 50%, rgba(10, 10, 10, 0.01) 100%), linear-gradient(338deg, rgba(232, 232, 232, 0.03) 0%, rgba(232, 232, 232, 0.03) 50%, rgba(174, 174, 174, 0.03) 50%, rgba(174, 174, 174, 0.03) 100%), linear-gradient(26deg, rgba(180, 180, 180, 0.02) 0%, rgba(180, 180, 180, 0.02) 50%, rgba(191, 191, 191, 0.02) 50%, rgba(191, 191, 191, 0.02) 100%), linear-gradient(129deg, rgba(52, 52, 52, 0.03) 0%, rgba(52, 52, 52, 0.03) 50%, rgba(188, 188, 188, 0.03) 50%, rgba(188, 188, 188, 0.03) 100%), linear-gradient(86deg, rgba(234, 234, 234, 0.03) 0%, rgba(234, 234, 234, 0.03) 50%, rgba(100, 100, 100, 0.03) 50%, rgba(100, 100, 100, 0.03) 100%), linear-gradient(73deg, rgba(203, 203, 203, 0.02) 0%, rgba(203, 203, 203, 0.02) 50%, rgba(24, 24, 24, 0.02) 50%, rgba(24, 24, 24, 0.02) 100%), linear-gradient(90deg, rgb(237, 46, 8), rgb(209, 122, 57)) } .pink { background: #fc005d; background: -webkit-gradient(left bottom, right top, color-stop(0, #e02d6f), color-stop(100%, #fc005d)); background: -webkit-linear-gradient(45deg, #e02d6f 0, #fc005d 100%); background: -moz-linear-gradient(45deg, #e02d6f 0, #fc005d 100%); background: -o-linear-gradient(45deg, #e02d6f 0, #fc005d 100%); background: -ms-linear-gradient(45deg, #e02d6f 0, #fc005d 100%); background: linear-gradient(45deg, #e02d6f 0, #fc005d 100%) } .pink-angular { background: linear-gradient(108deg, rgba(62, 62, 62, 0.09) 0%, rgba(62, 62, 62, 0.09) 30%, rgba(234, 234, 234, 0.09) 30%, rgba(234, 234, 234, 0.09) 100%), linear-gradient(116deg, rgba(101, 101, 101, 0.06) 0%, rgba(101, 101, 101, 0.06) 51%, rgba(231, 231, 231, 0.06) 51%, rgba(231, 231, 231, 0.06) 100%), linear-gradient(258deg, rgba(103, 103, 103, 0.07) 0%, rgba(103, 103, 103, 0.07) 1%, rgba(209, 209, 209, 0.07) 1%, rgba(209, 209, 209, 0.07) 100%), linear-gradient(43deg, rgba(17, 17, 17, 0.09) 0%, rgba(17, 17, 17, 0.09) 7%, rgba(159, 159, 159, 0.09) 7%, rgba(159, 159, 159, 0.09) 100%), linear-gradient(63deg, rgba(211, 211, 211, 0.1) 0%, rgba(211, 211, 211, 0.1) 94%, rgba(233, 233, 233, 0.1) 94%, rgba(233, 233, 233, 0.1) 100%), linear-gradient(207deg, rgba(179, 179, 179, 0.1) 0%, rgba(179, 179, 179, 0.1) 57%, rgba(11, 11, 11, 0.1) 57%, rgba(11, 11, 11, 0.1) 100%), linear-gradient(25deg, rgba(118, 118, 118, 0.07) 0%, rgba(118, 118, 118, 0.07) 98%, rgba(248, 248, 248, 0.07) 98%, rgba(248, 248, 248, 0.07) 100%), linear-gradient(90deg, hsl(337, 90%, 49%), hsl(337, 90%, 49%)) } .purple { background: linear-gradient(45deg, rgb(139, 59, 210), rgb(47, 30, 152)) } .purple-angular { background: linear-gradient(312deg, rgba(107, 107, 107, 0.01) 0%, rgba(107, 107, 107, 0.01) 25%, rgba(140, 140, 140, 0.01) 25%, rgba(140, 140, 140, 0.01) 50%, rgba(140, 140, 140, 0.01) 50%, rgba(140, 140, 140, 0.01) 75%, rgba(182, 182, 182, 0.01) 75%, rgba(182, 182, 182, 0.01) 100%), linear-gradient(106deg, rgba(23, 23, 23, 0.02) 0%, rgba(23, 23, 23, 0.02) 12.5%, rgba(134, 134, 134, 0.02) 12.5%, rgba(134, 134, 134, 0.02) 25%, rgba(31, 31, 31, 0.02) 25%, rgba(31, 31, 31, 0.02) 37.5%, rgba(134, 134, 134, 0.02) 37.5%, rgba(134, 134, 134, 0.02) 50%, rgba(42, 42, 42, 0.02) 50%, rgba(42, 42, 42, 0.02) 62.5%, rgba(6, 6, 6, 0.02) 62.5%, rgba(6, 6, 6, 0.02) 75%, rgba(13, 13, 13, 0.02) 75%, rgba(13, 13, 13, 0.02) 87.5%, rgba(164, 164, 164, 0.02) 87.5%, rgba(164, 164, 164, 0.02) 100%), linear-gradient(327deg, rgba(104, 104, 104, 0.02) 0%, rgba(104, 104, 104, 0.02) 16.667%, rgba(252, 252, 252, 0.02) 16.667%, rgba(252, 252, 252, 0.02) 33.334%, rgba(79, 79, 79, 0.02) 33.334%, rgba(79, 79, 79, 0.02) 50.001000000000005%, rgba(125, 125, 125, 0.02) 50.001%, rgba(125, 125, 125, 0.02) 66.668%, rgba(84, 84, 84, 0.02) 66.668%, rgba(84, 84, 84, 0.02) 83.33500000000001%, rgba(82, 82, 82, 0.02) 83.335%, rgba(82, 82, 82, 0.02) 100.002%), linear-gradient(107deg, rgba(32, 32, 32, 0.03) 0%, rgba(32, 32, 32, 0.03) 16.667%, rgba(53, 53, 53, 0.03) 16.667%, rgba(53, 53, 53, 0.03) 33.334%, rgba(212, 212, 212, 0.03) 33.334%, rgba(212, 212, 212, 0.03) 50.001000000000005%, rgba(190, 190, 190, 0.03) 50.001%, rgba(190, 190, 190, 0.03) 66.668%, rgba(244, 244, 244, 0.03) 66.668%, rgba(244, 244, 244, 0.03) 83.33500000000001%, rgba(118, 118, 118, 0.03) 83.335%, rgba(118, 118, 118, 0.03) 100.002%), linear-gradient(55deg, rgba(30, 30, 30, 0.03) 0%, rgba(30, 30, 30, 0.03) 16.667%, rgba(90, 90, 90, 0.03) 16.667%, rgba(90, 90, 90, 0.03) 33.334%, rgba(230, 230, 230, 0.03) 33.334%, rgba(230, 230, 230, 0.03) 50.001000000000005%, rgba(94, 94, 94, 0.03) 50.001%, rgba(94, 94, 94, 0.03) 66.668%, rgba(216, 216, 216, 0.03) 66.668%, rgba(216, 216, 216, 0.03) 83%, rgba(5, 5, 5, 0.03) 83.335%, rgba(5, 5, 5, 0.03) 100.002%), linear-gradient(90deg, rgb(197, 58, 221), rgb(117, 45, 206)) } .green { background: #006017; background: -webkit-gradient(left bottom, right 45deg, color-stop(0, #44cd9e), color-stop(100%, #006017)); background: -webkit-linear-gradient(45deg, #44cd9e 0, #006017 100%); background: -moz-linear-gradient(45deg, #44cd9e 0, #006017 100%); background: -o-linear-gradient(45deg, #44cd9e 0, #006017 100%); background: -ms-linear-gradient(45deg, #44cd9e 0, #006017 100%); background: linear-gradient(45deg, #44cd9e 0, #006017 100%) } .green-angular { background: linear-gradient(56deg, rgba(254, 254, 254, 0.05) 0%, rgba(254, 254, 254, 0.05) 69%, rgba(160, 160, 160, 0.05) 69%, rgba(160, 160, 160, 0.05) 100%), linear-gradient(194deg, rgba(102, 102, 102, 0.02) 0%, rgba(102, 102, 102, 0.02) 60%, rgba(67, 67, 67, 0.02) 60%, rgba(67, 67, 67, 0.02) 100%), linear-gradient(76deg, rgba(169, 169, 169, 0.06) 0%, rgba(169, 169, 169, 0.06) 89%, rgba(189, 189, 189, 0.06) 89%, rgba(189, 189, 189, 0.06) 100%), linear-gradient(326deg, rgba(213, 213, 213, 0.04) 0%, rgba(213, 213, 213, 0.04) 45%, rgba(66, 66, 66, 0.04) 45%, rgba(66, 66, 66, 0.04) 100%), linear-gradient(183deg, rgba(223, 223, 223, 0.01) 0%, rgba(223, 223, 223, 0.01) 82%, rgba(28, 28, 28, 0.01) 82%, rgba(28, 28, 28, 0.01) 100%), linear-gradient(3deg, rgba(20, 20, 20, 0.06) 0%, rgba(20, 20, 20, 0.06) 62%, rgba(136, 136, 136, 0.06) 62%, rgba(136, 136, 136, 0.06) 100%), linear-gradient(200deg, rgba(206, 206, 206, 0.09) 0%, rgba(206, 206, 206, 0.09) 58%, rgba(6, 6, 6, 0.09) 58%, rgba(6, 6, 6, 0.09) 100%), linear-gradient(304deg, rgba(162, 162, 162, 0.07) 0%, rgba(162, 162, 162, 0.07) 27%, rgba(24, 24, 24, 0.07) 27%, rgba(24, 24, 24, 0.07) 100%), linear-gradient(186deg, rgba(166, 166, 166, 0.04) 0%, rgba(166, 166, 166, 0.04) 5%, rgba(210, 210, 210, 0.04) 5%, rgba(210, 210, 210, 0.04) 100%), linear-gradient(90deg, rgb(26, 118, 64), rgb(32, 207, 121), rgb(78, 196, 128)) } .mint { background: #dfcee5; background: -webkit-gradient(left bottom, right 45deg, color-stop(0%, #0fa9a8), color-stop(100%, #dfcee5)); background: -webkit-linear-gradient(45deg, #0fa9a8 0%, #dfcee5 100%); background: -moz-linear-gradient(45deg, #0fa9a8 0%, #dfcee5 100%); background: -o-linear-gradient(45deg, #0fa9a8 0%, #dfcee5 100%); background: -ms-linear-gradient(45deg, #0fa9a8 0%, #dfcee5 100%); background: linear-gradient(45deg, #0fa9a8 0%, #dfcee5 100%); } .mint-angular { background: linear-gradient(0deg, rgba(49, 49, 49, 0.08) 0%, rgba(49, 49, 49, 0.08) 48%, rgba(143, 143, 143, 0.08) 48%, rgba(143, 143, 143, 0.08) 100%), linear-gradient(90deg, rgba(181, 181, 181, 0.06) 0%, rgba(181, 181, 181, 0.06) 12%, rgba(131, 131, 131, 0.06) 12%, rgba(131, 131, 131, 0.06) 100%), linear-gradient(90deg, rgba(79, 79, 79, 0.09) 0%, rgba(79, 79, 79, 0.09) 78%, rgba(239, 239, 239, 0.09) 78%, rgba(239, 239, 239, 0.09) 100%), linear-gradient(0deg, rgba(249, 249, 249, 0.09) 0%, rgba(249, 249, 249, 0.09) 5%, rgba(108, 108, 108, 0.09) 5%, rgba(108, 108, 108, 0.09) 100%), linear-gradient(135deg, rgba(252, 252, 252, 0.09) 0%, rgba(252, 252, 252, 0.09) 65%, rgba(153, 153, 153, 0.09) 65%, rgba(153, 153, 153, 0.09) 100%), linear-gradient(135deg, rgba(111, 111, 111, 0.02) 0%, rgba(111, 111, 111, 0.02) 90%, rgba(157, 157, 157, 0.02) 90%, rgba(157, 157, 157, 0.02) 100%), linear-gradient(90deg, rgba(222, 222, 222, 0.05) 0%, rgba(222, 222, 222, 0.05) 32%, rgba(25, 25, 25, 0.05) 32%, rgba(25, 25, 25, 0.05) 100%), linear-gradient(90deg, rgba(79, 79, 79, 0.02) 0%, rgba(79, 79, 79, 0.02) 56%, rgba(103, 103, 103, 0.02) 56%, rgba(103, 103, 103, 0.02) 100%), linear-gradient(90deg, rgb(157, 51, 230), rgb(103, 247, 240)) } .beach { background: #e5d8b9; background: -webkit-gradient(left bottom, right 45deg, color-stop(0%, #2cbedf), color-stop(100%, #e5d8b9)); background: -webkit-linear-gradient(45deg, #2cbedf 0%, #e5d8b9 100%); background: -moz-linear-gradient(45deg, #2cbedf 0%, #e5d8b9 100%); background: -o-linear-gradient(45deg, #2cbedf 0%, #e5d8b9 100%); background: -ms-linear-gradient(45deg, #2cbedf 0%, #e5d8b9 100%); background: linear-gradient(45deg, #2cbedf 0%, #e5d8b9 100%); } .beach-angular { background: linear-gradient(99deg, rgba(188, 188, 188, 0.02) 0%, rgba(188, 188, 188, 0.02) 12.5%, rgba(86, 86, 86, 0.02) 12.5%, rgba(86, 86, 86, 0.02) 25%, rgba(221, 221, 221, 0.02) 25%, rgba(221, 221, 221, 0.02) 37.5%, rgba(159, 159, 159, 0.02) 37.5%, rgba(159, 159, 159, 0.02) 50%, rgba(159, 159, 159, 0.02) 50%, rgba(159, 159, 159, 0.02) 62.5%, rgba(86, 86, 86, 0.02) 62.5%, rgba(86, 86, 86, 0.02) 75%, rgba(241, 241, 241, 0.02) 75%, rgba(241, 241, 241, 0.02) 87.5%, rgba(46, 46, 46, 0.02) 87.5%, rgba(46, 46, 46, 0.02) 100%), linear-gradient(285deg, rgba(179, 179, 179, 0.02) 0%, rgba(179, 179, 179, 0.02) 25%, rgba(69, 69, 69, 0.02) 25%, rgba(69, 69, 69, 0.02) 50%, rgba(76, 76, 76, 0.02) 50%, rgba(76, 76, 76, 0.02) 75%, rgba(199, 199, 199, 0.02) 75%, rgba(199, 199, 199, 0.02) 100%), linear-gradient(76deg, rgba(143, 143, 143, 0.01) 0%, rgba(143, 143, 143, 0.01) 12.5%, rgba(116, 116, 116, 0.01) 12.5%, rgba(116, 116, 116, 0.01) 25%, rgba(118, 118, 118, 0.01) 25%, rgba(118, 118, 118, 0.01) 37.5%, rgba(183, 183, 183, 0.01) 37.5%, rgba(183, 183, 183, 0.01) 50%, rgba(196, 196, 196, 0.01) 50%, rgba(196, 196, 196, 0.01) 62.5%, rgba(235, 235, 235, 0.01) 62.5%, rgba(235, 235, 235, 0.01) 75%, rgba(194, 194, 194, 0.01) 75%, rgba(194, 194, 194, 0.01) 87.5%, rgba(86, 86, 86, 0.01) 87.5%, rgba(86, 86, 86, 0.01) 100%), linear-gradient(28deg, rgba(238, 238, 238, 0.03) 0%, rgba(238, 238, 238, 0.03) 16.667%, rgba(243, 243, 243, 0.03) 16.667%, rgba(243, 243, 243, 0.03) 33.334%, rgba(201, 201, 201, 0.03) 33.334%, rgba(201, 201, 201, 0.03) 50.001000000000005%, rgba(129, 129, 129, 0.03) 50.001%, rgba(129, 129, 129, 0.03) 66.668%, rgba(40, 40, 40, 0.03) 66.668%, rgba(40, 40, 40, 0.03) 83.33500000000001%, rgba(97, 97, 97, 0.03) 83.335%, rgba(97, 97, 97, 0.03) 100.002%), linear-gradient(290deg, rgba(241, 241, 241, 0.02) 0%, rgba(241, 241, 241, 0.02) 20%, rgba(86, 86, 86, 0.02) 20%, rgba(86, 86, 86, 0.02) 40%, rgba(128, 128, 128, 0.02) 40%, rgba(128, 128, 128, 0.02) 60%, rgba(83, 83, 83, 0.02) 60%, rgba(83, 83, 83, 0.02) 80%, rgba(81, 81, 81, 0.02) 80%, rgba(81, 81, 81, 0.02) 100%), linear-gradient(0deg, rgba(159, 159, 159, 0.01) 0%, rgba(159, 159, 159, 0.01) 12.5%, rgba(131, 131, 131, 0.01) 12.5%, rgba(131, 131, 131, 0.01) 25%, rgba(249, 249, 249, 0.01) 25%, rgba(249, 249, 249, 0.01) 37.5%, rgba(156, 156, 156, 0.01) 37.5%, rgba(156, 156, 156, 0.01) 50%, rgba(145, 145, 145, 0.01) 50%, rgba(145, 145, 145, 0.01) 62.5%, rgba(149, 149, 149, 0.01) 62.5%, rgba(149, 149, 149, 0.01) 75%, rgba(144, 144, 144, 0.01) 75%, rgba(144, 144, 144, 0.01) 87.5%, rgba(170, 170, 170, 0.01) 87.5%, rgba(170, 170, 170, 0.01) 100%), linear-gradient(195deg, rgba(109, 109, 109, 0.03) 0%, rgba(109, 109, 109, 0.03) 12.5%, rgba(254, 254, 254, 0.03) 12.5%, rgba(254, 254, 254, 0.03) 25%, rgba(121, 121, 121, 0.03) 25%, rgba(121, 121, 121, 0.03) 37.5%, rgba(221, 221, 221, 0.03) 37.5%, rgba(221, 221, 221, 0.03) 50%, rgba(229, 229, 229, 0.03) 50%, rgba(229, 229, 229, 0.03) 62.5%, rgba(225, 225, 225, 0.03) 62.5%, rgba(225, 225, 225, 0.03) 75%, rgba(79, 79, 79, 0.03) 75%, rgba(79, 79, 79, 0.03) 87.5%, rgba(200, 200, 200, 0.03) 87.5%, rgba(200, 200, 200, 0.03) 100%), linear-gradient(318deg, rgba(177, 177, 177, 0.02) 0%, rgba(177, 177, 177, 0.02) 25%, rgba(83, 83, 83, 0.02) 25%, rgba(83, 83, 83, 0.02) 50%, rgba(184, 184, 184, 0.02) 50%, rgba(184, 184, 184, 0.02) 75%, rgba(191, 191, 191, 0.02) 75%, rgba(191, 191, 191, 0.02) 100%), linear-gradient(90deg, rgb(45, 133, 170), rgb(198, 199, 93)) } .gray-light { background: linear-gradient(180deg, #666666, #999999); } .gray-light-angular { background: linear-gradient(181deg, rgba(210, 210, 210, 0.01) 0%, rgba(210, 210, 210, 0.01) 12.5%, rgba(156, 156, 156, 0.01) 12.5%, rgba(156, 156, 156, 0.01) 25%, rgba(90, 90, 90, 0.01) 25%, rgba(90, 90, 90, 0.01) 37.5%, rgba(11, 11, 11, 0.01) 37.5%, rgba(11, 11, 11, 0.01) 50%, rgba(53, 53, 53, 0.01) 50%, rgba(53, 53, 53, 0.01) 62.5%, rgba(115, 115, 115, 0.01) 62.5%, rgba(115, 115, 115, 0.01) 75%, rgba(34, 34, 34, 0.01) 75%, rgba(34, 34, 34, 0.01) 87.5%, rgba(110, 110, 110, 0.01) 87.5%, rgba(110, 110, 110, 0.01) 100%), linear-gradient(120deg, rgba(197, 197, 197, 0.03) 0%, rgba(197, 197, 197, 0.03) 12.5%, rgba(16, 16, 16, 0.03) 12.5%, rgba(16, 16, 16, 0.03) 25%, rgba(44, 44, 44, 0.03) 25%, rgba(44, 44, 44, 0.03) 37.5%, rgba(244, 244, 244, 0.03) 37.5%, rgba(244, 244, 244, 0.03) 50%, rgba(88, 88, 88, 0.03) 50%, rgba(88, 88, 88, 0.03) 62.5%, rgba(101, 101, 101, 0.03) 62.5%, rgba(101, 101, 101, 0.03) 75%, rgba(44, 44, 44, 0.03) 75%, rgba(44, 44, 44, 0.03) 87.5%, rgba(212, 212, 212, 0.03) 87.5%, rgba(212, 212, 212, 0.03) 100%), linear-gradient(216deg, rgba(24, 24, 24, 0.02) 0%, rgba(24, 24, 24, 0.02) 20%, rgba(101, 101, 101, 0.02) 20%, rgba(101, 101, 101, 0.02) 40%, rgba(44, 44, 44, 0.02) 40%, rgba(44, 44, 44, 0.02) 60%, rgba(144, 144, 144, 0.02) 60%, rgba(144, 144, 144, 0.02) 80%, rgba(22, 22, 22, 0.02) 80%, rgba(22, 22, 22, 0.02) 100%), linear-gradient(74deg, rgba(211, 211, 211, 0.03) 0%, rgba(211, 211, 211, 0.03) 16.667%, rgba(91, 91, 91, 0.03) 16.667%, rgba(91, 91, 91, 0.03) 33.334%, rgba(14, 14, 14, 0.03) 33.334%, rgba(14, 14, 14, 0.03) 50.001000000000005%, rgba(239, 239, 239, 0.03) 50.001%, rgba(239, 239, 239, 0.03) 66.668%, rgba(250, 250, 250, 0.03) 66.668%, rgba(250, 250, 250, 0.03) 83.33500000000001%, rgba(146, 146, 146, 0.03) 83.335%, rgba(146, 146, 146, 0.03) 100.002%), linear-gradient(74deg, rgba(190, 190, 190, 0.03) 0%, rgba(190, 190, 190, 0.03) 14.286%, rgba(78, 78, 78, 0.03) 14.286%, rgba(78, 78, 78, 0.03) 28.572%, rgba(11, 11, 11, 0.03) 28.572%, rgba(11, 11, 11, 0.03) 42.858%, rgba(77, 77, 77, 0.03) 42.858%, rgba(77, 77, 77, 0.03) 57.144%, rgba(100, 100, 100, 0.03) 57.144%, rgba(100, 100, 100, 0.03) 71.42999999999999%, rgba(179, 179, 179, 0.03) 71.43%, rgba(179, 179, 179, 0.03) 85.71600000000001%, rgba(37, 37, 37, 0.03) 85.716%, rgba(37, 37, 37, 0.03) 100.002%), linear-gradient(72deg, rgba(159, 159, 159, 0.03) 0%, rgba(159, 159, 159, 0.03) 12.5%, rgba(231, 231, 231, 0.03) 12.5%, rgba(231, 231, 231, 0.03) 25%, rgba(26, 26, 26, 0.03) 25%, rgba(26, 26, 26, 0.03) 37.5%, rgba(121, 121, 121, 0.03) 37.5%, rgba(121, 121, 121, 0.03) 50%, rgba(144, 144, 144, 0.03) 50%, rgba(144, 144, 144, 0.03) 62.5%, rgba(211, 211, 211, 0.03) 62.5%, rgba(211, 211, 211, 0.03) 75%, rgba(234, 234, 234, 0.03) 75%, rgba(234, 234, 234, 0.03) 87.5%, rgba(224, 224, 224, 0.03) 87.5%, rgba(224, 224, 224, 0.03) 100%), linear-gradient(279deg, rgba(113, 113, 113, 0.01) 0%, rgba(113, 113, 113, 0.01) 12.5%, rgba(204, 204, 204, 0.01) 12.5%, rgba(204, 204, 204, 0.01) 25%, rgba(164, 164, 164, 0.01) 25%, rgba(164, 164, 164, 0.01) 37.5%, rgba(10, 10, 10, 0.01) 37.5%, rgba(10, 10, 10, 0.01) 50%, rgba(99, 99, 99, 0.01) 50%, rgba(99, 99, 99, 0.01) 62.5%, rgba(186, 186, 186, 0.01) 62.5%, rgba(186, 186, 186, 0.01) 75%, rgba(230, 230, 230, 0.01) 75%, rgba(230, 230, 230, 0.01) 87.5%, rgba(6, 6, 6, 0.01) 87.5%, rgba(6, 6, 6, 0.01) 100%), linear-gradient(11deg, rgba(241, 241, 241, 0.02) 0%, rgba(241, 241, 241, 0.02) 12.5%, rgba(51, 51, 51, 0.02) 12.5%, rgba(51, 51, 51, 0.02) 25%, rgba(101, 101, 101, 0.02) 25%, rgba(101, 101, 101, 0.02) 37.5%, rgba(107, 107, 107, 0.02) 37.5%, rgba(107, 107, 107, 0.02) 50%, rgba(197, 197, 197, 0.02) 50%, rgba(197, 197, 197, 0.02) 62.5%, rgba(226, 226, 226, 0.02) 62.5%, rgba(226, 226, 226, 0.02) 75%, rgba(100, 100, 100, 0.02) 75%, rgba(100, 100, 100, 0.02) 87.5%, rgba(216, 216, 216, 0.02) 87.5%, rgba(216, 216, 216, 0.02) 100%), linear-gradient(90deg, hsl(178, 0%, 46%), hsl(178, 0%, 46%)) } .gray-dark { background: linear-gradient(180deg, #333333, #555555); } .gray-dark-angular { background: linear-gradient(292deg, rgba(150, 150, 150, 0.03) 0%, rgba(150, 150, 150, 0.03) 20%, rgba(151, 151, 151, 0.03) 20%, rgba(151, 151, 151, 0.03) 40%, rgba(215, 215, 215, 0.03) 40%, rgba(215, 215, 215, 0.03) 60%, rgba(254, 254, 254, 0.03) 60%, rgba(254, 254, 254, 0.03) 80%, rgba(112, 112, 112, 0.03) 80%, rgba(112, 112, 112, 0.03) 100%), linear-gradient(62deg, rgba(34, 34, 34, 0.03) 0%, rgba(34, 34, 34, 0.03) 20%, rgba(171, 171, 171, 0.03) 20%, rgba(171, 171, 171, 0.03) 40%, rgba(206, 206, 206, 0.03) 40%, rgba(206, 206, 206, 0.03) 60%, rgba(210, 210, 210, 0.03) 60%, rgba(210, 210, 210, 0.03) 80%, rgba(69, 69, 69, 0.03) 80%, rgba(69, 69, 69, 0.03) 100%), linear-gradient(314deg, rgba(235, 235, 235, 0.03) 0%, rgba(235, 235, 235, 0.03) 20%, rgba(254, 254, 254, 0.03) 20%, rgba(254, 254, 254, 0.03) 40%, rgba(178, 178, 178, 0.03) 40%, rgba(178, 178, 178, 0.03) 60%, rgba(211, 211, 211, 0.03) 60%, rgba(211, 211, 211, 0.03) 80%, rgba(73, 73, 73, 0.03) 80%, rgba(73, 73, 73, 0.03) 100%), linear-gradient(32deg, rgba(182, 182, 182, 0.01) 0%, rgba(182, 182, 182, 0.01) 12.5%, rgba(208, 208, 208, 0.01) 12.5%, rgba(208, 208, 208, 0.01) 25%, rgba(178, 178, 178, 0.01) 25%, rgba(178, 178, 178, 0.01) 37.5%, rgba(143, 143, 143, 0.01) 37.5%, rgba(143, 143, 143, 0.01) 50%, rgba(211, 211, 211, 0.01) 50%, rgba(211, 211, 211, 0.01) 62.5%, rgba(92, 92, 92, 0.01) 62.5%, rgba(92, 92, 92, 0.01) 75%, rgba(56, 56, 56, 0.01) 75%, rgba(56, 56, 56, 0.01) 87.5%, rgba(253, 253, 253, 0.01) 87.5%, rgba(253, 253, 253, 0.01) 100%), linear-gradient(247deg, rgba(103, 103, 103, 0.02) 0%, rgba(103, 103, 103, 0.02) 12.5%, rgba(240, 240, 240, 0.02) 12.5%, rgba(240, 240, 240, 0.02) 25%, rgba(18, 18, 18, 0.02) 25%, rgba(18, 18, 18, 0.02) 37.5%, rgba(38, 38, 38, 0.02) 37.5%, rgba(38, 38, 38, 0.02) 50%, rgba(246, 246, 246, 0.02) 50%, rgba(246, 246, 246, 0.02) 62.5%, rgba(9, 9, 9, 0.02) 62.5%, rgba(9, 9, 9, 0.02) 75%, rgba(167, 167, 167, 0.02) 75%, rgba(167, 167, 167, 0.02) 87.5%, rgba(86, 86, 86, 0.02) 87.5%, rgba(86, 86, 86, 0.02) 100%), linear-gradient(90deg, hsl(194, 0%, 10%), hsl(194, 0%, 10%)) } .current { opacity: 0; } .slider { position: fixed; top: 0; left: 0; width: 100%; height: auto; background-size: cover; -webkit-animation: slideImg 16s infinite; animation: slideImg 16s infinite; opacity: 0; -webkit-filter: grayscale(100%); filter: grayscale(100%); } @-webkit-keyframes slideImg { 25% { opacity: 1; } 40% { opacity: 0; } } @keyframes slideImg { 25% { opacity: 1; } 40% { opacity: 0; } } .slider:nth-child(1) { -webkit-animation-delay: 0; animation-delay: 0; } .slider:nth-child(2) { -webkit-animation-delay: 4s; animation-delay: 4s; } .slider:nth-child(3) { -webkit-animation-delay: 8s; animation-delay: 8s; } .slider:nth-child(4) { -webkit-animation-delay: 12s; animation-delay: 12s; } /* HEADER AND MAIN NAVIGATION */ .web-logo { text-align: left; } .web-logo a { transition: all 500ms ease; opacity: 1; } .web-logo a:hover { opacity: .75 } .img-logo { display: block; padding: 0 10px 0 0; margin: 0 auto; float: left; width: 32px; } .text-logo { margin-left: 5px; margin-top: -2px; display: inline-block; line-height: 1.25 } .web-name, .web-tagline { color: #fff; } .web-name { font-size: 15px; text-transform: uppercase } .web-tagline { font-size: 11px; } #header { padding: 18px 15px; height: 68px; position: fixed; left: 0; top: 0; right: 0; transition: .5s ease-in-out; z-index: 997; } @media only screen and (min-width: 768px) { #header { padding: 20px 40px; } } #header.boxshadow { background-color: #111; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2); transition: .5s ease-in-out; top: 0; } #header.hide, #mobile-nav-toggle.hide { top: -80px; transition: .5s ease-in-out; } #logo { float: left; } #logo h1 { font-size: 36px; margin: 0; padding: 4px 0; line-height: 1; font-family: "Poppins", sans-serif; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; } #logo h1 a, #logo h1 a:hover { color: #fff; } #logo img { padding: 0; margin: 0; } @media (max-width: 768px) { #logo img { max-height: 40px; } } @media (max-width: 768px) { #logo h1 { font-size: 26px; } } .logo-mobile { display: block; width: 100%; margin: 10px auto; padding-bottom: 10px; text-align: center; border-bottom: 1px solid #222; transition: all 500ms ease; } @media only screen and (min-width:768px) { .logo-mobile { display: none; } } .logo-mobile .img-logo { width: 60px; float: none; text-align: center; margin: 10px auto; padding: 0; } .logo-mobile .text-logo { margin-left: 0; } .logo-mobile a { display: block; transition: all 500ms ease; opacity: 1; } .logo-mobile a:hover { opacity: .75; } #header .input-group { display: block; } nav .input-group>.form-control { margin: 0 0 10px 10px } nav .input-group button { margin: 0 10px 10px 0 } @media only screen and (min-width: 768px) { #header .input-group { display: none; } } .nav-menu, .nav-menu * { margin: 0; padding: 0; list-style: none; } .nav-menu ul { position: absolute; display: none; top: 100%; left: 0; z-index: 99; } .nav-menu li { position: relative; white-space: nowrap; } .nav-menu>li { float: left; } .nav-menu li:hover>ul, .nav-menu li.sfHover>ul { display: block; } .nav-menu ul ul { top: 0; left: 100%; } .nav-menu ul li { min-width: 180px; } .sf-arrows .sf-with-ul { padding-right: 25px; } .sf-arrows .sf-with-ul:after { content: "\f107"; position: absolute; right: 10px; font-family: FontAwesome; font-style: normal; font-weight: normal; } .sf-arrows ul .sf-with-ul:after { content: "\f105"; } #nav-menu-container { float: right; margin: 0; } @media (max-width: 768px) { #nav-menu-container { display: none; } } .nav-menu a { padding: 0 8px 10px 8px; text-decoration: none; display: inline-block; color: #fff; font-family: 'Open Sans', sans-serif; font-weight: 400; text-transform: uppercase; font-size: 14px; letter-spacing: 0.02em; outline: none; -webkit-transition: all 500ms; transition: all 500ms; } .nav-menu a:hover { color: #ff0 } .nav-menu>li { margin-left: 10px; } .nav-menu>li>a:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #ff0; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 500ms ease-in-out 0s; transition: all 500ms ease-in-out 0s; } .nav-menu a:hover:before, .nav-menu li:hover>a:before, .nav-menu .menu-active>a:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } .nav-menu ul { margin: 4px 0 0 0; } .nav-menu ul li { background: #282828 } .nav-menu ul li:first-child { border-top: 0; } .nav-menu ul li a { padding: 10px; color: #fff; transition: 500ms ease-in-out; display: block; font-size: 13px; text-transform: none; } .nav-menu ul li a:hover { color: #ffff00; } .nav-menu ul ul { margin: 0; } /* Mobile Navigation */ #mobile-nav-toggle { display: none; position: fixed; right: 0; top: 0; margin: 15px 15px 0 0; border: 0; background: none; font-size: 24px; transition: 500ms ease; outline: none; cursor: pointer; } @media (max-width: 768px) { #mobile-nav-toggle { display: inline; z-index: 999; } } #mobile-nav-toggle i { color: #fff; transition: 500ms ease-in-out; } #mobile-nav-toggle i:hover { color: #ff0 } #mobile-nav { display: none; position: fixed; padding-top: 50px; z-index: 998; background: #000; top: 0; bottom: 0; right: -300px; width: 280px; height: 100%; overflow-y: auto; transition: 500ms ease-in-out; } @media (max-width: 768px) { #mobile-nav { display: inline; } } #mobile-nav ul { padding: 0; margin: 0; list-style: none; } #mobile-nav ul li { position: relative; } #mobile-nav ul li a { color: #fff; font-size: 14px; overflow: hidden; padding: 10px 22px 10px 15px; position: relative; text-decoration: none; width: 100%; display: block; outline: none; transition: all 500ms; } #mobile-nav ul li a:hover { color: #ff0; background: #111111; } #mobile-nav ul li li { margin-left: 30px; border-left: 1px solid #222; background: #000; } #mobile-nav ul .menu-has-children i { position: absolute; right: 0; z-index: 99; padding: 15px; cursor: pointer; color: #fff; font-size: 12px; transition: all 500ms ease-in-out; } #mobile-nav ul .menu-has-children i:hover { color: #ff0; background: #111111; } #mobile-nav ul .menu-has-children i.fa-chevron-up { color: #ff0; } #mobile-nav ul .menu-has-children i.fa-chevron-down { color: #ff0 } #mobile-nav ul .menu-item-active { color: #ff0; } #mobile-body-overly { width: 100%; height: 100%; z-index: 997; top: 0; left: 0; position: fixed; background: rgba(0, 0, 0, .8); display: none; transition: all 500ms ease-in-out; cursor: pointer; } body.mobile-nav-active { overflow: hidden; transition: .5s ease; } body.mobile-nav-active #mobile-nav { right: 0; transition: .5s ease; } body.mobile-nav-active #mobile-nav-toggle { color: #fff; } body.mobile-nav-active #mobile-nav-toggle:hover { color: #ff0 !important; } .hsr { width: 100%; margin-top: 40px; position: absolute; bottom: 0; right: 0; background: rgba(255, 255, 255, .05); padding: 10px 15px; font-size: 10px; letter-spacing: 2px; color: #ccc; text-shadow: 0 1px 2px #000; } .hsr a { color: #eee; } .hsr a:hover, .hsr a:focus, .hsr a.focus { color: #ff0; } /* TOP SECTION & SEARCH FORM */ .top-section { margin: 0; padding: 15px; width: 100; } @media only screen and (min-width: 768px) { .top-section { padding: 20px; width: 100; } } .s-main-title { float: none; margin: 80px auto 20px auto; text-align: center; font-size: 20pt; color: #fff; } @media only screen and (min-width: 768px) { .s-main-title { float: left; margin: 120px auto 0 20px; font-size: 28pt; text-align:left; } } .s-main-search { float: none; width: 100%; text-align: center !important; } @media only screen and (min-width: 768px) { .s-main-search { float: right; width: 90%; margin: 120px 20px 0 auto; } } nav .input-group-append { margin-left: -40px; margin-top: 5px; z-index: 11; } nav .btn-search { color: #555; padding-left: 4px; width: 40px; height: 26px; } nav .btn-search:hover { color: #fff } nav .btn-nav-advanced { color: #999!important; cursor: pointer; font-size: 12px; margin-bottom: 15px; transition: all 500ms ease; } nav .btn-nav-advanced:hover, nav .btn-nav-advanced:focus, nav .btn-nav-advanced.focus { color: #fff!important; } #simply-search .btn-search, .s-main-search .btn-search, nav .btn-search { border-radius: 50px; border: 1px solid transparent; background-color: transparent; transition: all 500ms ease; outline: none; } .s-main-search .btn-search { margin-top: 4px; height: 40px; width: 50px; color: rgba(0, 0, 0, .5); } #simply-search .btn-search { font-size: 20px; margin-top: -2px; width: 64px; height: 56px; color: rgba(0, 0, 0, .5); } #simply-search .btn-search:hover, .s-main-search .btn-search:hover { color: #000 } #simply-search .form-control, .s-main-search .form-control { border-radius: 50px !important; background-color: rgba(255, 255, 255, .5); border: 2px solid #fff; z-index: 10; transition: all 500ms ease; box-shadow: none } #simply-search .form-control{ font-size: 24px; height: 56px; padding-left: 20px; } #simply-search .form-control:focus, #simply-search .form-control.focus, .s-main-search .form-control:focus, .s-main-search .form-control.focus { background-color: #fff; border-color: #333; color: #333; transform: scaleX(1.015); box-shadow: 0 0 10px rgba(0, 0, 0, .15); } nav .input-group>.form-control { border-radius: 50px !important; background-color: transparent; border: 2px solid #555; z-index: 10; } nav .form-control:focus, nav .form-control.focus { color: #ffff6d; border-color: #fff !important } #simply-search .input-group-append{ margin-left: -62px; z-index: 11; } .s-main-search .input-group-append { margin-left: -50px; z-index: 11; } #simply-search .input-group, .s-main-search .input-group { border-radius: 50px; } .s-search { width: 100%; margin: 0 auto; padding: 10px; text-align: center; } @media only screen and (min-width: 768px) { .s-search { padding: 10px 10px 10px 20px; width: 500px; } } .search-frontpage { padding: 100px 15px; width: 100%; transition: all 500ms ease-in-out; } @media only screen and (min-width: 768px) { .search-frontpage { margin: auto; padding: 200px 50px; width: 680px; } } @media only screen and (min-width:992px) { .search-frontpage { margin: auto; padding: 340px 50px; width: 720px; } } .s-search-advances { cursor: pointer; color: #fff !important; font-size: 12px; letter-spacing: .05em; transition: all 500ms; height: 12px; } @media only screen and (min-width: 768px) { .s-search-advances { font-size: 14px; } } .s-search-advances:hover, .s-search-advances:focus, .s-search-advances.focus { color: #000 !important; letter-spacing: 1px; } .s-main input, .s-main-page input { border: 1px solid #ccc; border-radius: .25rem; } .s-main input:focus, .s-main input.focus, .s-main-page input:focus, .s-main-page input.focus { border-color: #777; } /* MAIN PAGE & MAIN CONTENT */ .s-main-page { position: relative; width: 100%; } @media only screen and (min-width: 768px) { .s-main-page { min-height: 100%; width: 100%; } } .s-main { width: 100%; text-align: center; margin: 0 auto; color: #fff; font-size: 12pt; font-weight: lighter; } .s-main h1 { font-family: Raleway, serif; font-weight: bold; font-size: 26pt; } .s-main-page form h1, .s-main-page form .s-search-info { display: none; } .s-main-page .s-main-content { /* background: linear-gradient(22.5deg, rgba(66, 66, 66, 0.02) 0%, rgba(66, 66, 66, 0.02) 11%, rgba(135, 135, 135, 0.02) 11%, rgba(135, 135, 135, 0.02) 24%, rgba(29, 29, 29, 0.02) 24%, rgba(29, 29, 29, 0.02) 38%, rgba(15, 15, 15, 0.02) 38%, rgba(15, 15, 15, 0.02) 50%, rgba(180, 180, 180, 0.02) 50%, rgba(180, 180, 180, 0.02) 77%, rgba(205, 205, 205, 0.02) 77%, rgba(205, 205, 205, 0.02) 100%), linear-gradient(67.5deg, rgba(10, 10, 10, 0.02) 0%, rgba(10, 10, 10, 0.02) 22%, rgba(52, 52, 52, 0.02) 22%, rgba(52, 52, 52, 0.02) 29%, rgba(203, 203, 203, 0.02) 29%, rgba(203, 203, 203, 0.02) 30%, rgba(69, 69, 69, 0.02) 30%, rgba(69, 69, 69, 0.02) 75%, rgba(231, 231, 231, 0.02) 75%, rgba(231, 231, 231, 0.02) 95%, rgba(138, 138, 138, 0.02) 95%, rgba(138, 138, 138, 0.02) 100%), linear-gradient(112.5deg, rgba(221, 221, 221, 0.02) 0%, rgba(221, 221, 221, 0.02) 17%, rgba(190, 190, 190, 0.02) 17%, rgba(190, 190, 190, 0.02) 39%, rgba(186, 186, 186, 0.02) 39%, rgba(186, 186, 186, 0.02) 66%, rgba(191, 191, 191, 0.02) 66%, rgba(191, 191, 191, 0.02) 68%, rgba(16, 16, 16, 0.02) 68%, rgba(16, 16, 16, 0.02) 70%, rgba(94, 94, 94, 0.02) 70%, rgba(94, 94, 94, 0.02) 100%), linear-gradient(90deg, #FFF, #FFF); */ background: #fff; width: 100%; line-height: 24pt; padding: 1rem 0 0 0; } @media only screen and (min-width: 768px) { .s-main-page .s-main-content { line-height: 24pt; width: 100%; padding: 1.5rem 0; } } /* SIDEBAR */ .sidebar { margin: 3rem auto 0 auto; } @media only screen and (min-width:768px) { .sidebar { margin: 0 auto; } } .sidebar .information hr { display: none; } .sidebar-heading { border-bottom: 1px dashed #e4e4e4; padding-bottom: 10px; } .s-search-info { padding: 10px 15px; } @media only screen and (min-width: 768px) { .s-search-info { padding: 10px 0 0px 0; } } .search-found-info { display: block; margin: 15px auto 0 auto; } .search-query-time { margin-bottom: 10px; } .search-found-info strong, .search-query-time b { color: #dc3545 !important; font-weight: bold; padding: 0 3px } .sidebar .w3-bar-block a { color: #333; transition: all 300ms ease; } .sidebar .w3-bar-block a:hover { color: #007bff; } .sidebar .w3-bar-block .menuActive>a { padding-left: 8px; border-left: 6px solid #999; color: #000 !important; font-weight: bold; cursor: default; } .promo { text-align: center; padding: 20px; margin-bottom: 0; border-radius: .4375rem; box-shadow: 0 0.3rem 1.525rem -0.375rem rgba(0, 0, 0, 0.1); } @media only screen and (min-width: 768px) { .promo { margin-bottom: 20px; } } .promo h4 { font-size: 18px; text-transform: uppercase; } .promo h6 { font-size: 14px; text-transform: uppercase; } .promo p { font-size: 12px; line-height: 1.5; } /* Sidebar Buttons */ .sidebar .btn, .sidebar .xmlDetailLink, .sidebar .citationLink, .sidebar .xmlResultLink, .sidebar .jsonResultLink, .sidebar .s-xml-detail, .sidebar .btn-block { border-radius: 15px; border: none !important; background-color: #6c757d; color: #fff !important; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; line-height: 1.45 !important; white-space: nowrap; padding: 8px 14px !important; -webkit-transition: 500ms ease; transition: 500ms ease; cursor: pointer; margin-right: 1px; } .sidebar .btn:hover, .sidebar .xmlDetailLink:hover, .sidebar .citationLink:hover, .sidebar .xmlResultLink:hover, .sidebar .jsonResultLink:hover, .sidebar .s-xml-detail:hover, .sidebar .btn-block:hover { background-color: #000 !important; } /* FOOTER AREA */ /* Footer Upper */ .footer-upper { background: rgba(0, 0, 0, .25); color: #ddd; font-size: 13px; padding: 10px 20px; line-height: 12px; bottom: 0; position: relative; } @media only screen and (min-width: 768px) { .footer-upper { padding: 20px 50px; } } .footer-upper .title { color: #ddd; } .footer-upper a { color: #fff; border-bottom: 1px dotted rgba(255, 255, 255, .5); transition: all 500ms ease; } .footer-upper a:hover { color: #ff0; border-color: #ff0; } .footer-upper h1 { font-size: 16px; text-transform: uppercase; padding-bottom: 10px; margin-bottom: 20px; letter-spacing: 0.05em; } .footer-upper h4 { font-size: 20px; margin: 0; } .footer-upper h5 { font-size: 14px; margin: 0; } /* Back to Top Button */ .back-to-top { position: fixed; bottom: 15px; right: 15px; margin: 0 auto; z-index: 997; color: #000; text-align: center; background: #fff; width: 48px; height: 48px; line-height: 48px; border-radius: 50%; visibility: hidden; -webkit-transform: translate3d(0, 50px, 0); -moz-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); transition: all 500ms ease-in-out; box-shadow: 0 0 1.525rem rgba(0, 0, 0, 0.1); } .back-to-top:focus, .back-to-top.focus, .back-to-top:hover { text-decoration: none; color: #fff; background-color: #343a40; margin-bottom: 2px; } .back-to-top.back-to-top-is-visible { visibility: visible; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: .5s ease-in-out; } .back-to-top.back-to-top-is-visible:hover { transition: .5s ease-in-out; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } .back-to-top.back-to-top-fade-out:hover { transition: .5s ease-in-out; transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1); } /* Footer */ .s-footer { width: 100%; position: relative; left: 0; bottom: 0; zoom: 1; display: block; margin-top: 0; } @media only screen and (min-width: 768px) { .s-footer { line-height: normal; text-align: left; } } .s-footer.hide{ } @media screen and (min-width: 768px) { .s-footer-tagline { text-align: left; } } .s-footer-content { background-color: #111; width: 100%; padding: 10px 20px; margin: 0 auto; font-size: 9pt; letter-spacing: 0.05em; color: #eee; z-index: 802; line-height: 20px; position: relative; text-align: center; } @media only screen and (min-width: 768px) { .s-footer-content { padding: 20px 50px; } } .footer-left, .footer-right { float: none; margin: 10px auto; padding: 0; } @media only screen and (min-width:768px) { .footer-left { float: left; margin: 0; } } @media only screen and (min-width:768px) { .footer-right { float: right; margin: 0 } } .s-footer a { color: #eee; -webkit-transition: all 500ms; transition: all 500ms; } .footer-rss { color: #fc0 !important; padding-right: 0; } @media only screen and (min-width: 768px) { .footer-rss { margin-right: 10px; } } .s-footer a:hover, .footer-rss:hover { color: #ff0 !important; } .s-footer-menu { float: none; list-style: none; margin: 0; padding: 0; } @media only screen and (min-width:768px) { .s-footer-menu { float: right; } } .s-footer-menu li { display: inline-block; float: none; margin: 0; padding: 0; padding-right: 10px; text-align: center; position: relative; } .s-footer-tagline a { position: relative; } /* Language Select */ .s-menu-info { margin: 5px auto; padding: 0; color: #000; } @media only screen and (min-width:768px) { .s-menu-info { margin: -2px 0 -2px 0; } } .s-menu-info label { font-size: 10px; letter-spacing: .1em; color: #eee; padding: 0; margin: 0; display: inline; } .custom-dropdown--large { font-size: 14px } .custom-dropdown--small { font-size: 12px } .custom-dropdown__select { font-size: inherit; padding: 0; margin: 0 } .custom-dropdown__select--white { background-color: #fff; color: #111 } .custom-dropdown__select--emerald { background-color: #20b390; color: #fff } .custom-dropdown__select--red { background-color: #d53a22; color: #fff } @supports (pointer-events:none) and ((-webkit-appearance:none) or (-moz-appearance:none) or (appearance:none)) { .custom-dropdown { position: relative; display: inline-block; vertical-align: middle } .custom-dropdown__select { padding-right: 1em; border: 1px solid #000; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; cursor: pointer; transition: all .5s ease; } .custom-dropdown::after, .custom-dropdown::before { content: ""; position: absolute; pointer-events: none; } .custom-dropdown::after { content: "\25BC"; font-size: 10px; line-height: .8em; right: .6em; top: 35%; } .custom-dropdown::before { width: 2em; right: 0; top: 0; bottom: 0; border: 1px solid #000; } .custom-dropdown__select[disabled] { color: rgba(0, 0, 0, .3) } .custom-dropdown.custom-dropdown--disabled::after { color: rgba(0, 0, 0, .1) } .custom-dropdown--white::before { background-color: #999; } .custom-dropdown--white::after { color: #000; transition: all ease .5s; } .custom-dropdown--white:hover::after { color: #ff0; } .custom-dropdown--emerald::after, .custom-dropdown--red::after { color: #fff } .custom-dropdown--emerald::before { background-color: #1aa181 } .custom-dropdown--red::before { background-color: #d53a22 } @-moz-document url-prefix() { .custom-dropdown__select { padding-right: .9em } .custom-dropdown--large .custom-dropdown__select { padding-right: 1.3em } .custom-dropdown--small .custom-dropdown__select { padding-right: .5em } } } /* FEATURED BOOKS */ .s-feature-list { width: 100%; padding: 0; margin: auto; text-align: center; position: relative; bottom: 70px; height: 100%; z-index: 789; } @media only screen and (min-width: 768px) { .s-feature-list { bottom: 100px; } } .s-feature-list ul { list-style: none; margin: 10px auto; } .s-feature-list li { display: inline; margin-right: 25px; overflow: hidden; position: relative; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .s-feature-list li:last-child { padding-right: 0; } .s-feature-list img { overflow: hidden; vertical-align: bottom; border-radius: .25rem; width: 80px; height: 107px; background: transparent url(img/book.png) top left no-repeat; background-size: cover; } .s-feature-list li:hover { transform: scale(.975); } .s-feature { color: #ccc; -webkit-transition: color 1s ease; -moz-transition: color 1s ease; -o-transition: color 1s ease; -ms-transition: color 1s ease; transition: color 1s ease; } .s-feature:visited, .s-feature:active, .s-feature:hover { color: #fff; } .s-feature-content { margin: 0 auto; text-align: center; z-index: 980; } .s-feature-title { background-color: #19A181; color: #fff; width: 100%; font-size: 10px; position: absolute; text-transform: uppercase; text-align: center; bottom: 8px; left: 0; z-index: 999; padding: 5px; white-space: pre-line; overflow: hidden; } .jcarousel-skin-tango .jcarousel-container { margin: 0 auto; } .jcarousel-skin-tango .jcarousel-direction-rtl { direction: rtl; } .jcarousel-skin-tango .jcarousel-container-horizontal { width: 100%; padding: 0 40px; } @media only screen and (min-width: 768px) { .jcarousel-skin-tango .jcarousel-container-horizontal { width: 89%; padding: 0px 85px; } } .jcarousel-skin-tango .jcarousel-clip { overflow: hidden; } .jcarousel-skin-tango .jcarousel-clip-horizontal { width: 100%; height: 107px; top: 60px; } .jcarousel-skin-tango .jcarousel-item { border-radius: .25rem; width: 80px; height: 107px; border: 1px solid rgba(0, 0, 0, .5); position: relative; } .jcarousel-skin-tango .jcarousel-item:before { content: ''; background: transparent url(img/book-side.png) top center no-repeat; width: 10px; height: 100%; position: absolute; z-index: 2002; left: -3px; } .jcarousel-skin-tango .jcarousel-item-horizontal { margin-left: 7.5px; margin-right: 7.5px; } .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal { margin-left: 10px; margin-right: 0; } .jcarousel-skin-tango .jcarousel-item-placeholder { background: #fff; color: #000; } .jcarousel-skin-tango .jcarousel-next-horizontal { position: absolute; top: 110px; right: 5px; width: 32px; height: 32px; } .jcarousel-skin-tango .jcarousel-next-horizontal:before { content: '\f054'; font-family: FontAwesome; font-size: 24pt; color: rgba(255, 255, 255, 0.5); -webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .jcarousel-skin-tango .jcarousel-prev-horizontal:before { content: '\f053'; font-family: FontAwesome; font-size: 24pt; color: rgba(255, 255, 255, 0.5); -webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .jcarousel-skin-tango .jcarousel-next-horizontal:hover:before { color: #fff; cursor: pointer; margin-left: 5px; } .jcarousel-skin-tango .jcarousel-prev-horizontal:hover:before { color: #fff; cursor: pointer; margin-right: 5px; } .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal { left: 5px; right: auto; } .jcarousel-skin-tango .jcarousel-next-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-horizontal:focus { background-position: -32px 0; } .jcarousel-skin-tango .jcarousel-next-horizontal:active { background-position: -64px 0; } .jcarousel-skin-tango .jcarousel-next-disabled-horizontal, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus, .jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active { cursor: default; background-position: -96px 0; } .jcarousel-skin-tango .jcarousel-prev-horizontal { position: absolute; top: 110px; left: 5px; width: 32px; height: 32px; cursor: pointer; } .jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal { left: auto; right: 5px; } .jcarousel-skin-tango .jcarousel-prev-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-horizontal:focus { background-position: -32px 0; } .jcarousel-skin-tango .jcarousel-prev-horizontal:active { background-position: -64px 0; } .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus, .jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active { cursor: default; background-position: -96px 0; } /* BIBLIOGRAPHY */ .label { border-radius: .25rem; font-weight: 300; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; } .label-important { background-color: #f00; } /* Biblio Record */ .biblioRecord { z-index: 0; position: relative; border-radius: .4375rem; box-shadow: 0 0.3rem 1.525rem -0.375rem rgba(0, 0, 0, 0.1); background: #fff; border: 1px solid transparent; float: left; width: 100%; padding: 0; min-height: 138px; text-align: left; margin-bottom: 15px; transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; } @media only screen and (min-width: 768px) { .biblioRecord { width: calc(50% - 7.5px); padding: 10px; min-height: 440px; text-align: center; } .biblioRecord:nth-of-type(odd) { margin-right: 0; float: right; margin-bottom: 15px; } } .biblioRecord:hover { box-shadow: none; border-color: #f2f2f2; -webkit-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .biblioRecord:last-child { margin-right: 0; } .biblioRecord .cover-list { background: transparent url(img/book.png) top left no-repeat; background-size: cover; clear: both; display: inline-flex; background-color: #FFF; border-radius: .4375rem; -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); position: relative; width: 100px; height: 138px; margin: 0 10px 0 0; float: left; overflow: hidden; transition: all 500ms ease; -webkit-transition: all 500ms ease; opacity: 1; } @media only screen and (min-width: 768px) { .biblioRecord .cover-list { width: 120px; height: 165px; margin: 30px auto 15px auto; float: none; } } .biblioRecord .cover-list:hover { opacity: .9; transform: scale(.975) } .biblioRecord .cover-list .img-thumbnail { padding: 0; border-radius: .25rem; height: 166px; width: 121px; border: none; vertical-align: top; font-size: 0; top: -1px; left: -1px; bottom: -1px; right: -1px; position: absolute; z-index: 1; } .biblioRecord .cover-list:before { content: ''; background: transparent url(img/book-side.png) top center no-repeat; width: 10px; height: 100%; position: absolute; z-index: 2002; left: -2px; } .biblioRecord .cover-list:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; -webkit-box-shadow: inset 4px 0px 10px -4px rgba(0, 0, 0, 0.3), inset 0 1px 0 0 rgba(0, 0, 0, 0.2), inset 0 2px 0 0 rgba(255, 255, 255, 0.2); box-shadow: inset 4px 0px 10px -4px rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(0, 0, 0, 0.2), inset 0 2px 0 0 rgba(255, 255, 255, 0.2); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(50%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0))); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%); background: -webkit-gradient(linear, top left, bottom left, from(rgba(255, 255, 255, 0.2)), color-stop(50%, rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%); } .biblioRecord .detail-list h4 { font-size: 12pt; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; white-space: nowrap; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 2.8em; line-height: 1.4em; margin-right: 10px; margin-top: 4px; } @media only screen and (min-width: 768px) { .biblioRecord .detail-list h4 { margin: 0; font-size: 14pt; white-space: normal; } } .biblioRecord .author { font-family: Georgia, serif; font-size: 10pt; font-style: italic; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; max-height: 1em; line-height: 1em; margin-bottom: 5px; } @media only screen and (min-width:768px) { .biblioRecord .author { margin-bottom: 10px; margin-top: 10px; } } .biblioRecord .author-name { padding: 0; margin-top: 0; } .biblioRecord .subItem { position: absolute; float: right; bottom: -6px; right: 4px; } @media only screen and (min-width: 768px) { .biblioRecord .subItem { position: relative; float: none; bottom: 0; } } .biblioRecord .detailLink, .biblioRecord .xmlDetailLink, .biblioRecord .citationLink { display: none; font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; -webkit-transition: all 500ms; transition: all 500ms; padding: 3px 10px; border-radius: 50px; margin-right: 2px; background-color: #6c757d; color: #fff; } @media only screen and (min-width: 768px) { .biblioRecord .detailLink, .biblioRecord .xmlDetailLink, .biblioRecord .citationLink { display: inline; padding: 3px 10px; } } .biblioRecord .detailLink:hover, .biblioRecord .xmlDetailLink:hover, .biblioRecord .citationLink:hover { background-color: #000; color: #fff; } .customField { font-size: 8pt; line-height: 14pt; text-align: left; padding: 0 } @media only screen and (min-width: 768px) { .customField { text-align: center; } } /* BiblioRecord Social Icon */ .biblioRecord .share-buttons { list-style: none; margin: 0 auto; text-align: left; font-size: 8px; text-transform: uppercase; letter-spacing: 2px; position: relative; padding-bottom: 0px; left: 0; } @media only screen and (min-width:360px) { .biblioRecord .share-buttons { display: inline-block; left: -40px; text-align:center; } } @media only screen and (min-width:768px) { .biblioRecord .share-buttons { display: inline-block; left: -20px; text-align:center; } } .biblioRecord .share-buttons li { display: inline; padding-right: 5px; opacity: 1; transition: all 500ms ease; } .biblioRecord .share-buttons li:hover { opacity: .5 } .biblioRecord .share-buttons li:not(:first-child) { display: inline; padding-right: 3px; } .biblioRecord .share-buttons li:last-child { padding-right: 0; } .biblioRecord .share-buttons li img { width: 14px; height: 14px; border-radius: 10px; } @media only screen and (min-width:768px) { .biblioRecord .share-buttons li img { width: 18px; height: 18px; } } /* Biblio List Form Checker */ .biblioMarkFormAction input { display: block; width: 100%; border: none; padding: .625rem 0; margin-left: -10px; -webkit-transition: all .5s ease; transition: all .5s ease; } @media only screen and (min-width: 768px) { .biblioMarkFormAction input { width: calc(100% + 13px); } } .biblioMarkFormAction input, .biblioRecord .biblioCheck+label { background: #007bff; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #fff; cursor: pointer; box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(0, 123, 255, 0.9); } .biblioRecord .biblioCheck { position: absolute; top: 10px; right: 10px; z-index: -1; display: none } .biblioMarkFormAction { padding: 10px 0; display: block; margin-right: -8px; } @media only screen and (min-width:768px) { .biblioMarkFormAction { margin-right: 5px; } } .biblioMarkFormAction:first-child { margin-bottom: 7px } .biblioMarkFormAction:last-child { margin-bottom: 0; } .biblioMarkFormAction input { border: none; padding: 5px 26px; margin-left: -10px; -webkit-transition: all .5s ease; transition: all .5s ease } .biblioMarkFormAction input:hover, .biblioRecord .biblioCheck+label:hover, .biblioRecord .biblioCheck:checked+label { color: #fff; background-color: #2792ff; box-shadow: none; } /* Custom Checkbox BiblioInput */ .custom-checkbox { bottom: 0px; position: absolute; float: right; right: 10px; } .custom-checkbox input[type="checkbox"] { position: relative; width: 32px; height: 16px; -webkit-appearance: none; background: #999; outline: none; border-radius: 16px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); transition: .5s; border: 0 !important; cursor: pointer; } .custom-checkbox input[type="checkbox"]:hover { background-color: rgba(0, 0, 0, .2) } .custom-checkbox input:checked[type="checkbox"] { background: #007bff; } .custom-checkbox input[type="checkbox"]:before { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 16px; top: -1px; left: -1px; background: #fff; transform: scale(1.1); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5), inset 0 0 1px rgba(0, 0, 0, 0.1); transition: .5s; } .custom-checkbox input:checked[type="checkbox"]:before { left: 16px; } /* PAGING BUTTON */ .biblioPaging, .pagingList { width: 100%; margin: 0 auto 5px 2px; display: inline-block; } .pagingList b, .pagingList a { background: #fff; box-shadow: 0 0 1.525rem rgba(0, 0, 0, 0.1); border-radius: .25rem; color: #000; display: inline; margin: 0 5px 5px -9px; padding: 8px 12px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; -webikit-transition: .5s ease-in-out; transition: .5s ease-in-out; border: 0; } .pagingList a:hover, .pagingList b { box-shadow: none; background: #6c757d; color: #fff; } /* DETAIL RECORD */ .s-detail .cover { height: 250px; max-width: 185px; overflow: hidden; border-radius: .25rem; background: transparent url(img/book.png) top left no-repeat; background-size: cover; background-color: transparent; float: none; clear: both; display: table; margin: 10px auto; -webkit-box-shadow: 0 2px 7.68px 0.32px rgba(0, 0, 0, 0.2), 0 12px 26px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 2px 7.68px 0.32px rgba(0, 0, 0, 0.2), 0 12px 26px 0 rgba(0, 0, 0, 0.2); position: relative; } .s-detail .cover:before { content: ''; background: transparent url(img/book-side.png) top center no-repeat; width: 10px; height: 100%; position: absolute; z-index: 2002; } @media only screen and (min-width: 768px) { .s-detail .cover { float: right; margin: 50px auto 0 20px; } } .s-detail-type { padding: 20px 0 0 0; margin: 0 auto; width: 100%; text-align: center; font-size: 10pt; } @media only screen and (min-width: 768px) { .s-detail-type { font-size: 12pt; padding: 0; margin: 0; width: auto; text-align: left; } } .s-detail .share-buttons { font-size: 8px; position: relative; padding-top: 0; text-align: center; left: -15px; z-index: 5; } @media only screen and (min-width:768px) { .s-detail .share-buttons { text-align: left; padding-top: 10px; left: -38px; } } .s-detail .share-buttons li { display: inline; list-style: none; opacity: 1; transition: all 500ms ease; } .s-detail .share-buttons li:not(:first-child) { padding-right: 3px; } .s-detail .share-buttons li:first-child { display: none; } .s-detail .share-buttons li:not(:first-child) img { width: 18px; height: 18px; border-radius: 10px; } .s-detail .share-buttons li:hover { opacity: .75 } .s-detail .s-detail-abstract p { display: block; text-align: justify; } .s-detail .s-detail-abstract { width: 100%; font-family: Raleway, serif; line-height: 1.6em; font-size: 11pt; } .s-detail .s-detail-abstract:empty { display: none; } .s-detail .cover img { background-size: 100%; height: 250px; max-width: 185px; } .s-detail .s-detail-title { font-family: Georgia, serif; font-weight: 900; font-size: 20px; text-align: center; line-height: 24pt; margin-top: 20px; margin-bottom: 20px; } @media only screen and (min-width: 768px) { .s-detail .s-detail-title { font-size: 24px; text-align: left; margin-bottom: 60px; } } .s-detail h4 { font-size: 20px; margin-bottom: 20px; } .s-detail .form-horizontal { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } .s-detail .form-horizontal .control-group { margin: 0; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid-column; display: table; } .control-label { font-size: 8px; text-transform: uppercase; letter-spacing: 4px; width: 100%; display: inline-block; width: 500px; padding-top: 10px; padding-bottom: 10px; } .s-detail-author { font-family: Georgia, serif; text-align: center; } @media only screen and (min-width:768px) { .s-detail-author { text-align: left } } .s-detail-author a:first-child:before, .s-detail-author a:before { padding-right: 5px; font-family: FontAwesome; font-style: normal; font-weight: normal; content: "\f2be"; font-size: 14px; } .s-detail-author a:before { margin-left: 10px; } .s-detail-author a:first-child:before{ margin-left: 0; } .s-detail-author br { display: none; } .s-table { border-width: 0; border-collapse: collapse; margin: 15px; padding: 5px 10px; line-height: 2; width: 96%; border-spacing: 0; font-size: 14px; border: 1px solid #eee; } .s-table td, .s-table th { vertical-align: top; padding-top: 8px; border-width: 0; padding-bottom: 0; } .s-detail .table td, .s-detail .table th { padding: .3rem; line-height: 20px; } .nav-tabs .nav-link { border-bottom: 0 !important } .s-table th { font-weight: normal; text-align: right; text-transform: capitalize; vertical-align: middle; color: #333; padding: 0px 10px; width: 120px; border-bottom: 1px solid #fff; background: #f2f2f2; } .s-table td { border-collapse: collapse; margin: 1.5em 0; padding: 5px 10px; border-bottom: 1px solid #eee; border-left: 1px solid #eee; } .labels { width: 48px; display: inline-block; position: absolute; top: -5px; right: -5px; z-index: 1099; } .attachList { position: relative; padding: 0; } .attachment-pdf, .attachment-audio-video, .attachment-audio-audio, .attachment-url-list, .attachment-image { position: relative; list-style: none; list-style-image: none !important; margin: -1px 0 0 0; border: 1px solid #dee2e6; padding: 6px 10px; font-size: 14px; line-height: 18pt; vertical-align: middle; } .attachment-pdf:before, .attachment-audio-video:before, .attachment-audio-audio:before, .attachment-url-list:before, .attachment-image:before { position: absolute; right: 10px; top: 10%; font-family: 'FontAwesome'; display: block; color: #20b390; font-size: 18px; } .attachment-pdf:before { content: "\f1c1"; } .attachment-image:before { content: "\f1c5"; } .attachment-audio-audio:before { content: "\f1c7"; } .attachment-audio-video:before { content: "\f1c8"; } .attachment-url-list:before { content: "\f1c9"; } .s-detail .nav-tabs { border: none!important; } .s-detail .nav-tabs .nav-link { padding: 0 8px; font-size: 14px; margin-right: 4px; transition: .5s ease; background-color: #e4e4e4; border-radius: .4375rem .4375rem 0 0; border: none!important; color: #333; box-shadow: 0 -6px 1.525rem -0.375rem rgba(0, 0, 0, 0.1); } .s-detail .nav-tabs .nav-link:hover { background-color: #343a40; color: #fff; box-shadow: none; } .s-detail .nav-tabs .nav-link.active { background-color: #fff; color: #111; cursor: default; box-shadow: 0 -6px 1.525rem -0.375rem rgba(0, 0, 0, 0.1)!important; } #detailContent{ background: #fff; border-top: 0; border-radius: 0 0 .4375rem .4375rem; padding: 3px 15px; box-shadow: 0 1px 1.525rem -0.375rem rgba(0, 0, 0, 0.1); min-height: 50px; } /* Comments Form */ .comments { padding-top: 10px; padding-bottom: 10px; } .comment-found { font-size: 14px; margin: 20px 0 10px 0; color: #dc3545; } @media only screen and (min-width:768px) { .comment-found { margin-left: 15px } } .comment-member { font-size: 12px; color: #6993b8; line-height: 20px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dashed #ccc; } .comment-content { margin-bottom: 5px; display: inline-block; font-size: 14px; line-height: 30px; } .comment-content:before, .comment-content:after { color: #6993b8; font-family: Georgia, "Times New Roman", Times, serif; font-weight: bold; font-style: normal; overflow: hidden; } .comment-content:before { font-size: 30px; content: '“'; margin-right: 10px; padding-top: 10px; display: inline-block; height: 30px } .comment-content:after { font-size: 16px; content: '”'; margin-left: 10px; display: inline; } .comment-form textarea { width: 100%; padding: 5px 10px; border: 1px solid rgba(0, 0, 0, 0.125); transition: all 500ms; border-radius: .25rem; } .comment-form textarea:focus { border-color: #777; } .comment-form .button { margin-top: 1rem; border: none; cursor: pointer; background: #333; color: #fff; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; padding: 5px; min-width: 120px; border-radius: .25rem; float: right; transition: background-color 500ms; } .comment-form .button:hover { background: #111; } /* LIBRARIAN */ .librarian { position: relative; font-size: 14px; line-height: 1.5; float: left; width: 100%; padding: 10px 20px; min-height: 423px; text-align: center; margin-bottom: 15px; margin-right: 15px; background: #fff; border-radius: .4375rem; box-shadow: 0 0.3rem 1.525rem -0.375rem rgba(0, 0, 0, 0.1); } .librarian:last-child { margin-bottom: 0 } @media only screen and (min-width:768px) { .librarian { width: calc(50% - 7.5px); } .librarian:nth-of-type(even) { margin-right: 0; float: left; margin-bottom: 15px; } } .librarian .span2 div, .librarian-image { width: 125px; height: 125px; overflow: hidden; border-radius: 50%; margin: 20px auto; border: solid 2px #fff; box-shadow: 0 0.3rem 1.525rem -0.375rem rgba(0, 0, 0, 0.2); } .librarian img { width: 122px; } .librarian .key { font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: #555; } .librarian .key+div { border-bottom: dashed 1px #e4e4e4; padding-bottom: 15px; margin-bottom: 5px; } .librarian div:empty:before { content: '-'; } .librarian-social { list-style: none; margin: 0; padding: 0; } /* MEMBER AREA */ .tagline { font-size: 2rem; border-bottom: dashed 1px #e4e4e4; padding-top: 20px; padding-bottom: 15px; margin-bottom: 20px; } .tagline:first-child { padding-top: 0; } .loginInfo { padding-bottom: 1.5rem; } .loginInfo .login_input input { padding: 5px 10px; border: 2px solid #ccc; transition: 500ms all; background: #fff; border-radius: .25rem; color: #333; width: 100%; } @media only screen and (min-width: 768px) { .loginInfo .login_input input { width: 65%; } } .loginInfo .login_input input:focus { border-color: #777; } .memberButton { border-radius: .25rem; border: 0 !important; background-color: #007bff; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; line-height: 1.5; white-space: nowrap; color: #fff; padding: 10px 20px; -webkit-transition: 500ms ease; transition: 500ms ease; cursor: pointer; margin-top: 20px; box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(0, 123, 255, 0.9); } .memberButton:hover { background-color: #000; background-color: #2792ff; box-shadow: none; } .loginInfo .fieldLabel { font-size: 10pt; padding: 1rem 0 0 0; color: #555; letter-spacing: 1px; } .memberBasketList, .memberDetail { border: none; } .memberDetail .alterCell, .memberDetail .alterCell2 { display: flex; } @media only screen and (min-width: 768px) { .memberDetail .alterCell, .memberDetail .alterCell2 { display: table-cell; } } .memberLoanList, .memberDetail, .memberBasketList{ width: 100% } .memberDetail .alterCell { background-color: rgba(0, 0, 0, .05); font-size: 12px; letter-spacing: 1px; padding: 0px 15px; color: #000 !important; width: auto !important; text-align: right; border-color: rgba(0, 0, 0, .05); } .memberDetail .alterCell2 { border-color: rgba(0, 0, 0, .05); padding: 0px 15px; background-color: transparent; } .memberLoanList { border: none; } .memberBasketList .alterCell, .memberLoanList .alterCell { background-color: rgba(0, 0, 0, .05) !important; } .memberBasketList .alterCell2, .memberLoanList .alterCell2 { background-color: transparent; } .memberBasketList .alterCell, .memberBasketList .alterCell2, .memberLoanList .alterCell, .memberLoanList .alterCell2 { border: rgba(0, 0, 0, .05); padding: 10px; font-size: 10pt; } .dataListHeader { background: #6c757d; color: #fff; letter-spacing: 1px; font-size: 10px; font-weight: normal !important; text-align: center; line-height: 16px; text-transform: uppercase; } .memberInfoHead { font-size: 16px; margin-top: 20px; font-weight: bold; } @media only screen and (min-width:768px) { .memberInfoHead { font-size: 20px; } } .dataListHeader a { color: #fff; display: block; width: 100%; padding: 8px 5px; transition: all 500ms; border-radius: .25rem; } .dataListHeader a:hover { background: #111; } .memberDetail #loginButton { border-radius: .25rem; border: none; text-transform: uppercase; line-height: 1.5; white-space: nowrap; color: #fff; outline: none; cursor: pointer; padding: 10px !important; background: #dc3545; font-size: 12px; margin: 8px 8px 8px -8px; width: 100%; float: right; letter-spacing: 1px; -webkit-transition: all 500ms ease; transition: all 500ms ease; box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(220, 53, 69, 0.9); } @media only screen and (min-width:768px) { .memberDetail #loginButton { max-width: 200px !important; margin: 8px; } } .memberDetail #loginButton:hover, .memberDetail #loginButton:focus, .memberDetail #loginButton.focus { background-color: #ff5a6a; box-shadow: none; } .memberDetail input { width: 100% !important; transition: all 500ms; margin: 5px -8px; font-size: 12px; line-height: 24px; padding: 4px 10px !important; } .memberBasketInfo { font-size: 12pt; } .memberLoanListInfo a, .memberLoanHistInfo a, .memberBasketAction a { color: #fff; padding: 6px 10px; display: inline-block; margin: 5px auto 0 auto; line-height: 12px; font-size: 12px; border-radius: .15rem; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .memberLoanListInfo a, .memberLoanHistInfo a, .reserve { background: #28a745 !important; box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(40, 167, 69, 0.9); } .clearAll { background: #dc3545 !important; box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(220, 53, 69, 0.9); } .clearOne { background: #fd7e14 !important; box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(253, 126, 20, 0.9); } .memberBasketAction a { background: #dc3545; } .memberLoanListInfo a:hover, .memberLoanHistInfo a:hover, .memberBasketAction a:hover { background: #000 !important; box-shadow: none; } .alert-member-login { background: transparent; text-align: left !important; border: none !important; box-shadow: none; } #memberLogout { color: #fff; background-color: #dc3545; font-size: 12px; letter-spacing: 2px; margin-top: 10px; float: right; font-weight: normal; padding: 4px; text-align: center; width: 120px; border-radius: .25rem; transition: all 500ms ease; box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(220, 53, 69, 0.9) } #memberLogout:hover { background-color: #ff5a6a; box-shadow: none; } #memberLoginInfo { color: #333; padding: 0; margin: 0; display: table; width: 100% } #memberLoginInfo strong { display: block; background-clip: border-box; border-radius: .4375rem; text-align: center; margin: 10px auto; padding: 10px; background: rgba(0, 0, 0, .1); color: #333; box-shadow: 0 0.3rem 1.525rem -0.375rem rgba(0, 0, 0, 0.1); } #memberLoginInfo em, #memberLoginInfo strong { color: #0E83CD; font-style: normal; font-weight: bold; letter-spacing: 1px; } #memberChangePassword .memberDetail .key, #memberChangePassword .memberDetail .value { width: 100% !important; background-color: transparent !important; display: flex; } @media only screen and (min-width: 768px) { #memberChangePassword .memberDetail .key { width: 25% !important; display: table-cell; } } @media only screen and (min-width: 768px) { #memberChangePassword .memberDetail .value { width: 75% !important; display: table-cell; } } #memberChangePassword .memberDetail .key, #memberChangePassword .memberDetail .value, #memberChangePassword .memberDetail .alterCell, #memberChangePassword .memberDetail .alterCell2 { border: 0; } /* ADMIN LOGIN AREA */ #loginForm { padding: 20px 20px 70px 20px; position: relative; margin: 40px 15px; background: rgba(255, 255, 255, .65); border: none; border-radius: .4375rem; color: #333; box-shadow: 0 0 2rem rgba(0, 0, 0, .175); } @media only screen and (min-width: 768px) { #loginForm { width: 300px; margin: 15px auto 50px auto; } } .s-login-content { position: relative; } #loginForm .heading1 { text-align: left; letter-spacing: 1px; font-size: 13px; text-transform: normal; color: #333; } .s-login-content img { margin: 80px auto 20px auto; width: 64px; } #loginForm #userName { margin-bottom: 20px !important; } #loginForm input[type="password"], #loginForm #userName { padding: 5px 10px; font-size: 15pt; width: 100%; color: #000; margin: 5px auto; text-align: left; border: solid 2px #fff; border-radius: .25rem; background: rgba(255, 255, 255, .5); outline: 0; transition: 500ms border-color ease; } #loginForm input[type=text].login_input, #loginForm input[type=password].login_input { color: #333; border-radius: .25rem; } #loginForm input[type=text]:focus, #loginForm input[type=password]:focus { outline: 0; } #loginForm input[type=text]:focus:-webkit-autofill, #loginForm input[type=password]:-webkit-autofill { box-shadow: 0 0 5px #000 inset; -webkit-box-shadow: 0 0 5px #000 inset; } #loginForm input[type="password"]:focus, #loginForm #userName:focus, #loginForm input[type="password"].focus, #loginForm #userName.focus { border-color: #555; background: #fff; outline: none; } .login_input { position: relative; } .loginButton { border-radius: .25rem; color: #fff; background-color: #007bff; border: none !important; text-align: center; width: 100%; float: none; clear: both; -webkit-transition: all 500ms; transition: all 500ms; letter-spacing: .2em; text-transform: uppercase; font-size: 12px; cursor: pointer; position: relative; padding: 12px 0; margin-top: 15px; box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(0, 123, 255, 0.9); } @media only screen and (min-width: 768px) { .loginButton { width: 35%; float: right; padding: 10px 0 !important; } } .loginButton:hover { background-color: #000; background-color: #2792ff; box-shadow: none; } .homeButton { position: absolute; padding: 0; border: none !important; box-shadow: none; background: transparent; color: #1D628B; text-transform: normal; font-size: 12px; left: 20px; bottom: 20px; transition: all 500ms; -webkit-transition: all 500ms; cursor: pointer; letter-spacing: 1px; } .homeButton:hover { color: #111; text-decoration: underline; } .header-login-admin { text-align: center; margin-top: 0; margin-bottom: 40px; transition: all 500ms ease-in-out; } @media only screen and (min-width: 768px) { .header-login-admin { margin-top:40px; } } #loginForm #recaptcha_area { padding: 20px 0; position: relative; } #loginForm #recaptcha_area table { border: none !important; } #loginForm .recaptchatable .recaptcha_image_cell { background-color: #fff; height: 55px !important; padding: 0px 7px !important; width: 220px; } #loginForm .recaptchatable .recaptcha_image_cell center img { height: 55px !important; width: 213px; } #loginForm .recaptchatable #recaptcha_image { border: medium none !important; float: left; margin: auto; width: 215px !important; } #loginForm .recaptchatable #recaptcha_response_field { left: -8px; text-align: center; position: absolute; top: -20px; width: 255px !important; padding: 10px; border-color: #eee !important; border-radius: .25rem; } #loginForm #recaptcha_logo, #recaptcha_tagline { display: none; } #loginForm #recaptcha_area td { border: 0 none !important; border-collapse: collapse !important; float: left; margin: 0 !important; vertical-align: middle !important; } #loginForm .recaptchatable .recaptcha_only_if_privacy a { position: absolute; top: 0px; float: none !important; text-align: center !important; width: 255px !important; letter-spacing: 4px; text-transform: uppercase; font-size: 8pt !important; color: #000; } /* VISITOR COUNTER */ .s-visitor { margin-top: 100px; width: 100%; margin-bottom: 100px } @media only screen and (min-width: 768px) { .s-visitor { width: 600px; } } .card-visitor { border-radius: .4375rem; box-shadow: 0 0.3rem 1.525rem -0.375rem rgba(0, 0, 0, 0.1); } .s-visitor header span { font-size: 8; font-weight: light; } .s-visitor input { border: 2px solid #fff; background-color: rgba(255, 255, 255, .5); } .s-visitor header h1 { text-transform: uppercase; } .s-visitor-photo img { vertical-align: middle; text-align: center; width: 140px !important; height: 140px !important; border: 4px solid #fff; } .btn-visitor { padding: 10px 20px; width: 86px; border: 0; color: #fff; font-size: 18px; background: #0E83CD; -webkit-transition: all 500ms ease; transition: all 500ms ease; border-radius: .25rem; letter-spacing: 3px; box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(0, 123, 255, 0.9); } .btn-visitor:hover { background: #000; box-shadow: none; } #visitorCounterPhoto { margin: 0; } .s-visitor button { width: 100%; letter-spacing: 2px; text-transform: uppercase; } @media only screen and (min-width:768px) { .s-visitor button { width: 200px; } } /* NEWS */ .news { z-index: 0; position: relative; border-radius: .4375rem; background: #fff; float: left; width: 100%; padding: 0; min-height: 140px; text-align: left; margin-bottom: 15px; transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; box-shadow: 0 0.3rem 1.525rem -0.375rem rgba(0, 0, 0, 0.1); border: 1px solid transparent; } @media only screen and (min-width: 768px) { .news { width: calc(50% - 7.5px); padding: 10px; min-height: 400px; margin-bottom: 15px; } .news:nth-of-type(odd) { margin-right: 0; float: right; margin-bottom: 15px; } } .news:last-child { margin-right: 0; margin-bottom: 0 } .news:hover, .news:focus, .news.focus { box-shadow: none; border-color: #f2f2f2; transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; } .btn-news { transition: all 500ms ease-in-out; } .btn-news:hover { margin-left: 3px; } /* CHAT */ .s-pchat { position: relative; left: -25px; z-index: 9; } @media only screen and (min-width: 768px) { .s-pchat { position: absolute; left: auto; right: 55px; margin: 0; top: -10px; } } .s-pchat a { display: block; color: #000; background-color: #fff; width: 30px; border-radius: .25rem; padding: 3px 0 0 8px; height: 30px; margin: 20px auto 0 auto; } .s-pchat-toggle { display: block; width: 48px; height: 48px; line-height: 48px; cursor: pointer; border-radius: 50%; position: fixed; right: 10px; bottom: 10px; color: #333!important; background: #fff; font-size: 20px; transition: all 500ms ease-in-out; text-align: center; box-shadow: 0 0 1.525rem rgba(0, 0, 0, 0.1); } .s-pchat-toggle:hover { background: #343a40; color: #fff!important; margin-bottom: 2px; } #show-pchat { right: 15px; bottom: 75px; } #show-pchat.scroll{ bottom:15px; } .s-chat { z-index: 991; position: fixed; bottom: 75px; right: -400px; -webkit-transition: all 500ms ease 0s; -moz-transition: all 500ms ease 0s; transition: all 500ms ease 0s; text-align: left; width: 275px; background: #fff; padding: 0; border-radius: .4375rem; box-shadow: 0 0 1.525rem rgba(0, 0, 0, 0.1); } .s-chat-header { text-align: center; display: block; background-color: #343a40; border-radius: .4375rem .4375rem 0 0; width: 275px; padding: 21px 0; position: relative; font-size: 7pt; letter-spacing: 2px; text-transform: uppercase; color: #fff; } .s-chat-content { padding: 18px 20px; background: #fff; border-bottom: 1px solid #f4f4f4; } .s-chat-content label { padding: 10px 0; font-size: 10px; text-transform: uppercase; font-weight: bold; letter-spacing: 2px; color: #333; } .s-chat-content #log { overflow-x: hidden; overflow-y: auto; max-height: 200px; padding: 10px; width: 100%; border: 1px solid #e4e4e4; background: #f2f2f2; font-size: 12px; border-radius: .25rem; } .s-chat-content #log p { line-height: 1; padding-bottom: 5px; margin: 0; } .c1, .c6, .c11, .c16 { color: #3E966E !important; } .c2, .c7, .c12, .c17 { color: #F36C32 !important; } .c3, .c8, .c13, .c18 { color: #2A7BCC !important; } .c4, .c9, .c14, .c19 { color: #7C378A !important; } .c5, .c10, .c15, .c20 { color: #333 !important; } .s-chat-content textarea, #message { width: 100%; border: solid 2px #ccc; font-size: 12px; padding: 10px; transition: all 500ms; background: #fff; border-radius: .25rem; } #message:focus { border-color: #555; } .s-chat-content #log, .s-chat-content textarea { min-height: 200px; line-height: 24px; } .s-chat footer { font-size: 10px; padding: 8px 15px; } .s-maximize { bottom: 75px; right: 75px; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .s-chat .btn { background: #343a40; color: #fff; border-radius: .25rem; transition: all .5s; border: 1px solid transparent; box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(40, 40, 40, 0.9); margin-top: 15px; } .s-chat .btn:hover, .s-chat .btn:focus, .s-chat .btn.focus { background: #000 !important; box-shadow: none; } .s-chat hr { margin: 16px 0; border-style: dashed; border-color: #e4e4e4; } /* MISCELLANEOUS */ /* Cbox Overlay */ #colorbox{ box-shadow: 0 0.3rem 1.525rem -0.375rem rgba(0, 0, 0, 0.1); border-radius: .25rem; } #cboxOverlay { background: #111; opacity: 0.7; } #cboxTitle { bottom: 0px; border-radius: 0 0 10px 10px; position: absolute; padding: 20px 10px; background-color: #111; color: #fff; overflow: hidden; letter-spacing: 1px; text-transform: uppercase; font-weight: lighter; font-size: 10px; white-space: nowrap; border: 5px solid #fff; border-top: 0; } #cboxTopLeft, #cboxTopCenter, #cboxTopRight, #cboxMiddleLeft, #cboxContent, #cboxMiddleRight, #cboxBottomLeft, #cboxBottomCenter, #cboxBottomRight { background: url(none) transparent; } #cboxLoadedContent { border-radius: 10px; border: 5px solid #fff; } #cboxContent { min-height: 325px; } #cboxClose { position: absolute; bottom: 20px; right: 15px; background: none; width: 25px; height: 25px; text-indent: 0px; } #cboxClose:before { font-family: 'FontAwesome'; content: '\f00d'; font-size: 20px; padding-right: 20px; padding-left: 8px; color: #fff; transition: all .5s ease; } #cboxClose:hover:before { color: #ff0; } #cboxClose:hover { background-position: 0; } /* Labeled Button */ .btn-label { position: relative; left: -12px; display: inline-block; padding: 6px 12px; background: rgba(0, 0, 0, 0.15); border-radius: .25rem 0 0 .25rem } .btn-sm .btn-label { padding: .25rem .5rem; left: -.5rem; } .btn-labeled { padding-top: 0; padding-bottom: 0 } /* Social Side Menu */ .icon-bar { position: fixed; top: 35%; z-index: 985; } .icon-bar a { display: block; text-align: center; padding: 6px 10px; transition: all 0.5s ease-in-out; color: #fff!important; font-size: 16px; } .icon-bar a:hover { background-color: #000; } .facebook { background: #3B5998; color: #fff; } .twitter { background: #55ACEE; color: #fff; } .google { background: #DB4437; color: #fff; } .linkedin { background: #007bb5; color: #fff; } .youtube { background: #bb0000; color: #fff; } .instagram { background: #405DE6; color: #fff; } .rss { background-color: #ee802f; color: #fff; } /* Advanced Search Modal */ .modal, .modal-dialog { margin: 10 auto !important; padding: 0 !important; } @media only screen and (min-width: 768px) { .modal, .modal-dialog { padding: 0 !important; } } .modal-content { border-radius: .4375rem; box-shadow: 0 0 15px rgba(0, 0, 0, 0.25); border: 0; } .modal-body { padding: 0 1rem; } .modal-header { border-bottom: 0; } .modal-footer { border: 0; } .modal-title { font-size: 20px; letter-spacing: .1em; font-weight: 700; } .modal-body .label { letter-spacing: 1px; font-size: 10pt; margin-top: 10px; color: #333; text-transform: uppercase; } .modal .close { transition: all .5s ease; } .modal .close:hover { color: #111!important; } /* Cluster */ .cluster-list { list-style: none; margin: 0; padding: 0; } .cluster-title { font-weight: bold; font-size: 12pt; letter-spacing: 4px; text-transform: uppercase; border-bottom: solid 1px #eee; padding-bottom: 20px; } .cluster-list .cluster-item a { padding: 0; margin: 0; color: #000; font-size: 9pt; letter-spacing: normal; text-transform: none; border-bottom: solid 1px #eee; display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; position: relative; -webkit-transition: all 200ms ease; transition: all 200ms ease; } .cluster-list .cluster-item a:hover { color: blue; background-color: #eee; padding-left: 10px; } .cluster-item-count { position: absolute; right: 0; background-color: #333; color: #fff; min-width: 30px; text-align: center; padding: 2px 5px !important; line-height: normal; margin-top: 5px; } .itemList b { display: inline-block; padding: 2px 6px !important; border-radius: .25rem !important } /* Other Things */ .highlight { background: #930; color: #fff; } .s-alert { background-color: #eee; color: red; padding: 10px; text-align: center; } .errorBox { border: none; background-color: #dc3545; padding: 10px; color: #fff; position: relative; left: 0; width: 100%; text-align: center; display: block; border-radius: .4375rem; } .chromeframe { position: fixed !important; z-index: 9099; width: 100%; height: 100%; text-align: center; background-color: #fff; } /* Margin & Padding */ .margin-top-5 { margin-top: 5px !important } .margin-top-10 { margin-top: 10px !important } .margin-top-15 { margin-top: 15px !important } .margin-top-20 { margin-top: 20px !important } .margin-top-25 { margin-top: 25px !important } .margin-top-30 { margin-top: 30px !important } .margin-top-35 { margin-top: 35px !important } .margin-top-40 { margin-top: 40px !important } .margin-top-45 { margin-top: 45px !important } .margin-top-50 { margin-top: 50px !important } .margin-top-55 { margin-top: 55px !important } .margin-top-60 { margin-top: 60px !important } .margin-bottom-5 { margin-bottom: 5px !important } .margin-bottom-10 { margin-bottom: 10px !important } .margin-bottom-15 { margin-bottom: 15px !important } .margin-bottom-20 { margin-bottom: 20px !important } .margin-bottom-25 { margin-bottom: 25px !important } .margin-bottom-30 { margin-bottom: 30px !important } .margin-bottom-35 { margin-bottom: 35px !important } .margin-bottom-40 { margin-bottom: 40px !important } .margin-left-5 { margin-left: 5px !important } .margin-left-10 { margin-left: 10px !important } .margin-left-15 { margin-left: 15px !important } .margin-left-20 { margin-left: 20px !important } .margin-left-25 { margin-left: 25px !important } .margin-left-30 { margin-left: 30px !important } .margin-left-35 { margin-left: 35px !important } .margin-left-40 { margin-left: 40px !important } .margin-right-5 { margin-right: 5px !important } .margin-right-10 { margin-right: 10px !important } .margin-right-15 { margin-right: 15px !important } .margin-right-20 { margin-right: 20px !important } .margin-right-25 { margin-right: 25px !important } .margin-right-30 { margin-right: 30px !important } .margin-right-35 { margin-right: 35px !important } .margin-right-40 { margin-right: 40px !important } .rounded-custom { border-radius: .4375rem!important; } .rounded-circle { border-radius: 50%; } .shadow-custom { box-shadow: 0 0.3rem 1.525rem -0.375rem rgba(0, 0, 0, 0.1)!important; } .the-legend { font-size: 20px; width: auto; line-height: 22px; padding: 6px 10px; letter-spacing: 1px; border-radius: .25rem; background-color: #dc3545; } .bg-trans { background: rgba(255, 255, 255, .5)!important; }