@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

* {
	box-sizing: border-box;
}

body, html {
	min-height: 100vh;
}

::selection {
	background-color: #7b9e50;
}
::-moz-selection {
	background-color: #7b9e50;
}

.container-fluid {
	max-width: 1020px;
	padding-right: 20px;
	padding-left: 20px;
}

.navbar .navbar-inner {
	background: #1f2226;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 200;
}

#mainNav .container-fluid {
	width: 100%;
	max-width: 100%;
	display: table;
	width: 100%;
}

#mainNav .navbar-inner {
	padding-right: 0;
}

#mainNav img {
	max-width: 75% !important;
}

#docsSearch {
	background-color: #fff;
	border-bottom: none;
	padding-top: 40px;
	padding-right: 20px;
	padding-left: 20px;
}

h1,
#docsSearch h1 {
	font-family: 'Montserrat';
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    line-height: 1.3;
    text-transform: uppercase;
    padding: 20px 0 20px 0;
    letter-spacing: 0.02em;
    margin: 0;
}

#docsSearch h1 {
	margin-bottom: 30px;
}

#searchBar {
	width: 95%;
	max-width: 700px;
	position: relative;
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 60px;
}

#searchBar .search-query {
	border-color: #9d9d9d;
	height: 36px;
	height: auto;	
	font-size: 16px;
	padding: 8px 15px;
	line-height: 1.2;
}

#searchBar:before {
	content: 'Choisissez une catégorie ou recherchez une réponse.';
	position: absolute;
	bottom: 100%;
	right: 0;
	left: 0;
	margin-bottom: 30px;
	text-align: center;
	font-size: 16px;
	font-family: 'Montserrat', sans-serif;
	color: #46494c;
}

::-webkit-input-placeholder {
	color: #b8b8b8;
	letter-spacing: 0.02em;
}
:-moz-placeholder {
	color: #b8b8b8;
	letter-spacing: 0.02em;
}
::-moz-placeholder {
	color: #b8b8b8;
	letter-spacing: 0.02em;
}
:-ms-input-placeholder {
	color: #b8b8b8;
	letter-spacing: 0.02em;
}

/*Header*/

.navbar .brand img {
	max-width: 100px !important;
}

.navbar .brand {
	padding-top: 11px !important;
	padding-bottom: 11px !important;
}

.nav-collapse {
    display: flex;
    justify-content: flex-end;
}

.navbar .nav {
	position: static!important;
}

.navbar .nav:after {
	content: '';
	display: block;
	clear: both;
}

.navbar .nav li {
	display: block;
	float: left;
	margin-right: 0;
    margin-left: 0;
	transition: all 0.2s;
}

.navbar .nav li a {
	font-family: 'Montserrat';
    font-size: 20px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1.2;
    padding-top: 15px;
    padding-bottom: 15px;
    color: #fff;
    text-align: center;
    font-weight: bold;
    min-width: 250px;
    border-right: #4e4f53 solid 1px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
	transition: all 0.2s;
}

.navbar .nav li.active a, .navbar .nav li a:hover {
	transition: all 0.2s;
	color: #7B9E50;
}

.navbar .nav li:last-child a {
	border-right: none;
}

.navbar .nav .active .caret {
	display: none;
}

#searchBar button {
	display: block;
	left: 0;
	right: auto;
	border-top-right-radius: 0;
	border-top-left-radius: 5px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 5px;
	width: 40px;
	top: 0;
	bottom: 0;
	height: auto;
	background-color: #f4f4f4;
	border-color: #9d9d9d;
	text-align: center;
	padding-right: 5px;
	padding-left: 5px;
	letter-spacing: 0.02em;
	border: #9d9d9d 1px solid;
	border-right: none;
}

#searchBar button:hover,
#searchBar button:focus {
	background-color: #f4f4f4;
	border-color: #9d9d9d;
	outline: none;
}

#searchBar button:hover {
	background: #f4f4f4;
	border-color: #9d9d9d;
}

#searchBar .search-query {
	padding-left: 45px;
}

#searchBar span {
	display: none;
}

#searchBar button .icon-search {
	display: inline-block;
	font-weight: 400;
	font-size: 20px;
	color: #b8b8b8;
	width: 100%;
	height: 100%;
	background: url(https://ufpro.com/storage/app/media/HelpScout_Docs/search_sprite.png) center center no-repeat;
	background-size: initial; 
}

.icon-search:before {
	content: '';
}

h2 {
	font-family: 'Montserrat';
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    line-height: 1.3;
    text-transform: uppercase;
    padding: 20px 0 20px 0;
    letter-spacing: 0.02em;
    margin: 0;
}

.collection-category h2 {
	font-weight: 700;
	padding: 0;
	margin-bottom: 20px;
	text-align: left;
}

.collection-category .category-list {
	margin-right: -10px;
	margin-left: -10px;
}

.collection-category .category-list:after {
	content: '';
	display: block;
	clear: both;
}

.category-list .category {
	width: calc(33.33% - 20px);
	position: relative;
	z-index: 0;
	display: table;
	height: 170px;
	margin-bottom: 20px;
	margin-right: 10px;
	margin-left: 10px;
	float: left;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 40px;
	overflow: hidden;
}

.category-list .category,
.category-list .category:hover {
	background: #1d2128;
    background: -webkit-linear-gradient(#21262e, #1d2128);
    background: -o-linear-gradient(#21262e, #1d2128); 
    background: -moz-linear-gradient(#21262e, #1d2128);
    background: linear-gradient(#21262e, #1d2128); 
	-webkit-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}

.category-list .category:before,
.category-list .category:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}

.category-list .category:before {
	z-index: 2;
}

.category-list .category:after {
	z-index: 3;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
	background-position: center center;
	background-repeat: no-repeat;
}

.category:hover:after {
	transform: scale(1.03);
}

#category-738,
#category-736,
#category-741,
#category-739,
#category-740,
#category-737 {
	height: 210px;
}

#category-738:after,
#category-736:after,
#category-741:after,
#category-739:after,
#category-740:after,
#category-737:after {
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
}

.category-list #category25 {
	height: 210px!important;
}

.category-list .category:before {
    background: -webkit-linear-gradient(#1e2a4a, rgba(99, 127, 174, 0));
    background: -o-linear-gradient(#1e2a4a, rgba(99, 127, 174, 0)); 
    background: -moz-linear-gradient(#1e2a4a, rgba(99, 127, 174, 0));
    background: linear-gradient(#1e2a4a, rgba(99, 127, 174, 0));
}
#category-725:after { 
	background-image: url(https://ufpro.com/storage/app/media/HelpScout_Docs/discount.png);
	background-position: right center;
}

#category-729:after { 
	background-image: url(https://ufpro.com/storage/app/media/HelpScout_Docs/factory.png);
	background-position: center bottom 5px;
}

#category-18:after { 
	background-image: url(https://ufpro.com/storage/app/media/HelpScout_Docs/gift.png);
}

#category-730:after { 
	background-image: url(https://ufpro.com/storage/app/media/HelpScout_Docs/orders.png);
}

#category-728:after { 
	background-image: url(https://ufpro.com/storage/app/media/HelpScout_Docs/returns.png);
}

#category-731:after { 
	background-image: url(https://ufpro.com/storage/app/media/HelpScout_Docs/sizing-new.png);
}

#category-732:after { 
	background-image: url(https://ufpro.com/storage/app/media/HelpScout_Docs/warranty.png);
}

#category-738:after { 
	background-image: url(https://ufpro.com/storage/app/media/HelpScout_Docs/monsoon-new.jpg);
}

#category-736:after { 
	background-image: url(https://ufpro.com/storage/app/media/HelpScout_Docs/delta-new.jpg);
}

#category-741:after { 
	background-image: url(https://ufpro.com/storage/app/media/HelpScout_Docs/striker.jpg);
}

#category-739:after { 
	background-image: url(https://ufpro.com/storage/app/media/HelpScout_Docs/p40-new.jpg);
}

#category-740:after { 
	background-image: url(https://ufpro.com/storage/app/media/HelpScout_Docs/pads.jpg);
}

#category-726:after { 
	background-image: url(https://ufpro.com/storage/app/media/HelpScout_Docs/account.png);
}
#category-727:after { 
	background-image: url(https://ufpro.com/storage/app/media/HelpScout_Docs/general-questions-new.png);
}
#category-737:after { 
	background-image: url(https://ufpro.com/storage/app/media/HelpScout_Docs/windstopper-lining.jpg);
}

.category-list h3 {
	position: relative;
	z-index: 5;
	display: table-cell;
	vertical-align: middle;
	font-family: 'Montserrat';
    font-weight: bold;
    font-size: 22px;
    text-transform: uppercase;
	color: #fff;
	padding: 0;
	text-shadow: 1px 1px 5px #000;
}

.category-list .category .article-count {
	display: none;
	position: absolute;
	z-index: 6;
	bottom: 15px;
	text-align: center;
	right: 0;
	left: 0;
	margin: 0;
}

#collection-1 {
	display: none;
}

.related ul>li a {
	color: #7B9E50;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
}

footer {
	background-color: #000;
	padding-top: 40px;
	padding-bottom: 40px;
	text-align: center;
}

footer p,
footer p a {
	margin-bottom: 0;
	color: #fff;
	font-size: 12px;
	text-align: center;
}

footer p a:hover {
	color: #ced226;
}

/*form*/
#sidebar form .search-query,
form .search-query {
	border-color: #676767;
	color: #676767;
	border-radius: 5px;
	padding-left: 20px;
	max-width: 90%;
}

/* all */
::-webkit-input-placeholder { color:#676767; }
::-moz-placeholder { color:#676767; } /* firefox 19+ */
:-ms-input-placeholder { color:#676767; } /* ie */
input:-moz-placeholder { color:#676767; }

/* individual: webkit */
input::-webkit-input-placeholder { color:#676767; }
input::-webkit-input-placeholder { color:#676767; }
input::-webkit-input-placeholder { color:#676767; }

/* individual: mozilla */
input::-moz-placeholder { color:#676767; }
input::-moz-placeholder { color:#676767; }
input::-moz-placeholder { color:#676767; }

#sidebar form .search-query:focus, 
#sidebar form .search-query:focus:invalid,
form .search-query:focus,
form .search-query:focus:invalid {
    border-color: rgba(215,217,86, 0.7);
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 4px rgb(215 217 86 / 40%);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 4px rgba(215,217,86,.4);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 4px rgb(215 217 86 / 40%);
    outline: 0!important;
}

.contentWrapper {
	border: none;
}

#main-content {
	padding-left: 0;
	border-left: 1px solid #767676;
	background-image: none;
}

#searchBar {
	width: calc(100% - );
}

#sidebar h3 {
	border-bottom: 2px solid #707070;
	padding-left: 10px;
	font-family: 'Montserrat';
	font-size: 20px;
	margin-bottom: 0;
}

#sidebar .nav-list li {
	margin-top: 0;
	margin-bottom: 0;
}

#sidebar .nav-list li a {
	display: block;
	width: 100%;
	font-family: 'Montserrat';
	font-size: 16px;
	font-weight: 400!important;
	text-transform: uppercase;
	color: #222;
	padding-top: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #d3d4d6;
	padding-left: 10px;
	transition: all ease 0.5s;
	position: relative;
	padding-right: 20px;
}

#sidebar .nav-list li a i {
	position: absolute;
	top: 50%;
	right: 15px;
	font-size: 22px;
	transform: translate(0, -50%);
}

#sidebar .nav-list li a i:before {
	content: '';
	display: block;
	width: 13px;
	height: 13px;
	border-right: 2px solid #d3d4d6;
	border-bottom: 2px solid #d3d4d6;
	transform: rotate(-45deg);
}

#sidebar .nav-list li a:hover,
#sidebar .nav-list li.active a,
#sidebar .nav-list li.active a:hover {
	background-image: linear-gradient(to right, #edeef0 , #fff);
	transition: all ease 0.5s;
}

#sidebar .nav-list li.active a:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: -2px;
	background-color: #fff;
	width: 2px;
}

.related {
	border: none;
	position: relative;
}

div + .related:before {
	content: '';
	border: none;
	position: absolute;
	top: 0;
	left: 46px;
	right: 46px;
	height: 1px;
	background-color: #d3d4d6;
}

.contentWrapper a {
	color: #7B9E50;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
}

@media (min-width: 769px) {

	.row-fluid #main-content {
		width: 75%;
	}

	.row-fluid #sidebar {
		width: 25%;
	}
}


@media (max-width: 1199px) {

	.navbar .nav li a {
		min-width: 170px;
	}

}

@media (max-width: 991px) {

	#category-738,
	#category-736,
	#category-741,
	#category-739,
	#category-740,
	#category-737 {
		height: 240px;
	}

	.container-fluid {
		padding-right: 10px;
		padding-left: 10px;
	}

	.category-list .category {
		width: calc(50% - 20px);
	}

	footer {
		background-color: #000;
		padding-top: 30px;
		padding-bottom: 30px;
	}
}

@media (max-width: 768px) {
	#main-content {
		border-left: none;
	}

	.nav-collapse {
		width: 100%;
		border-top: #4e4f53 solid 1px;
		align-items: center;
		justify-content: center;
	}

	#mainNav .navbar-inner {
		padding-left: 0;
	}

	.navbar .brand {
		margin-left: 20px;
	}

	.navbar .nav li a {
		height: auto;
	}

	#searchBar:before {
		position: static;
		width: 100%;
		margin-bottom: 20px;
		display: block;
	}

	#sidebar form .search-query, form .search-query {
		max-width: 100%;
	}
}
@media (max-width: 767px) {

	.container-fluid {
		padding-right: 0px;
		padding-left: 0px;
	}

	.category-list .category {
		width: calc(50% - 20px);
	}

	.nav-collapse {
		display: block;
		width: 100%;
		background: url(https://cdn.ufpro.si/media/dsg/menu_bg.png) repeat-x left bottom;
	    height: 0px!important;
		-webkit-transition: all 0.2s ease-out;
		transition: all 0.2s ease-out;
	}

	#mainNav .navbar-inner {
		padding-left: 0;
	}

	.navbar .brand {
		margin-left: 15px;
	}

	.nav-collapse.in {
		height: auto !important;
		-webkit-transition: all 0.2s ease-out;
		transition: all 0.2s ease-out;
	}

	.navbar .nav {
		width: 100%;
		display: block;
	}

	.navbar .nav ul {
		display: block;
		width: 100%;
		float: none;		
	}

	.navbar .nav li {
		display: block;
		float: none;
		width: 100%;	
	}

	.navbar .btn-navbar {
		width: 50px;
		height: 50px;
		text-align: center;
	}
	
	.navbar .btn-navbar .icon-bar {
		margin-right: auto;
		margin-left: auto;
	}

	.navbar .nav li a {
		border-right: none;
		border-bottom: 1px solid #4e4f53;
	}	

	footer {
		background-color: #000;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	footer p,
	footer p a {
		margin-bottom: 10px;
	}

}

@media (max-width: 559px) {

	#docsSearch h1 {
		margin-bottom: 20px;
	}

	#searchBar {
		width: 100%;
	}

	.collection-category .category-list {
		margin-right: 0;
		margin-left: 0;
	}

	.category-list .category {
		width: 100%;
		float: none;
		margin-right: 0;
		margin-left: 0;
	}

}

@media (max-width: 480px) and (max-width: 768px) {
	#searchBar button {
		padding: 0;
	}
}

@media (min-height: 500px) {

	header {
		min-width: 75px;
	}

	header + section.container-fluid {
		min-height: calc(100vh - 75px - 98px);
	}
	footer {
		min-width: 98px;
	}
}