body {
	margin: 0px auto;
	padding: 0px;
	text-align: center;
	width: 100%;
	font-family: 'Product Sans Regular', "Helvetica Neue", Helvetica, Arial, Sans-Serif;
	background-color: #a9d0f5;
}


/* font face */
@font-face {
	font-family: 'Product Sans Regular';
	font-style: normal;
	font-weight: normal;
	src: local('Product Sans Regular'), url('productsans/ProductSans-Regular.woff') format('woff');
}


@font-face {
	font-family: 'Product Sans Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Product Sans Italic'), url('productsans/ProductSans-Italic.woff') format('woff');
}


@font-face {
	font-family: 'Product Sans Thin Regular';
	font-style: normal;
	font-weight: normal;
	src: local('Product Sans Thin Regular'), url('productsans/ProductSans-Thin.woff') format('woff');
}


@font-face {
	font-family: 'Product Sans Light Regular';
	font-style: normal;
	font-weight: normal;
	src: local('Product Sans Light Regular'), url('productsans/ProductSans-Light.woff') format('woff');
}


@font-face {
	font-family: 'Product Sans Medium Regular';
	font-style: normal;
	font-weight: normal;
	src: local('Product Sans Medium Regular'), url('productsans/ProductSans-Medium.woff') format('woff');
}


@font-face {
	font-family: 'Product Sans Black Regular';
	font-style: normal;
	font-weight: normal;
	src: local('Product Sans Black Regular'), url('productsans/ProductSans-Black.woff') format('woff');
}


@font-face {
	font-family: 'Product Sans Thin Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Product Sans Thin Italic'), url('productsans/ProductSans-ThinItalic.woff') format('woff');
}


@font-face {
	font-family: 'Product Sans Light Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Product Sans Light Italic'), url('productsans/ProductSans-LightItalic.woff') format('woff');
}


@font-face {
	font-family: 'Product Sans Medium Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Product Sans Medium Italic'), url('productsans/ProductSans-MediumItalic.woff') format('woff');
}


@font-face {
	font-family: 'Product Sans Bold';
	font-style: normal;
	font-weight: normal;
	src: local('Product Sans Bold'), url('productsans/ProductSans-Bold.woff') format('woff');
}


@font-face {
	font-family: 'Product Sans Bold Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Product Sans Bold Italic'), url('productsans/ProductSans-BoldItalic.woff') format('woff');
}


@font-face {
	font-family: 'Product Sans Black Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Product Sans Black Italic'), url('productsans/ProductSans-BlackItalic.woff') format('woff');
}

@font-face {
	font-family: 'SF Compact Display Thin';
	font-style: normal;
	font-weight: normal;
	src: local('SF Compact Display Thin'), url('sfcompact/sf-compact-display-thin-58646eb43a785.woff') format('woff');
}


@font-face {
	font-family: 'SF Compact Display Medium';
	font-style: normal;
	font-weight: normal;
	src: local('SF Compact Display Medium'), url('sfcompact/sf-compact-display-medium-5864711817c30.woff') format('woff');
}

/* /font face */
.mobile {
	display:none !important;
}
		.btn-hero.white {
			margin-left: 10px;
		}
/* .topbar */
.topbar h2 {
	font-size: 18px;
}

.topbar #phone i,
.topbar #email i {
	margin-right: 10px;
}

header #phone i {
	transform: rotate(90deg);
}

.topbar #instagram a,
.topbar #facebook a,
header #phone a,
.topbar #email a {
	font-size: 18px;

}
header #phone {
	list-style-type:none;
}
.topbar #instagram a,
.topbar #facebook a,
header #phone i {
	margin-right: 10px;
}

/* .topbar {
	background-color: #1a191d;
	text-align: right;
	box-shadow: 0 1px 6px 3px #ccc;
	font-family: 'SF Compact Display Thin';
} */

.topbar h2,
.topbar ul,
.topbar li,
header #phone a,
span {
	display: inline;
	color: #fff !important;
	font-size: 18px !important;
	line-height: 50px;
	text-decoration:none;
}
header #phone a:hover,
header #phone span:hover {
	color:#CD0001 !important;
	transition:0.3s;
}

/* /.topbar */

/* misc */

section {
	padding-top: 80px;
	padding-bottom: 80px;
}

/* /misc */


/* nav */
header {
	width: 100%;
	position: fixed !important;
	width: 100%;
	background-color: rgba(0, 0, 0, .5) !important;
}
nav.navbar {
	background-color:transparent !important;
}

.navbar-nav {
	margin-left: 40px;
}

.nav-link {
	color: #fff !important;
	font-family: 'Product Sans Bold';
	letter-spacing: 1.5px;
	font-size: 17px;
	padding-right: 1rem !important;
	padding-left: 1rem !important;
	line-height: 60px;
}

.nav-item {
	border-top: 2px solid transparent;
}
.nav-item:hover {
	border-top: 2px solid #fff;
	transition:0.1s;
}
.nav-item.active {
	border-top: 2px solid #fff;
}
.navbar-dark .navbar-toggler {
	color:#fff !important;
	border-color:#fff !important;
}
.navbar-brand img{
	width:200px;
}

/* /nav */
/* hero */

#hero {
	height: 99vh;
	background-image: url('../img/hero-bg.jpg');
	color: #fff;
	flex-direction: column;
}

#hero h2 {
	font-family: 'Product Sans Bold';
	text-transform: uppercase;
	font-size: 60px;
	line-height: 75px;
}

#hero p {
	font-family: 'SF Compact Display Medium';
	font-size: 17px;
	line-height: 26px;
	text-align: center;
}

.btn-hero {
	font-family: 'Product Sans Bold';
	text-transform: uppercase;
	text-align: center;
	font-size: 14px;
	line-height: 45px;
	background-color: #CD0001;
	color: #fff;
	padding-left: 40px;
	padding-right: 40px;
	border: 1px solid #CD0001;
	letter-spacing: 2px;
}

.btn-hero:hover {
	background-color: #fff;
	color: #cd0001;
	transition: 0.3s;
}

.btn-hero.white {
	background-color: #fff;
	border-color: #fff;
	color: #cd0001;
}

.btn-hero.white:hover {
	background-color: #cd0001;
	border-color: #cd0001;
	color: #fff;
	transition: 0.3s;
}

/* /hero */

/* overlay section */
#usluge {
	margin-top: -10%;
	box-shadow: 0px 2px 76px 0px rgb(0 0 0 / 15%);
}

#usluge .col-lg-3 {
	background-color: #fff;
	border-style: solid;
	border-width: 0px 1px 0px 0px;
	border-color: #DEDEDE;
	padding: 45px 30px 28px;
	text-align: center;
}

#usluge .col-lg-3:hover {
	transition: 0.3s;
	box-shadow: 0 2px 76px 0px rgb(0 0 0 / 45%);
}

#usluge h3 {
	font-size: 20px;
	padding-top:10px;
	padding-bottom:10px;
}
#usluge .section-paragraph {
	padding-right:0px;
}

/* /overlay section */

/* o nama */
.section-subheading {
	color: #CD0001;
	letter-spacing: .05em;
	font-size: 20px;
	margin-bottom: 11px;
	text-transform: capitalize;
	font-weight: 500;
	font-family: 'Product Sans Regular';
	text-transform: uppercase;
}

.section-heading {
	letter-spacing: .05em;
	font-size: 40px;
	margin-bottom: 11px;
	text-transform: capitalize;
	font-weight: 500;
	font-family: 'Product Sans Bold';
}

.section-paragraph {
	font-family: 'SF Compact Display Thin';
	font-size: 16px;
	line-height: 24px;
	color: #666666;
	padding-right: 60px;
}

#o-nama .col-lg-7 {
	flex-direction: column;
	padding-left: 80px;
}

#ringer .col-md-7 {
	flex-direction: column;
	padding-right: 80px;
}

hr {
	color: #666666;
}

/* /o nama*/

/* parallax */

#parallax {
	background-image: url("../img/parallax.jpg");
	max-height: 500px;
	padding: 0px;
	margin: 0px;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

#parallax div {
	min-height: 500px;
	width: 100%;
	background: rgba(0, 0, 0, 0.5);
}

/* /parallax */


/* dodatne usluge */
#dodatne-usluge {
	background-color: #f1f1f1;
}

#dodatne-usluge h4 {
	font-family: 'Product Sans Regular';
}
#dodatne-usluge .col-md-5 {
	display: flex;
	justify-content: center;
	align-self: center;
	flex-direction: column;
}
#dodatne-usluge .col-md-7 {
	display: flex;
	justify-content: center;
	align-self: center;
	flex-direction: column;
	padding: 0px 60px 0px 60px;
}
#dodatne-usluge .row {
	margin-top:4%;
}

/* /dodatne usluge */

/* ringer */

#ringer .col-md-4 img {
	padding-bottom: 5%;
	width: 80%;
}


/* /ringer */

/* kontakt */
#kontakt {
	background-color: #1A191D;
}

#kontakt .icon {
	display: flex;
	flex-direction: row;
	align-items: center;
	align-self: center;
	margin-bottom: 20px;
}

#kontakt .icon img {
	width: 70px;
	margin-right: 20px;
}

#kontakt .icon p {
	color: #fff;
	font-family: 'SF Compact Display Medium';
	margin-bottom: 0px;
	font-size: 22px;
}
#kontakt a {
	text-decoration:none;
	color:#fff;
}
#kontakt a:hover {
	color:#CD0001;
	transition:0.2s;
}

/* /kontakt */

/* footer */
footer {
	position: relative;
	padding-top: 20px;
	padding-bottom: 20px;
	font-weight: 300;
	font-size: 15px;
	background-color: #111013;
}
footer a {
	color:#CD0001;
}
/* /footer */

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1450px) {
	#hero h2 {
			font-size: 45px;
			line-height: 64px;
	}
}

@media only screen and (max-width: 1080px) {
	#hero h2 {
				font-size: 34px;
			line-height: 55px;
	}

	#usluge .col-lg-3 {
		border-width: 1px 1px 1px 1px;
	}
	#o-nama .pc {
		display:none !important;
	}
	header .col-md-2 {
		display:none !important;
	}
	header {
		padding-right:35px;
		padding-left:20px;
	}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 992px) {
	.section-paragraph {
		padding-right:0px;
	}
	#dodatne-usluge .col-md-7 {
			padding: 20px 10px 20px 10px;
	}
	#dodatne-usluge .col-md-7 hr {
		display:none;
	}
	#o-nama .col-lg-7 {
		padding-right: calc(var(--bs-gutter-x) * .5) !important;
		padding-left: calc(var(--bs-gutter-x) * .5) !important;
	}
	#kontakt .icon img {
		width:45px;
	}
	#kontakt .icon p {
		font-size:18px;
	}
	#kontakt .col-md-5 {
	}
	#hero h2 {
		font-size: 30px;
		line-height: 45px;
		text-align:center;
	}
	.navbar-brand img {
		width: 140px;
	}
	.navbar-collapse{
		background-color:#000 !important;
	}
	.nav-item {
		border-top: 0px solid transparent;
	}
	
	.nav-item:hover {
		border-top: 0px solid #fff;
		color: #CD0001 !important;
	}
	.nav-item.active .nav-link {
			color: #CD0001 !important;
	}
	.nav-item.active{
		border-top: 0px solid #fff;

	}
	
}
.navbar-toggler:focus {
	text-decoration: none;
	outline: 0;
	box-shadow: 0 0 0 0 !important;
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 768px) {
	.pc {
			display: none !important;
		}
	.mobile {
		display:block !important;
	}
	#ringer .col-md-4 img {
		margin:auto;
		margin-top:20px;
		margin-bottom:10px;
	}
	#kontakt .col-md-5 {
		margin-top:45px;
	}
	footer .col-6 span{
		font-size: 14px !important;
	}
	.rights {
		display:none;
	}
	#hero h2 {
		line-height:35px;
	}
	#hero p {
		font-size:14px;
		line-height:17px;
	}
	#hero .btn-hero {
		line-height:35px;
	}
	#hero {
		background-position:center center;
	}
    #parallax {
        background-attachment:unset !important;
    }
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	footer .col-6 span {
			font-size: 13px !important;
		}
				#hero .d-flex {
					justify-content: center;
				}
	#hero .btn-hero {
		margin-bottom:20px;
	}
	.btn-hero.white {
		margin-left:0px !important;
	}
}