* { box-sizing: border-box; -moz-box-sizing: border-box;}

body { font-family: 'Montserrat', sans-serif; margin: 0; background: #e5e5e5; font-size: 12px;}

h1, h2, h3, h4 { font-family: 'Signika', sans-serif; }

h1 { text-transform: uppercase; font-size: 100px; margin: 0; line-height: .8em; }
h1 span {display:block; font-size: 50px; }
#total-monthly-expenses-h1 {font-family: 'Signika', sans-serif; text-transform: uppercase; font-size: 100px; margin: 0; line-height: .8em; }

h2 span { font-family: 'Signika', sans-serif; text-transform:uppercase; }

p { line-height: 1.75em;}


.mainContainer { width: 1024px; margin: 0 auto; background:#fff; -webkit-box-shadow: 0 0 50px 0 rgba(0,0,0,.2);
box-shadow: 0 0 50px 0 rgba(0,0,0,.2);}

/*Begin Header Styles*/

header { background:#fff; position:relative; z-index: 99;}
    header:after { clear:both; content:""; display:block;}
    header .logoTxt { font-size: 24px; float:left; padding: 15px 30px; text-transform: uppercase; margin: 0; line-height: .8em; font-family: 'Signika', sans-serif; font-weight: 700;}

    .header-choose-city {display: inline;}
    .header-choose-city select {width: 250px; border: 2px solid #3a1757; margin: 10px 20px; padding: 5px;}
    .header-choose-city select, .header-choose-city option {font-family: 'Signika', sans-serif; font-size: 16px; font-weight: 400; }
    

.appNav { float:left; padding-top: 18px;}
    .appNav ul { list-style:none; padding: 0; margin: 0;}
        .appNav ul li {float:left; margin-right: 10px;}
            .appNav ul li a { width: 10px; height: 10px; border-radius: 40px; -moz-border-radius: 40px; background:#808080; overflow:hidden; display:block; text-indent: -9999px;}
                .appNav ul li a.active { background:#f0bf49;}
                 .appNav ul li a.complete { background:rgba(92,184,92,1);}

header .total {
    background: #F1AD02;
    font-size: 20px;
    font-weight: 700;
    float: right;
    padding: 12px 30px;
    font-family: 'Signika', sans-serif;
    color: #fff;
}

/*End Header Styles*/

/* Begin Home Styles */
.homeTitleContainer { color:#fff; position: relative; }
.homeTitleContainerText { padding: 30px 0 150px 30px; width: 40%;}
/* End Home Styles */

/* Begin Step Styles */
.stepTitleContainer {
    color: #002569;
    position: relative;
}
    .stepTitleContainerText { padding: 50px 0 9px 30px; width: 40%; position:relative; z-index: 1;}
        .stepTitleContainerText h1 {
            font-size: 80px;
            text-wrap: none;
            white-space: pre;/*
            color: #002569;*/
        }
        .stepTitleContainerText h1 span {
            font-size: 20px;
            letter-spacing: .5em;
            text-wrap: none;
            white-space: pre;
            display: block;
            display: none;
            
        }
    
    .stepTitleContainerText p { font-size: 14px;}

.questRow .flexContainer { 
    display: flex; 
    justify-content: space-between; 
    height: 200px;
    margin-bottom: 30px;
}
    .questRow .flexContainer:last-child { margin-bottom: 0;}
.questRow .flexCol {align-self: stretch; background-color:rgba(11,41,75,1); display: flex; width: 30%; font-family: 'Signika', sans-serif; color: #fff; text-align: center; border-radius: 5px; -moz-border-radius: 5px; border: 5px solid #fff; -webkit-box-shadow: 0 0 40px 0 rgba(0,0,0,.2); box-shadow: 0 0 40px 0 rgba(0,0,0,.2); position:relative; background-size: 100% auto; background-repeat:no-repeat;  }
    .questRow .flexCol::after { position: absolute; content: " "; display: block; top: 0; left: 0; right: 0; bottom: 0; background: -moz-linear-gradient(top,  rgba(11,41,75,0) 2%, rgba(11,41,75,0) 15%, rgba(11,41,75,1) 70%, rgba(11,41,75,1) 100%);background: -webkit-linear-gradient(top,  rgba(11,41,75,0) 2%,rgba(11,41,75,0) 15%,rgba(11,41,75,1) 70%,rgba(11,41,75,1) 100%);background: linear-gradient(to bottom,  rgba(11,41,75,0) 2%,rgba(11,41,75,0) 15%,rgba(11,41,75,1) 70%,rgba(11,41,75,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000b294b', endColorstr='#0b294b',GradientType=0 );}
    .questRow .flexCol:hover::after { position: absolute; content: " "; display: block; top: 0; left: 0; right: 0; bottom: 0; background: -moz-linear-gradient(top,  rgba(57,88,229,0) 0%, rgba(57,88,229,0) 15%, rgba(57,88,229,1) 70%, rgba(57,88,229,1) 100%);background: -webkit-linear-gradient(top,  rgba(57,88,229,0) 0%,rgba(57,88,229,0) 15%,rgba(57,88,229,1) 70%,rgba(57,88,229,1) 100%);background: linear-gradient(to bottom,  rgba(57,88,229,0) 0%,rgba(57,88,229,0) 15%,rgba(57,88,229,1) 70%,rgba(57,88,229,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003958e5', endColorstr='#3958e5',GradientType=0 ); cursor:pointer}
    .questRow .flexCol.active::after { position: absolute; content: " "; display: block; top: 0; left: 0; right: 0; bottom: 0; background: -moz-linear-gradient(top,  rgba(92,184,92,0) 1%, rgba(92,184,92,0) 15%, rgba(92,184,92,1) 70%, rgba(92,184,92,1) 100%);background: -webkit-linear-gradient(top,  rgba(92,184,92,0) 1%,rgba(92,184,92,0) 15%,rgba(92,184,92,1) 70%,rgba(92,184,92,1) 100%);background: linear-gradient(to bottom,  rgba(92,184,92,0) 1%,rgba(92,184,92,0) 15%,rgba(92,184,92,1) 70%,rgba(92,184,92,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005cb85c', endColorstr='#5cb85c',GradientType=0 );}

.questRow .flexCol.spacing {visibility:hidden; }

.questRow .flexContent { align-self: flex-end; width: 100%; text-align:center; padding: 0px 15px 15px 15px; position:relative; z-index:9;}
.questRow .flexContent::before { position:absolute; content:"$"; display:block; color:#3a1757; bottom: 25px; left: 30px; font-family: 'Signika', sans-serif; font-size: 16px; font-weight: 700;  }

    .questRow .flexContent p { display: block; margin: 0 0 10px 0; font-size: 18px; line-height: 1em; font-weight: 700; text-transform:uppercase;}
    .questRow .flexContent input { border: 0; background:#fff; padding: 5px 50px; width: 100%; border-radius: 20px; -moz-border-radius: 700px; font-family: 'Signika', sans-serif; text-align: center; font-size: 22px; font-weight: 700; color:#3a1757}
    .questRow .flexContent input:focus{outline: none;}

    .housing-quest-001 { background-image: url(../images/housing-001.jpg); }
    .housing-quest-002 { background-image: url(../images/housing-002.jpg); }
    .housing-quest-003 { background-image: url(../images/housing-003.jpg); }
    .housing-quest-004 { background-image: url(../images/housing-004.jpg); }
    .housing-quest-005 { background-image: url(../images/housing-005.jpg); }
    .housing-quest-006 { background-image: url(../images/housing-006.jpg); }

    .utilities-quest-001 { background-image: url(../images/utilities-001.jpg); }
    .utilities-quest-002 { background-image: url(../images/utilities-002.jpg); }
    .utilities-quest-003 { background-image: url(../images/utilities-003.jpg); }
    .utilities-quest-004 { background-image: url(../images/utilities-004.jpg); }
    .utilities-quest-005 { background-image: url(../images/utilities-005.jpg); }
    .utilities-quest-006 { background-image: url(../images/utilities-006.jpg); }

    .food-quest-001 { background-image: url(../images/food-001.jpg); }
    .food-quest-002 { background-image: url(../images/food-002.jpg); }
    .food-quest-003 { background-image: url(../images/food-003.jpg); }
    .food-quest-004 { background-image: url(../images/food-004.jpg); }

    .transportation-quest-001 { background-image: url(../images/transportation-001.jpg); }
    .transportation-quest-002 { background-image: url(../images/transportation-002.jpg); }
    .transportation-quest-003 { background-image: url(../images/transportation-003.jpg); }
    .transportation-quest-004 { background-image: url(../images/transportation-004.jpg); }
    .transportation-quest-005 { background-image: url(../images/transportation-005.jpg); }
    .transportation-quest-006 { background-image: url(../images/transportation-006.jpg); }
.transportation-quest-007 {
    background-image: url(../images/transportation-007.jpg);
}
.transportation-quest-008 {
    background-image: url(../images/transportation-008.jpg);
}
.transportation-quest-009 {
    background-image: url(../images/transportation-009.jpg);
}
.transportation-quest-0010 {
    background-image: url(../images/transportation-010.jpg);
}
.transportation-quest-0011 {
    background-image: url(../images/transportation-011.jpg);
}
.transportation-quest-0012 {
    background-image: url(../images/transportation-012.jpg);
}

    .clothing-quest-001 { background-image: url(../images/clothing-001.jpg); }
    .clothing-quest-002 { background-image: url(../images/clothing-002.jpg); }
    .clothing-quest-003 { background-image: url(../images/clothing-003.jpg); }
    .clothing-quest-004 { background-image: url(../images/clothing-004.jpg); }
    .clothing-quest-005 { background-image: url(../images/clothing-005.jpg); }
    .clothing-quest-006 { background-image: url(../images/clothing-006.jpg); }

    .insurance-quest-001 { background-image: url(../images/insurance-001.jpg); }
    .insurance-quest-002 { background-image: url(../images/insurance-002.jpg); }
    .insurance-quest-003 { background-image: url(../images/insurance-003.jpg); }
    .insurance-quest-004 { background-image: url(../images/insurance-004.jpg); }
.insurance-quest-005 {
    background-image: url(../images/insurance-005.jpg);
}

    .personal-quest-001 { background-image: url(../images/personal-001.jpg); }
    .personal-quest-002 { background-image: url(../images/personal-002.jpg); }
    .personal-quest-003 { background-image: url(../images/personal-003.jpg); }
    .personal-quest-004 { background-image: url(../images/personal-004.jpg); }
    .personal-quest-005 { background-image: url(../images/personal-005.jpg); }
.personal-quest-006 {
    background-image: url(../images/personal-006.jpg);
}

    .entertainment-quest-001 { background-image: url(../images/entertainment-001.jpg); }
    .entertainment-quest-002 { background-image: url(../images/entertainment-002.jpg); }
    .entertainment-quest-003 { background-image: url(../images/entertainment-003.jpg); }
    .entertainment-quest-004 { background-image: url(../images/entertainment-004.jpg); }
.entertainment-quest-005 {
    background-image: url(../images/entertainment-005.jpg);
}
.entertainment-quest-006 {
    background-image: url(../images/entertainment-006.jpg);
}

    .misc-quest-001 { background-image: url(../images/misc-001.jpg); }
    .misc-quest-002 { background-image: url(../images/misc-002.jpg); }
    .misc-quest-003 { background-image: url(../images/misc-003.jpg); }
    .misc-quest-004 { background-image: url(../images/misc-004.jpg); }
    .misc-quest-005 { background-image: url(../images/misc-005.jpg); }
	.misc-quest-006 { background-image: url(../images/misc-006.jpg); }

    .education-quest-001 { background-image: url(../images/education-001.jpg); }
    .education-quest-002 { background-image: url(../images/education-002.jpg); }
    .education-quest-003 { background-image: url(../images/education-003.jpg); }

    .savings-quest-001 { background-image: url(../images/savings-004.jpg); }
    .savings-quest-002 { background-image: url(../images/savings-003.jpg); }
    .savings-quest-003 { background-image: url(../images/savings-002.jpg); }
    .savings-quest-004 { background-image: url(../images/savings-001.jpg); }


    .custom-quest { background-image: url(../images/custom-expense.jpg); }
    .editable:before {content:"Editable Amount"; display:block; background: #3a1757; position: absolute; top: 10px; left: 10px; padding: 5px 10px; color:#fff; border-radius: 7px; -moz-border-radius: 7px;}


.questRow .checkMark {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: #E8E8E8;
    border-radius: 7px;
    -moz-border-radius: 7px;
}

.questRow .flexCol.active .checkMark {background: url(../images/active-CB.png) rgba(92,184,92,1) no-repeat; background-position: 50% 50%; background-size: 70% 70%;}

/*label {
    font-size: 20px;
    cursor: pointer;
    padding: 20px;
}

.accordian div {
    height:0;*/
/*    overflow:hidden;*/
    /*opacity:0;
}

input {
    display:none
}


input:checked ~ div{
    opacity: 1;
    height: auto;
}

.accordian {
    padding: 50px 0 90px 30px;

    position: relative;
}*/

/* This is to prevent editing the editable field unless the checkbox is checked and the container has the class "active" */
.flexCol:not(.active) input[type=text] {
    pointer-events: none;
} 

/* End Step Styles */

/* Begin Summary Styles */

.summaryTitleContainer {
    color: #002569;
    position: relative;
}
    .summaryTitleContainerText { padding: 30px; width: 100%; text-align:left; position:relative; z-index: 1;}
    .summaryTitleContainerText h1 { font-size: 80px; text-wrap:none; white-space:pre;}
        .summaryTitleContainerText h1 span { font-size: 20px; letter-spacing: .5em; text-wrap:none; white-space:pre; display:block;}

.summaryList { list-style:none; margin: 0; padding: 0;}
    .summaryList li { display:block; padding: 10px 80px 10px 80px; position: relative; border-bottom: 1px solid #ccc; font-family: 'Signika', sans-serif; font-size: 20px; min-height: 65px}
        .summaryList li:last-child { border-bottom: 0;}
        .summaryList li img { position: absolute; top: 10px; left:0; width: 60px; height: auto;}
        .summaryList li span { font-size: 14px; text-transform: uppercase; color:rgba(0,0,0,.8); display:block; letter-spacing: .2em;}
        .summaryList li div { position: absolute; right: 0; top: 30px; color:#1a90a5; font-weight: 700;}

        .summaryList a {text-decoration: none;}

.expenseBreakDown { color:#fff;}
    .expenseBreakDown h2 { text-transform:uppercase; margin: 0;}
    .expenseBreakDown ul {list-style:none; margin: 0; padding: 0; }
        .expenseBreakDown ul li { position:relative; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.50);}
            .expenseBreakDown ul li div { position:absolute; right: 0;}
        

/* End Summary Styles */


.greenGradient {
    background: rgb(0,170,171);
    background: -moz-linear-gradient(left, rgba(0,170,171,1) 1%, rgba(51,195,165,1) 100%);
    background: -webkit-linear-gradient(left, rgba(0,170,171,1) 1%,rgba(51,195,165,1) 100%);
    background: linear-gradient(to right, #a3b9d0 1%, #ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00aaab', endColorstr='#33c3a5',GradientType=1 );
}

.greenGradientSummaryTitle {
    background: rgb(0,170,171);
    background: -moz-linear-gradient(left, rgba(0,170,171,1) 1%, rgba(51,195,165,1) 100%);
    background: -webkit-linear-gradient(left, rgba(0,170,171,1) 1%,rgba(51,195,165,1) 100%);
    background: linear-gradient(to right, #a3b9d0 1%, #ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00aaab', endColorstr='#33c3a5',GradientType=1 );
}

.greenGradientExpenseBreakdown {
    background: rgb(0,170,171);
    background: -moz-linear-gradient(left, rgba(0,170,171,1) 1%, rgba(51,195,165,1) 100%);
    background: -webkit-linear-gradient(left, rgba(0,170,171,1) 1%,rgba(51,195,165,1) 100%);
    background: linear-gradient(to right, #002569 1%, #a3b9d0 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00aaab', endColorstr='#33c3a5',GradientType=1 );
}

.titleImg { display: block; position: absolute; width: 100%; bottom: -125px; right: 50px; max-height: 300px; max-width:400px; }
.titleImgHome { display: block; position: absolute; width: 100%; bottom: 75px; right: 50px; height: auto; max-width:550px; }
.titleImgHousing { display: block; position: absolute; width: 100%; bottom: -25px; right: 50px; max-height: 300px; max-width: 400px; }
.titleImgUtilities { display: block; position: absolute; width: 100%; bottom: -35px; right: 50px; max-height: 300px; max-width: 400px; }
.titleImgFood { display: block; position: absolute; width: 100%; bottom: -20px; right: 50px; max-height: 225px; max-width: 400px; }
.titleImgTransportation { display: block; position: absolute; width: 100%; bottom: -25px; right: 40px; max-height: 300px; max-width: 400px; }
.titleImgClothing { display: block; position: absolute; width: 100%; bottom: -15px; right: 50px; max-height: 300px; max-width: 400px; }
.titleImgHealthCare { display: block; position: absolute; width: 100%; bottom: -35px; right: 50px; max-height: 300px; max-width: 400px; }
.titleImgPersonal { display: block; position: absolute; width: 100%; bottom: -20px; right: 50px; max-height: 250px; max-width: 400px; }
.titleImgEntertainment { display: block; position: absolute; width: 100%; bottom: -5px; right: 50px; max-height: 300px; max-width: 400px; }
.titleImgMisc { display: block; position: absolute; width: 100%; bottom: -25px; right: 40px; max-height: 300px; max-width: 400px; }
.titleImgSavings {
    display: block;
    position: absolute;
    width: 100%;
    bottom: -25px;
    right: 50px;
    max-height: 200px;
    max-width: 400px;
}


.waveTransition { display: block; position: absolute; width: 100%; bottom: 0; right: 0; }

.floatLeft { float:left}
.floatRight {float:right;}

.padding30 { padding: 30px; }

.padding10{padding-right: 10px;}

footer { border-top: 1px solid #ccc; background:#f5f5f5;}
    footer span { display:block; margin-bottom: 20px;}
        footer img { float:left; display:block; margin-right: 10px; max-height: 70px;}

.contactUs {
    margin-left: 10px;
    color: #002569;
}


.homeInstructions .flexContainer { display: flex; width: 100%; }
.homeInstructions .flexCol { flex: 1; width: 30%; font-family: 'Signika', sans-serif; color: #fff; text-align: center; border-radius: 5px; -moz-border-radius: 5px; }
    .homeInstructions .flexCol p { display: block; font-size: 13px; line-height: 1.25em; font-weight: 700; margin:0; padding: 15px;}    
.homeInstructions .flexCol p span { display:block; font-size: 16px; padding-bottom: 10px;}

    .homeInstructions .flexCol:nth-child(1) {
        background: #002569;
        color: #ffffff;
    }
    .homeInstructions .flexCol:nth-child(2) {
        background: #002569;
        color: #ffffff; 
        margin: 0 5%;
    }
    .homeInstructions .flexCol:nth-child(3) {
        background: #002569;
        color: #ffffff;
    }
    .homeInstructions .flexCol:nth-child(4) {
        background: #002569;
        color: #ffffff;
        margin: 0 5%;
    }

    

.clearAfter::after { clear:both; display:block; content:"";}

.width50 { width: 50%; float:left;}
.width75 { width: 75%; float:left;}

.homeInstructions { position: relative; margin-top: -136px; }
.homeInstructionsBtn { padding-top: 30px;}
    .homeInstructionsBtn a {
        background-color: #f1ad02;
        border: 2px solid #f1ad02;
        font-size: 16px;
        font-weight: 700;
        color: #002569;
        border-radius: 50px;
        padding: 15px;
        display: block;
        text-decoration: none;
        font-family: 'Signika', sans-serif;
        text-transform: uppercase;
        text-align: center;
    }
        .homeInstructionsBtn a:hover {
            background: #002569;
            border-color: #002569;
            color: #f1ad02;
        }

.choose-city label {font-family: 'Signika', sans-serif; text-transform:uppercase; font-size: 16px; font-weight: 700; color:#3a1757; text-transform: uppercase;}
.choose-city select {width: 65%; border: 2px solid #3a1757; margin: 0 5%; padding: 15px;}
.choose-city select, .choose-city option {font-family: 'Signika', sans-serif; font-size: 16px; font-weight: 400; }

.printOnly { display:none;}

/*Title Window*/

.titleWindow { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; background: rgba(0,0,0,.75); display:none;}
.mapContainer { width: 960px; margin: 50px auto 0; text-align:center;}
.mapContainer h1 { color:#fff; font-size: 30px; margin-bottom: 30px;}

/*@media print {
    @page :footer {
        display: none
    }

    @page :header {
        display: none
    }
}
*/
@media print {
    li {page-break-inside: avoid;}

    .printOnly { display:block; margin-top: 50px;}

    #summary {-webkit-box-shadow: 0 0 0 0 rgba(0,0,0,0) !important; box-shadow: 0 0 0 0 rgba(0,0,0,0) !important; position:relative;}



    #summary header { background: none !important;}
    #summary header .logoTxt { padding: 25px 0 0 175px !important; z-index: 99999;}
    .appNav .total { display:none}

        #summary .summaryTitleContainerText {    padding: 50px 0 100px;    width: 100%;    text-align: center;    position: relative;    z-index: 1;    color:#000!important;}

        #summary:before { content:url("/images/dws-logo.png"); display:block; padding-bottom: 30px; position: absolute; top: 0; left: 0;}

    #summary .width50 {  width: 60%;}
        #summary .width50:nth-child(2) { width: 40%; padding-left: 50px !important;}
    
        #summary .width50 .homeInstructionsBtn { display:none !important;}
        #summary .width50:nth-child(2) img { display:none;}
        #summary .width50:nth-child(2) div { color:#000 !important; }

    #summary h2 { margin: 0;}
    #summary .padding30 { padding: 0;}

    footer { display:none !important;}

    .greenGradient { background: none !important;}
  }