@charset "utf-8";

/* CSS Document 

* Copyright 2020 Jewish Federation of Cleveland

* Donation Page Main Style

*/



/*  DEFAULT SETTING  */

html, body {

                height: 100%;

                margin: 0px;

                padding: 0px; 

                border: 0px;

                	font-family: "Lato", Arial, Helvetica, sans-serif;

				/* font-family: Gotham SSm A,Gotham SSm B,Helvetica Neue LT Std,Arial,sans-serif; */

    			line-height: 1.6;

                color: 000;

                -ms-text-size-adjust:100%;

                -webkit-text-size-adjust:100%;

}

h1 {font-size:4.5em; line-height:1em; font-weight:600;}

h2 {font-size:2.45em; line-height:1.15em; font-weight:500;}

/*h3 {font-size:1.35em; line-height:1em; font-weight:600; text-transform:uppercase;}*/

h4 {font-size:1.25em; line-height:1.15em; font-weight:600;}

p  {font-size:1em; line-height:1.2em; font-weight:300; }

a, a:link, a:visited, a:active {color:#075585;font-weight:bold;text-decoration:none;}

a:hover {color:#075585; text-decoration:underline;}

.smalltxt {font-size:0.65em; line-height:1.1em;}

p.tip {    

                margin: 1.5em 10% 1em 0;

    padding-left: 36px;

    min-height: 2em;

    background-image: url(image/help.svg);

    background-repeat: no-repeat;

    background-size: 30px;}

.otheramount {

                padding: .65em; 

                width:60px; 

                font-size:16px; 

                lineheight:1.6;

                border: 1px solid #b4b4b4;

}

/* Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

  -webkit-appearance: none;

  margin: 0;

}

/* Firefox */

input[type=number] {

  -moz-appearance: textfield;

}

/* cursor control */

#pay-monthly {cursor:pointer;}

#pay-onetime {cursor:pointer;}

#mon-btn1, #mon-btn2, #mon-btn3,#mon-btn4,#mon-btn5 {cursor:pointer;}

#one-btn1, #one-btn2, #one-btn3,#one-btn4,#one-btn5 {cursor:pointer;}



/*  SECTIONS  */



#maincontainer{

	min-height: calc(100vh - 80px);

	width:100%;

	background: url("image/logomark-bg.png") no-repeat right top fixed;

	background-color:#e5f1f9;

	}



#headersection {

                padding: 0 15%;

                border-bottom: 20px solid #00a3e4;        

                position: sticky;

    top: 0;

                background-color:#ffffff;

                z-index: 1024;

                }

/* #contentsection{

                clear: both;

                padding: 0px;

                margin: 0px;

} */

#introsection {

                color:#ffffff;

                text-align:center; 
    padding-bottom: 20px;
                }

#donation-part, #confimration-part {

                background-color:#ffffff; 

                margin:0px 0px 10px 0px;

                padding:10px 20px 30px 20px;

                }

#donation-record {

                font-size:0.75em; 

                line-height:1.25em; 

                font-weight:300;

                margin: 20px auto;

                color: 000;

}

#donation-option{

                color:#ffffff; 

                margin:0px 0px 20px 0px;

                padding:0px 20px;

                }

#donation-option a, #donation-option a:hover, #donation-option a:visited, #donation-option a:link {

                color:#ffffff; 

                }

#mainnav{

                display:block;

                margin-top: 2em;

                margin-right: 0px;

                text-align:right;

                }

#footersection{

                min-height: 60px;

                padding: .5em 15%;

                border-top: 20px solid #00a3e4;

                background-color:#ffffff;

                margin: 0;

                font-size: 0.9em;

}



/*  ELEMENTS SETUP  */

.site-logo {

                width:100%;

                max-width:380px;

}

.footerlogo {

                padding-right: 5px; 

                vertical-align: middle;

                max-width: 40px;

}

.cta, .cta:link, .cta:visited {

    display: inline-block;

                padding: .5em 1.05em;

    border: none;

    border-radius: .35em;

    font-size: 1em;

    cursor: pointer;

    background: #00a3e4;

    color: #fff;

                text-decoration: none;

}

.cta:hover {

                background:#ffffff;

                color: #00a3e4;

                border: solid 1px #00a3e4;

                }

.paycta, .paycta:link, .paycta:visited, .paycta:hover  {

    display: inline-block;

                margin-top:.8em;

                padding: .5em 1.25em;

    border: 1px solid #19375b;

    border-radius: .35em;

    font-size: 1em;

    cursor: none;

    background: #ffffff;

    color: #19375b;

                text-decoration: none;

}



.paycta2, .paycta2:link, .paycta2:visited, .paycta2:hover  {

    display: inline-block;

                margin-top:.8em;

                padding: .5em 1.25em;

    border: 1px solid #f5ad4c;

    border-radius: .35em;

    font-size: 1em;

    cursor: pointer;

    background: #f5ad4c;

    color: #ffffff;

                text-decoration: none;

}

.paycta2:hover{

                background: #19375b;

}



.button {padding: .7em 1.25em !important;}

.footerlink, .footerlink:link, .footerlink:visited {

                padding: .5em 0.25em;

    font-size: 1em;

                line-height: .75em;

    cursor: pointer;

                color: #3c3c3c;

}

/* donation button styles */

#buttons li, #mbuttons li {

  float: left;

  list-style: none;

  text-align: center;

  background-color: #b4b4b4;

  font-size:1em;

  color:#ffffff;

  margin-right: 5px;

  margin-bottom: 10px;

  border-radius: .35em;

  text-decoration: none;

}

#buttons li a, #mbuttons li a {

  display:inline-block;

  text-decoration: none;

  padding: .5em 1.25em;

  border-radius: .35em;

  color: #ffffff;

}

#buttons li a:hover, #mbuttons li a:hover {

  text-decoration: none;

  background-color: #00b5ef;

  color: #ffffff;

}

/* payment option button styles */

#paybuttons {margin-left: 0; padding-left: 0;}

#paybuttons li {

  float: left;

  list-style: none;

  text-align: center;

  background-color: #b4b4b4;

  font-size:1em;

  color:#ffffff;

  margin-right: 10px;

  margin-bottom:10px;

  border-radius: .35em;

  text-decoration: none;

}

#paybuttons li a {

  display:inline-block;

  text-decoration: none;

  padding: .5em 1.25em;

  border-radius: .35em;

  color: #ffffff;

}

/*amount selection field style */

.selectedamount {

                                border:none; 

                    font-size: 1.15em;

                                font-weight:600; 

                                color:#19375b;

        background-color:#ffffff;

                }

input:disabled {color:#19375b;}

#descblock {

                clear: both; 

                height:30px; 

                font-size:.9em;

                line-height:1.15em; 

                font-weight:500;

                }

.boxnote {

                font-size:0.8em;

                line-height: 1.35em;

                border:solid 1px rgba(0,163,228,.3); 

                border-radius: .35em;

                padding: 12px;

                color:#00a3e4;

                margin: 10 0px;

                }

/* FORM STYLE */

.animated-form, .animated-form2 {

  position: relative;

  width: 100%;

  margin: 20px auto;

}

.animated-form input,

.animated-form select,

.animated-form2 input,

.animated-form2 select {

  position: relative;

  display: block;

  z-index: 2;

  width: 98%;

  height: 46px;

  outline: 0;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;

  border: 0;

  line-height: 1;

  background: rgba(255, 255, 255, 0);

  -webkit-transition: all 0.2s ease-in-out;

  transition: all 0.2s ease-in-out;

  border-bottom: 1px solid #b4b4b4;

  padding: 0 0 0 8px;

}

.animated-form input:focus,

.animated-form select:focus,

.animated-form2 input:focus,

.animated-form2 select:focus {

  background: rgba(255, 255, 255, 0);

  border-bottom: 1px solid #00b5ef;

  outline: 0;

}

.animated-form input:valid,

.animated-form select:valid,

.animated-form input:focus,

.animated-form select:focus,

.animated-form2 input:valid,

.animated-form2 select:valid,

.animated-form2 input:focus,

.animated-form2 select:focus {

  padding: 24px 0 0 8px;

  color: #4b4b4b;

  background: rgba(255, 255, 255, 0);

  font-weight: 500;

  font-size: 20px;

  -webkit-transform: translate3d(0, -10px, 0);

          transform: translate3d(0, -10px, 0);

}

.animated-form input:valid + label,

.animated-form select:valid + label,

.animated-form input:focus + label,

.animated-form select:focus + label,

.animated-form2 input:valid + label,

.animated-form2 select:valid + label,

.animated-form2 input:focus + label,

.animated-form2 select:focus + label{

  z-index:3;

                color: #4b4b4b;

  font-weight: 400;

  -webkit-transform: translate3d(0, -10px, 0);

          transform: translate3d(0, -10px, 0);

  font-size: 14px;

}

.animated-form label {

  position: absolute;

  z-index:1;

  top: 10px;

  left: 8px;

  color: #4c4b4b;

  background-color: #fff;

  font-size: 17px;

  -webkit-transform: translate3d(0, 0, 0);

          transform: translate3d(0, 0, 0);

  -webkit-transition: all 0.2s ease-in-out;

  transition: all 0.2s ease-in-out;

}



.animated-form2 label {

  position: absolute;

  z-index:4;

  top: 10px;

  left: 8px;

  color: #4c4b4b;

  background-color: #fff;

  font-size: 17px;

  -webkit-transform: translate3d(0, 0, 0);

          transform: translate3d(0, 0, 0);

  -webkit-transition: all 0.2s ease-in-out;

  transition: all 0.2s ease-in-out;

}

.select-form {

  position: relative;

  width: 100%;

  margin: 40px auto 0px auto;

}              

.select-css {

    display: block;

                height: 46px;

    font-size: 16px;

    font-weight: 500;

    color: #444;

    line-height: 1.3;

                magin-top: 30px;

    padding: .25em 1.25em;

    width: 100%;

    max-width: 100%; 

    box-sizing: border-box;

    margin: 0;

    border: 1px solid #b4b4b4;

    border-radius: 0em;

    -moz-appearance: none;

    -webkit-appearance: none;

    appearance: none;

    background-color: #fff;

    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),linear-gradient(to bottom, #ffffff 0%,#ffffff 100%);

    background-repeat: no-repeat, repeat;

    background-position: right .7em top 50%, 0 0;

    background-size: .65em auto, 100%;

}

.select-css::-ms-expand {

    display: none;

}

.select-css:hover,

.select-css:focus,

.select-css::valid{

    border-color: #00b5ef;

                color: #222; 

    outline: none;

}

/* Change Autocomplete styles in Chrome*/

input:-webkit-autofill,

input:-webkit-autofill:hover, 

input:-webkit-autofill:focus,

textarea:-webkit-autofill,

textarea:-webkit-autofill:hover,

textarea:-webkit-autofill:focus,

select:-webkit-autofill,

select:-webkit-autofill:hover,

select:-webkit-autofill:focus {

                -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;

}

/*FADE IN */

.fade-in {

                animation: fadeIn ease 8s;

               -webkit-animation: fadeIn ease 8s;

                -moz-animation: fadeIn ease 8s;

                -o-animation: fadeIn ease 8s;

                -ms-animation: fadeIn ease 8s;

}

@keyframes fadeIn {

  0% {

    opacity:0;

  }

  100% {

    opacity:1;

  }

}



@-moz-keyframes fadeIn {

  0% {

    opacity:0;

  }

  100% {

    opacity:1;

  }

}



@-webkit-keyframes fadeIn {

  0% {

    opacity:0;

  }

  100% {

    opacity:1;

  }

}



@-o-keyframes fadeIn {

  0% {

    opacity:0;

  }

  100% {

    opacity:1;

  }

}



@-ms-keyframes fadeIn {

  0% {

    opacity:0;

  }

  100% {

    opacity:1;

                }

}

/*  COLUMN SETUP  */

.col {

                display: block;

                float:left;

                margin: 1% 0 1% 0%;

}

.col:first-child { margin-left: 0; }



/*  GROUPING  */

.group:before,

.group:after { content:""; display:table; }

.group:after { clear:both;}

.group { zoom:1; /* For IE 6/7 */ }

#contentsection.group { padding:.5em 15%; }

/*  GRID OF TWELVE  */

.span_12_of_12 {width: 100%;}

.span_11_of_12 {width: 91.66%;}

.span_10_of_12 {width: 83.33%;}

.span_9_of_12 {width: 75%;}

.span_8_of_12 {width: 66.66%;}

.span_7_of_12 {width: 58.33%;}

.span_6_of_12 {width: 50%;}

.span_5_of_12 {width: 41.66%;}

.span_4_of_12 {width: 33.33%;}

.span_3_of_12 {width: 25%;}

.span_2_of_12 {width: 16.66%;}

.span_1_of_12 {width: 8.333%;}



/* Tooltip */



.tooltip {

  position: relative;

  display: inline-block;

  border-bottom: none;

}



.tooltip .tooltiptext {

  visibility: hidden;

  width: 200px;

  background-color: #00a7e1;

  color: #fff;

  text-align: center;

  border-radius: 6px;

  padding: 10px;

  position: absolute;

  z-index: 1;

  bottom: 125%;

  left: 0%;

  margin-left: -102px;

  opacity: 0;

  transition: opacity 0.3s;

}



.tooltip .tooltiptext::after {

  content: "";

  position: absolute;

  top: 100%;

  left: 50%;

  margin-left: -5px;

  border-width: 5px;

  border-style: solid;

  border-color: #00a7e1 transparent transparent transparent;

}



.tooltip:hover .tooltiptext {

  visibility: visible;

                font-size:small;

  opacity: 1;

}



/*  GO FULL WIDTH BELOW 480 PIXELS - MOBILE */

@media only screen and (max-width: 480px) {

                .col {  margin: 1% 0 1% 0%; }

    .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 {width: 100%;}

                #headersection, #contentsection.group, #footersection { padding: .5em 5%; }

                .footerlogo {display:block; text-align:center;}

                #footersection {text-align:center;}

                #donation-part {margin:0px !important;}

    #confimration-part {padding: 2px 5px 2px 5px;}

                #descblock {

                clear: both; 

                height:33px; 

                font-size:.8em;

                line-height:1.15em; 

                font-weight:500;

                }

                h1 {font-size:10vw !important; line-height:1em; font-weight:600;}

                h2 {font-size:6vw !important; line-height:1.15em; font-weight:500!important;}

   .tooltip .tooltiptext {width: 100px; margin-left: -52px;}

}



/*  NARROW LEFT RIGHT PADDING BELOW 768 PIXELS - TABLET */

@media only screen and (max-width: 768px) {

                #mainnav{display: none;}

                .footerlogo {width:30px; padding-right:0px;}

                #footersection {font-size:0.75em;}

}



/*  NARROW LEFT RIGHT PADDING BELOW 1024 PIXELS - TABLET */

@media only screen and (max-width: 1024px){

                h1 {font-size:9vw ; line-height:1em; font-weight:600;}

                #headersection, #contentsection.group, #footersection { padding: .5em 5%; }

}



/********   Donation Form ********/









/***** End Donation Form styles *****/



/***** YouTube iFrame size + Preferred Text  styles *****/

.embed-container {

position: relative;

padding-bottom: 56.25%;

height: 0;

overflow: hidden;

max-width: 853px;

margin-left: auto;

margin-right:auto;

}

.embed-container iframe, .embed-container object, .embed-container embed {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

max-width:853px;

max-height:480px;

}

#preferred_phone {

font-size:12px;

font-weight:500;

font-style: italic;

color:#00B5EF;

}

[id$="_card_main"] .col.span_12_of_12 p {
	padding: 20px 20px !important;
	margin-bottom: 0 !important;
}
html[class*="webkit"] input[type="email"], html[class*="webkit"] input[type="password"], html[class*="webkit"] input[type="search"], html[class*="webkit"] input[type="text"], html[class*="webkit"] input[type="number"], html[class*="webkit"] input[type="tel"], html[class*="webkit"] select, html[class*="webkit"] textarea { 
    appearance: auto !important;
}