/* Smartphones (portrait and landscape) & Tablets (portrait) ----------- */
@media only screen 
and (min-width : 0) 
and (max-width : 920px) {
	.external-nav{
		margin-left: 0;
		margin-top: 2px;
	}

	.external-nav a {
		display: none;
	}

	#hit_logo{
		display: block;
		position: absolute;
		left: 0;
	}

	#header_logo{
		position: relative;
		margin: 0 auto;
		margin-top: -45px;
		top: 0;
	}

	#header_logo:hover {
		top: 0;
	}

	#header_top {
		min-height: 55px;
	}

	.main-nav{
		margin-top: -20px;
	}

	.main-nav a {
		margin-left: 0;
		margin-top: 0;
		height: 90px;
		border-bottom: 1px solid #52000d;
		border-top: 1px solid #da6679;
		-webkit-box-shadow: 0 -1px 0px 0px #52000d;
		-moz-box-shadow: 0 -1px 0px 0px #52000d;
		box-shadow: 0 -1px 0px 0px #52000d;
		min-width: 50%;
		max-width: 50%;
		-webkit-transition: none;
		-moz-transition: none;
		-o-transition: none;
		-ms-transition: none;
		transition: none;
	}

	.main-nav a:hover {
		margin-top: 0px;
	}
	
	.external-nav a:hover{
		width: 60px;
		height: 50px;
	}
	
	#nav_01, #nav_02, #nav_03, #nav_04{
		height: 95px;
	}

	#nav_image_01, #nav_image_02, #nav_image_03, #nav_image_04{
		padding-top: 4px;
	}

	#nav_text_04_desktop{
		display: none;
	}

	#nav_text_04_mobile{
		display: block;
		margin: 0 auto;
	}

	.main-nav .bevel-holder{
		border-left: 1px solid #52000d;
		border-right: 1px solid #da6679;
		display: block;
		height: 100%;
	}

	.secondary-nav ul{
		width: 100%;
	}

	#parents_button {
		margin-right: 10px;
	}

	#parents_slider{
		max-width: 90%;
	}

	.parent-btn-holder {
		width: 90%;
	}

	.footer-content {
		padding: 0 20px;
	}

	.footer-links{
		display: block;
		float: none;
	}

	.footer-links li ul li a:hover {
		background: #ededed;
	}

	.footer-legal {
		width: 100%;
	}

	.footer-social li {
		margin-right: 24px;
		margin-left: 0;
	}

	#footer_middle {
		min-height: 135px;
	}

	#footer_bottom {
		min-height: 40px;
	}

	.footer-social {
		float: right;
		position: absolute;
		margin-top: 8px;
	}

	.footer-legal{
		margin-top: 0;
	}

	.footer-links li ul{
		margin-top: 40px;
	}

	.footer-links > li > a.open{
		margin-bottom: 30px;
	}

	.footer-links li ul li:last-child a {
		border-bottom: none;
	}
	
	.lang-select-holder {
		float: left;
		width: 100%;
	}
	
	.lang-select{
		margin-top: 10px;
	}

	.content{
		width: 90%;
	}

	.home-slider{
		margin-top: 30px;
	}

	.col-1-4{
		min-width: 33.33333%;
	}

	.col-3-5, .col-9-10 {
		width: 100%;
		min-width: 100%;
	}
	
	.col-1-2.heading-holder, .col-9-10 {
		width: 100%;
		min-width: 100%;
	}
	.col h1.center-vertical {
		margin-top: 10px;
	}

	.top-image{
		max-width: 80%;
		margin-top: 40px;
	}

	.push-base .col-3-5{
		width: 80%;
		min-width: 80%;
	}

	.events .col-1-2 {
		min-width: 80%;
		float: none;
		margin: 0 auto;
		padding-bottom: 20px;
	}

	.left-image-holder {
		float: none;
		margin: 0 auto;
		min-width: 70%;
	}

	.tv .text-center{
		margin-top: -50px;
	}

	.info-btn a{
		margin-top: 40px;
	}

	.offset {
		width: 35%;
	}
	
	.tv-network-image {
		padding: 40px 0;
	}

	.about .col-3-4{
		float: none;
		min-width: 80%;
		text-align: center;
		margin: 0 auto;
	}

	.about .col-1-4{
		float: none;
		margin: 0 auto;
		min-width: 40%;
	}

	.not-found .col-left, .not-found .col-right{
		float: none;
		margin: 0 auto;
	}
	
	/*removing hover state on all thumbs apart from video*/
	.interact-skin:hover, .tiled-min-box .interact-skin:hover{
		background-color: rgba(3, 78, 162, 0.0);
	}

	.interact-skin.taphover:hover, .interact-skin.taphover.hover, .tiled-min-box .interact-skin.taphover:hover, .tiled-min-box .interact-skin.taphover.hover{
		background-color: rgba(3, 78, 162, 0.0);
	}
	
	.interact-skin.video:hover, .tiled-min-box .interact-skin.video:hover{
		background-color: rgba(3, 78, 162, 0.5);
	}

	.interact-skin.taphover.video:hover, .interact-skin.taphover.video.hover, .tiled-min-box .interact-skin.taphover.video:hover, .tiled-min-box .interact-skin.taphover.video.hover{
		background-color: rgba(3, 78, 162, 0.5);
	}
	
	.interact-skin.taphover:hover h4{
		opacity: 0;
		/* Next 2 lines IE8 */
		filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	}
	
	.interact-skin.taphover:hover .interact-play-icon, .interact-skin.taphover:hover .interact-download-icon{
		opacity: 0;
		/* Next 2 lines IE8 */
		filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	}
	/* end */
	
	.interact-skin.taphover.video h4{
		opacity: 0.7;
		/* Next 2 lines IE8 */
		filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
	}
	
	.interact-skin.taphover.video .interact-play-icon, .interact-skin.taphover.video .interact-download-icon{
		opacity: 0.7;
		/* Next 2 lines IE8 */
		filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
	}
	
	.interact-skin.taphover.video h4{
		opacity: 0.7;
		/* Next 2 lines IE8 */
		filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	}

	.interact-skin.taphover.video{
		background-color: rgba(3, 78, 162, 0.5);
	}
	
	.interact-skin.taphover.video .interact-play-icon, .interact-skin.taphover.video .interact-download-icon{
		opacity: 0.7;
		/* Next 2 lines IE8 */
		filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		margin-top: 30px;
		border: 8px solid white;
	}

/* Mobile Menu Plugin ----------- */

	.mobile-menu li ul li:last-child {
		margin-bottom: 50px;
	}

/* Slim-menu ----------- */

	footer ul.slimmenu.collapsed li a {
		background-color: #DDD;
		border-bottom: 1px solid #C2C2C2;
		border-top: 1px solid #FFF;
		color: #444;
	}

	#footer ul.slimmenu.collapsed li:first-child {
		border-top: 1px solid #e7e7e7;
	}

	#footer ul.slimmenu.collapsed li:last-child {
		margin-bottom: 20px;
	}

	#footer ul.slimmenu.collapsed li a:hover{
		background-color: #e7e7e7;
	}

	#footer .collapse-button {
		padding: 7px 0px;
	}

	.main-nav a {
		min-width: 25%;
		max-width: 25%;
	}

	.collapse-button .icon-bar{
		-webkit-transition: none;
		-moz-transition: none;
		-o-transition: none;
		-ms-transition: none;
		transition: none;
	}
}

/* Smartphones (landscape)----------- */

@media only screen 
and (min-width : 320px)
and (max-width : 850px) {

	.col-1-3, .col-1-4 {
		min-width: 50%;
		width: 50%;
		max-width: 50%;
	}

	.col-1-3.last{
		min-width: 100%;
	}

	.col-1-3.single{
		min-width: 460px;
		max-width: 460px;
	}

	.col-2-3{
		min-width: 100%;
	}

	.col-1-4:nth-child(2n+2) {   		/*==== Fix float issue ==== */
	  clear: left;
	}

	#home_slider{
		margin-top: 40px;
	}

}

@media only screen 
and (min-width : 0px)
and (max-width : 750px) {

	.text-box-centered{
		padding: 10%;
		width: 80%;
	}
	
	.col-1-2 {
		min-width: 100%;
		max-width: 100%;
		width: 100%;
	}

	.col-3-4.text-center{
		min-width: 90%;
	}

	.info-btn{
		padding-bottom: 40px;
	}

	.events .col-3-5 {
		min-width: 85%;
	}	

	.about .col-3-4{
		min-width: 100%;
	}
	.offset{
		width: 90%;
		margin: 0 auto;
		position: relative;
		margin-top: 0;
	}
	p.text-tv-center {
		top: -40px;
		margin-left: 0px!important;
	}
	
	.info-btn a.primary-btn {
		margin: 0;
		width: auto;
	}
	
	.tv-network-image {
		max-width: 80%;
	}


}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 550px) {

	.main-nav a {
		min-width: 50%;
		max-width: 50%;
	}

	.col-1-3, .col-1-4 {
		min-width: 100%;
		max-width: 100%;
	}

	.col-1-3.single{
		min-width: 100%;
		max-width: 100%;
	}

	.col-3-4.text-center{
		min-width: 90%;
	}

	.tv .push-base .col-3-5 {
		width: 100%;
		min-width: 100%;
	}

	.info-btn{
		padding-bottom: 40px;
	}

	.tv .left-image-holder, .events .col-1-2  {
		min-width: 100%;
	}

	.events .col-1-2 {
		min-width: 100%;
	}	

	.events .col-3-5 {
		min-width: 100%;
	}

	.about .col-3-4{
		min-width: 100%;
	}

	#home_slider{
		margin-top: 40px;
	}

	/* BxSlider ----------- */
	.bx-wrapper .bx-pager {
		display: none;
	}
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {

	body{
		min-width: 320px;
		max-width: 320px;
	}

	.col-1-2 {
		min-width: 100%;
		max-width: 100%;
		width: 100%;
	}

	.col-2-3{
		min-width: 100%;
	}

	.col-1-3.single{
		min-width: 100%;
		max-width: 100%;
	}

	
	/* BxSlider ----------- */

	.bx-wrapper .bx-controls-direction a {
		display: none;
	}
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {

	.collapse-button .icon-bar{
		-webkit-transition: none;
		-moz-transition: none;
		-o-transition: none;
		-ms-transition: none;
		transition: none;
	}	
	
	/*removing hover state on all thumbs apart from video*/
	.interact-skin:hover, .tiled-min-box .interact-skin:hover{
		background-color: rgba(3, 78, 162, 0.0);
	}

	.interact-skin.taphover:hover, .interact-skin.taphover.hover, .tiled-min-box .interact-skin.taphover:hover, .tiled-min-box .interact-skin.taphover.hover{
		background-color: rgba(3, 78, 162, 0.0);
	}
	
	.interact-skin.video:hover, .tiled-min-box .interact-skin.video:hover{
		background-color: rgba(3, 78, 162, 0.5);
	}

	.interact-skin.taphover.video:hover, .interact-skin.taphover.video.hover, .tiled-min-box .interact-skin.taphover.video:hover, .tiled-min-box .interact-skin.taphover.video.hover{
		background-color: rgba(3, 78, 162, 0.5);
	}
	
	.interact-skin.taphover:hover h4{
		opacity: 0;
		/* Next 2 lines IE8 */
		filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	}
	
	.interact-skin.taphover:hover .interact-play-icon, .interact-skin.taphover:hover .interact-download-icon{
		opacity: 0;
		/* Next 2 lines IE8 */
		filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	}
	/* end */
	

	.interact-skin.taphover.video h4{
   	opacity: 0.7;
    /* Next 2 lines IE8 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	}

	.interact-skin.taphover.video{
		background-color: rgba(3, 78, 162, 0.5);
	}
	
	.interact-skin.taphover.video .interact-play-icon, .interact-skin.taphover.video .interact-download-icon{
	opacity: 0.7;
    /* Next 2 lines IE8 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	margin-top: 30px;
	border: 8px solid white;
	}
	.main-nav a:hover {
		margin-top: 4px;
	}
	
	.external-nav a:hover{
		width: 60px;
		height: 50px;
	}
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

	.video{
		min-height: 460px;
	}
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

	.col-1-3 {
		min-width: 50%;
		max-width: 50%;
	}

	.col-1-3.last{
		min-width: 100%;
	}

	.video{
		min-height: 345px;
	}
	#rotate_msg {
		display: block;
	}
	.canvas_game.html5{
		display: none;
	}

}

/* Small Desktops, laptops and Tablets fix ----------- */
@media only screen 
and (min-width : 921px)
and (max-width : 1024px) {
	
	.external-nav{
		position: absolute;
	}

	.secondary-nav ul{
		width: 100%;
	}

	.main-nav {
		padding: 0 10px;
	}

	#header_logo{
		left: 10px; 
	}

	.footer-social {
		float: right;
		position: absolute;
		margin-top: 8px;
	}

	.footer-social li {
		margin-right: 24px;
		margin-left: 0;
	}

	.footer-content {
		padding: 0 20px;
	}

	.footer-links{
		display: block;
		float: none;
	}
	
	.lang-select-holder {
		float: left;
		width: 100%;
		margin-left: 75px;
	}
	
	.lang-select{
		margin-top: 10px;
	}


	#parents_button {
		margin-right: 10px;
	}

	#parents_slider{
		max-width: 90%;
	}

	.content{
		width: 90%;
	}

	.parent-btn-holder {
		width: 90%;
	}

	.col-1-4{
		min-width: 33.33333%;
	}

	.col-3-5, .col-9-10 {
		width: 100%;
		min-width: 100%;
	}
	.col-1-2.heading-holder, .col-9-10 {
		width: 100%;
		min-width: 100%;
	}
	.col h1.center-vertical {
		margin-top: 10px;
	}

	.top-image{
		max-width: 80%;
		margin-top: 40px;
	}

	.left-image-holder {
		float: none;
		margin: 0 auto;
		min-width: 60%;
	}

	.about .left-image-holder{
		width: 25%;
		min-width: 25%;
		max-width: 25%;
		float: left;
	}

	.tv  .push-base .col-3-5{
		width: 60%;
		min-width: 60%;
	}

	.events .col-1-2 {
		min-width: 80%;
		float: none;
		margin: 0 auto;
		padding-bottom: 20px;
	}

	.tv .left-image-holder {
		float: none;
		margin: 0 auto;
		min-width: 70%;
	}

	.tv .text-center{
		margin-top: -50px;
	}

	.tv-network-image {
		padding: 40px 0;
	}

	.not-found .col-left, .not-found .col-right{
		float: none;
		margin: 0 auto;
	}

	.col-1-4:nth-child(3n+2) {   		/*==== Fix float issue ==== */
	  clear: left;
	}
	
	/*removing hover state on all thumbs apart from video*/
	.interact-skin:hover, .tiled-min-box .interact-skin:hover{
		background-color: rgba(3, 78, 162, 0.0);
	}

	.interact-skin.taphover:hover, .interact-skin.taphover.hover, .tiled-min-box .interact-skin.taphover:hover, .tiled-min-box .interact-skin.taphover.hover{
		background-color: rgba(3, 78, 162, 0.0);
	}
	
	.interact-skin.video:hover, .tiled-min-box .interact-skin.video:hover{
		background-color: rgba(3, 78, 162, 0.5);
	}

	.interact-skin.taphover.video:hover, .interact-skin.taphover.video.hover, .tiled-min-box .interact-skin.taphover.video:hover, .tiled-min-box .interact-skin.taphover.video.hover{
		background-color: rgba(3, 78, 162, 0.5);
	}
	
	.interact-skin.taphover:hover h4{
		opacity: 0;
		/* Next 2 lines IE8 */
		filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	}
	
	.interact-skin.taphover:hover .interact-play-icon, .interact-skin.taphover:hover .interact-download-icon{
		opacity: 0;
		/* Next 2 lines IE8 */
		filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	}
	/* end */
	
	
	.interact-skin.taphover.video h4{
   	opacity: 0.7;
    /* Next 2 lines IE8 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	}

	.interact-skin.taphover.video{
		background-color: rgba(3, 78, 162, 0.5);
	}
	
	.interact-skin.taphover.video .interact-play-icon, .interact-skin.taphover.video .interact-download-icon{
	opacity: 0.7;
    /* Next 2 lines IE8 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	margin-top: 30px;
	border: 8px solid white;
	}
	

/* Slim-menu ----------- */

	footer ul.slimmenu.collapsed li a {
		background-color: #DDD;
		border-bottom: 1px solid #C2C2C2;
		border-top: 1px solid #FFF;
		color: #444;
	}

	footer ul.slimmenu.collapsed li:first-child {
		border-top: 1px solid #e7e7e7;
	}

	#footer ul.slimmenu.collapsed li:last-child {
		margin-bottom: 20px;
	}

	footer ul.slimmenu.collapsed li a:hover{
		background-color: #e7e7e7;
	}

	footer .collapse-button {
		padding: 7px 0px;
	}

	.collapse-button .icon-bar{
		-webkit-transition: none;
		-moz-transition: none;
		-o-transition: none;
		-ms-transition: none;
		transition: none;
	}
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1025px) {

	.col-1-4:nth-child(4n+2){   		/*==== Fix float issue ==== */
	  clear: left;
	}
}

/* Smaller screens -----------*/

@media only screen 
and (max-width : 1024px) {

	.content-inside-both.rounded-top{
		padding-top: 50px;
		-webkit-border-top-left-radius: 0;
		-webkit-border-top-right-radius: 0;
		-moz-border-radius-topleft: 0;
		-moz-border-radius-topright: 0;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	.game-base-holder{
		display: none;
	}
	
	/*removing hover state on all thumbs apart from video*/
	.interact-skin:hover, .tiled-min-box .interact-skin:hover{
		background-color: rgba(3, 78, 162, 0.0);
	}

	.interact-skin.taphover:hover, .interact-skin.taphover.hover, .tiled-min-box .interact-skin.taphover:hover, .tiled-min-box .interact-skin.taphover.hover{
		background-color: rgba(3, 78, 162, 0.0);
	}
	
	.interact-skin.video:hover, .tiled-min-box .interact-skin.video:hover{
		background-color: rgba(3, 78, 162, 0.5);
	}

	.interact-skin.taphover.video:hover, .interact-skin.taphover.video.hover, .tiled-min-box .interact-skin.taphover.video:hover, .tiled-min-box .interact-skin.taphover.video.hover{
		background-color: rgba(3, 78, 162, 0.5);
	}
	
	.interact-skin.taphover:hover h4{
		opacity: 0;
		/* Next 2 lines IE8 */
		filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	}
	
	.interact-skin.taphover:hover .interact-play-icon, .interact-skin.taphover:hover .interact-download-icon{
		opacity: 0;
		/* Next 2 lines IE8 */
		filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	}
	/* end */
	
}


/* Large screens ----------- */

@media only screen 
and (min-width : 1824px) {

	.global-width {
		max-width: 1400px;
	}

	body{
		background-size: cover;
	}

	p{
		font-size: 1em;
	}

	#parents_button{
		right: 18px;
	}

	#parents_slider{
		max-width: 1420px;
	}

	#parents_slider img{ 
		max-width: 100%;
		margin-left: 0;
		/*==== This is to remove the offset of bxslider images inside of this container as they are 
		larger images to fit on a larger screen but now they are 100% - otherwise there would be lots of 
		white space in the image and main content would be rather small on smaller screen sizes ==== */
	}

	.content {
		width: 100%;
	}

	.secondary-nav ul {
		width: 700px;
	}

	.main-nav a {
		margin-left: 180px;
	}

	.content-filter{
		padding: 0 0 0 20px;
	}

	.content-filter.video-filter{
		padding: 0;
	}

	.simple-pagination ul {
		margin-left: 20px;
	}

	.tiled-box {
		margin: 18px;
		padding: 22px;
		padding-bottom: 30px;
	}

	.tiled-img-holder {
		width: auto;
		overflow: hidden;
	}

	.col h1, .col h2, .col h3, .col h4, .col h5, .col p, .col a{
		margin: 10px 40px;
	}
	.col h1 a, .col h2 a, .col h3 a, .col h4 a, .col h5 a, .col p a{
		margin: 0;
		display: inline;
	}

	.news-post h4, .products-post h4{
		margin-top: 30px;
	}

	a.badge, a.badge-blank{
		margin: 0;
		text-decoration: none;
	}

	.primary-btn{
		margin: 20px 18px 0;
	}

	.character-info {
		padding: 10px 90px;
	}

	.character-info h1, .character-info p {
		margin-left: 40px;
		margin-right: 40px;
	}

	.character-info .polaroids {
		margin-left: 40px;
		margin-right: 40px;
		width: 85%;
	}

	.video-holder{
		padding: 22px;
		padding-bottom: 26px;
	}

	.tv .text-center{
		margin-top: 70px;
	}

	.events .text-center{
		margin-top: 20px;
	}

	.col-1-4:nth-child(4n+2) {   /*==== Fix float issue ==== */
	  clear: left;
	}

	.interact-skin.taphover:hover .interact-play-icon, .interact-skin.taphover.hover .interact-play-icon, .interact-skin.taphover:hover .interact-download-icon, .interact-skin.taphover.hover .interact-download-icon{
		margin-top: 50px;
	}
	
	.col-1-3 .interact-skin.taphover:hover .interact-play-icon, .col-1-3  .interact-skin.taphover.hover .interact-play-icon, .col-1-3  .interact-skin.taphover:hover .interact-download-icon, .col-1-3  .interact-skin.taphover.hover .interact-download-icon{
		margin-top: 80px;
	}
	
	a.blank-link{
		margin: 0;
		padding: 0;
	}

	.col h1.center-vertical{
		margin-top: 160px;
	}

/* bxslider ----------- */

	.bx-wrapper .bx-prev {
		left: -120px;
	}

	.bx-wrapper .bx-next {
		right: -120px;
	}

/* filtering ----------- */

	#filter{
		margin-left: 20px;
	}
	.pagination-holder{
		margin-left: 20px;
	}

	
}


/* Custom media query to fix legal links dropping down on smaller screens */
@media only screen 
and (max-width : 375px) {
	.footer-links li, .footer-legal-links li {
		font-size: 0.825em;
	}
}


@media screen and (max-width: 1024px) { /* Specific to this particular background image - 
										this is needed to make the image center with offset and act this certain way within these screen dimensions
										- inline css does not support media queries */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }


}