@import url('https://static.fibre2fashion.com/fonts/fontface.css?var=2.0');
.flex-container {
display: flex;
flex-wrap: wrap;
}
html{
	scroll-behavior: smooth;
} 
:root {
    --primerycolor:#000000;
    --secondarycolor: #3B9ADF;
	--white: #ffffff;
	--highlightedcolor:#3B9ADF;
    --sub-title-color:#4d4d4d;
    --regularcolor:#000000;
	--box-shadow:0 0 10px rgb(0 0 0 / 10%);
    --hoverboxshadow: 0 0 15px rgb(0 0 0 / 30%);
    --hoverborder:1px solid #e5e5e5;
    --hovertranslate:translateY(5px);


	--sectionheadingfontsize:30px;
    --titlefontsize:22px;
    --subtitlefontsize:18px;
    --regularfontsize:16px;
    --smallfontsize:14px;

    --regularfonts:'dm_sansregular', sans-serif;
    --boldfonts:'dm_sansmedium', sans-serif;
    --mediumfonts:'dm_sansmedium', sans-serif;
}
@media only screen and (min-width: 1441px){
    :root {
    --sectionheadingfontsize:34px;
    --titlefontsize:26px;
    --subtitlefontsize:22px;
    --regularfontsize:18px;
    --smallfontsize:15px;
    }
}
body{
	padding:0;
	margin:0;
	font-family: var(--regularfonts);
    font-size: var(--regularfontsize);
    line-height: 1.5;
	background: #f6f6f6;
    color: var(--regularcolor);
}
.container {
    width: 95%;
    max-width: 1600px;
    margin-right: auto;
    margin-left: auto;
}
.wrapper {
    width: 100%;
	max-width:100%;
}
strong
{
 font-family: var(--boldfonts); font-weight: normal;   
}
a{
    text-decoration: none;
    transition: all 0.4s ease;
}

a:hover {
   text-decoration: none !important;
   color: inherit;
}
img {
   max-width: 100%;
   height: auto;
   /*border-radius:5px;*/
   transition: all 0.4s ease;
}
ul{
	padding:0;
	margin:0;
	list-style:none;
}
a, 
input,
select,
textarea {
   outline: 0;
   margin: 0;
   padding: 0
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    padding-right: 10px;
    padding-left: 10px;
}
.section-title {
    color: var(--primerycolor);
    font-size: var(--sectionheadingfontsize) !important;
    font-family: var(--boldfonts);
    text-transform: capitalize;
    letter-spacing: -0.5px;
    text-align: left;
}
h1.section-title{margin-top: 0px;
    margin-bottom: 0px;}
.sub-title {
    font-size: var(--subtitlefontsize);
    color:var(--sub-title-color);
	letter-spacing: -0.5px;
}
.contect-title, .innersectiontitle {
    font-family:var(--mediumfonts);
    font-size: var(--titlefontsize);
    text-transform: capitalize;
	color: var(--primerycolor);
    display: inline-block;
}
.blocktitle{
    font-family:var(--boldfonts);
    font-size: var(--subtitlefontsize);
    /* text-transform: capitalize; */
	color: var(--primerycolor);
    line-height: 1.3;
    letter-spacing: -0.5px;
    word-break: break-word;
}
.blocktitle a{color: var(--primerycolor);}
.blocktitle:hover{color: var(--primerycolor);}
.categoryname{
        color: var(--secondarycolor);
    font-size: var(--regularfontsize);
    text-transform: uppercase;
    font-family: var(--boldfonts);
    margin-left: 25px;
    position: relative;
}
.categoryname:after {
    content: '';
    position: absolute;
    left: -25px;
    top: 45%;
    background-color: var(--secondarycolor);
    width: 18px;
    height: 2px;
}
.categoryname:hover{color: var(--primerycolor);}
.main-btn a, .primerybtn {
    padding: 13px 30px;
    color: var(--white);
    text-align: center;
    font-size: var(--subtitlefontsize);
    font-family: var(--mediumfonts);
    border-radius: 5px;
    background: var(--secondarycolor);
    border: 2px solid var(--secondarycolor);
	transition: all 0.4s ease;
	display: inline-block;
	text-decoration: none;
}
.main-btn a:hover, .primerybtn:hover {
	color:var(--primerycolor);
	background-color:var(--white);
    border: 2px solid var(--primerycolor);
}
.main-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.latest-view-btn a, a.view-all {
    border: 2px solid var(--primerycolor);
    box-sizing: border-box;
    border-radius: 5px;
    padding: 5px 15px;
    font-weight: 500;
    color: var(--primerycolor);
    transition: all 0.4s ease;
    text-decoration: none;
    font-family: var(--mediumfonts);
}
a.view-all {padding: 15px;}
.latest-view-btn a:hover, a.view-all:hover {
    color: var(--white);
    background-color: var(--primerycolor);
}
.interviews-group {
    background-color: var(--white);
    padding: 22px;
    text-align: center;
    transform: translatey(0px);
    transition: all 0.4s ease;
    box-shadow: var(--box-shadow);
    width: 32%;
    display: inline-block;
    border-radius: 5px;
}
.interviews-group:nth-child(1) {
    margin-right: 10px;
}
.interviews-group:nth-child(2) {
    margin-right: 10px;
}
.interviews-images img{
	width: 120px;
	height:120px;
    border-radius: 100%;
    overflow:hidden;
}
.interviews-title-main {
    margin: 10px 0;
    position: relative;
}
.interviews-title {
    font-size: var(--subtitlefontsize);
    color: var(--highlightedcolor);
    font-family: var(--mediumfonts);
	    min-height: 30px;
    line-height: 1.2;
}
.interviews-sub-title {
    font-size: var(--smallfontsize);
    color: #51628D;
    min-height:45px;
}
.interviews-title-main:after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -15px;
    background-color: #E0E0E0;
    width: 35px;
    height: 2px;
    transform: translateX(-50%);
}

.interviews-group .blocktitle {
    margin-top: 30px;
    font-family: var(--mediumfonts);
    min-height: 70px;
}
/*.interviews-details {
    margin-top: 50px;
}*/
.interviews-details  .nav-tabs {
    border-bottom: none;
	margin-bottom: 25px !important;
}
.interviews-details .nav-tabs>li>a {
    margin-right: 2px;
    line-height: 1.42857143;
    /*border: 2px solid transparent;*/
    color: var(--sub-title-color);
	background-color:transparent;
	font-size: var(--subtitlefontsize);
}
.interviews-details .nav-tabs li.active {
    color: var(--primerycolor) !important;
    border-bottom: 2px solid var(--secondarycolor);
	font-family:var(--mediumfonts);
	background-color:transparent !important;
}
.interviews-details .nav-tabs>li.active>a, .interviews-details .nav-tabs>li.active>a:focus, .interviews-details .nav-tabs>li.active>a:hover {
    background-color: transparent;
	color: var(--primerycolor) !important;
	border:0;
}
.interviews-details .nav-tabs>li>a:hover {
    border-color: transparent;
}
.interviews-details .nav-tabs>li a:hover{
	color: var(--primerycolor);
    background-color: transparent;
    border-bottom: 0px solid transparent;
	background-color:transparent;
}
.interviews-main-box img {
    border-radius: 8px;
    overflow: hidden;
}
.interviewsmain-title {
    width: 70%;
	position:relative;
    margin-top: -10px;
}
.interviewsmain-title:after {
    content: '';
    position: absolute;
    left: 26%;
    top: 50%;
    width: 75%;
    height: 1px;
    background-color: none;
    transform: translatey(-50%);
}

.new-white-box{
	padding:20px;
	background-color: var(--white);
    box-shadow: var(--box-shadow);
	border-radius:0px;
}

.connecting-group, .whiteboxtitle {
    display: flex;
    justify-content: space-between;
    padding:0px;
    align-items: center;
}
.contect-title, .title {
    font-family: var(--mediumfonts);
    font-size: var(--titlefontsize);
    text-transform: capitalize;
    color: var(--primerycolor);
}
.connecting-seeall-btn a, .morelink {
    font-size: var(--sub-font-title);
    color: var(--primerycolor);
}
.categoryname-append{
        color: var(--secondarycolor);
    font-size: var(--regularfontsize);
    text-transform: uppercase;
    font-family: var(--boldfonts);
    margin-left: 5px;
}
.categoryname-append:after {
    content: '';
    position: absolute;
    left: -25px;
    top: 45%;
    background-color: var(--secondarycolor);
    width: 18px;
    height: 2px;
}
.categoryname-append:hover{color: var(--primerycolor);}

/*revised common.css */
.clearfix, .clear{clear: both;}
.white-box {
    background-color: var(--white);
    margin-top: 20px;
    padding: 20px;
    box-shadow: var(--box-shadow);
    border-radius: 5px;
    
}
.white-box h4 {
    letter-spacing: -0.5px;
    font-family:var(--mediumfonts) !important;
    font-size: var(--titlefontsize) !important;
    text-transform: capitalize;
	color: var(--primerycolor);
}
.section {
    width: 100%;
    background-color: #f6f6f6;
    padding-bottom: 60px;
}

.breadcrumb, .breadcrums {
    background-color: transparent;
    color: var(--primerycolor);
    font-family: var(--boldfonts);
    font-size: var(--smallfontsize);
    padding: 0;
    margin: 10px 0;
}
.breadcrumb a, .breadcrums a{font-family: var(--regularfonts);}
.container .row .col-md-12.breadcrumb, .container .row .breadcrumb, .container .row .breadcrums{padding-left: 10px;}
.blue-subheading a{
    font-family: var(--mediumfonts);
    color: var(--primerycolor) !important;
    font-size: var(--subtitlefontsize);
    line-height: 1.4;
}
.news-date{color: var(--sub-title-color); font-size: var(--smallfontsize);}
.margintop20{margin-top: 20px;}
.margintop40{margin-top: 40px;}
.margintop10{margin-top: 10px;}
/*esteemed clients */
.our-esteemed-group {
    width: 100%;
    height: 100px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.our-esteemed-group img {
    width: 100% !important;
}
.our-esteemed-details {
    display: flex;
    justify-content: space-between;
}
.our-esteemed-clients {
    margin-top: 20px;
}
.our-esteemed-details.owl-carousel .owl-nav.disabled {
display: block;
}
.our-esteemed-details button.owl-prev {
left: -20px;
position: absolute;
top: 48%;
transform: translateY(-50%);
box-shadow: var(--box-shadow);
width: 40px;
height: 40px;
border-radius: 100% !important;
background-color: #fff !important;
}
.our-esteemed-details button.owl-next {
right: -20px;
position: absolute;
top: 48%;
transform: translateY(-50%);
box-shadow: var(--box-shadow);
width: 40px;
height: 40px;
border-radius: 100% !important;
background-color: #fff !important;
}
.our-esteemed-group img {
width: initial!important;
height: initial!important;
}
.pagination-sm>li>a, .pagination-sm>li>span {
    font-size: var(--regularfontsize);
    color: var(--primerycolor);padding: 5px 15px;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover{background-color: var(--primerycolor);
    border-color: var(--primerycolor);}

    
@media (max-width:1024px){

    .section-title{font-size: var(--titlefontsize) !important;}

}
.horizontalbanners ul {display: flex;flex-wrap: wrap;justify-content: space-between;}
.horizontalbanners.twobanners ul li{width:49%;}
.horizontalbanners.threebanners ul li{width:32%;}
.verticalbanners ul {display: flex;flex-wrap: wrap;justify-content: space-between;flex-direction: column;}
.verticalbanners ul li{margin-top:20px;width:100%;}
.horizontalbanners img, .verticalbanners img {border-radius: 10px; overflow: hidden;width:100%;}
ul.menu {
    display: flex;
    background-color: var(--white);
    justify-content: space-between;
}
ul.menu li a {
    text-decoration: none;
    padding: 20px 17px;
    display: block;
    color: var(--sub-title-color);
    transition: all 0.4s ease;
    font-family: var(--mediumfonts);
    font-size: var(--regularfontsize);
    letter-spacing: -0.02em;
    font-weight: normal;
}

.modal-header {
    background: #f7f8fa;
    padding: 20px;
	border-bottom:0px;
}
.modal-header h4 {
    color: var(--primerycolor);
    display: block;
    font-size: var(--subtitlefontsize)!important;
    margin: 0px;
    width: 100%;
    text-transform: uppercase;
}
.modal-dialog .close {
    position: absolute;
    right: 18px;
    top: 20px;
    opacity: 1;
    font-size: 26px;
}
.modal-body .subscribe-btn{
    background: var(--secondarycolor);
    border-radius: 5px;
    outline: none;
    border: none;
    padding: 10px;
    font-family: var(--boldfonts);
    font-size: var(--regularfontsize);
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #FFFFFF;
	float:none;
}
img.onscrollloading, img.onscrollpipelineloading {
	margin: auto;
	display: block;
}
img.onscrollloading[src$="loader.gif"], img.onscrollpipelineloading[src$="loader.gif"]{
	width: auto !important;
	max-height: 100%;	
}
.load-wraper.not-loaded .load-element{
	opacity: 0;
}

.load-wraper.not-loaded {
	position: relative;
	background-color: rgb(238 238 238);
	z-index: 44;
	overflow: hidden;
	height:330px;
}

.load-wraper.not-loaded:after{
	content:"";
	position: absolute;
	left: -45%;
	height: 100%;
	width: 45%;
	top: 0px;
	background-image: linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
	background-image: -moz-linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
	background-image: -webkit-linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
	animation: loading 1s infinite;
	z-index: 45;
}
@keyframes loading {
  0%{
    left: -45%;
  }
  100%{
    left: 100%;
  }
}
.loadonvisible, .onscrollloading, .onscrollpipelineloading, .pipelineloading {
    background-color: #f8f8f8;
    background-image: url(https://cdn.fibre2fashion.com/staticresources/images/loader.gif);
    background-repeat: no-repeat;
    background-position: 50%;
    margin: auto;
}
.loadonvisible[src$="spacer.gif"], .onscrollloading[src$="spacer.gif"], .onscrollpipelineloading[src$="spacer.gif"], .pipelineloading[src$="spacer.gif"]{	
	max-height:100%;
}
/* Popup Scrollbar Start*/
#cboxLoadedContent::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #999999;
}

#cboxLoadedContent::-webkit-scrollbar
{
	width: 12px;
	background-color: #999999;
}

#cboxLoadedContent::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}
/* Popup Scrollbar End*/
.latest-news-date-main {
    display: flex;
    color: var(--sub-title-color);
    font-size: var(--smallfontsize);
}
.latest-news-read {
    margin-left: 30px;
    position: relative;
}
.latest-news-read:after {
    content: '';
    width: 7px;
    height: 7px;
    background-color: #949AAA;
    position: absolute;
    left: -18px;
    top: 50%;
    border-radius: 100%;
    transform: translateY(-50%);
}
.loading-btn:disabled, .loading-btn.disabled{
	opacity:0.65 !important;
	cursor: no-drop !important;
}
.loading-btn:disabled:after, .loading-btn.disabled:after {
    content: "\f110";
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-left: 10px;
	-webkit-animation: anim 1s infinite steps(8);
    animation: anim 1s infinite steps(8);
}

@-webkit-keyframes anim {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes anim {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
.height-auto{
    height: auto !important;
}
.slider-btn-wrapper.garment-suppliers-details .owl-dots {
    position: absolute;
    background: rgba(26, 39, 85, 0.3) !important;
    border-radius: 10px;
    border-radius: 10px !important;
    display: inline-block;
    justify-content: center;
    align-items: center;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0 10px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
a.whole-link {
	position: absolute;
	left: 0px;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9;
}
.slider-btn-wrapper button.owl-prev {
	left: -20px;
	position: absolute;
	top: 48%;
	transform: translateY(-50%);
	box-shadow: var(--box-shadow);
	width: 40px;
	height: 40px;
}

.slider-btn-wrapper button.owl-next {
	right: -20px;
	position: absolute;
	top: 48%;
	transform: translateY(-50%);
	box-shadow: var(--box-shadow);
	width: 40px;
	height: 40px;
}
.slider-btn-wrapper button.owl-next {
	right: 0px;
	margin: 0px;
	border-radius: 0px !important;
}

.slider-btn-wrapper .owl-nav button {            
	margin: 0px !important;
	border-radius: 0px !important;
	width: 30px;
	height: 70px;
	background: rgba(0,0,0,0.5) !important;
	color: #ffffff !important;
}
.slider-btn-wrapper .owl-nav button.owl-next:after{
	content: "\f105";
	display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	font-size: 28px;
}
.slider-btn-wrapper .owl-nav button.owl-prev:after{
	content: "\f104";
	display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	font-size: 28px;
}
.slider-btn-wrapper .owl-nav button img {
	display:none;
}
	.slider-btn-wrapper .owl-nav button.owl-next {
		right: 0px;
	}

	.slider-btn-wrapper .owl-nav button.owl-prev {
		left: 0px;
	}
	.slider-btn-wrapper .owl-dots {
        position: absolute;
        border-radius: 10px;
        border-radius: 10px !important;
        display: inline-block;
        justify-content: center;
        align-items: center;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        padding: 0 10px;
        padding: 5px 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
/*hover effect throughout the portal */
.sourcingproducts img, .latest-news-detais.owl-carousel .owl-stage .owl-item, .read-rticles-group .read-rticles-images, .face2-face-group, .recent-news-group, .latest-news-box, .minews:hover img, .analyst-corner-home ul li img {transition: all 0.4s ease;}
.sourcingproducts img:hover, .latest-news-box:hover .latest-news-img{box-shadow: 0 0 15px rgb(0 0 0 / 30%); border: 1px solid #e5e5e5;}
.minews:hover img:hover, .analyst-corner-home ul li img:hover{box-shadow: var(--hoverboxshadow);}
.latest-news-detais.owl-carousel .owl-stage .owl-item:hover, .read-rticles-group:hover .read-rticles-images, .face2-face-group:hover, .recent-news-group:hover, .interviews-group:hover {transform: translateY(5px);}
.hrads li img {
    border-radius: 5px;
}
.EmbeddedPBfootercloseButton {
    background-color: #fff;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    padding: 0 6px;
    position: absolute;
    right: -1%;
    top: -10px;
    cursor: pointer;
} 
body.modal-open {
  height: 100vh;
  overflow-y: hidden !important;
}