/*===========================================================================================================
		Global Standard Landing Page Styles
=============================================================================================================*/

/*************************************************************************************************************
//////////////////////     Base
*************************************************************************************************************/
	img {max-width:100%; height:auto;} /* Makes images responsive */
	.vertical-nav-divider {display:none;}
	div.stl-colwrap, .stl-center div.row, .stl-center div.row > div {margin:0;}
		div.stl-colwrap:after, div.row:after {content: " ";line-height:0 !important;}
		body > p {display:none;}
		a {text-decoration:none;}

	/* Apply border-box to all content */
	*, *:before, *:after {box-sizing:border-box;}

#caresNotice, #stl-announcement__top-banner {display:none;}

/*************************************************************************************************************
//////////////////////     Generic
*************************************************************************************************************/

/*  Structure
  -------------------------------------------------------*/
	/* Outermost site wrapper - wraps entire site
		:: Default page structure ::
			 ----------------------
				<div id="stl-cms">
					<header class="stl-header" role="banner">@[TextHeader]</header>
					<main id="stl-container" class="sub-middle-section" role="main"></main>
					<footer class="stl-footer" role="contentinfo">@[TextFooter]</footer>
				</div>
	*/
	body {background:#fff; margin:0; padding:0;}

	/* Inner page wrapper - wraps entire site be default (see default page layout above) - Set background, positioning, etc as necessary */
	#stl-cms {background:transparent; padding:0; position:relative; overflow-x:hidden;}

	/* Container elements - may be used to restrict template to a specified width */
	.wide-container {width:100%; padding:0;}
	.narrow-container {width:100%; max-width:1200px; margin:0 auto;}
	.container {width:100%; max-width:1200px; margin:0 auto; padding:0 15px;}
	#stl-container {display:block; margin-top:0;}
	.home-page #stl-container {margin-top:0;}
	.interior-container {width:100%;}

	/* If interior pages use two column layout */
	.interior-two-col {text-align:left;}
	.interior-two-col #stl-container {max-width:1200px; padding:0 15px; margin:30px auto 0;}

	@media screen and (max-width:768px) {
		.interior-container + .interior-container {display:flex; flex-direction:column;}
	}

	@media screen and (min-width:769px) {
		.interior-two-col #stl-container {display:flex; flex-direction:row; flex-wrap:wrap; }
		.interior-two-col .interior-container:first-of-type {width: 64%; flex: 1 1 64%; margin-right: 4%;}
		.interior-two-col .interior-container + .interior-container {width: 32%; flex: 0 1 32%;}

		#for-professional-advisors-page #stl-container, #personal-estate-planning-kit-page #stl-container {max-width:990px;}
		#for-professional-advisors-page.interior-two-col .interior-container + .interior-container, #personal-estate-planning-kit-page.interior-two-col .interior-container + .interior-container {display:none;}
		.article-page #stl-container, .contact-page #stl-container {text-align:left; max-width:990px; margin:30px auto;}
	}

    /*  Containers
      -------------------------------------------------------*/
    .interior-one-col .main-copy {max-width:100%; padding:0;}
    .interior-one-col .main-copy p {max-width:100%;}
    .main-copy {margin-bottom:0;}



/*  Header / Footer
  -------------------------------------------------------*/
    .stl-header {}
    .stl-footer {text-align:center;}

    .stl-header .container {display:flex; flex-direction:row; justify-content:space-between; align-items:center; padding:20px 15px;}
	.client-logo {display:block;}

	.stl-footer {padding:20px 15px 10px;}
	.stl-footer p {font-size:14px;}
	.stl-footer p a {color:inherit;}

	#stl-copyright-container {max-width:1200px; margin:0 auto;}
	#stl-copyright-container p {}

    @media screen and (min-width:768px) {
		.stl-header .container {flex-direction:column; max-width:1080px; margin:0 auto; }
	}


/*  Banner/Intro
  -------------------------------------------------------*/

	/* update with client specific background-image */
	#stl-banner {display:block; min-height:180px; background-image:url(css-images/home-banner.jpg); background-position:center center; background-repeat: no-repeat; background-size:cover;}

	.stl-top {position:relative;}
	.stl-intro {display:block; padding:40px 15px; text-align:center;}
	.stl-intro > p {max-width:750px; margin:0 auto 20px;}

	@media screen and (min-width:768px) {
		#stl-banner {height:0; width:100%; padding-top:25%;}
	}


/*  Typography
  -------------------------------------------------------*/
    .stl-page-title, .interior-one-col .stl-page-title {text-align:center; line-height:1.2; margin-bottom:20px; hyphens:none;}
    .stl-intro > p, .interior-one-col .stl-intro > p {text-align:center; font-size:18px; line-height:inherit;}



/*  Form
  -------------------------------------------------------*/
    #stl-form-container {background:#eee; margin-bottom:0; padding:20px 15px;}
    fieldset {border-width:0;}
    #stl-form-container form {margin-bottom:0;}

    /* inline radio buttons */
    fieldset fieldset {padding:0; margin:0; margin-bottom:10px;}
    fieldset legend {float:left; font-weight:bold; margin-right:5px;}
    fieldset fieldset label {font-weight:normal; display:inline-block;} 

    .input-wrapper {margin-bottom:10px; display:flex; flex-direction:column;}
    .input-wrapper.inline {flex-direction:row;}
    .input-wrapper.hide {display:none;}
    label {display:block; font-weight:bold;}
    label.inline {display:inline-block; margin-right:10px;}
    input {padding:5px;}
    input[type="radio"] {}


/*  Modal
  -------------------------------------------------------*/
    #stl-modal, #stl-secondary-modal {padding:20px 30px; text-align:center;}

    /* PEPK */
    .lrgBookImg {width:200px;}
    @media only screen and (min-width:768px) {
      #lessonBook, #recordBook {width:47%; float:left;}
      #recordBook {float:right;}
      .lrgBookImg {display:inline-block; height:auto; max-width:100%}
      /* clearff */
      .clearff:after {visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
    }

/*  Content Block
  -------------------------------------------------------*/
    #stl-content-block-container {background:#ccc; padding:25px 0; margin:0;}

/*  Video Container
  -------------------------------------------------------*/
    #stl-video-container {background:#333; padding:35px 0; text-align:center;}
    #stl-video-container a {font-size:20px; line-height:28px; color:#fff;}
    #stl-video-container a:before {content:"\f144"; font-family:'FontAwesome'; margin-right:5px; display:inline-block; text-decoration:none;}

/*  Video
  -------------------------------------------------------*/
    #stl-video .see-how-it-works h3 {display:none;}
    #stl-video .video-container {margin-bottom:0;}


/*  Case Study
  -------------------------------------------------------*/
    #stl-case-study-container {margin:0 auto; padding:40px 20px;}
	.case-study {margin:0 auto 40px;}
	.interior-one-col .case-study {padding:0 15px; max-width:990px;}
	.case-study h3 {text-align:left;}
	.case-study img {min-width:0; max-width:300px; float:none; display:block; margin:0 auto 15px auto;}
	.case-study p { display: block; text-align: left;}
	.case-study p:last-child {margin-bottom: 0;}

    @media screen and (min-width:768px) {
        .case-study {display:block;}
        .case-study img {margin: 0 15px 15px 0; float:left; display:inline; min-width:0;}
    }



/*************************************************************************************************************
//////////////////////     Layout specific styles
*************************************************************************************************************/

/*  Layout 1
  -------------------------------------------------------*/
    .layout1 .stl-page-title {padding:0;}
    @media screen and (min-width:768px) {
        .layout1 #stl-page-copy-container .container {display:flex; align-items:center; padding:0;}
        .layout1 #stl-form-container {min-width:55%;}
        .layout1 .stl-intro {text-align:left; padding-right:30px;}
        .layout1 .stl-page-title {text-align:left;}
        .layout1 .stl-intro p {max-width:530px; text-align:left;}
    }


/*  Layout 2
  -------------------------------------------------------*/
    .layout2 .stl-page-title {max-width:500px; margin:0 auto 20px; text-align:center;}
    .layout2 .stl-intro p {max-width:530px;}

    .layout2 #stl-page-copy-container > .container {max-width:100%; padding:0;}

    .layout2 .col-md-6 {padding:30px;}

    .layout2 #stl-form-container form > img {margin:auto}

    @media only screen and (min-width:768px) {    
        .layout2 .stl-page-title {font-size:54px; line-height:59px;}
        
        .layout2 #stl-form-container form {display:flex; justify-content: center; align-items:center;}
        .layout2 #stl-form-container form > img, .layout2 #stl-form-container form > fieldset {flex-grow:1; flex-basis:0;}
        .layout2 #stl-form-container form > img {max-width:50%; margin:auto}
        
        .layout2 .col-md-6+.col-md-6 {border-left:1px solid;}
    }

/*  Layout 3
  -------------------------------------------------------*/
    .layout3 .stl-page-title {max-width:500px; margin:0 auto 20px; text-align:center;}
    .layout3 .stl-intro p {max-width:530px;}

    @media only screen and (min-width:768px) {
        .layout3 .stl-page-title {font-size:54px; line-height:59px;}
    }