@font-face {
    font-family: myFont;
    src: url(../font/Uni-Sans-SemiBold.otf);
}

.carousel-indicators li{
	background-color: rgba(0, 57, 255, 0.5);
}

.carousel-indicators .active {
  background-color: #0fd3f3;
}

html{
	height:100%;
	font-size:14px;
	font-family: myFont;
}

body{
	font-family: myFont;
	overflow:hidden;
	height:100%;
}

nav{
	background-color:#ffffff;
}

.dropdown-menu{
	min-width:1rem;
}

.custom-navbar{
	padding:0.5rem 1rem 0rem 0rem;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

.map{
	position:fixed;
	z-index:1;
	width:100%;
	height:100%;
}

iframe{
	width:100%;
	height:100%;
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(8,72,133, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.nav-item .active{
	background-color:#084885;
	color:white;
	font-weight:bold;
}

.custom-toggler.navbar-toggler {
    border-color: rgb(8,72,133);
}

@media (max-width: 575px) {
	html{
		font-size :8px;
	}
	.productcontent{
		height: calc(100% - 90px) !important;
		align-items:center !important;
		padding-top:8rem;
	}
	.why{
		background-image: url("../images/Why-skatrading.png");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	.why2{
		background-image: url("../images/ska-learnmore.png");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	.whycontent{
		padding-top:25rem;
	}
	.principal{
		background-image: url("../images/principal-skatrading.png");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	.about{
		background-image: url("../images/about-skatrading.png");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	.carousel-control-next, .carousel-control-prev{
		margin-top:70px;
	}
	.product{
		background-image: url("../images/product-skatrading.png");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}

	.containercontact{
		background-image: url("../images/contact-skatrading.png");
		background-size: 100% 97%;
		background-repeat:no-repeat;
		position:relative;
		z-index:3;
	}  
	
	.food{
		background-image: url("../images/fnb.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	
	.med{
		background-image: url("../images/med.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	
	.pharma{
		background-image: url("../images/pharma.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	
	.nutra{
		background-image: url("../images/nutra.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}

	.carousel{
		padding-top:70px;
	}
	
	.carousel-inner{
		width:100%;
		height:500px;
	}
}

@media (min-width: 576px) and (max-width: 767px) { 
	html{
		font-size:10px;
	}
	.productcontent{
		height: calc(100% - 90px) !important;
		align-items:center !important;
		padding-top:8rem;
	}
	.why{
		background-image: url("../images/Why-skatrading.png");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	.why2{
		background-image: url("../images/ska-learnmore.png");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	.whycontent{
		padding-top:25rem;
	}
	.principal{
		background-image: url("../images/principal-skatrading.png");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	.carousel-control-next, .carousel-control-prev{
		margin-top:70px;
	}
	.about{
		background-image: url("../images/about-skatrading.png");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}

	.product{
		background-image: url("../images/product-skatrading.jog");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}

	.containercontact{
		background-image: url("../images/contact-skatrading.png");
		background-size: 100% 97%;
		background-repeat:no-repeat;
		position:relative;
		z-index:3;
	}  

	.food{
		background-image: url("../images/fnb.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	
	.med{
		background-image: url("../images/med.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	
	.pharma{
		background-image: url("../images/pharma.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	
	.nutra{
		background-image: url("../images/nutra.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	
	.carousel{
		padding-top:70px;
	}
	
	.carousel-inner{
		width:100%;
		height:500px;
	}
}

@media (min-width: 768px) and (max-width: 991px) { 
	html{
		font-size: 12px;
	}
	.productcontent{
		height: calc(100% - 80px) !important;
		padding-left:50px;
		align-items:flex-end !important;
	}
	.why{
		background-image: url("../images/whyska.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	.why2{
		background-image: url("../images/whyska2.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	.whycontent{
		padding-top:10rem;
	}
	.about{
		background-image: url("../images/aboutus.gif");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}

	.product{
		background-image: url("../images/product.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}

	.containercontact{
		background-image: url("../images/contactus.png");
		background-size: 100% 97%;
		background-repeat:no-repeat;
		position:relative;
		z-index:3;
	}  
	
	.food{
		background-image: url("../images/fnb.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	
	.med{
		background-image: url("../images/med.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	
	.pharma{
		background-image: url("../images/pharma.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	
	.nutra{
		background-image: url("../images/nutra.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}

	.carousel-inner{
		width:100%;
		height:500px;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	html{
		font-size:14px;
	}
	.productcontent{
		height: calc(100% - 80px) !important;
		align-items:flex-end !important;
		padding-left:50px;
	}
	.why{
		background-image: url("../images/whyska.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	.why2{
		background-image: url("../images/whyska2.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	.whycontent{
		padding-top:10rem;
	}
	.about{
		background-image: url("../images/aboutus.gif");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}

	.product{
		background-image: url("../images/product.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}

	.containercontact{
		background-image: url("../images/contactus.png");
		background-size: 100% 97%;
		background-repeat:no-repeat;
		position:relative;
		z-index:3;
	}  
	
	.food{
		background-image: url("../images/fnb.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	
	.med{
		background-image: url("../images/med.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	
	.pharma{
		background-image: url("../images/pharma.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	
	.nutra{
		background-image: url("../images/nutra.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}

	.carousel-inner{
		width:100%;
		height:500px;
	}
}

@media (min-width: 1200px) {
	html{
		font-size : 18px;
	}
	.productcontent{
		height: calc(100% - 90px) !important;
		padding-left:100px;
		align-items:flex-end !important;
	}
	.why{
		background-image: url("../images/whyska.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	.why2{
		background-image: url("../images/whyska2.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	.whycontent{
		padding-top:10rem;
	}
	.about{
		background-image: url("../images/aboutus.gif");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}

	.product{
		background-image: url("../images/product.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}

	.containercontact{
		background-image: url("../images/contactus.png");
		background-size: 100% 97%;
		background-repeat:no-repeat;
		position:relative;
		z-index:3;
	}  
	
	.food{
		background-image: url("../images/fnb.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	
	.med{
		background-image: url("../images/med.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	
	.pharma{
		background-image: url("../images/pharma.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}
	
	.nutra{
		background-image: url("../images/nutra.jpg");
		background-size: 100% 100%;
		background-repeat:no-repeat;
	}

	.carousel-inner{
		width:100%;
		height:500px;
	}
}