/****************************************************************** Theme Name: Gratitude Wall Theme URI: https://digital.plucky.la Description: What is gratitude? The quality of being thankful; readiness to show appreciation for and to return kindness. Author: Plucky Author URI: https://www.plucky.la Version: 0.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: gratitude-wall ******************************************************************/ .sticky { } /* DO NOT EDIT THIS */ .gallery-caption { } /* THESE ARE USELESS */ .bypostauthor { } /* THEY ARE ONLY TO KEEP THEME CHECK HAPPY */ .wp-caption { } .wp-caption-text { } .screen-reader-text {} .alignright {text-align: right; } .alignleft { text-align: left; } .aligncenter {text-align: center; } .staffPhotoWrapper, .gratitude-lightbox-wrapper { margin-bottom: 20px; } .gratitude-lightbox-wrapper span.icon-wrapper-circle { transform: scale(0.75);margin: 4px -5px 0 0; width:40px!important; height:40px!important; padding:12px!important; } .gratitude-lightbox-wrapper .report-wrap { transform: scale(0.75); left: 4px; bottom: 4px; } button.btn.btn-link.report-btn { padding: 8px 10px; } /** Gratitude CSS **/ html, body { height:auto!important; min-height: 100%!important; min-height: 100vh!important; background-attachment: fixed; } html, body, * { font-family: 'Lato', sans-serif; } a, a:hover { text-decoration: none; } a.btn, .btn { background-color:lightgrey; } .btn-outline-success { border-color:lightgrey; color:darkslategray; } #gratitude-header input.form-control.rounded-left { border-radius: 5px 0 0 5px!important; margin-right: -5px; } #gratitude-header .btn.my-2.my-sm-0.rounded-right.text-uppercase { border-radius:0 5px 5px 0!important; } #product-heading { font-weight: bold; text-shadow:1px 2px 3px rgba(0,0,0,0.15); } #school-logo { max-height:40px; } #school-logo.x-small { max-height:25px; } #school-logo.small { max-height:35px; } #school-logo.regular { max-height:40px; } #school-logo.large { max-height:50px; } #school-logo.x-large { max-height:68px; } footer, footer a { font-size:11px; } #gratitude-info, #gratitude-info h4, #gratitude-info p, #slide-out-menu { color:#777777; } #gratitude-info p { font-size: 14px; } #slide-out-menu { background-color:#fff; color:#333333; box-shadow: -10px 0px 20px rgba(0,0,0,0.1); } #close-menu { position: absolute; top:20px; left:-18px; color:red; outline: none; background-color:#fff; padding:0; box-shadow:0 0 5px rgba(0,0,0,0.1);opacity:1!important; } #close-menu .fa { /*border:3px solid #fff!important; border-top:none; border-bottom:none;*/opacity:1!important; margin: 0 2px 0 2px!important; padding: 1px!important; } .pos-bottom {position: absolute; bottom: 0; /* border-bottom: 100px groove transparent; */ padding-bottom:50px; } .ekko-lightbox button.close, button.close span { color: #fff; background-color: red; border-radius: 7px; } .ekko-lightbox button.close { padding: 5px 9px!important; border:5px solid #fff; bottom: -60px; right:-3px; position: relative; z-index: 999; opacity: 1; } /** Theme Bootstrap Adjustments **/ h1, h2, h3, h4 { text-transform: uppercase; font-weight:bold; letter-spacing:0.15rem; } h1.message { text-align: center;font:70px/85px Lato;letter-spacing: 0px; color: #000000; opacity: 1; text-transform: capitalize!important; } #staff-directory h5 { font-size:0.9rem; margin-bottom:0; margin-top:5px; } #staff-directory h6 { font-size:0.7rem; } .btn, input.form-control { padding: .75rem 1rem; font-size: 0.75rem; } input.form-control { padding: 1.3rem 1rem; text-align: left; font: 14px/17px Lato; letter-spacing: 0px; color: #818A91; opacity: 1; } form label { text-align: left; font: 14px/17px Lato; letter-spacing: 0px; color: #373A3C; text-transform: capitalize; opacity: 1; margin-bottom: .2rem; } form span { text-align: center; font:14px/18px Lato; letter-spacing: 0px; color: #818A91; opacity: 1; display: inline-block; margin-top:10px; } .navbar-toggler { font-size:34px; } div#carouselOfExamples:before { content: ""; display: block; width: 100%; height: 100%; background: none transparent; position: absolute; z-index: 9; border: 5px solid #777777; } .carousel-inner { border: 5px solid transparent; font-size:14px; font-weight: normal; } ol.carousel-indicators { margin-bottom: 30px; } ol.carousel-indicators li { width: 10px; height: 10px; border-radius: 50%!important; background-color: transparent; border: 1px solid #fff; border-color:#fff!important; opacity:1; } ol.carousel-indicators li.active { background-color:#fff; } .jumbotron { border-radius:0; } a.btn:focus, .btn:focus, a.btn:active, .btn:active, .btn-outline-success:not(:disabled):not(.disabled).active, .btn-outline-success:not(:disabled):not(.disabled):active, .show>.btn-outline-success.dropdown-toggle, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle, .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus, .btn-outline-success.focus, .btn-outline-success:focus { outline: none!important; border-color: transparent!important; box-shadow:none!important } .report-btn { text-decoration: none!important; } .btn.report-btn:hover { background-color:#fff!important; } div.navbar-collapse.offcanvas-collapse { width: 280px; position: fixed; top: 0; right: 0; bottom: 0; height:100vh!important; transition:right 0.4s ease-out, opacity 0.2s ease-out; } div.navbar-collapse.offcanvas-collapse > div { height:100%; width:100%; } div.navbar-collapse.offcanvas-collapse.collapse:not(.show) { display:block; position: fixed; right:-300px; min-height:100vh; opacity:0; overflow:visible; transition-delay:0s!important; } div.navbar-collapse.offcanvas-collapse.collapse.show { /* display: none; */z-index:990; position: fixed; right:0; opacity:1; overflow:visible; transition-delay:0s!important; } .modal-dialog { } .modal-dialog, .modal-dialog * { /*background-color: transparent; border: none; text-shadow: none;*/ } .ekko-lightbox .modal-footer { text-align: left; color: #ffffff; justify-content: start; margin: -10px 0 25px 0; padding: 0.25rem 1.5rem; } .carousel-caption { right: 1%; bottom: 0; left: 1%; top:310px; } #bp_caption .bp-xc { display: none!important; } #bp_caption { opacity:1!important; font-size:1.45rem!important; padding-top:1.65rem!important; padding-bottom: 1.65rem!important; } #bp_caption { /*padding:0!important;*/background-color:#000!important;position: fixed!important; } .pos-rel #bp_caption { position:relative!important; } #bp_caption { font-size: 1em!important; font-weight: 100; line-height: 1.75em; padding: 20px 50px!important; background-color: rgba(0,0,0,0.85); } div#bp_container img { margin-top: 20px; } div#librarySelection { padding-bottom:50px!important; position:relative!important; padding-top:30px!important; } #bp_aud, #bp_container img, #bp_sv, #bp_vid { /*max-height: 80%!important; max-width: 86%!important;*/ } .page-template-gratitude-submission #bp_aud, .page-template-gratitude-submission #bp_container img, .page-template-gratitude-submission #bp_sv, .page-template-gratitude-submission #bp_vid, .page-template-message-submission #bp_aud, .page-template-message-submission #bp_container img, .page-template-message-submission #bp_sv, .page-template-message-submission #bp_vid, .page-template-memory-submission #bp_aud, .page-template-memory-submission #bp_container img, .page-template-memory-submission #bp_sv, .page-template-memory-submission #bp_vid { max-height:86%!important; max-width:100%!important; margin-top: 35px!important; } #bp_container>.bp-x { border-radius: 5px!important; background-color: red; opacity: 1!important; right: 5.5%!important; top: 7.5%!important; /*margin-right: -20px;*/ border: 2px solid #fff; } .icon-wrapper { height:80px; max-height:128px; text-align: center; background: url("assets/img/formBtn@2x.jpg") center top transparent; background-size: contain; background-repeat: no-repeat; border-radius:4px; color:#333; padding-top:15px; cursor:pointer; } .icon-wrapper span { color:#333; font-size:9px; position: relative; top:8px; text-transform: uppercase; } .icon-wrapper:hover { background-image: url("assets/img/formBtnSelected@2x.jpg"); } .icon-wrapper.selected { background-image: url("assets/img/formBtnSelected@2x.jpg"); } .icon-wrapper, .icon-wrapper span { background-image: none!important; background-color: #ccc; border: 1px solid #333; overflow: hidden; transition: all 0.3s ease; } .icon-wrapper span { border: none; width: 100%; padding: 5px 0; background-color: #eee; margin-top: 5px; border-top: 1px solid #333; } .icon-wrapper.selected, .icon-wrapper.selected span, .icon-wrapper:hover, .icon-wrapper:hover span { background-color:#333; border-color:#222; color:#fff; } .icon-wrapper.selected span, .icon-wrapper:hover span { background-color:#777; } input#gratitude_upload_nonce { background-image: url("assets/img/formBtnSelected@2x.jpg"); } .icon-wrap, .icon-wrap span.icon-wrapper-circle { display: block; float: left; position: relative; width: 38px; height: 38px; padding: 11px; } div.icon-wrap { padding:0!important; } div.icon-wrap span {margin:0!important; } div.left-header { float:left; width:80%; margin: 10px 0!important; } div.right-header { float: right; width: 15%; height: 100%; margin: 10px 0!important; font-size: 28px; text-align: right; } div#bp_wrapper { border-radius:4px; overflow: hidden; border-top: 4px solid #ccc; border-bottom: 4px solid #ccc; } div#bp_header { float:left!important; } div#bp_caption hr { margin: 0!important; border-color:#777; } div#bp_caption { position:relative!important; text-align: left; } div#bp_caption a { font-size:11px; text-transform: uppercase; } .fl { float:left; } .fr { float:right; } span.privacy-flag { position: absolute; z-index: 9999; padding: 5px 15px 5px 20px; margin-top: 20px; text-transform: uppercase; font-size: 12px; color: #fff; font-weight: bold; background-color: #333; } span.icon-wrapper-circle { line-height: 15px; font-size: 15px; width:50px; height:50px; text-align: center; position: absolute; z-index: 9999; padding:17px;right:25px; margin-top: 10px; color: #fff; font-weight: bold; background-color: #333;border-radius: 100%; } div#librarySelection img { cursor: pointer!important; pointer-events: all!important; } #selectionOptions img { max-width: 100%!important; height:auto!important; } .page-template-gratitude-submission .basicLightbox #bp_container img { margin-top:0!important; } header#gratitude-header { z-index:99999; top:-1px; } div#bp_container { width:100%; height:100%; max-height:80vh; float:none; margin:auto; text-align:center; /* position:absolute!important; */ } div#bp_sv iframe { /*max-height: 300px;*/ } .basicLightbox { z-index:9999999!important; } .basicLightbox #bp_container img { width:100%;height:100%;float:none; margin:auto; } div#bp_wrapper, div#bp_caption, div#bp_header { width:100%; color:#fff; background-color:#333!important; } div#bp_wrapper { background-color:#444!important; } div#bp_header { font-size: 1em!important; font-weight: 100; line-height: 1.75em; padding: 20px 50px!important; } div#bp_header, div#bp_header h5 { font-size:14px; text-transform:uppercase; } div#bp_header h5 { margin-bottom: 0; } div#bp_header h5:first-of-type { margin-bottom:5px; } #bp_wrapper { width:100%; height:100%; float:none; margin:auto; } .basicLightbox__placeholder, .basicLightbox__placeholder #bp_container > img, .basicLightbox__placeholder #bp_container > video, .basicLightbox__placeholder #bp_container > audio, .basicLightbox__placeholder #bp_container > canvas { max-width: 40vw; max-height: 50vh; width: auto; } .basicLightbox__placeholder #bp_container > img, .basicLightbox__placeholder #bp_container > video, .basicLightbox__placeholder #bp_container > audio, .basicLightbox__placeholder #bp_container > canvas { max-height: 60vh; margin-top:0!important; } .basicLightbox__placeholder { max-height: 100vh; min-width:530px; } .carousel-item:before { content: ""; display: block; height: 40%; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ position: absolute; bottom: 0; left:0; right:0; } .page-template-thank-you main a.btn, .page-template-profile-updated main a.btn { width:100%; margin-bottom: 20px!important; } .gratitude-lightbox-wrapper h6.text-uppercase.text-center.mt-1 small { display: inline-block; max-width:90%; } @media only screen and (max-width:1199px){ .carousel-caption { top:300px; } } @media only screen and (max-width:1099px){ #submitBtnWrap { display: none!important;} #school-logo { max-width: 260px; vertical-align: top; } #poweredBy { /*right:-20px!important;*/ } } @media only screen and (max-width:1024px){ div#slide-out-menu { overflow:auto; } div#slide-out-menu .pos-bottom.text-uppercase { font-size: 0.75rem!important; margin-top: 60px; position:relative; } div#slide-out-menu .pos-bottom.text-uppercase hr.my-2 { margin: 10px 0!important; height: auto; border: none; } } @media only screen and (max-width:991px){ .carousel-caption { top: 205px; } } @media only screen and (max-width:819px){ span#userNameHead { display: none; } } @media only screen and (max-width:767px){ .carousel-caption { top:350px; } div#gratitude-info { padding-bottom:120px!important; } footer#mainFooter p { width: 100%!important;display: block!important; text-align: center!important; } #poweredBy { /*right:0!important;*/ } #mainFooter p { max-width:100%!important; } .gratitude-lightbox-image-wrapper > svg.bd-placeholder-img.card-img-top { height:220px!important; } .page-template-thank-you main a.btn, .page-template-profile-updated main a.btn { } #desktopButtons, div#gratitude-info, #orgNameWrapper { display:none!important; } .basicLightbox__placeholder { min-width:95%; } a#closeFormBtn, a#submitFormBtn { margin-bottom: 10px; } } @media only screen and (max-width:675px){ #searchWrap { display: none!important;} } @media only screen and (max-width:599px){ .carousel-caption { top: 60vw; } } @media only screen and (max-width:575px){ .staffPhotoWrapper { width:50%!important; } .staff-headshot-wrapper svg { height:500px!important; } } @media only screen and (max-width:290px){ .staffPhotoWrapper { width:100%!important; } } button.navbar-toggler.ml-2.border-0.collapsed { outline-color: #fff!important; margin-left: 30px!important; } /* smartphones, touchscreens */ @media (hover: none) and (pointer: coarse) { div#captureVideo, div#captureImage { display:none!important; } } @media only screen and (max-width:767px){ div#captureVideo, div#captureImage { display:none!important; } } /** NO DIRECTORY **/ /*form#userSearch, div#slide-out-menu > a:nth-of-type(2), div#slide-out-menu > hr:nth-of-type(2), select#staffID, .form-signin.my-5 .form-group:first-of-type > label.text-left.d-block { display: none!important; }*/