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

body {
    margin: 0;
    background-color: rgba(20, 163, 219, 0.06)
}

#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
}

/* ----------------------- Added new - it was not before changes -----------------*/

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

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

header {
    background-color: #14a3db;
    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
}

#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: #55b6dc;
    background: -webkit-linear-gradient(#55b6dc, #0663af);
    background: -o-linear-gradient(#55b6dc, #0663af);
    background: -moz-linear-gradient(#55b6dc, #0663af);
    background: linear-gradient(#55b6dc, #0663af)
}

#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;
}

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

.vida-title-1 {
    background-color: #14a3db;
    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: #14a3db;
    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: #0663af;
    color: #FFF;
    height: 311px
}

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

.green-bg {
    background-color: #14a3db;
    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: #0663af;
    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
}

.specs-table-np>table>tbody>tr {
    color: #fff;
    background-color: #0663af;
    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 #0663af;
    padding: 30px 0
}

.icon-box {
    width: 50px;
    height: 50px;
    background-color: #14a3db;
    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 #0663af;
    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;
    padding-top: 10px;
}

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
}

#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) {
    background: url(https://www.vida-it.com/imgs/next.png) no-repeat;
    float: right;
    margin: 0 15px 0 0;
    display: block
}

#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) {
    background: url(https://www.vida-it.com/imgs/prev.png) no-repeat;
    float: left;
    margin: 0 0 0 15px;
    display: block
}

#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: none;
    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%
    }

    .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%;
    }


    header h3 {
        font-size: 30px
    }

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

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

}

@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) {
    #vida-navbar>ul>li {
        width: 50%
    }

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

    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: #14a3db; 
    max-width: 30%;
    text-align: center;
    overflow: hidden;
}



.column-70 {
    flex-grow: 7;
    padding: 10px;
    margin: 3px;
    background-color: #14a3db; 
    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;
    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;
}

div.adapter2 {
    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.adapter2-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;
}

.flashingText1 {
    animation: flashingText2 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;
    background-color: #0663af;
    color: #FFF;
    text-align: center;
    height: 311px;
  }

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

/* Shadows for Bullets Points in the description */
    .bullets {
      box-shadow: 0px 0px 8px white;
      padding: 20px 20px;
      background-color: #0663af;
    }




        /* 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: #0663af;
        }

        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: 2px solid red;
        }

        input:checked+label {
            cursor: initial;
            background-color: #0663af;
            color: #fff;
            border-bottom: 2px solid #0663af;
            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;
        }



/****************  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
	}

}


/************** 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;

		}



/************  DropDown Manu        ***********************************/

  #vida-navbar li:hover {
      background-color: rgb(24, 95, 189);
    }

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


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

    .dropdown-content3 {
       display: none;
      position: absolute;
      left: -102px;
      top: 3px;
      background-color: #14a3db;
      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;
    }

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

    .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;
      }
    }

/*************** text align RIGHT for Specs table in Row Header 17/03/2020 *****************************************/

    .specs-table tr th {
      text-align: right;
      padding-right: 25px;
    }

/****************styles for Side Widget with NEW ARRIVALS  18/03/2020 *******************************************************/

	.side-hidden {
		position: absolute;
		right: 0;
		top: 200px;
		width: 140px;
		height: 70px;
		padding: 0 15px;
		background-color: #0663af;
		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: #0663af;
		/* 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;
		}
	}

/********************************************************************************************************************/

/*************************************************************************************************************
		 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: -65px;
      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;
    }