@media only screen and (min-width: 1080px) {
	.custom-nav {
		padding: 0.5rem 5rem;
	}
}

@media only screen and (min-width: 993px) and (max-width: 1079px) {
	.custom-nav {
		padding: 0.5rem 2rem;
	}
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
	.custom-nav {
		padding: 0.5rem 1.25rem;
	}
	.nav-span {
		width: 490px;
	}
}

@media only screen and (max-width: 992px) {
	.nav-item {
		padding: 0 0.45rem;
		font-size: 14px;
	}
	.parallax-outer {
	    /*use image*/
	    background-image: url("../img/happycustomer1.jpg");
	}
	.parallax-outer1 {
	    /*use image*/
	    background-image: url("../img/tapes-p1.jpg");
	}
	.parallax-outer2 {
	    /*use image*/
	    background-image: url("../img/machine1.jpg");
	}
	.parallax-outer3 {
	    /*use image*/
	    background-image: url("../img/career1.jpg");
	}
}

@media only screen and (min-width: 768px) {
	ul.sub-menu {
	    position: absolute;
	    background-color: #ffffff;
	    list-style: none;
	    padding-left: 0;
	    width: 150px;
	    margin-left: -25px;
	    opacity: 0;
	    z-index: 10;
	    box-shadow: 2px 1px 3px #afafaf;
	    visibility: hidden;
	}

	ul.sub-menu li {
	    padding-top: 5px;
	    padding-bottom: 5px;
	    padding-left: 5px;
	}

	ul.sub-menu li > a {
	    padding: 0;
	    color: #000000;
	    text-decoration: none;
	}

	ul.sub-menu li > a:hover {
	    color: #616161;
	}

	.nav-item:hover .sub-menu {
	    perspective: 1000px;
	}

	.nav-item:hover .sub-menu {
	    opacity: 1;
	    animation-name: service;
	    animation-duration: 500ms;
	    animation-timing-function: ease-in-out;
	    animation-fill-mode: forwards;
	    visibility: visible;
	}

	.nav-item:hover .sub-menu li {
	    opacity: 1;
	    animation-name: service;
	    animation-duration: 500ms;
	    animation-timing-function: ease-in-out;
	    animation-fill-mode: forwards;
	}

	@keyframes service {
	    0% {
	        opacity: 0;
	        transform: rotateY(-90deg) translateY(30px);
	    }
	    100% {
	        opacity: 1;
	        transform: rotateY(0deg) translateY(0px);   
	    }
	}

	ul.sub-menu li:hover {
	    background-color: #ffffff;
	    color: black;
	}

	.hidden-menu {
		display: none;
	}
}

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

	.nav-link-abt {
	    width: 90%;
	    float: left;
	}
	
	.nav-item:hover .sub-menu {
	    opacity: 0;
	    animation-name: none;
	    animation-duration: 500ms;
	    animation-timing-function: ease-in-out;
	    animation-fill-mode: forwards;
	    visibility: hidden;
	}

	.nav-item:hover .sub-menu li {
	    opacity: 0;
	    animation-name: none;
	    animation-duration: 500ms;
	    animation-timing-function: ease-in-out;
	    animation-fill-mode: forwards;
	}

	.sub-menu-small {
	    position: static;
	    background-color: #06b0fb;
	    list-style: none;
	    width: 100%;
	    z-index: 10;
	    margin-top: 2.5rem;
	}

	.sub-menu-small li {
	    padding-top: 5px;
	    padding-bottom: 5px;
	    padding-left: 5px;
	    border-bottom: 1px solid #0277AB;
	}

	.sub-menu-small li > a {
	    padding: 0;
	    color: #000000;
	    text-decoration: none;
	}

	.sub-menu-small li > a:hover {
	    color: #fff;
	}

	.sub-menu-small {
	    opacity: 1;
	    animation-name: service;
	    animation-duration: 500ms;
	    animation-timing-function: ease-in-out;
	    animation-fill-mode: forwards;
	    visibility: visible;
	}

	.sub-menu-small li {
	    opacity: 1;
	    animation-name: service;
	    animation-duration: 500ms;
	    animation-timing-function: ease-in-out;
	    animation-fill-mode: forwards;
	}

	@keyframes service {
	    0% {
	        opacity: 0;
	        transform: rotateY(-90deg) translateY(30px);
	    }
	    100% {
	        opacity: 1;
	        transform: rotateY(0deg) translateY(0px);   
	    }
	}

	ul.sub-menu-small li:hover {
	    background-color: #0277AB;
	    color: #fff;
	}

	.content-box, .content-box1 {
	    width: 370px;
	    height: 300px;
	    overflow: hidden;
	}

	.ot-cont {
	    padding-top: 25rem;
	}

	.parallax-content, .parallax-content1, .parallax-content2, .parallax-content3 {
		font-size: 1.4rem;
		padding-top: 1.5rem;
	}

	.parallax-desc, .parallax-desc1, .parallax-desc2, .parallax-desc3 {
		font-size: 1rem;
		padding-top: 0;
		width: 370px;
	}

	#ft-nav {
		text-align: center;
	}

	.site-links {
		text-align: center;
	}

	.site-links li {
		padding-right: 3rem;
		display: inline-block;
	}

	.othercontact h3 {
		text-align: center;
		padding-top: 2rem;
	}

	.social-links {
		align-items: center;
		display: flex;
	}

	#navbarSupportedContent {
		background-color: #0277AB;
		/*margin-top: 5rem;*/
	}

	/*.show {
		margin-top: 5rem;
	}*/

	.nav-item {
		border-bottom: 1px solid white;
	}

}

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

	.content-box, .content-box1 {
	    width: 340px;
	}

	.parallax-content, .parallax-content1, .parallax-content2, .parallax-content3 {
		font-size: 1.2rem;
	}

	.parallax-desc, .parallax-desc1, .parallax-desc2, .parallax-desc3 {
		font-size: 0.9rem;
		width: 340px;
	}
	.parallax-outer {
	    /*use image*/
	    background-image: url("../img/happycustomer2.jpg");
	}
	.parallax-outer1 {
	    /*use image*/
	    background-image: url("../img/tapes-p2.jpg");
	}
	.parallax-outer2 {
	    /*use image*/
	    background-image: url("../img/machine2.jpg");
	}
	.parallax-outer3 {
	    /*use image*/
	    background-image: url("../img/career2.jpg");
	}
	.ct-icon {
        display: none;
    } 
    .navbar-name {
		width: 200px;
	} 
	.nav-span {
		width: 75%;
	}

}

@media only screen and (min-width: 335px) and (max-width: 435px) {
	.navbar-brand {
		width: 50px;
		margin-right: 0.5rem;
	}
	.navbar-name {
		font-size: 0.8rem;
	}
}

@media only screen and (min-width: 1200px) {
	.navbar-name {
		width: 400px;
		font-size: 1.2rem;
		font-weight: 600;
	}
	.nav-span {
		width: 500px;
	}
}