*,
:before,
:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}

body {
	color: gray;
	font: 18px / 1.4 Lato, Arial, Helvetica, sans-serif;
	padding-top: 72px
}

p {
	margin: 0 0 12px
}

a {
	text-decoration: none;
	color: #3e6edf;
	-webkit-transition: all 150ms ease;
	-o-transition: all 150ms ease;
	transition: all 150ms ease
}

a:hover {
	opacity: .9
}

img {
	max-width: 100%;
	height: auto
}

button,
input,
optgroup,
select,
textarea {
	font-family: Lato, Arial, Helvetica, sans-serif;
	line-height: 1.4
}

input,
select,
textarea {
	border-radius: 3px;
	border: 1px solid #ccc;
	padding: 6px 12px
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: #3e6edf
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #333
}

h1,
h2,
h3 {
	line-height: 1.2
}

h4,
h5,
h6 {
	line-height: 1.3
}

h1 {
	font-size: 54px
}

h2 {
	font-size: 46px
}

h3 {
	font-size: 32px
}

h4 {
	font-size: 24px
}

h5 {
	font-size: 20px
}

h6 {
	font-size: 18px
}

@media (max-width: 990px) {
	body {
		padding-top: 0
	}
}

.container,
.grid-container {
	max-width: 1170px;
	width: 100%;
	margin: 0 auto;
	padding: 0 20px
}

.container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex
}

.grid-container:after,
.cf:after {
	content: '';
	display: table;
	clear: both
}

.col-1-2,
.col-1-3,
.col-2-3 {
	float: left
}

.col-1-2 {
	width: 50%
}

.col-1-3 {
	width: 33.3333%
}

.col-2-3 {
	width: 66.6666%
}

.btn {
	display: inline-block;
	background: #3e6edf;
	color: #fff;
	padding: 12px 18px;
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	-webkit-transition: all 150ms ease;
	-o-transition: all 150ms ease;
	transition: all 150ms ease
}

.btn:hover {
	opacity: .9
}

.btn i {
	margin-left: 6px
}

.btn-sm {
	font-size: 14px;
	padding: 8px 12px
}

.btn-lg {
	font-size: 22px;
	padding: 16px 28px
}

.btn-gray {
	background: gray;
	color: #fff
}

.btn-yellow {
	background: #ffe522;
	color: #333
}

.section-header {
	text-align: center;
	max-width: 600px;
	margin: 0 auto;
	padding: 70px 20px
}

.section-header h2 {
	margin: 0;
	font-weight: 700;
	text-transform: uppercase
}

.section-header h2:after {
	content: '';
	display: block;
	width: 120px;
	height: 3px;
	background: #3e6edf;
	margin: 30px auto 27px
}

.section-header p {
	margin: 0
}

@media (max-width: 800px) {
	.section-header {
		padding-top: 35px;
		padding-bottom: 55px
	}
}

.page-header {
	background: #fff;
	-webkit-box-shadow: 0 0 24px rgba(0, 0, 0, 0.12);
	box-shadow: 0 0 24px rgba(0, 0, 0, 0.12);
	padding: 12px 0;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 999
}

.page-header > .container {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.menu-brand a {
	display: block
}

.menu-brand img {
	display: block;
	max-height: 60px
}

.menu-links ul {
	list-style: none;
	margin: 0;
	padding: 0
}

.menu-links li {
	display: inline-block;
	margin: 0 4px
}

.menu-links a {
	color: #8f8f8f;
	font-weight: 700;
	display: block;
	padding: 12px 20px
}

.menu-links a:hover,
.menu-links .active {
	color: #fff;
	background: #3e6edf;
	opacity: 1
}

@media (max-width: 990px) {
	.page-header {
		position: static
	}

	.page-header > .container {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column
	}

	.menu-brand {
		margin-top: 10px;
		margin-bottom: 15px
	}

	.menu-links ul {
		text-align: center
	}

	.menu-links li {
		margin-bottom: 4px
	}
}

.slider {
	overflow: hidden;
	margin-bottom: 20px
}

.slider .single-slide {
	height: 400px;
	padding: 0 20px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.single-slide h2 {
	color: #fff;
	margin: 0 0 30px;
	font-size: 64px;
	text-shadow: 2px 2px rgba(0, 0, 0, 0.4);
	text-align: center
}

.slide-reklama {
	background: #8e7e7e url('https://viccophones.com/img/reklama2.jpg') no-repeat center/cover;
}

.slide-1 {
	background: #8e7e7e url('https://viccophones.com/img/systems4.jpg') no-repeat center/cover;
}

.slide-2 {
	background: #ac1313 url('https://viccophones.com/img/cameras.jpg') no-repeat center/cover
}

.slide-3 {
	background: #3e6edf url('https://viccophones.com/img/alarms1.jpg') no-repeat center/cover
}

.slide-4 {
	background: #ffe522 url('https://viccophones.com/img/access control.jpg') no-repeat center/cover
}

.slide-5 {
	background: #11e63a url('https://viccophones.com/img/wiring1.jpg') no-repeat center/cover
}

.slide-6 {
	background: #ed9912 url('https://viccophones.com/img/it data.jpg') no-repeat center/cover
}

.slide-7 {
	background: #7e7c7c url('https://viccophones.com/img/audio.jpg') no-repeat center/cover
}

.slide-8 {
	background: #231bea url('https://viccophones.com/img/video.jpg') no-repeat center/cover
}

@media (max-width: 990px) {
	.slider .single-slide {
		height: 400px
	}

	.single-slide h2 {
		font-size: 50px
	}
}

@media (max-width: 480px) {
	.single-slide h2 {
		font-size: 44px
	}
}

.feature-boxes {
	margin-bottom: 40px
}

.feature-boxes > .container {
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between
}

.feature-box {
	margin-bottom: 60px;
	text-align: center;
	-ms-flex-preferred-size: 31%;
	flex-basis: 31%
}

.feature-box a {
	display: block
}

.feature-box a ul {
	color: #808080;
	padding: 0;
}

.feature-box li {
	text-align: left;
	margin-left: 54px;
}

.feature-box a:hover {
	opacity: 1
}

.feature-box a:hover i {
	background: #3e6edf;
	color: #fff;
	font-size: 76px
}

.feature-box i {
	-webkit-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
	font-size: 60px;
	line-height: 120px;
	color: #333;
	background: #ffe522;
	display: block;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	margin: 0 auto 25px
}

.feature-box h3 {
	margin: 0 0 10px;
	font-size: 24px
}

.feature-box p {
	margin: 0;
	color: gray
}

@media (max-width: 800px) {
	.feature-boxes {
		margin-bottom: 0
	}

	.feature-box {
		-ms-flex-preferred-size: 47%;
		flex-basis: 47%
	}
}

@media (max-width: 540px) {
	.feature-box {
		-ms-flex-preferred-size: 100%;
		flex-basis: 100%
	}
}

.newsletter {
	background: #3e6edf;
	padding: 35px 0;
	margin-bottom: 20px
}

.newsletter > .container {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between
}

.newsletter-text {
	-ms-flex-preferred-size: 66%;
	flex-basis: 66%
}

.newsletter-text h3,
.newsletter-text p {
	color: #fff
}

.newsletter-text h3 {
	margin: 0 0 15px;
	font-weight: 300
}

.newsletter-text p {
	margin: 0
}

.newsletter-cta {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-preferred-size: 30%;
	flex-basis: 30%;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

.remodal {
	max-width: 480px
}

.remodal form {
	max-width: 300px;
	margin: 0 auto
}

.remodal h3,
.remodal p {
	margin: 0 0 20px
}

.remodal input,
.remodal button {
	width: 100%
}

.remodal input {
	margin-bottom: 10px
}

.remodal button {
	text-transform: uppercase
}

@media (max-width: 620px) {
	.newsletter > .container {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		text-align: center
	}

	.newsletter-text,
	.newsletter-cta {
		-ms-flex-preferred-size: 100%;
		flex-basis: 100%
	}

	.newsletter-text {
		margin-bottom: 30px
	}
}

.gallery > .container {
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between
}

.gallery-item {
	margin-bottom: 40px;
	-ms-flex-preferred-size: 31%;
	flex-basis: 31%
}

.gallery-image-link {
	display: block;
	margin-bottom: 30px;
	overflow: hidden
}

.gallery-image-link img {
	width: 100%;
	display: block;
	-webkit-transition: -webkit-transform 150ms ease;
	transition: -webkit-transform 150ms ease;
	-o-transition: transform 150ms ease;
	transition: transform 150ms ease;
	transition: transform 150ms ease, -webkit-transform 150ms ease
}

.gallery-image-link:hover img {
	-webkit-transform: rotate(10deg) scale(1.3);
	-ms-transform: rotate(10deg) scale(1.3);
	transform: rotate(10deg) scale(1.3)
}

.gallery-item h3 {
	font-size: 24px;
	margin: 0 0 15px
}

.gallery-item h3 a {
	color: #333
}

.gallery-item p {
	margin: 0
}

@media (max-width: 800px) {
	.gallery-item {
		-ms-flex-preferred-size: 47%;
		flex-basis: 47%
	}
}

@media (max-width: 540px) {
	.gallery-item {
		-ms-flex-preferred-size: 100%;
		flex-basis: 100%
	}
}

.page-footer > .container {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between
}

.contact-form,
.contact-info {
	-ms-flex-preferred-size: 46%;
	flex-basis: 46%
}

.form-group {
	margin-bottom: 15px
}

.form-group-1-2 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between
}

.form-group-1-2 div {
	-ms-flex-preferred-size: 48%;
	flex-basis: 48%
}

.contact-form label {
	display: block;
	margin-bottom: 3px
}

.contact-form input,
.contact-form select,
.contact-form textarea {
	display: block;
	width: 100%
}

.contact-form textarea {
	min-height: 200px
}

.contact-info h3 {
	margin: 0 0 15px
}

.contact-about {
	margin-bottom: 40px
}

.contact-icons {
	margin: 0;
	padding: 0;
	list-style: none
}

.contact-icons li {
	display: block;
	margin-bottom: 15px
}

.contact-icons i {
	display: inline-block;
	width: 30px;
	height: 30px;
	background: #3e6edf;
	color: #fff;
	border-radius: 50%;
	text-align: center;
	line-height: 30px
}

.contact-icons span {
	margin-left: 6px
}

.contact-icons .span-2-lane {
	margin-left: 41px;
}

.copyrights {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	background: #ccc;
	color: #333;
	padding: 22px 0;
	margin-top: 80px
}

.copyrights p {
	margin: 0
}

@media (max-width: 800px) {
	.page-footer > .container {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column
	}

	.contact-form,
	.contact-info {
		-ms-flex-preferred-size: 100%;
		flex-basis: 100%
	}

	.contact-form {
		margin-bottom: 40px
	}
}

@media (max-width: 500px) {
	.form-group-1-2 {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column
	}

	.form-group-1-2 div {
		-ms-flex-preferred-size: 100%;
		flex-basis: 100%
	}

	.form-group-1-2 > div:first-child {
		margin-bottom: 15px
	}
}

.single-content {
	margin: 20px 0 70px
}

.single-content .container {
	max-width: 700px
}

.single-content article h2 {
	margin: 0 0 15px
}

.single-content article h3 {
	margin: 0 0 12px
}

.single-feature-icon {
	float: left;
	font-size: 160px;
	line-height: 170px;
	display: block;
	text-align: center;
	width: 210px;
	height: 170px;
	color: #3e6edf
}

.single-gallery-image {
	margin: 0 0 45px
}

.single-gallery article footer {
	margin-top: 50px
}

.gallery-author-links {
	margin-top: 20px
}

@media (max-width: 800px) {
	.single-content {
		margin-bottom: 40px
	}
}

@media (max-width: 700px) {

	.single-content article h2,
	.single-content article h3 {
		text-align: center
	}

	.single-feature-icon {
		float: none;
		margin: 0 auto
	}

	.gallery-author-links {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		margin-top: 40px;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center
	}

	.gallery-author-links a {
		margin-bottom: 10px
	}
}

@media (max-width: 500px) {
	.single-content article h2 {
		font-size: 38px
	}
}

.under-menu {
	padding: 70px 0 0;
}
