/*===========================================================================================================
		Site Info
=============================================================================================================

	Date: 10/23/19
	Site: National Trust for Historic Preservation, A0011067
	Web Developer: Brian Burrier

	Last Modified By:	Web Developer	--  MM/DD/YY	--  modifications

  Find/replace default color #2084b8


/*************************************************************************************************************
//////////////////////     Slim
*************************************************************************************************************/

	/* Links we don't have. Hide for now */
	a[href*=IRA-Letter], a[href*=Stock-page] {display:none;}

	/*  Page Copy (SDS Slim)
  -------------------------------------------------------*/
    #stl-page-copy-container {}
    .home-page .stl-intro {margin:0;padding:5rem 4rem 3rem;background:#41ade5;color:#fff;text-align:center;}
    .home-page.slim .two-col .stl-intention-form h2 {text-align:left; position:relative; left:-40px; padding-right:0; width:100vw;}

    #stl-intention-form button {margin-top:1.5rem;}
    .home-page.slim .text-input-group .stl-input-field {margin-bottom:.5em;}
    .home-page.slim .two-col .stl-intention-form label {font-size:16px;}

	@media screen and (min-width:768px) {
        
        /* SDS Slim */
        .home-page.slim .stl_clientMissionBody {display:flex; flex-direction:column; justify-content:center; height:100%; padding:0 0 3rem; position:relative;}
        
        /* SDS Slim - one col */
        .home-page.slim .one-col .stl-intro {max-width:100%;}
        
        /* SDS Slim - two col */
        .home-page.slim #stl-page-copy-container.two-col {display:flex; justify-content:center; background:linear-gradient(to right, #99ccff 50%, #ccc 50%);}
        .home-page.slim .two-col .stl-intro {margin:0; width:50%; position:relative; z-index:1;}
        	.home-page.slim .two-col .stl-intro:before {
        		content:"";
        		display:block;
				position: absolute;
				top: -20px;
				bottom: 0;
				right: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background:#41ade5;
				transform: skewY(-3deg);
				transform-origin: top left; 
				z-index:0;
        	}
        .home-page.slim .two-col .stl-intention-form {width:50%;}
        .home-page.slim .two-col .stl-intro p {font-size:20px;}
        #stl-intention-form .radio-group label {font-size}
        
	}
	@media screen and (min-width:1500px) {
		.stl_clientMissionBody {max-width:622px; margin-right:0; margin-left:auto;}
		.form-content {max-width:652px; margin-left:0; margin-right:auto;}
	}


/*  Intention Form (SDS Slim)
  -------------------------------------------------------*/
    .stl-intention-form {padding:3rem 4rem 0 4rem; background:#fff;}
    .stl-intention-form .radio-inline label {display:flex; align-items:flex-start;}
    .stl-intention-form input[type=radio] {margin:5px;}
    .stl-intention-form input[type=checkbox] {margin:3px 5px 15px 3px;}
    .stl-intention-form .success-message {display:none;}
    .stl-intention-form.success .success-message {display:block;}
    .stl-intention-form.success .form-content {display:none;}
	#stl-cms .stl-intention-form .stlButton {margin-bottom:1.5rem;}

	#stl-intention-form .input-wrapper {margin-bottom:1em;}
	#stl-intention-form .checkbox label {position:relative; padding-left:50px;}

    /* Accessible checkbox/radio styles */
	#stl-intention-form .checkbox label {
		display: block;
		position: relative;
		padding-left: 35px;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	#stl-intention-form .checkbox input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
	}
	.checkmark {
		position: absolute;
		top: 8px;
		left: 0;
		height: 20px;
		width: 20px;
		border: 1px solid #8D8D8D;
		border-radius: 4px;            
	}
	.checkmark.radio {border-radius:50%;}
	.checkbox label:hover input ~ .checkmark {
		background-color: #e8f0fe;
	  }
	.checkbox label input:checked ~ .checkmark {
	  background-color: #2084b8;
	  border-color:#2084b8;
	}            
	.checkmark:after {
	  content: "";
	  position: absolute;
	  display: none;              
	}
	.checkbox input[type="checkbox"]:checked ~ checkmark:after {display:block;}

	.checkbox label .checkmark:after {
	  content:"";
	  display:block;
	  left: 6px;
	  top: 1px;
	  width: 7px;
	  height: 12px;
	  border: solid white;
	  border-width: 0 3px 3px 0;
	  transform: rotate(45deg);
	}
	.checkbox-radio label .checkmark.radio:after {
	  background:#fff;
	  border:none;
	  width:8px;
	  height:8px;
	  top:50%;
	  left:50%;
	  transform:translate(-50%, -50%);
	  border-radius:50%;
	} 

	/* On hover/focus. Affects the :before box */
	.checkbox label:hover .checkmark, input:focus + em + .checkmark {
		background-color:rgba(32, 132, 184, .2);
	}
	/* Adding focus styles on the outer-box of the fake checkbox */
	.checkbox input:focus + .checkmark {
		outline: rgb(59, 153, 252) auto 5px;
		outline: #2084b8 auto 5px;
	}             
	/* Show the checkmark on the checked state */
	.checkbox input:checked + .checkmark {
		background-color:rgba(32, 132, 184, 1);
		background-color:#2084b8;
	}

	@media screen and (min-width:768px) {
		.stl-intention-form {padding:0 4rem;}
		.checkmark {top:10px;}
	}


    

/*  Ways to Give (SDS Slim)
  -------------------------------------------------------*/
    #stl-ways-to-give {max-width:990px; margin:auto; padding:4rem 0;}
	#stl-ways-to-give h2 {text-align:center; font-size:3.0rem; margin-bottom:10px;}
    #stl-ways-to-give > p {text-align:center; margin-bottom:3rem;}
    #stl-ways-to-give .gift-type {margin-bottom:4rem;}
    #stl-cms #stl-ways-to-give .stlButton {background:none; color:#2084b8; text-transform:none; margin:0 0 0.5em; padding:0; display:block; text-align:left;}
    #stl-cms #stl-ways-to-give .stlButton:after {content: ' \203a'; display:inline-block;}