/* Large desktop */
@media (max-width: 1024px) {
body{overflow-x: hidden;}	
a#logo{ width:50%; /* margin:0 auto !important; */ padding-left:30px; float:left;}
a#logo img{ max-width:30%;}
a#logo .textLogo{ width:50%; margin-left:0;}	
.footer_right{ width:42%; margin-top:10px;}
#footer_logo{text-align:center; width:100%;}
#footer_logo #logo{ width:100% !important; height:auto;}

	
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 989px) {
body{overflow-x: hidden;}	
#header{ width:auto; height:auto; padding:0 5px;}
.container{ width:100% !important;}	
a#logo{ width:50%; /* margin:0 auto !important; */ padding-left:30px; float:left;}
a#logo img{ max-width:30%;}
a#logo .textLogo{ width:50%; margin-left:0;}
#SliderContainer{ width:100%;}
#bigPic{ width:100%;}
#bigPic a{ width:100%;}
#bigPic a .caption{ width:100%;}
#bigPic a .caption span.imgTitleBox{ margin-left:10px;}
#bigPic a .caption span.imgSubTitleBox{ font-size:18px; text-indent:10px; width:100%;}
#DIVthumbs{ width:auto; padding:0 5px;}
ul#thumbs, ul#thumbs li{ }
ul#thumbs li{}
#homeBoxes{ width:auto; padding:0 5px;}
#homeTopRow{ width:100%; height:auto;}
#PeacePara{ width:50%;}
.micLeft{ width:50%; background-position:50% 100%; border-radius:0;}
.micText{ width:100%; padding:0;}
.rightPeace{ width:44%; padding:10px;}
#Mag{ width:49%; height:auto; padding:0 0 20px 0;}
.leftMag{ width:44%; padding:10px; float:left;}
.magImg{ width:50%; float:left;top:inherit; right:inherit; position:relative;}
#Mag .boxText{ width:100%;}
.magImg a img{ width:100%;}
#homeBoxes .button.micButton{ position:relative; left:inherit; bottom:inherit; margin-top:10px;}
#treatsBooks{ width:auto; padding:0 5px;}
#Retreats{ width:50%; height:auto; border-radius:0; margin:0 0 10px 0;}
.budLeft{ width:45%; background-position:100% 100%; border-radius:0;}
.rightTrain{width:50%; padding:8px; float:left;}
#Retreats a.button{position:relative; left:inherit; bottom:inherit; margin-top:10px;}
#booksBooks{width:49%; padding:0; margin:0 0 10px 0; height:auto;}
.leftBook{ width:50%; float:left; padding:8px;}
.bookImg{width:45%; float:left; margin:10px 0 0 0; top:inherit; right:inherit; position:relative;}
.bookImg a img{ width:95%;}
#homeBoxesBottom{ width:auto; padding:0 5px;}
#PersonPower{ height:auto;}
.medLeft{ width:45%; background-position:50% 100%; border-radius:0;}
.rightIntro{ width:50%; /* height:auto; */ padding:10px;} 
#homeBoxes .button, #homeBoxesBottom .button{ font-size:12px; position:relative; left:10px; bottom:inherit;}
#Practice{ width:100%; height:auto; float:left; margin:10px 0 10px;}
#ourBlog{ width:100%; height:auto; float:left; margin:0 0 10px 0; padding:0 0 10px 0;}
.button span{ padding:0 10px;}
.centerTitle{ width:100%; float:left; text-align:center;}
.circleBox .buttonContainer{ bottom:10px;}
h1.boxTitle{ font-size:36px; line-height:42px !important;}
h2.boxSubTitle{ font-size:20px; line-height:24px !important;}
#booksBooks .button{ bottom:20px;}
#blog_left{ width:28%; padding:12px 5px 0;}
#recentItemList{ width:35%;}
#recentItemList ul li{ width:100%;}
#blogCategories{ width:35%; margin:0;}
#footer{ width:auto; padding:0 5px;}
.footer_left{ width:50%; margin:10px 0 0; float:left;}
#quoteBoxContainer{ width:100%;}
ul.quoteSlides{ width:100%;}
.quoteSlides li{ width:75%;}
.footer_right{ width:48%; margin-top:10px;}
#footer_logo{ margin:0 auto; text-align:center; width:100%;}
#footer_logo #logo{ width:auto; height:auto;}
#main {margin: 0 5px;min-height: inherit !important;width: 60% !important;}
#sidebar{min-height: inherit !important;width: 32% !important; margin: 0 5px 0 0;}
#main .main-inner p iframe{ width:100%;}
.two-thirds{ width:48%;}
.one-third{width:48%;}
.two-thirds h1 a img{ width:100%;}
.page-id-8401 #main, .page-id-8376 #main, .page-id-8415 #main{ width:99% !important;}
.one-half{ width:48%;}
.grid-12{ width:100%;}
.sp{ width:50%; float:left; text-align:center !important;}
.img_co{ width:50%; float:left; text-align:center;}
#sidebar .three_links_sidebar{ background-position:100% 30%; background-size:40%;}
#roadmapPage #main.grid-8{ width:100% !important; min-height:800px !important; height:auto !important;}
#CenterContent{ width:100% !important;}
#NewStoryButton{ left:290px;}
#EnviroButton{left:150px;}
#ClimateButton{left: 130px;}
#EconButton{left: 295px;}
#DemButton{left: 560px;}
#PeaceButton{left: 570px;}
#ResistButton{left: 510px;}
#ConstructButton{ left: 490px;}
#PowerButton{left: 310px;}

#megaMenuContainer #mega-menu ul li#menu-item-16401 .sub-container.mega{ width:100% !important;}
#menu-item-16401 .sub-container.mega ul.sub-menu.sub{width:700px !important; margin:0 25px;}

#megaMenuContainer #mega-menu ul li#menu-item-13330 .sub-container.mega{ width:100% !important;}
#menu-item-13330 .sub-container.mega ul.sub-menu.sub{width:700px !important; margin:0 25px;}
#menu-item-13331{ margin-left:0;}
#menu-item-13352{ top:45px;}

#megaMenuContainer #menu-megamenu #menu-item-13371 .sub-container.non-mega{width:700px !important; margin:0 25px;}

#megaMenuContainer #menu-megamenu #menu-item-13371 .sub-container.non-mega ul.sub-menu.sub{ background-size:100% !important;}

#megaMenuContainer #menu-megamenu .sub-container.non-mega{width:700px !important; margin:0 25px;}

.esp .aQInner{ display:none;}
.aQInner{ display:none;}
.modalOuter{ left: 0;margin: 0 auto;right: 0;width: 90%;}
.modalInner .lftCol{ width:48%; padding:0 5px; margin:170px 0 0 0;}
.modalInner .rgtCol{ width:48%; float:right; margin:170px 0 0 0;}
.modalOuter.Round{ width:90%; margin:0 auto; left:0; right:0;}
.guideBox{ margin-left:0;}


}


/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
body{overflow-x: hidden;}	
#header{ width:auto; height:auto; padding:0 5px;}
.container{ width:100% !important;}
#topMenu{ padding:0; width:355px; margin:0 auto; float:none;}	
#topMenu li{ line-height:42px;}	
#topMenu .leftFirst a{ font-size:14px; padding:0 5px;}
#topMenu li a img{ width:50%;}
#topMenu .icon a{ width:42px; height:42px; text-align:center;}
#topMenu .rightLast a{ font-size:14px; padding:0 10px;}
#megaMenuContainer{ display:none;}
#page{ display:block;}
a#logo{ width:100%; float:none; margin:0 auto !important; text-align:center; float:left;}
a#logo img{ max-width:20%; margin-top:20px;}
a#logo .textLogo{ width:40%; margin-left:0;}
#slogan{ width:100%; float:left; position:relative; right:inherit; top:inherit; text-align:center; margin:20px 0;}
#content-wrap{ width:100%; float:left;}
#SliderContainer{ width:100%;}
#bigPic a .caption span.imgSubTitleBox{ width:100%;}
#bigPic{ width:100%;}
#bigPic a{ width:100%;}
#bigPic a .caption{ width:100%;}
#bigPic a .caption span.imgTitleBox{ margin-left:10px;}
#bigPic a .caption span.imgSubTitleBox{ font-size:14px; text-indent:10px;}
ul#thumbs, ul#thumbs li{}
ul#thumbs li{}
#homeBoxes{ width:auto; padding:0 5px;}
#homeTopRow{ width:100%; height:auto;}
#PeacePara{ width:100%; border-radius:0;}
.micLeft{ width:50%; background-position:100% 100%; border-radius:0;}
.micText{ width:100%; padding:0;}
.rightPeace{ width:45%; padding:8px; border-radius:0;}
#Mag{ width:100%; height:auto; padding:0; margin:10px 0; border-radius:0;}
.leftMag{ width:50%; padding:8px; float:left;}
.magImg{ width:45%; min-height:235px; float:left; margin:10px 0 0 0; top:inherit; right:inherit; position:relative;}
#Mag .boxText{ width:100%;}
.magImg a img{ width:100%;}
#homeBoxes .button.micButton{ position:relative; left:inherit; bottom:inherit; margin-top:10px;}
#treatsBooks{ width:auto; padding:0 5px;}
#Retreats{ width:100%; height:auto; border-radius:0; margin:0 0 10px 0;}
.budLeft{ width:50%; background-position:100% 100%; border-radius:0;}
.rightTrain{width:45%; padding:8px; float:left;}
#Retreats a.button{position:relative; left:inherit; bottom:inherit; margin-top:10px;}
#booksBooks{width:100%; padding:0; margin:0 0 10px 0; height:auto;}
.leftBook{ width:50%; float:left; padding:8px;}
.bookImg{width:45%; float:left; margin:10px 0 0 0; top:inherit; right:inherit; position:relative;}
.bookImg a img{ width:100%;}
#homeBoxesBottom{ width:auto; padding:0 5px;}
#PersonPower{ height:auto;}
.medLeft{ width:45%; background-position:50% 100%; border-radius:0;}
.rightIntro{ width:50%; height:auto; padding:5px;}
#homeBoxes .button, #homeBoxesBottom .button{ font-size:12px;}
h1.boxTitle{ font-size:28px !important; line-height:30px !important;}
h2.boxSubTitle{ font-size:16px; line-height:20px !important;}
#Practice{ width:100%; height:auto; float:left; margin:0 0 10px 0;}
.circleBox{ width:100%; float:left;}
#ourBlog{ width:100%; height:auto; float:left; margin:0 0 10px 0; padding:0 0 10px 0;}
#footer{ width:auto; padding:0 5px;}
.footer_left{ width:100%; margin:10px 0 0; float:left;}
#quoteBoxContainer{ width:100%;}
ul.quoteSlides{ width:100%;}
.quoteSlides li{ width:75%;}
#supportText{ padding:0; text-align:center; margin:20px 0;}
.footer_right{ width:100%; float:left; text-align:center;}
#social_footer{ margin:15px auto 0;}
#footer_logo{ margin:0 auto; text-align:center; width:70%;}
#footer_logo #logo{ width:auto; height:auto;}
.up_button{ float:right; margin:20px 0 10px 75px;}
#blogCategories{ width:98%; padding:0 5px;}
.centerTitle{ width:100%; text-align:center;}
#main {float: none !important;margin: 0 5px;min-height: inherit !important;width: auto !important;}
#sidebar{float: none !important;margin:10px 5px 0;min-height: inherit !important;width: auto !important;}
#roadmapPage #main.grid-8{ width:auto !important;}
#CenterContent{ width:100%;}
#roadmapWheel{ width:auto; background-size:100%;}
#main .main-inner p iframe{ width:100%;}
.mk{ width:100%; padding:0 !important; text-align:center;}
.two-thirds{ width:100%;}
.one-third{width:100%;}
.two-thirds h1 a img{ width:100%;}
.page-id-8401 #main, .page-id-8376 #main, .page-id-8415 #main{ width:auto !important;}
/*----*/
#BeginHereButton{display:block; left:10px; width:60px; height:60px; top:-30px;}
#BeginHereButton a{ height:52px; font-size:12px; line-height:18px;}
#NewStoryButton{ display:block; width:40px; height:40px; left:92px; top:10px;}
#NewStoryButton a{ height:40px; width:40px;}
#NewStoryButton a:hover{ width:40px; background-size:100%;}
#EnviroButton{display:block; width:40px; height:40px; top:65px; left:25px;}
#EnviroButton a{ height:40px; width:40px;}
#EnviroButton a:hover{ width:40px; background-size:100%; background-position:45% 1%;}
#ClimateButton{display:block; width:40px; height:40px; top:184px; left:22px;}
#ClimateButton a{ height:40px; width:40px;}
#ClimateButton a:hover{ width:40px; height:40px; background-position:45% 1%; background-size:100%;}
#EconButton{display:block; width:40px; height:40px; top:250px; left:92px;}
#EconButton a{ height:40px; width:40px;}
#EconButton a:hover{ width:40px; height:40px; background-position:45% 1%; background-size:100%;}
#DemButton{display:block; width:40px; height:40px; left:253px; top:152px;}
#DemButton a{ height:40px; width:40px;}
#DemButton a:hover{ width:40px; height:40px; background-position:45% 1%; background-size:100%;}
#PeaceButton{display:block; width:40px; height:40px; left:238px; top:67px;}
#PeaceButton a{ height:40px; width:40px;}
#PeaceButton a:hover{ width:40px; height:40px; background-position:45% 1%; background-size:100%; border-radius: 100%;}
#ResistButton{display:block; width:150px; height:40px; left:199px; top:62px;}
#ResistButton a{ height:40px; width:150px;}
#ResistButton a:hover{ width:150px; height:40px; background-position:45% 1%; background-size:100%;}
#ConstructButton{display:block; width:100px; height:40px; left:180px; top:75px;}
#ConstructButton a{ height:40px; width:100px;}
#ConstructButton a:hover{ width:120px; height:40px; background-position:45% 1%; background-size:100%;}
#PowerButton{display:block; height:40px; width:40px; left:137px; top:130px;}
#PowerButton a{ height:40px; width:40px;}
#PowerButton a:hover{ width:40px; height:40px; background-position:45% 1%; background-size:100%;}
#InnerContentContainer{ width:310px; height:310px; margin:0 auto;}
/*----*/
#roadmapWheel{ width:300px; height:300px; position:relative; left:inherit; margin:0 auto; background-size:100%;}
#roadmapPage #main.grid-8{ height:auto !important; min-height:500px !important;}
#homeBoxes #homeTopRow #Mag .button{ position:inherit; left:10px; margin:5px 0 10px 10px;} /* was 40px 0 0 0 */
#blog_left{ width:91%;}
#recentItemList{ width:98%; padding:0 5px; margin:0;}
#recentItemList ul li{ width:100%;}
#blogCategories{width:auto; padding:0 5px; margin:0; float:left !important;}
#blogCategories ul li{ width:100%;}
.modalOuter{ left: 0;margin: 0 auto;right: 0;width: 90%;}
.modalHeader .subheading{ font-size:12px !important; line-height:18px; width:95%; left:0; padding:0 5px; margin-top:10px;}
.modalHeader .subheading br{ display:none;}
.modalInner .lftCol{ width:auto; padding:0 5px; margin:50px 0 0 0;}
.modalInner .rgtCol{ width:100%; float:left; margin:0;}
.modalInner .modalHeader{ min-height:100px;}
.modalOuter.Round{ width:90%; margin:0 auto; left:0; right:0; height:auto; border-radius:0;}
.Round .modalInner, .Round .modalInner .modalHeader{ width: auto; padding:0;}
.Round .lftCol .leftColMove{ margin:0; width:100%;}
.modalInner .lftCol .mainTextP{ width:100% !important;}
#Power .infoButtons{ width:100%;}
.Round .infoButtons ul{ margin:0 !important;}
#Construct .infoButtons{ width:100%;}
#Resist .infoButtons{ width:100%;}
#BeginHere .infoButtons{ width:100%;}
.guideBox{ width:300px; height:300px; margin:0 auto; background-size:100%;}

}


@media (min-width: 320px) and (max-width: 480px) {
#topMenu{ padding:0; width:305px; margin:0 auto; float:none;}	
#topMenu li{ line-height:35px;}
#social_drop{ top:35px;}	
#topMenu .phoneIcon div.phone_num{ top:35px;}
#topMenu .contactIcon div.email_add{ top:35px; left:-40px;}
#topMenu .searchIcon div.search_drop{ top:35px; left:-100px;}
#topMenu .leftFirst a{ font-size:12px; padding:0 5px;}
#topMenu li a img{ width:50%;}
#topMenu .icon a{ width:35px; height:35px; text-align:center;}
#topMenu .rightLast a{ font-size:10px; padding:0 10px;}
a#logo{ width:100%; float:none; margin:0 auto !important; text-align:center; float:left;}
a#logo img{ width:25%;}
a#logo .textLogo{ width:50%; margin-left:0;}
#slogan{ font-size:20px;}
#bigPic{ width:100%; height:250px;}
#bigPic a{ width:100%;  height:250px;}
#bigPic a img{ height:250px;}
#bigPic a .caption span.imgTitleBox{ margin-left:10px; height:50px; line-height:50px; font-size:30px;}
#bigPic a .caption span.imgSubTitleBox{ font-size:11px; text-indent:10px; height:35px; line-height:35px; width:100%; overflow:hidden;}
ul#thumbs, ul#thumbs li{  }
ul#thumbs li{ }
#footer{ width:auto; padding:0 5px;}
.footer_left{ width:100%; margin:10px 0 0; float:left;}
#quoteBoxContainer{ width:100%; height:200px;} /* was 140px */
ul.quoteSlides{ width:100%; height:140px;}
.quoteSlides li{ width:75%;}
#supportText{ padding:0; text-align:center; margin:20px 0;}
.footer_right{ width:100%; float:left; text-align:center;}
#social_footer{ margin:15px auto 0;}
#footer_logo{ margin:0 auto; text-align:center;}
#footer_logo #logo{ width:auto; height:auto;}
.up_button{ float:right; margin:20px 0 10px 75px;}
#homeBoxes .button, #homeBoxesBottom .button{ font-size:9px; }
#blog_left{ width:91%;}
#recentItemList{ width:98%; padding:0 5px; margin:0;}
#recentItemList ul li{ width:100%;}
#blogCategories{width:auto; padding:0 5px; margin:0; float:left !important;}
#blogCategories ul li{ width:100%;}
#main {float: none !important;margin: 0 5px;min-height: inherit !important;width: auto !important;}
#sidebar{float: none !important;margin:10px 5px 0;min-height: inherit !important;width: auto !important;}
.img_co{ width:100%; float:left; text-align:center;}
.img_co img{ float:none;}
.sp{ width:100%; float:left; text-align:center !important;}
.sp img{ float:none;}
#booksBooks .button{bottom: 5px;left: 10px;position:inherit; margin:15px 0 5px 0;}
.modalHeader .icon{ width:50px !important; height:50px !important; background-size:100% !important;}
.modalHeader .heading{ left:80px; font-size:20px; line-height:25px;}
#NewStory .subheading{ width:95%; padding:0 5px; float:left; left:0;}
.modalHeader .closeBtn{ top:-3px; right:-9px;}


}

@media (max-width: 360px) {
#slogan{ font-size:16px;}
#homeBoxes{ width:auto; padding:0 5px;}
#homeTopRow{ width:100%; height:auto;}
#PeacePara{ width:100%; border-radius:0;}
.micLeft{ width:100%; background-position:100% 100%; border-radius:0;}
.micText{ width:100%; padding:0;}
.rightPeace{ width:auto; float:left; padding:10px; border-radius:0;}
#Mag{ width:100%; height:auto; padding:0; margin:10px 0; border-radius:0;}
.leftMag{ width:auto; padding:10px; float:left;}
.magImg{ width:100%; float:left; margin:10px 0 0 0; top:inherit; right:inherit; position:relative;}
#Mag .boxText{ width:100%;}
.magImg a img{ width:100%;}
#homeBoxes .button.micButton{ position:relative; left:inherit; bottom:inherit; margin-top:10px;}
#treatsBooks{ width:auto; padding:0 5px;}
#Retreats{ width:100%; height:auto; border-radius:0; margin:0 0 10px 0;}
.budLeft{ width:100%; background-position:100% 100%; border-radius:0;}
.rightTrain{width:auto; padding:10px; float:left;}
#Retreats a.button{position:relative; left:inherit; bottom:inherit; margin-top:10px;}
#booksBooks{width:100%; padding:0; margin:0 0 10px 0; height:auto;}
.leftBook{ width:auto; padding:10px;}
.bookImg{width:100%; float:left; margin:10px 0 0 0; top:inherit; right:inherit; position:relative;}
.bookImg a img{ width:100%;}
#homeBoxesBottom{ width:auto; padding:0 5px;}
#PersonPower{ height:auto;}
.medLeft{ width:100%; background-position:100% 100%; border-radius:0;}
.rightIntro{ width:auto; height:auto; padding:10px; margin:10px 0;}
#homeBoxes .button, #homeBoxesBottom .button{ font-size:12px;}
#bigPic{ width:100%; height:200px;}
#bigPic a{ width:100%;  height:200px;}
#bigPic a img{ height:200px;}
.main-inner p a img{ width:100%; margin:10px 0;}
.main-inner p img{ width:100%; margin:10px 0;}
h3 img{ width:100%;}
#roadmapWheel{ width:300px; height:300px; position:relative; left:inherit; margin:0 auto; background-size:100%;}
#topMenu .rightLast a{ font-size:10px; padding:0 10px;}

}

@media (max-width: 320px) {

}