@import "https://fonts.googleapis.com/css?family=Raleway:400,500,600|Teko:400,500,700";

body {
	margin: 0;
	background-color: #E3FEC3
}

#vidawrap {
	width: 100%;
	float: left;
	padding: 0;
	margin: 15px 0;
	font-family: 'Raleway', sans-serif;
	color: #535353
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: 'Teko', sans-serif
}

h1 {
	font-size: 32px
}

img {
	max-width: 100%
}

li {
	list-style: none
}

#white-shadow {
	background-color: #fff;
	width: 100%;
	float: left;
	box-shadow: rgba(0, 0, 0, 0.247059) 0 0 8px
}

.text-center {
	text-align: center
}

.text-center p {
	text-align: justify;
	margin-bottom: 0;
	padding: 0 25px;
	font-size: 14px
}

.fw {
	width: 100%;
	float: left
}

.title-400 {
	font-weight: 400
}

.title-500 {
	font-weight: 500
}

.title-700 {
	font-weight: 700
}

/* ------------------------  Before changes ----------------------
.icon-1 {
	width: 71px;
	height: 71px
}
*/

.icon-1 {
    width: 71px;
    height: 53px;
    margin-left: 34%;
}

/* ------------------------  Before changes ----------------------
.icon-2 {
	width: 41px;
	height: 41px;
	margin-top: 15px
}
*/
.icon-2 {
    width: 41px;
    height: 36px;
    margin-top: 15px;
    margin-left: 38%;
}

/* ------------------------  Before changes ----------------------
.icon-3 {
	width: 53px;
	height: 53px;
	margin-top: 10px
}
*/
.icon-3 {
    width: 53px;
    height: 43px;
    margin-top: 10px;
    margin-left: 34%;
}

/* ------------------------  Before changes ----------------------
.icon-4 {
	width: 38px;
	height: 38px;
	margin-top: 15px
}
*/
.icon-4 {
    width: 38px;
    height: 38px;
    margin-top: 15px;
    margin-left: 39%;
}


.icon-5 {
	width: 35px;
	height: 35px;
	margin: 8px auto
}

.icon-6 {
	width: 53px;
	height: 56px;
	margin: 0 auto
}

.icon-7 {
	width: 43px;
	height: 43px;
	margin: 4px auto
}

.icon-8 {
	width: 38px;
	height: 38px;
	margin: 6px auto
}

/* ---------- New added - it was not before changes ----------- */

.mobile-box {
    max-width: 220px;
    margin: 0 auto;
}
/*  ---------------------------------------------------------*/

#vidacontent {
	max-width: 1024px;
	margin: 0 auto
}

header {
	background-color: #8cb916;
	width: 100%;
	float: left;
	padding: 10px 0 15px
}

/* ----------- Before changes ---------------------
header h3 {
	font-size: 32px;
	color: #fff;
	margin-top: 14px;
	float: left
}
*/

header h3 {
    font-size: 32px;
    color: #fff;
    margin-top: 14px;
    float: left;
    width: 100%;
    text-align: center;
}

.column-vida-6 {
	width: 50%;
	float: left
}

.column-vida-4 {
	width: 33.33333333%;
	float: left
}

.column-vida-3 {
	width: 22%;
	float: left;
	padding: 0 15px
}

.column-vida-2 {
	width: 50%;
	float: left
}

/* Responsive table layouts */
.row {
	display: flex;
	flex-wrap: wrap;
	padding: 0 4px;
}

/* Columns classes for 2 3 and 4 */
.column-2 {
	flex: 49%;
	max-width: 49%;
	padding: 0 4px;
}

.column-3 {
	flex: 32%;
	max-width: 32%;
	padding: 0 4px;
}

.column-4 {
	flex: 24%;
	max-width: 24%;
	padding: 0 4px;
}

.column-2 img {
	margin-top: 8px;
	vertical-align: middle;
}

.column-3 img {
	/* margin-top: 8px; */
	
	vertical-align: middle;
}

.column-4 img {
	margin-top: 8px;
	vertical-align: middle;
}


.icon {
	float: left;
	margin-right: 10px
}

#vida-navbar {
	width: 100%;
	float: left
}

#vida-navbar>ul {
	margin: 0;
	padding: 0;
	width: 100%;
	float: left;
	height: 41px;
}

#vida-navbar>ul>li {
	display: inline-block;
	text-align: center;
	width: 20%;
	float: left;
	padding: 3px 0
}

#vida-navbar>ul>li>a {
    display: inline-block;
    width: 100%;
	color: #fff;
	font-size: 24px;
	text-decoration: none;
	font-family: 'Teko', sans-serif
}

.vida-gradient {
	background: #b9d572;
	background: -webkit-linear-gradient(#b9d572, #8cb916);
	background: -o-linear-gradient(#b9d572, #8cb916);
	background: -moz-linear-gradient(#b9d572, #8cb916);
	background: linear-gradient(#b9d572, #8cb916)
}

#vida-header {
	padding: 20px 0;
	position: relative
}

.vida-titl-big {
	width: 96%;
	float: left;
	padding: 0 20px
}

.vida-titl-big h1 {
	font-size: 32px;
	line-height: 30px;
}

.vida-titl-big p {
	font-size: 16px;
	max-width: 70%;
}

.vida-logo {
	float: right;
	padding-right: 15px;
	position: absolute;
	right: 0;
	bottom: 40px;
	display: flex;
	align-items: center;
}

.vida-logo img {
	max-width: 250px;
}

.vida-title-1 {
	background-color: #8cb916;
	text-align: center
}

.vida-title-1 h4 {
	color: #fff;
	font-size: 32px;
	margin: 3px 0;
	padding: 0 20px
}

#vida-product {
	padding: 35px 0;
	position: relative
}

.show-big-image {
	max-width: 550px;
	margin: 30px auto
}

#vida-thumbnail>ul {
	padding: 0;
	text-align: center;
	margin: 0
}

#vida-thumbnail>ul>li {
	display: inline-block;
	width: 95px;
	border: 1px solid #e6e6e6;
	padding: 5px
}

#product-discription {
	background-color: #8cb916;
	padding: 20px 0
}

.vida-item-detail {
	padding: 0 20px;
	color: #fff
}

.vida-item-detail p {
	font-size: 16px;
	margin-bottom: 0;
	margin-top: 10px
}

.column-vida-4.text-center {
	padding: 15px 0;
	background-color: #8cb916;
	color: #FFF;
	height: 311px
}

.column-vida-2.text-center {
	padding: 15px 0;
	background-color: #8cb916;
	color: #FFF;
	height: 311px
}

.green-bg {
	background-color: #8cb916;
	color: #FFF
}

#item-specs {
	padding: 20px 0
}

#item-specs>h1.title-400 {
	padding-left: 20px;
	margin-bottom: 20px
}

.specs-table>table {
	padding: 0 20px
}

.specs-table>table>thead {
	background-color: #fff;
	color: #8cb916;
	line-height: 36px
}

.specs-table>table>thead>tr>th {
	text-align: left;
	padding: 0 15px
}

.specs-table>table>tbody>tr {
	color: #fff;
	background-color: #6e9800;
	font-size: 14px
}

.specs-table>table>tbody>tr>td {
	padding: 10px 20px
}

.specs-table>table>tbody>tr>td>span {
	font-weight: 700
}

.specs-table-np>table {
	width: 100%;
	padding: 0 0px
}

.specs-table-np>table>thead {
	background-color: #fff;
	color: #8cb916;
	line-height: 36px
}

.specs-table-np>table>thead>tr>th {
    text-align: left;
	padding: 0 15px 
}

/* CHANGES - 20191008 */
.specs-table th {
    text-align: right;
    padding-right: 25px;
}
/* ------------------------*/

.specs-table-np>table>tbody>tr {
	color: #fff;
	background-color: #6e9800;
	font-size: 14px
}

.specs-table-np>table>tbody>tr>td {
	padding: 10px 20px
}

.specs-table-np>table>tbody>tr>td>span {
	font-weight: 700
}

.vida-title-1.text-left {
	text-align: left
}

.vida-store-info {
	border-top: 35px solid #8cb916;
	padding: 30px 0
}

.icon-box {
	width: 50px;
	height: 50px;
	background-color: #8cb916;
	text-align: center;
	border-radius: 10px;
	float: left;
	margin-right: 15px;
	margin-top: 7px
}

.vida-text h2 {
	font-size: 48px;
	color: #696969
}

.vida-four-item {
	padding: 0 75px
}

.vida-four-item p {
	padding-right: 25px;
	font-size: 14px;
	line-height: normal
}

.vid-con {
	border-top: 10px solid #8cb916;
	margin: 0 auto;
	width: 875px;
	position: relative
}

.vida-footer ul {
	float: left;
	padding: 0;
	margin: 0
}

.vida-footer ul>li {
	display: inline-block
}

.vida-footer ul>li>a {
	color: #535353;
	font-size: 19px;
	font-family: 'Teko', sans-serif;
	text-decoration: none;
	float: left;
	padding: 25px 15px
}

.footer-logo {
	width: 170px;
	position: absolute;
	right: 0
}

input {
	display: none
}

#slide1:checked~#slides .inner {
	margin-left: 0
}

#slide2:checked~#slides .inner {
	margin-left: -100%
}

#slide3:checked~#slides .inner {
	margin-left: -200%
}

#slide4:checked~#slides .inner {
	margin-left: -300%
}

#slide5:checked~#slides .inner {
	margin-left: -400%
}

#slide6:checked~#slides .inner {
	margin-left: -500%
}

#slide7:checked~#slides .inner {
	margin-left: -600%
}

#slide8:checked~#slides .inner {
	margin-left: -700%
}

#overflow {
	width: 100%;
	overflow: hidden
}

article img {
	width: 100%
}

#slides .inner {
	width: 800%;
	line-height: 0
}

#slides article {
	width: 12.5%;
	float: left
}

#controls {
	width: 100%;
	height: 50px;
	position: absolute;
	top: 45%;
	left: 0
}

#controls label {
	display: none;
	width: 50px;
	height: 50px;
	opacity: .3;
	cursor: pointer
}

#active {
	margin: 40px 0 0;
	text-align: center;
	width: 100%;
	float: left
}

/* added 2020 07 22 */
#active img {
	opacity: 80%;
	transition: 0.3s;
}

#active img:hover {
	opacity: 100%;
}
/* ************ */

#active label {
	display: inline-block;
	width: 85px;
	height: 85px;
	background: none;
	border: 1px solid #d6d6d6;
	padding: 5px;
	cursor: pointer;
	margin: 2px
}

#active label:hover {
	background: none;
	border-color: #8cb916 !important
}

#controls label:hover {
	opacity: .8
}

		#slide1:checked~#controls label:nth-child(2),
		#slide2:checked~#controls label:nth-child(3),
		#slide3:checked~#controls label:nth-child(4),
		#slide4:checked~#controls label:nth-child(5),
		#slide5:checked~#controls label:nth-child(6),
		#slide6:checked~#controls label:nth-child(7),
		#slide7:checked~#controls label:nth-child(8),
		#slide8:checked~#controls label:nth-child(1) {
			display: block;
			float: right;
			margin-right: 40px;
			padding: 0;
			background: url(https://www.vida-it.com/imgs/next.png) no-repeat;
			width: 60px;
			height: 60px;

		}

		#slide1:checked~#controls label:nth-child(8),
		#slide2:checked~#controls label:nth-child(1),
		#slide3:checked~#controls label:nth-child(2),
		#slide4:checked~#controls label:nth-child(3),
		#slide5:checked~#controls label:nth-child(4),
		#slide6:checked~#controls label:nth-child(5),
		#slide7:checked~#controls label:nth-child(6),
		#slide8:checked~#controls label:nth-child(7) {
			display: block;
			float: left;
			margin-left: 40px;
			padding: 0;
			background: url(https://www.vida-it.com/imgs/prev.png) no-repeat;
			width: 60px;
			height: 60px;
		}

#slide1:checked~#active label:nth-child(1),
#slide2:checked~#active label:nth-child(2),
#slide3:checked~#active label:nth-child(3),
#slide4:checked~#active label:nth-child(4),
#slide5:checked~#active label:nth-child(5),
#slide6:checked~#active label:nth-child(6),
#slide7:checked~#active label:nth-child(7),
#slide8:checked~#active label:nth-child(8) {
	background: #bebebe;
	border-color: #8cb916 !important
}

.info {
	line-height: 20px;
	margin: 0 0 -150%;
	position: absolute;
	font-style: italic;
	padding: 30px;
	opacity: 0;
	color: #000;
	text-align: left
}

.info h3 {
	color: #333;
	margin: 0 0 5px;
	font-weight: 400;
	font-size: 22px;
	font-style: normal
}

#slides {
	max-width: 550px;
	margin: 0 auto;
	height: 550px
}

#slides .inner {
	-webkit-transform: translateZ(0);
	-webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
	-moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
	-ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
	-o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
	transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
	-webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
	-moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
	-ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
	-o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
	transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000)
}

#slider {
	-webkit-transform: translateZ(0);
	-webkit-transition: all .5s ease-out;
	-moz-transition: all .5s ease-out;
	-o-transition: all .5s ease-out;
	transition: all .5s ease-out;
	position: relative
}

#controls label {
	-webkit-transform: translateZ(0);
	-webkit-transition: opacity .2s ease-out;
	-moz-transition: opacity .2s ease-out;
	-o-transition: opacity .2s ease-out;
	transition: opacity .2s ease-out
}

#slide1:checked~#slides article:nth-child(1) .info,
#slide2:checked~#slides article:nth-child(2) .info,
#slide3:checked~#slides article:nth-child(3) .info,
#slide4:checked~#slides article:nth-child(4) .info,
#slide5:checked~#slides article:nth-child(5) .info {
	opacity: 1;
	-webkit-transition: all 1s ease-out .6s;
	-moz-transition: all 1s ease-out .6s;
	-o-transition: all 1s ease-out .6s;
	transition: all 1s ease-out .6s
}

.info,
#controls,
#slides,
#active,
#active label,
.info h3,
.desktop,
.tablet,
.mobile {
	-webkit-transform: translateZ(0);
	-webkit-transition: all .5s ease-out;
	-moz-transition: all .5s ease-out;
	-o-transition: all .5s ease-out;
	transition: all .5s ease-out
}

#desktop:checked~#slider {
	max-width: 960px
}

#tablet:checked~#slider {
	max-width: 850px
}

#mobile:checked~#slider {
	max-width: 450px
}

#desktop:checked~#slider .desktop,
#tablet:checked~#slider .tablet,
#mobile:checked~#slider .mobile {
	color: #777;
	opacity: 1
}

.desktop,
.tablet,
.mobile {
	display: inline-block;
	width: 60px;
	height: 60px;
	padding-top: 50px;
	opacity: .35;
	font-size: 12px
}

.desktop:hover,
.tablet:hover,
.mobile:hover {
	opacity: .2
}

.desktop {
	background: url(desktop.png) no-repeat
}

.tablet {
	background: url(tablet.png) no-repeat
}

.mobile {
	background: url(mobile.png) no-repeat
}

#tablet:checked~#slider #controls {
	margin: -25% 0 0 12%;
	width: 76%;
	height: 50px
}

#tablet:checked~#slider #controls label {
	-moz-transform: scale(0.8);
	-webkit-transform: scale(0.8);
	-o-transform: scale(0.8);
	-ms-transform: scale(0.8);
	transform: scale(0.8)
}

#tablet:checked~#slider #slides,
#mobile:checked~#slider #slides {
	padding: 1% 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0
}

#tablet:checked~#slider #active {
	margin: 22% 0 0
}

@media only screen and (max-width: 850px) and (min-width: 450px) {
	#slider #controls {
		margin: 0;
		width: 100%;
		height: 50px
	}

	#slider #controls label {
		-moz-transform: scale(0.8);
		-webkit-transform: scale(0.8);
		-o-transform: scale(0.8);
		-ms-transform: scale(0.8);
		transform: scale(0.8)
	}

	#slider #slides {
		padding: 1% 0;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0
	}

	#slider #active {
		margin: 20px 0 0
	}

	#active label {
		margin-bottom: 5px
	}
}

#mobile:checked~#slider #controls {
	margin: -28% 0 0 24%;
	width: 50%;
	height: 50px
}

#mobile:checked~#slider #active {
	margin: 23% 0 0
}

#mobile:checked~#slider #slides .info {
	opacity: 0 !important
}

#mobile:checked~#slider #controls label {
	-moz-transform: scale(0.6);
	-webkit-transform: scale(0.6);
	-o-transform: scale(0.6);
	-ms-transform: scale(0.6);
	transform: scale(0.6)
}

@media only screen and (max-width: 450px) {
	#slider #controls {
		margin: 0;
		width: 100%;
		height: 50px
	}

	#slider #active {
		margin: 20px 0 0
	}

	#slider #slides {
		padding: 1% 0;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0
	}

	#slider #slides .info {
		opacity: 0 !important
	}

	#slider #controls label {
		-moz-transform: scale(0.6);
		-webkit-transform: scale(0.6);
		-o-transform: scale(0.6);
		-ms-transform: scale(0.6);
		transform: scale(0.6)
	}
}

@media only screen and (max-width: 1050px) {
	#vidacontent {
		max-width: 100%;
		overflow-x: hidden
	}

	.column-vida-3 {
		width: 21%
	}

	header h3 {
		font-size: 30px
	}

	.column-vida-4.text-center {
		height: 294px
	}

    .column-vida-4.text-center-pc {
        height: 294px
    }


	.column-vida-2.text-center {
		height: 294px
	}

	/*Reponsive table */
	.column-2 {
		flex: 49%;
		max-width: 49%;
	}

	.column-3 {
		flex: 32%;
		max-width: 32%;
	}

	.column-4 {
		flex: 24%;
		max-width: 24%;
	}

}

@media only screen and (max-width: 992px) {
	header h3 {
		width: 100%;
		float: left;
		text-align: center;
	}

	.icon-1 {
		height: 53px;
		margin-left: 32%;
	}

	.icon-2 {
		height: 38px;
		margin-left: 41%;
	}

	.icon-3 {
		height: 44px;
		margin-left: 36%;
	}

	.icon-4 {
		height: 38px;
		margin-left: 40%;
	}

	.column-vida-4.text-center {
		height: 294px
	}

	.column-vida-2.text-center {
		height: 294px
	}

	/*Reponsive table */
	.column-2 {
		flex: 48%;
		max-width: 48%;
	}

	.column-3 {
		flex: 32%;
		max-width: 32%;
	}

	.column-4 {
		flex: 23%;
		max-width: 23%;
	}

	#vida-thumbnail>ul>li {
		margin-bottom: 5px
	}

	.vida-logo img {
		max-width: 275px
	}

	header {
		padding: 0
	}

	.vida-grid>.column-vida-4 {
		width: 100%;
		border-bottom: 1px solid #8cb916;
		text-align: center
	}

	.vida-grid>.column-vida-4 img {
		max-width: 100%
	}

	.vida-grid>.column-vida-2 {
		width: 100%;
		border-bottom: 1px solid #8cb916;
		text-align: center
	}

	.vida-grid>.column-vida-2 img {
		max-width: 60%
	}

	.vid-con {
		text-align: center;
		width: 100%
	}

	.footer-logo {
		width: 100%;
		position: relative;
		right: inherit;
		text-align: center;
		float: left
	}

	.footer-logo>img {
		max-width: 170px
	}

	.vida-footer ul {
		width: 100%
	}

	.vida-footer ul>li>a {
		padding: 25px 15px 10px
	}

	#active label {
		margin-bottom: 5px
	}

	.vida-titl-big p {
		max-width: 60%;
	}
}

@media only screen and (max-width: 810px) {
	.icon-1 {
		height: 53px;
		margin-left: 26%;
	}

	.icon-2 {
		height: 38px;
		margin-left: 37%;
	}

	.icon-3 {
		height: 44px;
		margin-left: 30%;
	}

	.icon-4 {
		height: 38px;
		margin-left: 35%;
	}

	/*Reponsive table */
	.column-2 {
		flex: 48%;
		max-width: 48%;
	}

	.column-3 {
		flex: 32%;
		max-width: 32%;
	}

	.column-4 {
		flex: 48%;
		max-width: 48%;
	}
	
	.vida-grid>.column-vida-4 img {
		max-width: 100%
	}
	
	
}

@media only screen and (max-width: 767px) {
	#slider #slides {
		max-width: 60%;
		height: auto
	}
/*   ----------------- added new --------------------------------*/                    
	.mobile-box h3.title-400 {
		height: 100px;
	}
/* ---------------------------------------------------------------*/	
	header .column-vida-3 {
		width: 44%
	}

	#vida-navbar>ul>li>a {
		font-size: 18px
	}

	.vida-logo {
		width: 100%;
		text-align: center;
		position: inherit;
		bottom: auto;
	}

	.vida-logo img {
		max-width: 200px
	}

	.vida-titl-big {
		width: 95%;
		padding: 0px 15px;
		text-align: center
	}

	#vida-header {
		padding: 20px 0 5px
	}

	.vida-features>.column-vida-6 {
		width: 100%;
		text-align: center;
		border-bottom: 1px solid #8cb916
	}

	.vida-four-item {
		padding: 0 15px
	}

	.vida-four-item>.column-vida-6 {
		width: 100%;
		border-bottom: 1px solid #8cb916;
		padding: 10px 0
	}

	.mobile-box {
		max-width: 160px;
		margin: 0 auto;
	}

	.vida-titl-big p {
		max-width: 100%;
	}

	/*Reponsive table */
	.column-2 {
		flex: 100%;
		max-width: 100%;
	}

	.column-3 {
		flex: 100%;
		max-width: 100%;
	}

	.column-4 {
		flex: 48%;
		max-width: 48%;
	}
	
	.vida-grid>.column-vida-4 img {
		max-width: 100%
	}
	
	
}

@media only screen and (max-width: 568px) {
	/************ 01-04-2020 **********/
	#vida-navbar>ul {
				height: 99px;
	}	
	/*****************************/
	
	#vida-navbar>ul>li {
		width: 50%
	}

	header .column-vida-3 {
		width: 50%;
		padding: 0;
	}

	/************ 01-04-2020 **********/	
	header .column-vida-3 {
				width: 25%;
	}
	/*****************************/

	header {
		padding: 0 0 15px
	}

	.vida-footer ul>li>a {
		padding: 10px 15px 0
	}

	/*Reponsive table */
	.column-2 {
		flex: 100%;
		max-width: 100%;
	}

	.column-3 {
		flex: 100%;
		max-width: 100%;
	}

	.column-4 {
		flex: 100%;
		max-width: 100%;
	}
	
	.vida-grid>.column-vida-4 img {
		max-width: 100%
	}

	
}

@media only screen and (max-width: 480px) {
	.vida-grid>.column-vida-4 img {
		max-width: 100%
	}

	.column-vida-4.text-center {
		height: auto
	}

	.vida-grid>.column-vida-2 img {
		max-width: 100%
	}

	.column-vida-2.text-center {
		height: auto
	}

	#slider #slides {
		max-width: 90%;
		margin-top: 30px
	}

	#slider #controls {
		top: -55px
	}
}

@media only screen and (max-width: 374px) {
	header .column-vida-3 {
		width: 100%;
		padding: 0;
	}
	
/*   ----------------- added new --------------------------------*/                    
	.mobile-box h3.title-400 {
		height: auto;
	}
/* ---------------------------------------------------------------*/	
	
}

@media only screen and (max-width: 350px) {
	.specs-table {
		overflow-y: hidden;
		overflow-x: scroll
	}
}




/* Responsive table 30/70 */

.reset-70-30 {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	color: white;

}

.column-30-70 {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	flex-wrap: wrap;
	margin: 0 0 20px 0;

	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	--widthBorderWin: 4vw;

}

.column-30 {

	flex-grow: 3;
	padding: 10px;
	margin: 3px;
	background-color: #8cb916;
	max-width: 30%;
	text-align: center;
	overflow: hidden;
}



.column-70 {
	flex-grow: 7;
	padding: 10px;
	margin: 3px;
	background-color: #8cb916;

	max-width: 70%;
	text-align: center;

}

/*  Gallery slide ( vertical move ) used in left side in 30/70 Responive Table  */

.window-gal {
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;
	z-index: 2;
}

.gallery-slide {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
	--height-image: calc((-1 * calc(100%)));
	animation: gallery-move 20s linear infinite;
}

.gallery-slide img {
	display: inline-block;
/*	margin-bottom: -1px;  */
	margin: 0;
	padding: 0;
	width: 100%;


}

@media (max-width: 800px) {
	.column-30 {
		flex: 100%;
		max-width: 100%;

	}

	.column-30-h {
		flex: 100%;
		max-width: 100%;

	}

	.column-70 {
		flex: 100%;
		max-width: 100%;

	}
}

/*  Animation for Gallery slide ( vertical move ) used in left side in 30/70 Responsive Table  */

@keyframes gallery-move {
	0% {
		transform: translatey(0px);

	}

	10% {
		transform: translatey(0px);

	}

	80% {
		transform: translatey(var(--height-image));

	}

	90% {
		transform: translatey(var(--height-image));

	}

}

/*  short section with the Flashing text  */

div.adapter {
	border-top: 2px white solid;
	border-bottom: 2px white solid;
	margin: 20px 0;
	color: #f00;
	text-align: center;
	font-size: 16px;
	background-color: white;
	animation: flashingText2 2s linear infinite;
}

div.adapter1 {
	border-top: 2px white solid;
	border-bottom: 2px white solid;
	margin: 20px 0;
	color: #f00;
	text-align: center;
	font-size: 16px;
	background-color: white;
}

div.adapter-red {
	border-top: 2px white solid;
	border-bottom: 2px white solid;
	margin: 20px 0;
	color: #f00;
	text-align: center;
	font-size: 16px;
	background-color: white;
	animation: flashingRed 2s linear infinite;
}


.flashingText {
	animation: flashingText2 2s linear infinite;
}

.flashingRed {
	animation: flashingRed 2s linear infinite;
}

@keyframes flashingText2 {
	0% {
		color: #347ee7;
	}

	49% {
		color: #347ee7;
	}

	50% {
		color: #fff;
	}

	59% {
		color: #fff;
	}

	100% {
		color: #347ee7;
	}
}

@keyframes flashingText {
	0% {
		color: #074bac;
	}

	49% {
		color: #074bac;
	}

	50% {
		color: #fff;
	}

	59% {
		color: #fff;
	}

	100% {
		color: #074bac;
	}
}

@keyframes flashingRed {
	0% {
		color: #f00;
	}

	49% {
		color: #f00;
	}

	50% {
		color: #fff;
	}

	59% {
		color: #fff;
	}

	100% {
		color: #f00;
	}
}

/* animation icon for Smart IC section   */
.thunder {
	width: 100px;
	height: 100px;
	animation: thunderSize 2s linear infinite;
}

.ring {
	width: 100px;
	height: 100px;
	animation: ringRotation 2s linear infinite;
}

@keyframes thunderSize {
	0% {
		width: 100px;
		height: 100px;
	}

	50% {
		width: 70px;
		height: 70px;
	}

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

}


@keyframes ringRotation {
	0% {
		transform: rotate(0deg)
	}

	100% {
		transform: rotate(360deg)
	}
}

    .text-center-pc {
    padding: 15px 0 0 0;
    
    color: #FFF;
    text-align: center;
    height: 311px;
  }

  .text-center-pc p {
    text-align: justify;
    padding: 0 25px;
    font-size: 14px;
  }


/****************  Image gallery with transition    *****************************/

.image-transition-contener {
	position: relative;
	top: 0;
	left: 0;
	margin: 0 auto;
	max-width: 500px;
	padding-bottom: 15vw;

}

@media screen and (max-width: 1700px) {

	.image-transition-contener {
		padding-bottom: 275px;

	}
}


@media screen and (max-width: 900px) {

	.image-transition-contener {
		padding-bottom: 220px;

	}
}

@media screen and (max-width: 768px) {

	.image-transition-contener {
		padding-bottom: 520px;

	}
}

@media screen and (max-width: 515px) {

	.image-transition-contener {
		padding-bottom: 400px;

	}
}

@media screen and (max-width: 400px) {

	.image-transition-contener {
		padding-bottom: 300px;

	}
}

.image-transition {
	position: absolute;
	top: 0;
	left: 0;
}

.animation-opcity1 {
	opacity: 0;
	animation: opacity-change1 16s linear infinite;
}

.animation-opcity2 {
	opacity: 0;
	animation: opacity-change2 16s linear infinite;
}

.animation-opcity3 {
	opacity: 0;
	animation: opacity-change3 16s linear infinite;
}

.animation-opcity4 {
	opacity: 0;
	animation: opacity-change4 16s linear infinite;
}

@keyframes opacity-change1 {
	0% {
		opacity: 1
	}

	20% {
		opacity: 1
	}

	25% {
		opacity: 0
	}

	95% {
		opacity: 0
	}

	100% {
		opacity: 1
	}

}

@keyframes opacity-change2 {
	0% {
		opacity: 0
	}

	20% {
		opacity: 0
	}

	25% {
		opacity: 1
	}

	45% {
		opacity: 1
	}

	50% {
		opacity: 0
	}

	100% {
		opacity: 0
	}

}

@keyframes opacity-change3 {
	0% {
		opacity: 0
	}

	45% {
		opacity: 0
	}

	50% {
		opacity: 1
	}

	70% {
		opacity: 1
	}

	75% {
		opacity: 0
	}

	100% {
		opacity: 0
	}

}

@keyframes opacity-change4 {
	0% {
		opacity: 0
	}


	70% {
		opacity: 0
	}

	75% {
		opacity: 1
	}

	95% {
		opacity: 1
	}

	100% {
		opacity: 0
	}

}

    .bullets {
      box-shadow: 0px 0px 8px white;
      padding: 20px 20px;
      background-color: #6e9800;
    }

	/* styles for Side Widget with NEW ARRIVALS */

	.side-hidden {
		position: absolute;
		right: 0;
		top: 200px;
		width: 140px;
		height: 70px;
		padding: 0 15px;
		background-color: #8cb916;
		z-index: 999;
		color: white;
		border-radius: 25px 0 0 25px;
		border-top: 2px solid white;
		border-bottom: 2px solid white;
		border-left: 2px solid white;

		transition: .4s;
	}

	.side-hidden:hover {
		position: absolute;
		right: 0;
		width: 25vw;
		height: calc(25vw + 200px);
		background-color: #8cb916;
		/* border: 2px solid #6e9800; */
		/* border: 2px solid white; */

		z-index: 999;
	}


	.side-hidden-title {
		font-size: 22px;
		font-weight: bold;
	}



	.side-hidden p+p {
		display: none;
	}

	.side-hidden:hover p+p {
		display: block;
	}

	.side-hidden a {
		text-decoration: none;
		position: relative;

	}

	/* 20px dla ebay page frame ----------
	
	.side-hidden span {
		
		position: absolute;
		left: calc((25vw / 2) - 20px);
		

		top: calc((25vw - 80px) / 2);
		transform: translateX(calc(-6vw - 55px / 2));
		width: 12vw;
		padding: 15px 0 15px 60px;
		font-size: 30px;
		font-weight: bold;
		background-color: rgba(146, 146, 146, 0.8);
		border: 2px solid white;
		opacity: 0;

	}
*/
	.side-hidden span {
		position: absolute;
		left: calc((25vw / 2));

		top: calc((25vw - 80px) / 2);
		transform: translateX(calc(-6vw - 15px / 2));
		width: 12vw;
		/* padding: 15px 0 15px 60px; */
		padding: 10px 10px;
		font-size: 30px;
		font-weight: bold;
		background-color: rgba(146, 146, 146, 0.8);
		border: 2px solid white;
		opacity: 0;
		text-align: center;

	}


	.side-hidden:hover span {
		display: block;
		color: white;

		animation: .2s show-button 2s linear forwards;
	}

	@keyframes show-button {

		100% {
			opacity: 1;
		}

	}



	.img-hidden {
		display: none;
		transition: .4s;
	}

	.side-hidden:hover .img-hidden {
		display: block;
	}

	@media (max-width: 900px) {
		.side-hidden span {
			padding-left: 40px;
			font-size: 14px;
		}
	}

	@media (max-width: 767px) {
		.side-hidden {
			display: none;
		}
	}




        /* styles for Tabbed Panes in Listing */
        .tabbed-panes {
            /* min-width: 320px; */
            /* max-width: 400px; */
            /* padding: 50px; */
            margin: 0 auto;
            /* background: #fff; */
        }

        section {
            display: none;
            padding: 30px 20px;
            border: 1px solid #fff;
            background-color: #6e9800;
        }

        input {
            display: none;
        }

        label {
            display: inline-block;
            margin: 0 0 -1px;
            padding: 15px 25px;
            font-weight: 600;
            text-align: center;
            color: #999;
            background-color: #E3FEC3;
            border: 1px solid transparent;
        }

        label:hover {
            color: #000;
            cursor: pointer;
            border-bottom: 4px solid red;
        }

        input:checked+label {
            cursor: initial;
            background-color: #6e9800;
            color: #fff;
            border-bottom: 2px solid #6e9800;
            border-top: 3px solid #fff;
            border-left: 1px solid #fff;
            border-right: 1px solid #fff;


        }

        #tab1:checked~#content1,
        #tab2:checked~#content2,
        #tab3:checked~#content3,
        #tab4:checked~#content4 {
            display: block;
        }

        /* @media screen and (max-width: 650px) {
			label {
				font-size: 0;
			}
			label:before {
				margin: 0;
				font-size: 18px;
			}
			} */

        @media screen and (max-width: 436px) {
            label {
                font-size: 12px;
            }

            .tabbed-panes section p {
                font-size: 12px;
            }
        }

        @media screen and (max-width: 400px) {
            label {
                padding: 10px;
                font-size: 12px;
            }
        }


        #tab11:checked~#content11,
        #tab22:checked~#content22,
        #tab33:checked~#content33,
        #tab44:checked~#content44 {
            display: block;
        }



/************** Appearing Section with the instruction for iPhone adapter in vCard ***********************************************/

		.iphone-adapter-img {

			/* display: none; */
			width: 0%;
			margin: auto;
			opacity: 0.2;
			transition: 2s;

		}

		.show-iphone-adapter {
			display: flex;
			cursor: pointer;
			margin: 10px 0 0 0;
		}

		.show-iphone-adapter p {
			line-height: 2em;
			font-size: 1.4em;
			margin: auto;
			color: black;
			font-weight: bold;
		}

		.show-iphone-adapter:hover+.iphone-adapter-img {
			width: 90%;
			display: block;
			opacity: 1;

		}

		.iphone-adapter-img:hover {
			width: 80%;
			display: block;
			opacity: 1;

		}



/************** Drop down top menu nav bar ************************************************************/


  #vida-navbar li:hover {
      background-color: #8cb916;
      border-top: 1px solid white;
    }

    .dropbtn3 {
      border: none;
      cursor: pointer;
    }


    .dropdown3 {
      position: relative;
      display: inline-block;
    }

    .dropdown-content3 {
      display: none;
      position: absolute;
      left: -102px;
      top: 3px;
      background-color: #b9d572;
      min-width: 204px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }

    .dropdown-content3 a {

      padding: 12px 16px;
      display: block;

      color: #fff;
      font-size: 20px;
      text-decoration: none;
      font-family: 'Teko', sans-serif;
      border-top: 1px solid white;
    }

    .dropdown-content3 a:hover {
      background-color: white;
      color: #b9d572;
    }

    .dropdown3:hover .dropdown-content3 {
      display: block;
    }

    @media only screen and (max-width: 767px) {
      .dropdown-content3 {
        top: 10;
        left: -130px
      }

      .dropdown-content3 a {

        font-size: 16px;
      }
    }


/*************************************************************************************************************
		 Hint shows on hover over the small images on the gallery                   
         need to add a class name hint and span tag with the a text we want to display 

         for example:
		  
		  <label for=slide2 class="hint" href="#"><span> sample text </span>  
*************************************************************************************************************/

    label.hint span {
      display: none;
      padding: 2px 3px;
      margin-left: 8px;
      width: 130px;
    }


    label.hint:hover span {
      display: inline;
      position: absolute;
      top: -75px;
      left: -10px;
      background: #fdf3b9;
      box-shadow: 0 0 10px 1px grey;
      border-radius: 10px;
      color: #000000;
      font-size: 0.8em;
      -moz-opacity: 0.8;
      opacity: .80;
      filter: alpha(opacity=80);
      text-align: center;
    }