* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.chromeframe {position: absolute; top: 0;}

body, select, input, textarea {font-family: 'News Cycle', sans-serif; color: #3a4092; font-size: 21px; }

a {color: #03f;}
a:hover {color: #69f;}


/* Topnav styles
-------------------------------------------------------------------------------*/

#topnav { position: absolute; top: 0; border-bottom-color: transparent; z-index: 1500; width: 100%; height: 92px; background-color: rgba(6, 85, 91, 0.5); -webkit-background-clip: padding-box; }
#topnav-content { max-width: 1340px; margin-left: auto; margin-right: auto; margin: 0 auto; }
 #topnav-content:after { content: "";  display: table; clear: both; }
#topnav-content h1 { position: absolute; height: 125px; background: url(../img/bg_topnav_blog.png) 5px 0 no-repeat; float: left; margin: 0; padding: 15px 65px 16px 44px; }
#topnav-content ul { float: right; margin: 0 0 0 -100px; padding: 12px 0 0; }
nav ul, nav ol { list-style: none; list-style-image: none; }
#topnav-content li { float: left; padding: 0 5px; }
#topnav-content li a { display: block; height: 66px; padding: 22px 0; font-size: 16px; color: #fff; text-align: center; text-decoration: none; text-transform: uppercase; background-image: url(../img/sprite_main_nav.png); background-repeat: no-repeat; font-weight: bold; }
#topnav-content li:hover a, #topnav-content li.current a { color: #333344; }
#topnav-content .nav-home a, #topnav-content .nav-blog a { width: 72px; background-position: 0 0; }
#topnav-content .nav-have-you-got-the-guts.current a { background-position: -338px -66px; }
#topnav-content li:hover a, #topnav-content li.current a { color: #333344; }
#topnav-content .nav-home a, #topnav-content .nav-blog a { width: 72px; background-position: 0 0; }
#topnav-content .nav-home a:hover, #topnav-content .nav-blog a:hover { background-position: 0 -132px; }
#topnav-content .nav-home.current a, #topnav-content .nav-blog.current a { background-position: 0 -66px; }
#topnav-content .nav-carers a { width: 81px; background-position: -72px 0; }
#topnav-content .nav-carers a:hover { background-position: -72px -132px; }
#topnav-content .nav-carers.current a { background-position: -72px -66px; }
#topnav-content .nav-their-story a { width: 130px; background-position: -153px 0; }
#topnav-content .nav-their-story a:hover { background-position: -153px -132px; }
#topnav-content .nav-their-story.current a { background-position: -153px -66px; }
#topnav-content .nav-faqs a { width: 55px; background-position: -283px 0; text-transform: none; }
#topnav-content .nav-faqs a:hover { background-position: -283px -132px; }
#topnav-content .nav-faqs.current a { background-position: -283px -66px; }
#topnav-content .nav-have-you-got-the-guts a { width: 160px; background-position: -338px 0; text-transform: none; }
#topnav-content .nav-have-you-got-the-guts a:hover { background-position: -338px -132px; }
#topnav-content .nav-have-you-got-the-guts.current a { background-position: -338px -66px; }


/* General section styles
-------------------------------------------------------------------------------*/

body{ background-image: url(../img/bg_body.png); background-attachment: fixed; }

.panel { position:relative; }

.panel video { width:100%; height:100%; position: absolute; top:0; left:0; object-fit:cover; }

.vertical-center { width:100%; position: absolute; top: 47%; transform: translateY(-47%); display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; }

.inner { position: relative; height:100%; width:80%; max-width:1100px; margin:0 auto; }
.half-page { height:50%; }
.half-page-inner{ position: relative; width:80%; height: 100%; max-width:1100px; margin:0 auto; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; }
.half-page-greater{ height:66%; }
.half-page-lesser{ height:34%; }

.visual { width:50%; -webkit-box-flex: 1;  -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-align:center; }
.visual img{ height:auto; }
.text-content { width:50%; padding:0 30px; }
.text-content h1, .text-content p{ max-width:500px; }

h1 { font-size:28px; color:#b43d4e; padding-bottom:15px; line-height:35px; }
p { padding-bottom:10px; line-height:30px; }
a { color:#ffc4e0; }
ul { text-align: left; }

.scroll-prompt-top{ position:absolute; width:188px; height:118px; bottom:10%; left:43%; left:calc(50% - 94px); cursor:pointer; -webkit-animation: 3s arrow infinite ease; animation: 3s arrow infinite ease; }
.scroll-prompt{ position:absolute; width:80px; height:50px; bottom:10%; left:49%; left:calc(50% - 40px); cursor:pointer; -webkit-animation: 3s arrow infinite ease; animation: 3s arrow infinite ease; }
.btn-top{ position:absolute; width:64px; height:64px; top:20px; left:20px; cursor:pointer; z-index:9000; }

.button { margin-top:15px; display:inline-block; font-size:21px; line-height:22px; background:url(../img/bg_button.png) no-repeat right center; background-color:#ea77b0; color:#fff; padding:12px 47px 14px 15px; text-decoration:none; }
.button:hover { color:#fff; background-color:#f6bed8; }


/* Specific section styles
-------------------------------------------------------------------------------*/

.header { height:125px; }

.panel-intro { background-color:#1f8cb1; color:#fff; }
.panel-intro h1{ color: #3a4092; }
.panel-intro .visual { width:40%;}
.panel-intro .text-content { width:60%; }
.panel-intro .text-content h1, .panel-intro .text-content p{ max-width:580px; }

.panel-prevalence a{ color:#b43d4e; }

.panel-main-symptoms { background-color:#e775aa; color:#fff; }
.panel-main-symptoms h1{ color: #3a4092; }
.panel-main-symptoms a{ color:#b43d4e; }

.panel-invisible-symptoms { background-image:url(../img/bg_i_s.png); background-color:#3a4092; background-position: center center; background-attachment: fixed; background-size: cover; color:#fff; }
.panel-invisible-symptoms h1{ color:#ea77b0; }
.panel-invisible-symptoms .visual img{ float:left; }
.panel-invisible-symptoms .visual li{ padding:6px 0 10px 0; }
.panel-invisible-symptoms .visual li:nth-child(2) a{ padding-left:15px; }
.panel-invisible-symptoms .visual li:nth-child(3) a{ padding-left:30px; }
.panel-invisible-symptoms .visual li:nth-child(4) a{ padding-left:25px; }
.panel-invisible-symptoms .visual li:nth-child(5) a{ padding-left:10px; }

.panel-video { background:#1f8cb1; color:#fff; overflow:hidden; }
.panel-video h1{ color: #3a4092; }
.panel-video .visual { width:34%;}
.panel-video .visual a:hover{ opacity:0.9; }
.panel-video .text-content { width:66%; }
.panel-video .text-content h1, .panel-video .text-content p{ max-width:610px; }

.spread-the-word{ background:#cfeaef; }
.spread-the-word .half-page-inner{ flex-wrap: wrap; }
.spread-the-word h1{ color:#3a4092 }
.spread-the-word p{ color:#ea77b0; }
.spread-the-word-links{ width:100%; display:flex; flex-wrap: nowrap; padding-top:20px; }
.cca-logo{ display:block; flex: 1; }
.hashtags{ flex: 1; }
.hashtags li{ font-weight:bold; float:left; padding-left:30px; }


/* Footer styles
-------------------------------------------------------------------------------*/

#footer { position: relative; z-index: 100; width: 100%; min-height: 80px; background: #06565b; color: #fff; font-size: 15px; padding: 28px 0; } 

#footer-content { max-width: 1100px; margin-left: auto; margin-right: auto; padding: 0 15px; } 
#footer-content:after { content: ""; display: table; clear: both; } 
#footer-content > div:first-child { float: left; display: block; margin-right: 2.35765%; width: 23.23176%; } 
#footer-content > div:first-child:last-child { margin-right: 0; }

#footer-content > div:last-child { float: left; display: block; margin-right: 2.35765%; width: 74.41059%; }
#footer-content > div:last-child:last-child { margin-right: 0; }

#footer-content img { margin-top: 2px; } 
#footer-content ul { float: right; margin: 0; padding: 0; list-style: none; } 
#footer-content li { float: left; padding-left: 20px; } 
#footer-content a { color: #fff; text-decoration: none; } 
#footer-content a:hover { color: #efc171; }

#sub-footer { padding: 20px 15px; background: #0095ac; color: #fff; font-size: 13.6px; } 
#sub-footer .zone { max-width: 1100px; margin-left: auto; margin-right: auto; } 
#sub-footer .zone:after { content: ""; display: table; clear: both; } 
#sub-footer .client-codes { font-size: 15px; }
#sub-footer p { line-height: 18px; }

.references span{ word-break: break-all; }


/* Popup styles
-------------------------------------------------------------------------------*/

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0); outline: none;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

.popups { display:none; }

.popup { border-bottom:6px solid rgba(0, 0, 0, 0.2); max-width: 900px; }
.popup-header { background:#ea77b0; color:#fff; font-size:36px; line-height:40px; padding:22px 32px 30px; }
.popup-content { background:#fff; padding:32px; overflow:auto; }
.popup-content p{ min-width:500px; }
.popup-content img{ float:right; }
#cboxClose{ position:absolute; top:28px; right:28px; width:38px; height:38px; background:url(../img/btn_popup_close.png) top left no-repeat; border:none; text-indent: -999em; overflow: hidden; }
#cboxClose:hover{ background-position: bottom left; }
#cboxOverlay{ background:#1f8cb1; }

#popup_video{ max-width: none; }
#popup_video .popup-content { padding:0; background:transparent; }

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* Media queries
-------------------------------------------------------------------------------*/

@media screen and (max-width: 480px) { 
	#footer { padding: 15px 0; }
	#footer-content > div:first-child { float: left; display: block; margin-right: 2.35765%; width: 100%; text-align: center; }
	#footer-content > div:first-child:last-child { margin-right: 0; }
	#footer-content > div:last-child { float: left; display: block; margin-right: 2.35765%; width: 100%; text-align: center; }
	#footer-content > div:last-child:last-child { margin-right: 0; } 
	#footer-content > div:last-child ul { float: none; display: inline-block; margin-top: 7px; }
	#footer-content > div:last-child ul li { float: none; padding: 0; margin-top: 3px; }
	#sub-footer .client-codes { font-size: inherit; } 
}

@media screen and (max-width: 1000px) { 
	.inner{ width:90%; }
	.half-page-inner{ width:90%; }
}

@media screen and (max-width: 728px) { 
	.vertical-center { flex-direction: column; }
	.visual { width:100% !important;}
	.text-content { width:100% !important; text-align:center; padding:30px 0; }
	.text-content h1, .text-content p{ max-width:none !important; }
	.spread-the-word { text-align:center; }
	
	.scroll-prompt-top{ bottom:5%; -webkit-animation: 3s lower-arrow infinite ease; animation: 3s lower-arrow infinite ease; width:140px; height:88px; left:calc(50% - 70px); }
	.scroll-prompt-top img{ height:auto; }
	.scroll-prompt{ bottom:5%; -webkit-animation: 3s lower-arrow infinite ease; animation: 3s lower-arrow infinite ease; }
	
	.panel-intro .visual{ order: 1; width:80% !important; }
	.panel-intro .visual img{ position:relative; left:10%; }
	.panel-intro .text-content{ order: 2; }
	.panel-invisible-symptoms .visual { order: 2; }
	.panel-intro .text-content { order: 1; }
	
	.open #topnav-content .zone-navigation { max-height: 350px; }
	.mobile-menu { background: url(../img/btn_mobile_menu.png) no-repeat; background-size: 60px; width: 60px; height: 65px; display: block; position: absolute; top: 7px; right: 10px; } 
	#topnav { height: 80px; } 
	.zone-navigation { margin-top: 74px; } 
	#main-inner { padding-bottom: 28px; } 
	#topnav-content h1 { background-position: -58px -18px; padding-left: 29px; } 
	#topnav-content h1 a { background: url(../img/logo_own_your_ibd_sml.png) no-repeat; width: 128px; height: 43px; display: block; } 
	#topnav-content h1 a img { display: none; } 
	#topnav-content ul { background: #06565b; float: none; border-top: solid 3px; padding: 12px 0; margin-left: 0; } 
	#topnav-content ul li { float: none; } 
	#topnav-content ul li:hover a { color: #eb5d2a; } 
	#topnav-content ul li.current a { color: #f6ff00; } 
	#topnav-content ul li a { background: none; width: 100% !important; display: block; font-size: 24px; padding: 13px 0; } 
	.zone-navigation { width: 100%; max-height: 0; position: absolute; overflow: hidden; -webkit-transition: max-height 500ms ease; -moz-transition: max-height 500ms ease; transition: max-height 500ms ease; }
	
	.spread-the-word-links{ flex-direction: column; }
	
	.popup-content p{ min-width:400px; }
		
}

@media screen and (max-width: 668px) { 
	.scroll-prompt-top { display:none; }
	.scroll-prompt { display:none; }
	.btn-top{ display:none; }
	.inner { height:auto; padding:20px 0 40px; } 
	.half-page { height:auto; padding:20px 0 40px;  }
	.vertical-center { position: relative; top: 0; transform: none; }
	
	.panel-home { padding-top:90px; }
	
	.panel-invisible-symptoms .visual img{ float:none; }
	.panel-invisible-symptoms .visual li{ padding:6px 0 10px 0; text-align: center; }
	.panel-invisible-symptoms .visual li:nth-child(2) a{ padding-left:0; }
	.panel-invisible-symptoms .visual li:nth-child(3) a{ padding-left:0; }
	.panel-invisible-symptoms .visual li:nth-child(4) a{ padding-left:0; }
	.panel-invisible-symptoms .visual li:nth-child(5) a{ padding-left:0; }
	
	.hashtags { padding-bottom:10px; }
	.hashtags li{ float:none; text-align: center; padding:0; }
	
	.popup-content p{ min-width:300px; }
}



@media screen and (max-height: 728px) {
	.scroll-prompt-top{ bottom:5%; -webkit-animation: 3s lower-arrow infinite ease; animation: 3s lower-arrow infinite ease; }
	.scroll-prompt{ bottom:5%; -webkit-animation: 3s lower-arrow infinite ease; animation: 3s lower-arrow infinite ease; }
	
}



/* Animations
-------------------------------------------------------------------------------*/

@-webkit-keyframes arrow {
	0%,100% {
		bottom:10%;
	}
	50% {
		bottom:8%;
	}
}
@keyframes arrow {
	0%,100% {
		bottom:10%;
	}
	50% {
		bottom:8%;
	}
}

@-webkit-keyframes lower-arrow {
	0%,100% {
		bottom:5%;
	}
	50% {
		bottom:3%;
	}
}
@keyframes lower-arrow {
	0%,100% {
		bottom:5%;
	}
	50% {
		bottom:3%;
	}
}

.share-bar {
  overflow: hidden;
}

.share-bar .fb-like {
  overflow: hidden !important;
}
.share-bar > div {
  vertical-align: middle;
}
.share-bar > div:first-child {
  float: left;
  margin-bottom: 10px;
}
.share-bar > div:nth-child(2) {
  float: right;
  text-align: right;
}
.share-bar .at-share-btn {
  margin: 0 0 0 15px;
}
@media only screen and (max-width: 654px) {
  .share-bar > div:nth-child(2) {
    text-align: left;
  }
  .share-bar .at-share-btn {
    margin: 0 0 0 5px;
  }
}

.gutsPageShare .share {
  display: inline-block;
  vertical-align: middle;
}
.gutsPageShare .share .addthis_sharing_toolbox {
  display: inline-block;
  padding: 0 20px 0 0;
}
.gutsPageShare .share label {
  font-size: 18px;
  font-weight: 600;
  vertical-align: top;
  line-height: 38px;
}
.gutsPageShare .like {
  display: inline-block;
}