/************************************
 Web Fonts
************************************/

@font-face {
  font-family: "BentonSansComp";
  src: url("https://www.bu.edu/cdn/fonts/BentonSansComp-Bold/45b0ce09-9fae-45f1-8b3d-fdd995b91c6b-2.eot");
  src: url("https://www.bu.edu/cdn/fonts/BentonSansComp-Bold/45b0ce09-9fae-45f1-8b3d-fdd995b91c6b-2.eot?") format("embedded-opentype"),
       url("https://www.bu.edu/cdn/fonts/BentonSansComp-Bold/45b0ce09-9fae-45f1-8b3d-fdd995b91c6b-3.woff") format("woff"),
       url("https://www.bu.edu/cdn/fonts/BentonSansComp-Bold/45b0ce09-9fae-45f1-8b3d-fdd995b91c6b-1.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: "Circular";
  src: url("https://www.bu.edu/cdn/fonts/Circular/Circular-Bold.eot");
  src: url("https://www.bu.edu/cdn/fonts/Circular/Circular-Bold.eot?#iefix") format("embedded-opentype"),
       url("https://www.bu.edu/cdn/fonts/Circular/Circular-Bold.woff") format("woff"),
       url("https://www.bu.edu/cdn/fonts/Circular/Circular-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: "BU-Default-Icons";
  src: url("https://www.bu.edu/cdn/fonts/icons/bu-default-icons/bu-default-icons.eot");
  src: url("https://www.bu.edu/cdn/fonts/icons/bu-default-icons/bu-default-icons.eot?#iefix") format("embedded-opentype"),
       url("https://www.bu.edu/cdn/fonts/icons/bu-default-icons/bu-default-icons.woff") format("woff"),
       url("https://www.bu.edu/cdn/fonts/icons/bu-default-icons/bu-default-icons.ttf") format("truetype"),
       url("https://www.bu.edu/cdn/fonts/icons/bu-default-icons/bu-default-icons.svg#bu-default-icons") format("svg");
  font-style: normal;
  font-weight: 400;
}


/************************************
 Global
************************************/

p {
	font-family: "Benton-Sans", sans-serif;
	font-size: 18px;
	line-height: 33px;
    font-weight: 300;
}
.container {
	background: #f5f2e9;
	padding-top: 0;
}
#primary #masthead {
	background-color: #6c8192;
}


button, input.button, input[type=button], input[type=submit], .button, .navigation span a {
	background-color: #E06127;
}

#share-tools {
	background: #f5f2e9;
}

#comments_related_wrapper {
	background: #EAE8E0;
}

#share-tools a,
#comments_related_wrapper a {
	color:#e06127;
}

.article-meta-footer .article-meta {
	border-top:0;
}

/************************************
 Article Header (CONTENT BANNER)
************************************/

.title_container {
	height: 730px;
    background: #272a29;
}
.title_composition {
	width: 100%;
    background: #211d14;
    height: 730px;
    margin: 0 auto;
    position: relative;
    background: url('images/header-bkgd-wide.jpg') no-repeat center center;
    background-size: cover;
}
#lightbulb_animation {
	background: url('images/lightbulb-off.png') no-repeat center bottom;
	padding-top: 170px;
	height: 50px;
	position: relative;
}
#light_on {
	background: url('images/lightbulb-on.png') no-repeat center 0;
	position: absolute;
	bottom: 0;
    right: 0;
    width: 100%;
    height: 50px;
    opacity: 0;
}
.title {
	text-align: center;
	color: #fff;
}
.title h1 {
	padding-top: 25px;
	color: #df602e;
	font-size: 90px;
	font-family: "Circular", "Benton-Sans", sans-serif;
	font-weight: 700;
	text-shadow: 1px 3px 10px #272a29;
}
.title h2 {
	font-family: "BentonSansComp", sans-serif;
	text-transform: uppercase;
	width: 40%;
    margin: 50px auto 170px;
    line-height: 30px;
}
.title h3 {
	font-size: 15px;
    line-height: 23px;
    font-weight: 300;
}
.title h3 span {
	font-weight: 700;
    text-transform: uppercase;
}



/************************************
 Article Content
************************************/

.content_island {
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
}
.section_block {
	overflow: hidden;
	//height: 730px;
}
.section_block * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#article_text {
	background: #fff;
	position: relative;
	padding:150px 0;
}
@media (max-width: 800px) {
	#article_text  {
	    padding:80px 0 120px 0;
	}
}
@media (max-width: 750px) {
	#article_text  {
	    //padding:80px 0 50px 0;
	}
}
.lightbulb {
	background: url('images/lightbulb.png') no-repeat center bottom;
	height: 50px;
}
#article_text p {
	width: 60%;
	margin: 0 auto;
	padding-top: 25px;
}
@media (max-width: 800px) {
	#article_text p {
	    width: 80%;
	}
}
#article_text p span {
	color: #df602e;
	font-weight: 400;
}
.arrow {
	position: absolute;
	bottom: 20px;
	left: 50%;
}
.arrow a {
	text-decoration: none;
}
.arrow a:before {
	content: "\25BE";
	font-family: "BU-Default-Icons";
	font-size: 14px;
	color: #df602e;
}
.arrow a:hover:before {
	color: #000;
}
.title_composition .arrow a:hover:before {
	color: #fff;
}
.col_text {
	width: 40%;
	padding:5%;
}
.col_animation {
	width: 60%;
	position: relative;
	float: left;
	overflow: hidden;
}
.col_animation_block {
	width:100%;
	padding-bottom:97.33333333%;
	position: relative;
}
.invention_text {
    margin-top: 40%;
}
@media (max-width: 1050px) {
	.invention_text {
	    margin-top: 30%;
	}
	#mousetrap .invention_text {
		margin-top:10%;
	}
}
@media (max-width: 850px) {
	.invention_text,
	#mousetrap .invention_text  {
	    margin-top: 0;
	}


}

.invention_text p {
	font-size: 15px;
	line-height: 25px;
}
.invention_text p.price {
	margin-bottom:0;
}
.invention_text h2 {
	font-family: "Circular", "Benton-Sans", sans-serif;
	font-weight: 700;
	font-size: 44px;
	line-height: 1.2;
}
.invention_text h3 {
	text-transform: uppercase;
    font-size: 14px;
    line-height: 20px;
    font-weight: 300;
}
.price span {
	text-transform: uppercase;
    font-weight: 700;
}
.inset {
	padding: 50px;
	height: 100%;
}
.left {
	float: left;
}
.right {
	float: right;
	right:0;
}



/************************************
 A BETTER MOUSETRAP
************************************/

#mousetrap {
	background: #6b8091;
	position: relative;
}
#mousetrap .col_text {

}
#mousetrap_animation {
	width:100%;
	height: 100%;
	position: absolute;
	background: #6b8091;
}
#mousetrap_wall {
	background: url('images/mousetrap-wall.png') no-repeat right 0;
	background-size: 100% auto;
	position: absolute;
	bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
#mousetrap_box {
	background: url('images/mousetrap-box.png') no-repeat right bottom;
	background-size: 100% auto;
	position: absolute;
	bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
#footprints {
	//background: url('images/dots.gif') no-repeat right 0;
	position: absolute;
    bottom: 4px;
    right: 8px;
    width: 100%;
    height: 100%;
    opacity: 1;
}
#footprints span {
	background: white;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	position: absolute;
	width:1.9230769230769231%;
	top:20px;
	left:20px;
}
#footprints span:before {
	content: '';
	display: block;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
}
#mouse {
	background: url('images/mouse.png') no-repeat right bottom;
	background-size: 100% auto;
	position: absolute;
    bottom: -500px;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
#mousetrap h2 {
	color: #fff;
}



/************************************
 CREDIT CARD GUARD
************************************/

#credit_card {
	background: #fff;
	position: relative;
}
#credit_animation {
	background: url('images/credit-card-bkgd.jpg') no-repeat right 0;
	background-size: contain;
	width:100%;
	height: 100%;
	position: absolute;
}
#blue_line_1 {
	background: url('images/blue-line-1.png') no-repeat 0 0;
	background-size: contain;
	position: absolute;
	bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
#blue_line_2 {
	background: url('images/blue-line-2.png') no-repeat 0 0;
	background-size: contain;
	position: absolute;
	bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
#blue_line_3 {
	background: url('images/blue-line-3.png') no-repeat 0 0;
	background-size: contain;
	position: absolute;
	bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
#danger {
	background: url('images/danger.png') no-repeat 0 0;
	background-size: contain;
	position: absolute;
	bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
#alert {
	background: url('images/alert.png') no-repeat 0 0;
	background-size: contain;
	position: absolute;
	bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}



/************************************
 ZUELA SHOE
************************************/

#zuela_shoe {
	background: #fdedcb;
	position: relative;
}
#zuela_shoe .col_animation {
	background: #fdedcb;
}
#shoe_animation {
	width: 100%;
	height: 100%;
	position: absolute;

}
#shoe_headline {
	background: url('images/all-on-same-shoe.png') no-repeat 0 0;
	background-size: 100% auto;
	position: absolute;
	bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
#shoe {
	background: url('images/shoe.png') no-repeat 0 0;
	background-size: 100% auto;
	position: absolute;
	bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 5;
}
#running_sole {
	background: url('images/running-sole.png') no-repeat 0 0;
	background-size: 100% auto;
	position: absolute;
	top: -90px;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 4;
}
#ice_hockey_sole {
	background: url('images/ice-hockey-sole.png') no-repeat 0 0;
	background-size: 100% auto;
	position: absolute;
	top: -203px;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 3;
}
#baseball_sole {
	background: url('images/baseball-sole.png') no-repeat 0 0;
	background-size: 100% auto;
	position: absolute;
	top: -335px;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
}
#ice_climbing_sole {
	background: url('images/ice-climbing-sole.png') no-repeat 0 0;
	background-size: 100% auto;
	position: absolute;
	top: -430px;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
#running_text {
	background: url('images/running.png') no-repeat 0 0;
	background-size: 100% auto;
	position: absolute;
	bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
#running_arrow {
	background: url('images/running-arrow.png') no-repeat 0 0;
	background-size: 100% auto;
	position: absolute;
	bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
#ice_hockey_text {
	background: url('images/ice-hockey.png') no-repeat 0 0;
	background-size: 100% auto;
	position: absolute;
	bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
#ice_hockey_arrow {
	background: url('images/ice-hockey-arrow.png') no-repeat 0 0;
	background-size: 100% auto;
	position: absolute;
	bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
#baseball_text {
	background: url('images/baseball.png') no-repeat 0 0;
	background-size: 100% auto;
	position: absolute;
	bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
#baseball_bat {
	background: url('images/baseball-bat.png') no-repeat 0 0;
	background-size: 100% auto;
	position: absolute;
	bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
#ice_climbing_text {
	background: url('images/ice-climbing.png') no-repeat 0 0;
	background-size: 100% auto;
	position: absolute;
	bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
#ice_climbing_arrow {
	background: url('images/ice-climbing-arrow.png') no-repeat 0 0;
	background-size: 100% auto;
	position: absolute;
	bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}



/************************************
 ROCK CLIMBING AID
************************************/

#rock_climbing {
	background: #fff;
	position: relative;
}
#climbing_animation {
	background: url('images/rock-climbing.jpg') no-repeat center center;
	background-size:100% auto;
	width:100%;
	height: 100%;
	position: absolute;
}
#climbing_device {
	//background: url('images/climbing-device.png') no-repeat 0 0;

	position: absolute;
	bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
#climbing_device_ball {
	display: block;
	width:100%;
	height:100%;
	top:0;
	left:0;
	position: absolute;
	z-index: 2;
}

#climbing_device_ball_1,
#climbing_device_ball_2,
#climbing_device_ball_3,
#climbing_device_ball_4,
#climbing_device_ball_5,
#climbing_device_ball_6 {
	width:100%;
	height:100%;
	top:0;
	left:0;
	position: absolute;
	z-index: 1;
	display: block;
	opacity: 0;
	background: url('images/climbing-device-ball-1.png') no-repeat center center;
	background-size:contain;
}

#climbing_device_ball_2 {
	z-index: 2;
	background-image:url('images/climbing-device-ball-2.png');
}
#climbing_device_ball_3 {
	z-index: 3;
	background-image:url('images/climbing-device-ball-3.png');
}
#climbing_device_ball_4 {
	z-index: 4;
	background-image:url('images/climbing-device-ball-4.png');
}
#climbing_device_ball_5 {
	z-index: 5;
	background-image:url('images/climbing-device-ball-5.png');
}
#climbing_device_ball_6 {
	z-index: 6;
	background-image:url('images/climbing-device-ball-6.png');//white overlay
}

#climbing_device_rope {
	display: block;
	width:100%;
	height:100%;
	top:0;
	left:0;
	position: absolute;
	z-index: 1;
	background: url('images/climbing-device-rope-black.png') no-repeat center center;
	background-size:contain;
}

/************************************
 TACTILE WATCH
************************************/

#watch {
	background: #dad4b2;
	position: relative;
}
#watch .col_animation {
	background: #dad4b2;
}
#watch_animation {
	background: url('images/watch-bkgd.png') no-repeat right bottom;
	background-size: 100% auto;
	width:100%;
	height: 100%;
	position: absolute;
}
#white_shape {
	background: url('images/white-shape.png') no-repeat 0 0;
	background-size: contain;
	position: absolute;
	bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
#yellow_line_1 {
	background: url('images/yellow-line-1.png') no-repeat 0 0;
	background-size: contain;
	position: absolute;
	bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
#yellow_line_2 {
	background: url('images/yellow-line-2.png') no-repeat 0 0;
	background-size: contain;
	position: absolute;
	bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
#yellow_line_3 {
	background: url('images/yellow-line-3.png') no-repeat 0 0;
	background-size: contain;
	position: absolute;
	bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
#yellow_line_4 {
	background: url('images/yellow-line-4.png') no-repeat 0 0;
	background-size: contain;
	position: absolute;
	bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
#yellow_line_5 {
	background: url('images/yellow-line-5.png') no-repeat 0 0;
	background-size: contain;
	position: absolute;
	bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
#yellow_line_6 {
	background: url('images/yellow-line-6.png') no-repeat 0 0;
	background-size: contain;
	position: absolute;
	bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
#yellow_line_7 {
	background: url('images/yellow-line-7.png') no-repeat 0 0;
	background-size: contain;
	position: absolute;
	bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
#text_bubble {
	background: url('images/gotta-go.png') no-repeat 0 0;
	background-size: contain;
	position: absolute;
	bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}



/************************************
 Share / Download
************************************/

.article-feature .island {
	width: 100%;
	background: #fff;
}
.article-meta-footer .article-meta {
	max-width: 780px;
	margin: 0 auto;
}
.article-meta-footer {
	margin-bottom:0 !important;
}


/************************************
 Responsive Styles
************************************/

@media (max-width: 980px) {
	.article-feature .container {
		padding: 0;
	}
	.invention_text h2 {
		font-size:30px;
	}
}
@media (max-width: 750px) {
	.inset {
		padding:25px;
	}
	.title h1 {
		font-size: 45px;
	}
	.title h2 {
		width: 70%;
		margin-bottom:50px;
	}

	.section_block {
		height: auto;
	}
	#article_text p {
	    font-size: 15px;
	    width: 80%;
	    line-height: 27px;
	}
	.col_animation {
		width: 100%;
		max-width: 100%;
	}
	.col_animation.right {
		float: none;
	}
	.col_text {
		width: 100%;
		float: none;
	}
	#mousetrap {
		background-color: #8A9FB1;
	}
	#zuela_shoe {
		background-color: #EFDFBF;
	}
	#zuela_shoe .inset {
		padding: 10px;
	}
	#watch {
		background-color: #C3C1B4;
	}
	.invention_text {
		padding: 20px;
	}
	.left {
		padding: 20px;
	}
	.mousetrap_box {
		height: 400px;
	    background-size: contain;
	    top: 0;
	}
	.mouse {
		height: 400px;
		background-size: contain;
	}
	.footprints {
		height: 400px;
	    top: 0;
	    background-size: contain;
	}
	#climbing_animation,
	#climbing_device_ball_1,
	#climbing_device_ball_2,
	#climbing_device_ball_3,
	#climbing_device_ball_4,
	#climbing_device_ball_5,
	#climbing_device_ball_6,
	#climbing_device_rope {
		background-size:150% auto;
	}
}