@charset "UTF-8";

/* Global Styles */

* {padding: 0; margin: 0;}
html, body {height: 100%;}
body {background:#EAEAEA; -webkit-text-size-adjust: 100%;}
img, fieldset {border: none;}
:focus {outline: 0;}
moz-any-link:focus {outline:none}
table {border-collapse:separate; border-spacing:0}
blockquote:before, blockquote:after, q:before, q:after {content:""}
blockquote, q {quotes:""""}
a {cursor:pointer}
#wrapper p, #wrapper li {padding-bottom:10px;}

/* Typography */
body {font: 400 1.1em 'Source Sans Pro', sans-serif; color:#6f6f6f; line-height:1.5em;}
h1{font:2.3em 'Source Sans Pro', sans-serif; color:#333; margin-bottom:15px; font-weight: 300; text-align:center;}
h2 {font:2.3em 'Source Sans Pro', sans-serif; color:#333; margin-bottom:15px; font-weight: 300; text-align:center;}
h3 {font:2.1em 'Source Sans Pro', sans-serif; font-weight: 300; margin-bottom:15px;}
.wrapper h4 {}
.wrapper h5 {}
.wrapper h6 {}
.wrapper p, .wrapper li {}
.wrapper a {}
.wrapper a:hover {}
.border {border-bottom:2px dotted #999; padding-bottom:20px; margin-bottom: -5px;}


/* Default Template Layout (Structure) */
.wrapper {background:#EAEAEA url(../images/bg_container.jpg) top center no-repeat; width:100%; position: absolute; top: 0; left: 0;}
.container {background:#fff;}
article {padding:50px 0 0 0;}


/* Bootstrap Fixes */
.col-sm-12 {padding:0 35px!important;}
.slider .col-sm-12, .img-bottom .col-sm-12 {padding:0!important;}
.navarea .col-sm-12 {padding:10px 25px!important}


/* navigation */
.navarea {background: #f5f5f5; border: 1px solid #e4e4e4; padding: 40px 10px 10px 0px;}
		nav  ul {width: 100%; padding: 0; margin: 0 auto;}
			nav  ul li {	list-style: none;	margin-right: 0px;}
			nav ul li.scrollTop  a {display:none;}
			nav  ul li a:before {content:"\2014"; margin-right:5px; font-weight: 300; float:left; width:15px;}
			nav  ul li a.nav-section4:before  {height:60px;}
				nav ul li a {display: block; padding-bottom: 18px; font-weight: 600; color: #3c3c3c; font-size: 1.05em; text-decoration: none; text-align:left; letter-spacing: 0px;}
		nav  ul li a:hover {color: #3c3c3c; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; text-decoration:none!important;}
		nav ul li.active a {color:#3c3c3c;}
		
	
/* HEADER */
.slider{background-image: url(../images/hero-img-lp.jpg); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; height:50vh; display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
 display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
 display: -ms-flexbox;      /* TWEENER - IE 10 */
 display: -webkit-flex; align-items: center; justify-content: center;}
 .slider section {width:100%;}
.slider h1 {background:#C9396E; color:#fff; padding:8px 10px; font-family: 'Petit Formal Script', cursive; text-transform: capitalize; font-size: 1.4em; opacity:.9; text-align:center; margin-left: auto;  margin-right: auto; -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  width: 60%;               /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */}
.slider h2 {background:#fff; color:#666; padding:8px 10px!important; font-family: 'PT Sans Narrow', sans-serif; font-size: 1em; font-weight: bold; opacity:.9; text-align:center; margin-left: auto; margin-right: auto; 
-webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  width: 90%;               /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */}

header .container {margin-top: 40px; border-top: 12px solid #FB73A5; background:#fff;  padding: 30px 0 20px 0;}
 	header .container .logo {width:70%; display:block;  margin:0 auto; margin-bottom: 40px;}
	header .container h1 {width:100%; display:block; text-align: center; font-family: 'Source Serif Pro', serif; font-size: 1.1em; line-height: 32px; color:#535457;}
header .container h1 strong {display:block; text-transform: capitalize; font-weight: 600; font-size: 1.3em;}

/* Banner */
.banner {background: url(../images/dottedbracket.png) center bottom no-repeat; padding: 20px 0 100px 0;}
	.banner h1 {text-align: center; font-family: 'Source Serif Pro', serif; text-transform: uppercase; font-size: 1.6em;}
	.banner .pink strong {color: #CA396E; font-weight: 600; font-size: 1.1em; text-transform:capitalize;}
	.banner strong .caps {font-weight: 600; font-size: 1.3em; color:#333; }
	.banner strong em {font-weight: 400; font-size: 1.3em; color:#333;}

/* BODY */
article h1 span {padding:18px 38px 16px 38px; background: #FB73A4; -webkit-border-radius: 80px;
-moz-border-radius: 80px; border-radius: 80px; color:#fff; font-family: 'PT Sans Narrow', sans-serif; font-size: 1.2em; display: block; width:100px; margin:0 auto 20px auto; width:100px; text-align:center; font-weight: 600;}
article h2 span {padding:18px 38px 16px 38px; background: #D6628E; -webkit-border-radius: 80px;
-moz-border-radius: 80px; border-radius: 80px; color:#fff; font-family: 'PT Sans Narrow', sans-serif; font-size: 1.2em; display: block; width:100px; margin:0 auto 20px auto; width:100px; text-align:center; font-weight: 600;}
	article h2 em {display:block; margin-top: 0px; margin-left: 0px; font-size: .9em; padding-bottom: 5px;}
		article h2 strong {font-weight: 300!important; font-size: 1.1em!important; font-style: normal;}
article h3 span {padding:10px 26px 10px 26px; background: #D6628E; -webkit-border-radius: 80px;
-moz-border-radius: 80px; border-radius: 80px; color:#fff; font-family: 'PT Sans Narrow', sans-serif; font-size: 1.2em; display: block; width:100px; margin:-40px auto 20px auto; width:78px; text-align:center; font-weight: 600;}
.section4 { background:#F5F5F5; border-top: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6; padding-bottom: 20px!important;}

/*.img-bottom {background-image: url(../images/mammography-machine.jpg); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; height:50vh; display: flex; align-items: center; justify-content: center; margin-top: 50px; border-bottom: 5px solid #CA396E;}*/
.img-bottom h5 {background:#fff; color:#333; padding:20px 10px 40px 10px; font-family: 'Source Serif Pro', serif; font-size: 1.8em; opacity:.9; text-align:center; margin-left: auto;  margin-right: auto; max-width: 90%; }
.img-bottom h5 span.ribbon {background:#fff url(../images/pinkribbon-bottom.png) center center no-repeat; background-size: 40px; position:absolute; left:46%; z-index:99; top: 75%; width:40px;}
.img-bottom h5:after {content:' '; position: absolute; top:85%; left:50%; width: 80%; border:1px solid #333; box-shadow:0 4px 0 #333; transform:translateX(-50%);}

.bottom-caption {background:#D04174; color:#FEFAFB; padding:20px 0; text-align:center;}
.diduknow {margin:30px 0;}
.quote {background:#F5F5F5; padding: 20px; margin-top: 40px;}
	.quote:after {content:""; position:absolute; bottom:-25px; right:50px; border-width:30px 0 0 50px; border-style:solid; border-color:#F5F5F5 transparent; display:block; width:0;}
.quote2 {background:#F5F5F5; padding: 20px;  margin-top: 50px;}
	.quote2:after {content:""; position:absolute; bottom:-25px; right:50px; border-width:30px 0 0 50px; border-style:solid; border-color:#F5F5F5 transparent; display:block; width:0;}
.call-to-action {font:1.2em 'PT Sans Narrow', sans-serif; color: #333; margin-top: 40px;}
.closing {font:1.3em 'Source Serif Pro', serif; margin:30px 0 60px 0;}
	.closing span {color: #CA396E;}

#toTop {background: url(../images/backtotop.svg) no-repeat; width: 50px; height: 160px; position: fixed; right: 0; bottom: 30px; cursor: pointer; margin-top: -55px; text-indent: -9999px; z-index:99; background-size: 50px 160px;}

/* FOOTER */
footer .container {background:#CA396E; color: #fff; padding:10px;}
footer p {margin-bottom: 0; text-align:right;}

/* RESPONSIVE */

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 400px) {
	header .container .logo {width:50%;}
	nav  ul {width: 100%; padding-left: 10%;}
		nav  ul li a:before {margin-right:15px;}
			nav ul li a {font-size: 1.1em; letter-spacing: 1px;}
}
@media (min-width: 544px) {
.slider{height:60vh;}
.img-bottom h5 {max-width: 70%;}
.img-bottom h5:after { width: 55%;}

nav  ul {width: 88%; padding:0 10%;}
	nav ul li a {font-size: 1.2em;}

	h1{font-size: 2.6em;}
		article h1 span {font-size:1em; padding:20px 34px 18px 34px;}
 	header .container .logo {width:30%; float:left;  margin-bottom: 20px;}
	header .container h1 {width:60%; float:left; border-left: 1px solid #ddd; padding:0 0 0 20px; margin-left: 20px;}
	.banner .pink strong {font-size: 1.1em;}
	.banner strong .caps {font-size: 1.3em; }
	.banner strong em {font-size: 1.3em;}
}
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
.slider{align-items: flex-end; justify-content:flex-end; padding:0px 40px 50px 0; height:50vh; -ms-flex-align: end; -webkit-justify-content: flex-end;
-webkit-align-items: flex-end;}
	.slider h1 {width:auto; padding:8px 20px; margin-bottom:10px; display:box; float:right; font-size: 1.8em;}
	.slider h2 {margin-top: 30px; width:auto; padding:8px 20px!important; margin:0; display:box; float:right; font-size: .9em;}
/*.img-bottom {align-items: flex-end; justify-content:flex-end; padding:0px 40px 40px 0;}
	.img-bottom h5 {font-size: 2.1em; background:none; opacity:1; width:50%; display:box;}*/
/*	.img-bottom h5 span.ribbon {background-size: 40px; width:40px; margin:0; right: 0px; left:72%; top:70%; }	
	.img-bottom h5:after {content:' '; position: absolute; top:75%; left:75%; width: 50%; top:80%; }*/
	.img-bottom h5 span.ribbon {left:47%;}
	
	h1{font-size: 3.6em; text-align:left; margin-bottom: -10px;}
		article h1 span {padding:16px 38px 14px 38px; font-size: .8em; top: -15px; position:relative; display:inline-block;}
	h1#section3 {font-size: 3.2em;}
		article h1#section3 span {width:100px; text-align:center; padding:10px; font-size: 1.1em;}
	h1#section5 {font-size: 2.8em;}
		article h1#section5 span {padding:10px 22px 8px 22px; font-size: 1em; width:80px;}
	article h2 {font-size:2.3em; text-align:left; margin-bottom: -10px; padding-left: 10%!important;}
		article h2 span {padding:18px 30px 16px 30px; font-size: 1em; top: -15px; position:relative; display:inline-block; width:90px; text-align:center;}
		article h2 em {display:block; margin-top: -35px; margin-left: 80px; font-size: .9em; padding-bottom: 30px;}
	h2 {font-size:2.4em; text-align:left; padding-left:0!important;}
		
	nav  ul {width: 60%; float:left; padding:0;}
		nav  ul.right {width: 40%;}
			/*nav ul {padding:0 2% 1% 2%;}
			nav  ul li {width: 50%; float:left;}
				nav  ul li a:before {content:"\2014"; margin-right:15px; font-weight: 300;}
				nav ul li a {padding-bottom: 25px;  text-align:left; padding-left: 0;}*/
	header .container .logo {margin: 10px 0;}
	header .container h1 {font-size: 1.2em; line-height: 32px; margin-bottom: 10px;}
	
	.banner {padding: 20px 0 120px 0;}
	
	.section1, .section3, .section5 {padding-left: 15%;}
	.section2 {padding-left: 22%;}
	.quote {min-height:300px; margin-top: 20px;}
	.quote2 {min-height:190px;}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.slider{height:60vh;}
	.slider h1 {font-size: 2.3em; }
	.slider h2 {font-size: 1.3em;}
	
/*	.img-bottom h5 {font-size: 2.3em;}
	.img-bottom h5:after {width: 40%; top:80%;}*/
	.img-bottom h5 span.ribbon {left:48%;}
	
	h1#section3 {font-size: 3.8em;}
		article h1#section3 span {width:100px; text-align:center; padding:5px 10px; font-size: 1em;}
	h1#section5 {font-size: 3.2em;}
		article h1#section5 span {padding:10px 22px 8px 22px; font-size: 1.1em; width:100px;}
	h2 {font-size:2.6em; padding-left: 15%;}
	
	nav  ul {width: 60%; float:left; padding:0 10%;}
		nav  ul.right {width: 40%; padding:0;}			
			/*nav ul {padding:0 10% 1% 10%;}
		nav ul li a {padding-left: 10%;}*/
		
	header .container h1 {font-size: 1.1em;}
	 header .container h1 strong {font-size: 1.5em;}
		 
	 article h2 em {display:inline!important; margin-left: 0px; padding-bottom: 0px;}
	 article h2 em strong {display:block!important;  margin-top: -35px; margin-left: 80px;  padding-bottom: 0px;}
	 
	.banner {padding: 20px 0 140px 0;}
	.banner h1 {font-size: 1.8em;}
	.banner .pink strong {font-size: 1.2em;}
	.banner strong .caps {font-size: 1.4em; }
	.banner strong em {font-size: 1.4em;}
	.section1, .section3, .section5 {padding-left: 11%;}
	.section2 {padding-left: 20%;}
	.quote {min-height:200px}
	.quote2 {min-height:100px;}
	.call-to-action {font-size:1.3em;}
	.closing {font-size:1.5em;}
	
} 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
/*	.img-bottom h5 span.ribbon {left:73%; top:70%; }	
	.img-bottom h5:after {width: 32%; top:80%;} */
	.section1, .section3, .section5 {padding-left: 9%;}
	.section2 {padding-left: 18%;}
	.quote2 {min-height:140px;}
	header .container h1 {font-size: 1.2em;}
	/*nav ul li a {padding-left: 20%;}*/
	article h2 em {display:inline-block!important; margin-left: 0px; padding-bottom: 0px;}
		 article h2 em strong {display:inline!important;  margin-top: 0px; margin-left: 0px;}
	
	
	nav  ul {width: 60%; float:left; padding:0 5% 0 18%;}
		nav  ul.right {width: 40%; padding:0 10% 0 0;}	
}