/***********************************************************/
/*******Our Futures Mobile Responsive Design Changes********/
/*********************************************************/

.zoneMiddleHeaderWrapNoBlue{
padding-left: 10px !important;
}	


@media screen and (min-width: 360px) and (max-width: 747px) {
	.widgetframe{
		height:1200px !important;
	}
}

.ourfuturessubbackgroundLayer2{
    width: 100% !important;
    }

/* This makes it so the user cannot scroll right and left of the page and gets rid of the overflow */
    html {
        overflow-x: hidden !important;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        }
    body {
    height: 100%;
    overflow-x: hidden !important;
    }
}

/* Sizing areas where the content on the page is responsive. */
@media screen and (min-width:360px){
    .MobileOurFutures{        
        display:none;
    }
}
@media screen and (max-width: 360px){
    .BottomColumns{
        width: 25% !important;
        border-left: none !important;
        border-right: none !important;
        height: auto !important;
    }
    .MobileOurFutures{
       position: relative; right:190px;
        height: 215px;
    }
    .zoneMiddleMenuWrap2{
        height:210px;
    }
	.zoneMiddleHeaderWrapNoBlue{
		font-size: 13px;
		padding-top: 10px;
	}
}
@media screen and (min-width: 361px) and (max-width: 401px) {
    .BottomColumns{
        width: 28% !important;
        border-left: none !important;
        border-right: none !important;
    }
    .MobileOurFutures{
        position: relative; right:170px;
        height: 215px;
    }
    .zoneMiddleMenuWrap2{
        height:210px;
    
    }
	.zoneMiddleHeaderWrapNoBlue{
		font-size: 13px;
		padding-top: 10px;
	}
}
@media screen and (min-width: 402px) and (max-width: 423px){
    .BottomColumns{
        width:  30% !important;
        border-left: none !important;
        border-right: none !important;
    }
    .MobileOurFutures{
       position: relative; right:145px;
        height: 215px;
    }

    .zoneMiddleMenuWrap2{
        height:210px;
    }
	.zoneMiddleHeaderWrapNoBlue{
		font-size: 13px;
		padding-top: 10px;
	}

}
@media screen and (min-width: 424px) and (max-width: 475px){
    .BottomColumns{
        width: 32.5% !important;
        border-left: none !important;
        border-right: none !important;
    }
    .MobileOurFutures{
       position: relative; right:120px;
        height: 215px;
    }

    .zoneMiddleMenuWrap2{
        height:210px;
    }
	.zoneMiddleHeaderWrapNoBlue{
		font-size: 13px;
		padding-top: 10px;
	}
}
@media screen and (min-width: 476px) and (max-width: 550px){
    .BottomColumns{
        width: 37% !important;
        border-left: none !important;
        border-right: none !important; 
    }  
    .MobileOurFutures{
        position: relative; right:105px;
        height: 215px;
    }

    .zoneMiddleMenuWrap2{
        height:210px;
    }
	.zoneMiddleHeaderWrapNoBlue{
		font-size: 13px;
		padding-top: 10px;
	}

}
@media screen and (min-width: 551px) and (max-width: 618px){
    .BottomColumns{
        width: 44% !important;
        border-left: none !important;
        border-right: none !important;        
    }
    .MobileOurFutures{
       position: relative; right:50px;
        height: 215px;
    }

    .zoneMiddleMenuWrap2{
        height:210px;
    }
	.zoneMiddleHeaderWrapNoBlue{
		font-size: 13px;
		padding-top: 10px;
	}
}
@media screen and (min-width: 619px) and (max-width: 652px){
    .BottomColumns{
        width: 50% !important;
        word-wrap: break-word;
    }
    .MobileOurFutures{
       position: relative; right:40px;
       height: 215px;
    }

    .zoneMiddleMenuWrap2{
        height:210px;
    }
	.zoneMiddleHeaderWrapNoBlue{
		font-size: 13px;
		padding-top: 10px;
	}
}
@media screen and (min-width: 200px) and (max-width: 652px){
    .zoneMiddleMenuWrap2 a{
        display: none !important;
    }
    .ourfuturessubbackgroundLayer2{
        display:none !important;
    }
    .ourfut1{
        display:none !important;
    }
}
@media screen and (min-width: 653px) and (max-width: 700px){
    .BottomColumns{
        width: 54% !important;
        word-wrap: break-word;
    }
    .ourfuturessubbackgroundLayer2{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 195px !important;
    }
    .zoneMiddleMenuWrap2{
        width: 60% !important;
        height: 135px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .zoneMiddleMenuWrap2 a{
        position: relative; bottom: 30px; right:20px !important;
        font-size: 13px !important;
    }
    .zoneMiddleMenuWrap2 h2{
        position: relative; bottom: 10px !important;
    }
    .PagesOne{
        position: relative; right: 10px !important;
    }
    .PagesTwo{
        position: relative; right: 50px !important;
    }
    .PagesThree{
        position: relative; right: 150px !important;
    }

}
@media screen and (min-width: 701px) and (max-width: 734px){
    .BottomColumns{
        width: 56.5% !important;  
    }
    .ourfuturessubbackgroundLayer2{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 220px !important;
    }
    .zoneMiddleMenuWrap2{
        width: 60% !important;
        height: 145px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .zoneMiddleMenuWrap2 a{
        position: relative; bottom: 20px; right:20px !important;
        font-size: 14px !important;
    }
    .zoneMiddleMenuWrap2 h2{
        position: relative; bottom: 10px !important;
    }
    .PagesThree{
        position: relative; right: 100px !important;
    }
 
}
@media screen and (min-width: 735px) and (max-width: 755px){
    .BottomColumns{
        width: 59% !important; 
        word-wrap: break-word;
    }
    .ourfuturessubbackgroundLayer2{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 220px !important;
    }
    .zoneMiddleMenuWrap2{
        width: 60% !important;
        height: 145px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .zoneMiddleMenuWrap2 a{
        position: relative; bottom: 20px; right:20px !important;
        font-size: 14px !important;
    }
    .zoneMiddleMenuWrap2 h2{
        position: relative; bottom: 10px !important;
    }
    .PagesThree{
        position: relative; right: 100px !important;
    }
}
@media screen and (min-width: 756px) and (max-width: 790px){
    .BottomColumns{
        width: 60% !important;    
    }
    .ourfuturessubbackgroundLayer2{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 220px !important;
    }
    .zoneMiddleMenuWrap2{
        width: 60% !important;
        height: 145px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .zoneMiddleMenuWrap2 a{
        position: relative; bottom: 20px; right:20px !important;
        font-size: 14px !important;
    }
    .zoneMiddleMenuWrap2 h2{
        position: relative; bottom: 10px !important;
    }
    .PagesThree{
        position: relative; right: 100px !important;
    }
}
@media screen and (min-width: 791px) and (max-width: 860px){
    .BottomColumns{
        width: 65% !important;
    }
    .ourfuturessubbackgroundLayer2{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 245px !important;
    }
    .zoneMiddleMenuWrap2{
        width: 70% !important;
        height: 165px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .zoneMiddleMenuWrap2 a{
        position: relative; bottom: 20px; right:20px !important;
        font-size: 16px !important;
    }
    .zoneMiddleMenuWrap2 h2{
        position: relative; bottom: 8px !important;
    }

}
@media screen and (min-width: 861px) and (max-width: 920px){
    .BottomColumns{
        width: 70% !important;
    }
    .ourfuturessubbackgroundLayer2{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 399px !important;
    }
    .zoneMiddleMenuWrap2{
        width: 73% !important;
        height: 190px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .zoneMiddleHeaderWrapNoBlue{
        width: 73% !important;
    }
    .zoneMiddleMenuWrap2 a{
        position: relative; bottom: 10px; right:20px !important;
    }
    .zoneMiddleMenuWrap2 h2{
        position: relative; bottom: 5px !important;
    }
}
@media screen and (min-width: 921px) and (max-width: 1000px){
    .BottomColumns{
        width: 75% !important;
    }
    .ourfuturessubbackgroundLayer2{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 450px !important;
    }
    .zoneMiddleMenuWrap2{
        width: 84% !important;
        height: 190px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .zoneMiddleMenuWrap2 a{
        position: relative; bottom: 10px; right:20px !important;
    }
    .zoneMiddleMenuWrap2 h2{
        position: relative; bottom: 5px !important;
    }

}
@media screen and (min-width: 1001px) and (max-width: 1050px){
    .BottomColumns{
        width: 80% !important;
    }
    .ourfuturessubbackgroundLayer2{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 400px !important;
    }
    .zoneMiddleMenuWrap2{
        width: 90% !important;
        height: 200px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .zoneMiddleMenuWrap2 a{
        position: relative; bottom: 10px; right:20px !important;
    }
    .zoneMiddleMenuWrap2 h2{
        position: relative; bottom: 5px !important;
    }
}
@media screen and (min-width: 1051px) and (max-width: 1105px){
    .BottomColumns{
        width: 80.5% !important;
    }
    .ourfuturessubbackgroundLayer2{
        background-repeat: no-repeat !important;
        background-size: contain !important;
        height: 495px !important;
    }
    .zoneMiddleMenuWrap2{
        width: 92% !important;
        height: 200px !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .zoneMiddleHeaderWrapNoBlue, .zoneMiddleHeaderWrap{
        width: 92% !important;
    }
    .zoneMiddleMenuWrap2 a{
        position: relative; bottom: 5px; right:8px !important;
    }
    .zoneMiddleMenuWrap2 h2{
        position: relative; bottom: 2px !important;
    }
}
@media screen and (min-width: 1106px) {
    .BottomColumns{
        width: 90% !important;
    }  
}

/*This area until the next comment is the CSS for controlling the Activity Suggestions form page and the CME Contact Us form page. */
@media all and (max-width: 800px) {
.ActivitySuggestions tr{
    display: block;
}
 tr#BriefReason label{ word-wrap: break-word !important;white-space: pre-wrap !important;}
.ActivitySuggestions table td:nth-child(1) {
  width: 100%;
  min-width: 1px;
  max-width: 305px;
  padding-bottom:5px;
  display: inline-block;
  word-wrap: break-word !important;
}
.ActivitySuggestions table td:first-of-type{height: 15px !important; padding-top: 36px !important;}
#BriefReason td:first-of-type{ padding-bottom:32px !important; }
  tr#BriefReason textarea{height: 60px !important; width: 305px !important;}
}

/*This adds spacing to the radiobutton on the Activity Suggestions page for all sizes. */
    input[type="radio"]{margin: 0 5px 0 15px;}

/*This section is to resize the CME Contact Us page.*/
@media all and (max-width: 800px) {

.CMEContactUs tr {
    display: block;
    width: 100%;
  }
.CMEContactUs tr td {
    display: block;
    width: 100%;
  }
.CMEContactUs tr td::before {
    display: block;
  }
.CMEContactUs table td:first-of-type{height: 20px !important;}
tr#QuestionComment textarea{height: 60px !important; width: 305px !important;}
}

tr#NameContactUs, tr#PhoneContactUs, tr#QuestionComment {padding-bottom: 10px !important;}

/*Changing the spacing on the bullet list */
.PageList li, .PDFList li {margin-bottom: 20px;}
.RecordingList ul li{margin-bottom: 20px; font-weight: normal !important; text-decoration: underline !important;}
.PDFList a{font-weight: normal !important; text-decoration: underline !important;}