/*
Theme Name: Scarsdale Library Theme
Theme URI: http://troublemaker.technology/scarsdale/
description: >-
  Scarsdale Library's Custom Website Theme
Author: Troublemaker Technology Solutions
Author URI: http://troublemaker.technology
Template: Divi
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: divi-child
*/
/*********************************
Fix MCE Editor
**********************************/

.et-fb-option--tiny-mce .et-fb-option-container div.mce-edit-area {
    max-height: 600px;
    overflow-y: auto;
}
body.wp-autoresize{
max-height: 250px!important;
overflow-y: auto!important;
}
/*********************************
Fix Header Moving on Load
**********************************/
media screen and (min-device-width: 420px) {
#page-container {
padding-top: 376px!important;
}
}

#main-header {
top: 57px!important;
}

/*********************************
Fix Padding on Header
**********************************/
.et_header_style_centered #top-menu>li>a {
padding-bottom: 33px!important;
}
/*********************************
Change Logo on Mobile to use vertical
**********************************/
@media only screen and (max-width: 981px) {
  /* Changes mobile logo to specified image */
  #logo {
      content: url("https://scarsdalelibrary.org/main/wp-content/uploads/2018/10/Screen-Shot-2018-10-21-at-8.18.04-PM.png")!important;
  }
}
@media (max-width: 980px) {
	.et_header_style_centered #logo {
		max-height: 100px;
}
}
/*********************************
change logo for fixed header
**********************************/
.et-fixed-header #logo {
content: url('https://scarsdalelibrary.org/main/wp-content/uploads/2018/08/Screen-Shot-2018-08-04-at-9.47.53-PM-e1533437272502.png');
}
.et_fixed_nav #logo {
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
}

@media (min-width: 480px){
.et-fixed-header #logo {
max-width: 90%;
}
.et_fixed_nav #logo {
max-width: 90%;
}
}
/* Fix Logo Size on Small height monitors */
@media screen and ( min-width: 481px ) and ( max-height: 700px ){
.et_header_style_centered #main-header .logo_container{
height: 150px!important;
}
}
@media all and (min-width: 980px){
/*********************************
change centered logo on centered header style to default layout when fixed header is active
*********************************/
.et_header_style_centered header#main-header.et-fixed-header .logo_container {
float: left;
width: 20%;
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
}
.et_header_style_centered div#et-top-navigation {
padding-top:20px;
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
}
.et_header_style_centered #main-header.et-fixed-header div#et-top-navigation {
width: 80%;
float: right;
height: 70px;
line-height: 80px;
text-align: right;
padding-top:0px!important;
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
}
.et-fixed-header #top-menu-nav {
float: none!important;
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
}
 
.et_fixed_nav #et-top-navigation {
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
}
#et-secondary-menu {
padding-top:9px!important;
}
}


h3 {
 overflow: hidden;
 text-align: center;
 font-size: 36px!important;
 margin-bottom: 30px;
}

h3:before,
h3:after {
 background-color: #000;
 content: "";
 display: inline-block;
 height: 1px;
 position: relative;
 vertical-align: middle;
 width: 50%;
}

h3:before {
 right: 0.5em;
 margin-left: -50%;
}

h3:after {
 left: 0.5em;
 margin-right: -50%;
}

h3.light {
 color: #ffffff;
 overflow: hidden;
 text-align: center;
 font-size: 36px;
 margin-bottom: 30px;
}
h3.light:before,
h3.light:after {
 background-color: #ffffff;
 content: "";
 display: inline-block;
 height: 1px;
 position: relative;
 vertical-align: middle;
 width: 50%;
}

h3.purple {
 color: #7e3279;
 overflow: hidden;
 text-align: center;
 font-size: 36px;
  margin-bottom: 30px;
}
h3.purple:before,
h3.purple:after {
 background-color: #7e3279!important;
 content: "";
 display: inline-block;
 height: 1px;
 position: relative;
 vertical-align: middle;
 width: 50%;
}
h3.orange {
 color: #DC8D43;
 overflow: hidden;
 text-align: center;
 font-size: 36px;
  margin-bottom: 30px;
}
h3.orange:before,
h3.orange:after {
 background-color: #DC8D43!important;
 content: "";
 display: inline-block;
 height: 1px;
 position: relative;
 vertical-align: middle;
 width: 50%;
}
h3.fol {
 color: #007EB6;
 overflow: hidden;
 text-align: center;
 font-size: 36px;
  margin-bottom: 30px;
}
h3.fol:before,
h3.fol:after {
 background-color: #007EB6!important;
 content: "";
 display: inline-block;
 height: 1px;
 position: relative;
 vertical-align: middle;
 width: 50%;
}

/*Styling the header catalog search box*/
@media screen and (min-width:776px) {
input[type=text].catalog {
    display: inline-block;
    max-width: 70%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    background-color: white;
    background-image: url('static/searchicon.png');
    background-position: 5px 5px;
    background-repeat: no-repeat;
    padding: 5px 5px 5px 35px;
    margin-right: 4px;
}
input[type=submit].catalog {
    background-color: #4f6e5e;
    color: white;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 20px;
    border: 1px solid #2E443A;
    border-radius: 4px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
}

input[type=submit].catalog:hover {
    background-color: #ffffff;
    color: #4f6e5e;
}
select.catalog {
  background-color: #ccc;
  padding: 5px 5px 5px 5px;
  border: 1px solid #ccc;
  max-width: 100px;
  border-radius: 4px;
  font-size: 14px;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url('static/down.png') 96% / 15% no-repeat #f2f2f2;
  appearance: none;
}

.login {
    background-color: #ffffff;
    color: #4f6e5e;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 10px;
    border: 1px solid #2E443A;
    border-radius: 4px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.login:hover {
    background-color: #4f6e5e;
    color: white;
}
}
@media screen and (max-width:775px) {
input[type=text].catalog {
    display: inline-block;
    max-width: 28%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 10px!important;
    background-color: white;
    background-image: none;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    padding: 3px 3px 3px 3px!important;
    margin-right: 4px;
}
select.catalog {
  background-color: #ccc;
  padding: 3px 1px 3px 3px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 10px!important;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url('static/down.png') 98% / 15% no-repeat #f2f2f2;
  appearance: none;
  max-width: 71px!important;
}
input[type=submit].catalog {
    background-color: #4f6e5e;
    color: white;
    font-size:8pt;
    font-weight: bold;
    padding: 3px 4px 4px 4px;
    border: 1px solid #2E443A;
    border-radius: 4px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
}
input[type=submit].catalog:hover {
    background-color: #ffffff;
    color: #4f6e5e;
}
.login {
  background-color: #fff;
  padding: 2px 3px 3px 3px;
  border: 1px solid #fff;
  border-radius: 4px;
  color: #4f6e5e;  
  font-size: 10px!important;
  font-weight: bold;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url('static/down.png') 90% / 15% no-repeat #f2f2f2;
  appearance: none;
  max-width: 75px!important;
}
.login:hover {
    background-color: #4f6e5e;
    color: white;
    font-size:10pt;
    border: 1px solid #4f6e5e;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
}
}

@media screen and (min-width:310px) and (max-width:500px) {
input[type=text].catalog {
    display: inline-block;
    max-width: 30%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 10px!important;
    background-color: white;
    background-image: none;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    padding: 3px 4px 4px 4px;
    margin-right: 4px;
}
input[type=submit].catalog {
    background-color: #4f6e5e;
    color: white;
    font-size:10px;
    font-weight: bold;
    padding: 3px 4px 4px 4px;
    border: 1px solid #2E443A;
    border-radius: 4px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
}
input[type=submit].catalog:hover {
    background-color: #ffffff;
    color: #4f6e5e;
}
select.catalog {
  background-color: #ccc;
  padding: 3px 4px 4px 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 10px!important;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url('static/down.png') 96% / 15% no-repeat #f2f2f2;
  appearance: none;
}

/* CAUTION: IE hackery ahead */
select.catalog::-ms-expand { 
    display: none; /* remove default arrow on ie10 and ie11 */
}
}

/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select.catalog {
        background:none\9;
        padding: 5px\9;
    } 
}


/* Styling the Catalog Page Search */
input[type=text].catalog2 {
    display: inline-block;
    max-width: 90%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1.3em;
    background-color: white;
    background-image: url('static/searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding: 5px 5px 5px 35px;
    margin-right: 4px;
}
 input[type=submit].catalog2 {
    background-color: #4f6e5e;
    color: white;
    font-size:1.3em;
    font-weight: bold;
    padding: 5px 30px;
    border: 1px solid #2E443A;
    border-radius: 4px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
}

input[type=submit].catalog2:hover {
    background-color: #ffffff;
    font-size: 1.3em;
    color: #4f6e5e;
}
select.catalog2 {
  background-color: #ccc;
  padding: 5px 5px 5px 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1.3em;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url('static/down.png') 96% no-repeat #f2f2f2;
  background-size: 25px 25px;
  appearance: none;
}
input[type=text].catalog3 {
    display: inline-block;
    max-width: 90%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1.3em;
    background-color: white;
    padding: 5px 5px 5px 10px;
    margin-right: 4px;
    margin-bottom: 10px;
}
input[type=password].catalog3 {
    display: inline-block;
    max-width: 90%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1.3em;
    background-color: white;
    padding: 5px 5px 5px 10px;
    margin-right: 4px;
	margin-bottom: 10px;
}

/** App Style header and Drop Down Menu **/

@media (max-width: 980px) {
 .container.et_menu_container { 
 width: calc( 100% - 60px);
 }
}

.et_mobile_menu {
 margin-left: -30px;
 padding: 5%;
 width: calc( 100% + 60px);
}

.mobile_nav.opened .mobile_menu_bar:before {
 content: "\4d";
}
a {
text-decoration: underline;
}
a:hover {
text-decoration: underline;
}
a.et_pb_button, .et-pb-arrow-next, .et-pb-arrow-prev, .et_pb_video_play{
text-decoration: none!important;
}
a.et_pb_button:hover, a.et-pb-arrow-next:hover, a.et-pb-arrow-prev:hover, a.et_pb_video_play:hover {
text-decoration: none!important;
}
@media only screen and (max-width: 981px) {
  /* Changes mobile logo to specified image */
  #logo {
    content: url("https://scarsdalelibrary.org/main/wp-content/uploads/2018/08/Screen-Shot-2018-08-04-at-9.47.53-PM-e1533437272502.png");
  }
}


/** For Styling on the Campaign Page**/

.donate-button:hover {
    background-color: #008E90;
width: 90%;
    border-radius: 8px;
    border: 2px solid #008E90;
    color: white;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.donate-button {
    background-color: #fff;
width: 90%;
    border-radius: 8px;
    border: 2px solid #008E90;
    color: #008E90;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
input.wpcf7-form-control.wpcf7-submit:hover {
background-color: white;
color: #008E90;
}
input.wpcf7-form-control.wpcf7-submit {
background-color: #008E90;
color: white;
}
.donate-button-reverse {
    background-color: #008E90;
width: 92%;
    border-radius: 8px;
    border: 2px solid #008E90;
    color: white;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
.donate-button-reverse:hover {
    background-color: #EA872D;
width: 92%;
    border-radius: 8px;
    border: 2px solid #EA872D;
    color: #fff;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

/**Style Tabs on Campaign Page**/
.et_pb_tabs.icon-tabs {
border: none;
}
.icon-tabs ul {
margin-bottom: 30px;
}
.icon-tabs .et_pb_tabs_controls li {
border-right: none;
}
.icon-tabs ul.et_pb_tabs_controls {
background-color: white;
}
.icon-tabs img.alignleft {
margin-right: 70px;
}
.icon-tabs .et_pb_all_tabs {
border-top: none;
}
.icon-tabs .et_pb_tabs_controls {
padding: 0 10% !important;
}
.icon-tabs .et_pb_tabs_controls li {
width: 12.5% !important;
}
.icon-tabs .et_pb_tabs_controls li a {
width: 100% !important;
text-align:center;
color: #a3a3a3;
text-transform: uppercase;
letter-spacing:2px;
font-weight: 600 !important;
}
.icon-tabs .et_pb_tab_active a {
color: #0b83a1 !important;
}
.icon-tabs .et_pb_tab h2 {
line-height: 1.5em;
color: #0b83a1;
font-weight: 600 !important;
font-size: 24px;
}
.icon-tabs .et_pb_tab p {
font-weight: 600 !important;
}
.icon-tabs .et_pb_tabs_controls li a:before {
display:block;
font-size:40px;
color: #a3a3a3;
margin-bottom: 15px;
font-weight: 600 !important;
}
.icon-tabs .et_pb_tabs_controls li.et_pb_tab_active a:before {
color: #0b83a1;
}
ul.et_pb_tabs_controls::after {
border-top: none !important;
}
.et_pb_tabs .et_pb_all_tabs .et_pb_tab {
padding-top: 1em;
}
/*
* === Mobile Styles ===
*/
@media (max-width: 768px) {
.icon-tabs .et_pb_tabs_controls li {
width: 100% !important;
}
.icon-tabs .et_pb_tabs_controls {
padding: 0 !important;
}
.icon-tabs .et_pb_tabs_controls li {
margin-bottom: 35px;
}
}
/** Vertically center Columns *//
.ds-vertical-align { 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
}

.et_pb_video_overlay_hover{
background: rgba(0,0,0,.6);
}

.slidedatetime {
font-size: 0.9em!important;
}