/*
 * INNOPAN FURNITURES
 * Responsive Media File.
 */

/*---For Small Desktop----*/
@media only screen and (max-width:1024px){
	.sectionTitle h3 {
    	font-size: 35px;
	}
	header .navbar{
		min-height: 50px;
	}
    header .navbar-brand:before{
    	height: 90px;
    }
    header .navbar-brand img{
    	width: 180px;
    }
    header .navbar-inverse .navbar-nav > li > a{
    	padding: 20px 10px;
    }
    .navbar-inverse.affix .navbar-brand img {
    	width: 150px;
	}
	.navbar-inverse.affix .navbar-brand:before {
	    height: 60px;
	}
	.navbar.navbar-inverse.affix{
		min-height: 40px;
	}
	.navbar-inverse.affix .navbar-nav > li > a {
    	padding: 10px 15px;
	}
	.navbar-inverse.affix .navbar-brand{
		padding: 10px 15px;
	}
	/*-- Shutter Page --*/
	.subMenu.navbar.navbar-inverse.affix {
    	top: 40px !important;
	}
	#bannerContent.image-bg .bannerImg {
    	margin-right: calc(470px - 50vw);
    	margin-left: 80px;
	}
	#bannerContent.image-bg .titleWrapper h1 {
    	font-size: 40px;
	}
	.nav.nav-pills li a{
		padding: 10px 15px;
	}
	.owlSlideBullet.owl-theme .owl-nav{
		display: block;
	}
	#acrylic .owl-theme .owl-nav{
		display: block;
	}
	/*-- Carcass --*/
	.enquiryForm, .contactUsArea {
    	padding: 40px;
	}
	/*-- Enquiry --*/
	.contactSubDiv ul {
    	min-height: 121px;
	}

	.boxInput{
		padding: 5px 10px;
	}
	.boxInput.message{
		height: 120px;
	}
}

@media only screen and (max-width: 991px){
	h4 {
    	font-size: 20px;
	}
	header .navbar-inverse .navbar-nav > li > a{
		font-size: 14px;
	}
	.carousel.vertical .carousel-caption{
    	top: 5%;
	}
	.carousel.vertical .carousel-caption h1,
	.carousel.vertical .carousel-caption h2{
    	font-size: 22px;
	}
	.carousel.vertical .carousel-control.down {
	    top: 40px;
	}
	.carousel-indicators{
    	bottom: 5px;
	}
	.carousel.vertical .up.carousel-control,
	.carousel.vertical .down.carousel-control{
	    width: 30px;
    	height: 30px;
	}
	.carousel.vertical .carousel-control span {
    	line-height: 30px;
    	font-size: 20px;
	}
	.navbar-brand{
		height: 40px;
	}
	.skewOverlay{
		top: -20px;
	}
	.BgPadding {
    	padding-top: 30px;
	}
	.sectionPadTop {
    	padding-top: 30px;
	}
	.sectionPadBot {
    	padding-bottom: 30px;
	}
	.bullet li{
		font-size: 14px;
	}
	.warrantyArea {
	    min-height: 500px;
	    margin: 55px 15px 0 0;
	}
	.warrantyLogo{
		margin: 0;
    	padding: 10px;
    	min-height: 325px;
	}
	.supertuffTable thead th{
		padding: 5px;
	}
	/*-- Shutter Page --*/
	#bannerContent.image-bg .bannerImg {
	    margin-right: calc(360px - 50vw);
	    margin-left: 0px;
	}
	.tab-content{
		padding: 20px;
	}
	.FiveYrWarranty {
    	position: absolute;
    	width: 80px;
	}
	.subMenu.navbar.navbar-inverse.affix ul li a,
	.subMenu.navbar ul li a{
		font-size: 16px;
	}
	.nav.nav-pills li a {
    	padding: 5px 10px;
    	font-size: 14px;
	}
	.shutterItemDiv.customDiv{
		margin-top: 20px;
		width: 20%;
	}
	#polymer .owl-theme .owl-nav,
	#hplSection .owl-theme .owl-nav{
		display: block;
	}

	.carcassContent {
    	padding-top: 10px;
	}
	.carcassContent ul li {
    	margin-bottom: 10px;
	}
	.carcassContent ul li h5 {
    	margin-bottom: 5px;
	}

	.aboutContent p {
    	font-size: 20px;
    	line-height: 25px;
	}
	#aboutUsPage img{
		margin-bottom: 0;
		margin-top: 30px;
	}
	.bullet li{
		padding-left: 20px;
	}

	.enquiryForm, .contactUsArea {
    	padding: 25px;
	}
	.flex-row label {
    	width: 40px;
	}
	/*-- Footer --*/
	.footerDiv {
	    padding: 40px 10px 10px;
	    min-height: 140px;
	}
	.footerTop .verticalAlign{
		display: block;
	}
	.footerImg{
		text-align: center;
    	margin-bottom: 35px;
	}
	.footerLogo img{
		width: 200px;
	}
	.footerLogo p{
		text-align: center;
		margin-top: 10px;
	}
	.footerDiv .footerIcon{
		width: 40px;
		height: 40px;
	    line-height: 38px;
	}
	.footerDiv .footerIcon img{
		width: 25px; 
	}
}

@media only screen and (max-width:768px) {
	.sectionTitle h3 {
    	font-size: 28px;
	}
	header .navbar-brand img,
	.navbar-inverse.affix .navbar-brand img{
	    width: 125px;
	}
	header .navbar-brand:before {
    	height: 60px;
	}
	header .navbar,
	.navbar.navbar-inverse.affix {
    	min-height: 30px;
	}
	header .navbar-inverse .navbar-nav > li > a,
	.navbar-inverse.affix .navbar-nav > li > a{
		letter-spacing: normal;
		font-size: 12px;
		padding: 10px 8px;
	}
	.warTextDiv {
    	padding-top: 10px;
	}
	.warrantyLogo{
		min-height: 295px;
	}
	.featureTable ul li {
    	font-size: 16px;
	}
	.supertuffTable{
		font-size: 16px;
	}

	#bannerContent.image-bg .bannerImg {
	    margin-left: 80px;
	}

	.contactUsArea ul li span {
    	font-weight: 600;
    	font-size: 20px;
	}
	.contactUsArea ul li a {
    	font-size: 18px;
	}
	.contactSubDiv ul {
    	min-height: 105px;
	}

	.slideContactBox{
		overflow-y: scroll;
	}
}
/*-- Mobile --*/
@media only screen and (max-width: 767px) {
	p {
    	font-size: 14px;
    	line-height: 15px;
	}
	.BgPadding {
    	padding-top: 20px;
	}
	.sectionPadBot {
    	padding-bottom: 20px;
	}
	.sectionPadTop {
    	padding-top: 20px;
	}
	.sectionTitle {
    	margin-bottom: 25px;
	}
	.sectionTitle h3 {
    	font-size: 22px;
	}
	.verticalAlign{
		display: block;
	}
	.innopanBtn{
		padding: 10px 20px;
	}
	.bullet li {
    	padding-left: 15px;
	}
	.bullet li:before{
	    width: 7px;
	    height: 7px;
	    top: 8px;
	}
	header .nav.navbar-nav {
	    float: none;
	}
	header .navbar-brand,
	.navbar-inverse.affix .navbar-brand{
    	height: 40px;
	}
	header .navbar-inverse .navbar-nav > li > a,
	.navbar-inverse.affix .navbar-nav > li > a{
		padding: 10px 15px;
		font-size: 14px;
	    letter-spacing: 2px;
	}
	header .navbar-brand,
	.navbar-inverse.affix .navbar-brand {
    	padding: 15px 10px;
	}
	.carousel.vertical .up.carousel-control,
	.carousel.vertical .down.carousel-control{
		display: none;
	}
	.warrantyArea{
	    min-height: auto;
    	margin: 45px 15px 0 0;
	}
	.rangImgDiv{
		background-color: #fff;
	}
	.rangTextDiv {
    	padding: 0px 15px 10px;
	}
	.warrantyLogo {
	    min-height: auto;
	    margin-bottom: 15px;
	}
	.carousel.vertical .carousel-caption h1 {
    	font-size: 20px;
    	margin-top: 15px;
	}
	.carousel.vertical .carousel-caption h2{
		font-size: 20px;
    	margin-top: -2px;
	}
	.carousel.vertical .carousel-caption h1 span,
	.carousel.vertical .carousel-caption h2 span{
	    padding: 2px 10px;
	}
	.homeSlider .carousel-control span {
	    line-height: 30px;
	    font-size: 16px;
	}
	.homeSlider .right.carousel-control,
	.homeSlider .left.carousel-control {
		width: 25px;
		height: 30px;
	}
	.carousel-indicators {
    	bottom: 0px;
    	left: 5px;
	}
	.carousel-indicators li,
	.carousel-indicators .active {
	    width: 5px;
	    height: 5px;
	    margin: 0 0 3px;
	}
	.aboutDiv{
		text-align: justify;
	}
	.warrantyArea ul li {
    	font-size: 14px;
	}
	/*-- Home Page Table --*/
	.supertuffTable{
		background:transparent;
	}
	.supertuffTable tbody,
	.supertuffTable tr,
	.supertuffTable th,
	.supertuffTable td {
		display: block;
		padding: 0;
		text-align: left;
		white-space: normal;
	}
	.supertuffTable tbody tr {
	    display: block;
        margin-bottom: 15px;
        background: #fff;
	}
	.supertuffTable th,
	.supertuffTable td {
		padding: 5px 10px;
		vertical-align: middle;
	}
	.supertuffTable tbody td[data-title=BWR Plywood] {
		text-align: right;
	}
	.supertuffTable tbody td[data-title]:before {
		content: attr(data-title);
		float: left;
		font-size: 16px;
		color: #000;
    	font-weight: 600;
	}
	.supertuffTable tbody th[scope="row"]{
		border-color: #4a4a4b;
	}
	.supertuffTable tbody td {
		text-align: right;
		border-bottom: 0;
	}
	.supertuffTable tbody td:last-of-type{
		border-bottom: 1px solid #4b4b4d;
	}
	.supertuffTable thead {
		position: absolute;
		clip: rect(1px 1px 1px 1px);
		clip: rect(1px, 1px, 1px, 1px);
		padding: 0;
		border: 0;
		height: 1px;
		width: 1px;
		overflow: hidden;
	}
	#meshProf .owl-theme .owl-nav,
	#corniceTab .owl-theme .owl-nav,
	#glassSection .owl-theme .owl-nav{
		display: block;
	}

	#bannerContent.image-bg .bannerImg{
		margin-left: 50px;
	}
	#bannerContent.image-bg .bannerImg {
    	margin-right: calc(190px - 50vw);
	}
	#bannerContent.image-bg .titleWrapper{
		padding: 5px 50px 5px 15px;
		margin-bottom: 20px;
	}
	#bannerContent.image-bg .titleWrapper h1 {
    	font-size: 25px;
	}
	#bannerContent .bannerWrapper::before {
    	bottom: 50px;
	}
	#bannerContent.image-bg .bannerImg::before {
		top: 20px;
		left: 20px;
		bottom: 20px;
		right: 20px;
		border: 1px solid #fff;
	}
	#subHeaderBar{
		padding: 8px 0;
	}
	.breadcrumbNav li{
		font-size: 12px;
    	line-height: 0px;
	}
	.subMenu.navbar ul{
		margin: 0;
	}
	.subMenu.navbar.navbar-inverse.affix{
    	top: 50px !important;
    	min-height: auto;
	}

	.membraneWarImg{
		margin-bottom: 15px;
	}

	.carcassContent ul li h5 {
    	font-size: 18px;
	}
	.carcassContent ul li span {
    	font-size: 14px;
	}

	#handlesPage .shutterItemDiv{
	  	margin: 0 0 15px 0;
	}
	#handlesPage .shutterItemDiv.lastTwo{
		margin: 0 0 15px 0;
	}

	.aboutContent.sectionPadBot{
		padding-bottom: 0;
	}
	.aboutContent p {
    	font-size: 16px;
    	line-height: 22px;
	}
	.aboutContent ul li{
	  margin-bottom: 5px;
	}
	.aboutContent ul li span {
    	font-size: 16px;
	}
	.aboutContent .bullet li:before {
    	top: 8px;
	}
	.aboutContent ul {
    	margin: 10px 0;
	}
	#aboutUsPage img {
    	margin-top: 15px;
	}
	.marginLeftZero {
    	margin-left: -15px;
	}

	.enquiryForm, .contactUsArea {
    	padding: 20px;
	}
	.contactDiv.sectionPadBot{
		padding-bottom: 0;
	}
	.contactUsArea .borderRight{
		border-right: 0;
	}
	.contactUsArea ul{
		border-bottom: 1px solid #4a4a4b;
		margin-bottom: 10px;
    	padding-bottom: 5px;
	}
	.contactSubDiv ul {
    	min-height: auto;
	}
	.contactUsArea ul li span {
    	font-size: 16px;
	}
	.contactUsArea ul li{
		line-height: 14px;
	}
	.contactUsArea ul li a {
    	font-size: 14px;
	}
	.callUs:before, .mailUs:before{
		font-size: 14px;
	}
	.contactUsArea ul li.callUs{
		margin-top: 10px;
	}
	/*-- Footer --*/
	.footerDiv{
		padding: 40px 10px 10px;
	    min-height: auto;
	    margin-bottom: 25px;
	}
	.footerDiv.email{
		margin-bottom: 0;
	}
	.copyImg {
	    display: block;
	    float: none;
	    width: 150px;
	    text-align: center;
	    margin: 0 auto;
	    margin-bottom: 5px;
	}
	.copyText {
	    display: block;
	    float: none;
    	text-align: center;
	}
	.footerBottom p {
    	font-size: 12px;
	}
	.footerBottom{
		padding: 5px 0;
	}
	.scrollToTop {
		left: 10px;
    	bottom: 10px;
	}
	/*-- Enquire box --*/
	.contactBtnDiv .contactBoxBtn:before{
		padding: 2px 10px;
    	font-size: 14px;
	}
	.contactBtnDiv {
    	margin-left: -82px;
	}
	.contactBtnDiv a.boxBtnArea{
		bottom: 77px;
		top: auto;
	}
}
@media only screen and (max-width: 575px){
    
.slideContactBox{
        width: 100%;
    }
}
/*-- Mobile media for a width of 480px --*/
@media only screen and (max-width: 480px){
	h4 {
    	font-size: 18px;
	}
	.subTitleBorder:before {
    	bottom: -5px;
	}
	.subTitle{
		margin-bottom: 15px;
	}
	.sectionTitle{
		margin-bottom: 15px;
	}
	.sectionTitle h3 {
    	font-size: 18px;
    	letter-spacing: normal;
	}
	.titleBorder:after{
		bottom: -12px;
	}
	.titleBorder:before{
		bottom: -8px;
	}
	.titleWrapper h1 {
    	font-size: 22px;
	}
	.carousel.vertical .carousel-caption {
	    top: 0;
	    padding:0;
	}
	.skewOverlay {
	    border-top: 150px solid #ffb300;
	    border-left: 150px solid transparent;
	}
	.carousel.vertical .carousel-caption h1,
	.carousel.vertical .carousel-caption h2{
		font-size: 14px;
	}
	.carousel.vertical .carousel-caption h1 span,
	.carousel.vertical .carousel-caption h2 span{
		font-weight: normal;
	}
	.homeSlider .right.carousel-control,
	.homeSlider .left.carousel-control {
    	width: 20px;
    	height: 25px;
    	line-height: 25px;
	}

	.skewOverlay {
    	top: -10px;
	}
	.supertuffTable {
    	font-size: 14px;
	}
	.supertuffTable tbody td[data-title]:before{
		font-size: 14px;
	}
	.supertuffTable th, .supertuffTable td {
    	padding: 5px 5px;
	}

	.shutterText{
		padding: 10px;
	}
	.FiveYrWarranty {
    	width: 65px;
    	top: 25px;
	}
	.owl-carousel .owl-nav .owl-prev,
	.owl-carousel .owl-nav .owl-next{
		padding: 4px 3px;
	}

	#carcassPage .owl-theme .owl-nav{
		display: block;
	}
	
	.footerLogo img {
    	width: 150px;
	}
	.footerLogo p{
		font-size: 14px;
	}

	.scrollToTop{
		width: 25px;
    	height: 25px;
	}
	.scrollToTop span{
		line-height: 25px;
		font-size: 20px;
	}

	.enquiryForm button {
	    font-size: 18px;
	    padding: 5px 15px;
	    margin-top: 5px;
	}
	.flex-row textarea {
    	height: 180px;
	}

	.footerDiv {
    	padding: 30px 10px 10px;
    	margin-bottom: 15px;
	}
	.footerImg {
    	margin-bottom: 15px;
	}
	.footerDiv .footerIcon {
	    width: 30px;
	    height: 30px;
    	line-height: 30px;
	}
	.footerDiv .footerIcon img {
    	width: 18px;
	}
	.footerDiv .footerIcon{
		top: -5px;
	}
	.footerDiv .footerIcon:after {
    	border-top: 5px solid transparent;
	}

	.slideContactBox{
	    width: 300px;
	}
	.contactBtnDiv{
		margin-left: -132px;
	}
}

@media only screen and (min-width: 320px) and (max-width: 480px){
	.js div#preloader {
    	background-size: 100px;
	}
	.titleBorder:before {
    	bottom: -4px;
	}
	.titleBorder:after {
    	bottom: -6px;
	}
	.titleBorder:after,
	.titleBorder:before,
	.subTitleBorder:before{
		height: 1px;
	}
	.subMenu.navbar.navbar-inverse.affix ul li a,
	.subMenu.navbar ul li a{
		font-size: 10px;
		padding: 2px 5px;
		letter-spacing: normal;
	}
	header .navbar-brand:before {
    	height: 50px;
    	right: -20px;
	}
	.navbar-inverse.affix .navbar-brand:before {
	    height: 38px;
	}
	header .navbar-brand, .navbar-inverse.affix .navbar-brand {
    	padding: 5px 10px;
    	height: auto;
	}
	header .navbar, .navbar.navbar-inverse.affix {
    	min-height: auto;
	}
	header .navbar-toggle{
		padding: 5px;
	    margin-top: 5px;
	    margin-right: 10px;
	    margin-bottom: 5px;
	    border-radius: 0;
    	border-color: #000 !important;
	}
	/*-- Shutter Page --*/
	.subMenu.navbar.navbar-inverse.affix {
    	top: 35px !important;
	}
	.nav.nav-pills li a {
	    padding: 5px 8px;
	    font-size: 12px;
	    margin-bottom: 5px;
	    margin-right: 5px;
	}
	.halfBg{
		display: none;
	}
	.shutterItemDiv .itemCaption p {
    	line-height: 14px;
    	font-size: 12px;
	}
}

@media only screen and (max-width: 360px){
	#bannerContent.image-bg .bannerImg {
    	margin-right: calc(165px - 50vw);
	}
	#bannerContent.image-bg .bannerImg {
    	margin-left: 25px;
	}
}

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