html,
body {
    width: 90%;
    height: 80%;
    background: #dcdbdc;
}

.selector {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 140px;
    height: 140px;
    margin-top: -20px;
    margin-left: -60px;
}

.selector,
.selector button {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
}

.selector button {
    position: relative;
    width: 150%;
    height: 150%;
    border-radius: 50%;
    border: 0;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
    transition: all .1s;
    margin-left: -27%;
    margin-top: -17.9%;
}

.selector button:hover {
    background: #d5d5d5;
}

.selector button:focus {
    outline: none;
}

.selector ul {
    position: absolute;
    list-style: none;
    padding: 0;
    margin: 0;
    top: -110px;
    right: -110px;
    bottom: -110px;
    left: -110px;
}

.selector li {
    position: absolute;
    width: 0;
    height: 100%;
    margin: 0 50%;
    -webkit-transform: rotate(-360deg);
    transition: all 0.8s ease-in-out;
}

.selector li input {
    display: none;
}

.selector li input + label {
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 0;
    height: 0;
    line-height: 1px;
    margin-left: 0;
    background: #fff;
    border-radius: 50%;
    text-align: center;
    font-size: 1px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.8s ease-in-out, color 0.1s, background 0.1s;
}

.selector.open li input + label {
    width: 80px;
    height: 80px;
    line-height: 125px;
    margin-left: -130px;
    box-shadow: -3 3px 3px rgba(0, 0, 0, 0.1);
}



.selector.open .c1 input + label {
    background: #b6b6b6;
}

.selector.open .c1 input + label:hover {
    background: #355767;
}




.proba {
    width: 100%;
    height: 100%;
    background-image: url(../images/bacgraundcenter.png);
    background-repeat: no-repeat;
    /*    background-attachment: fixed;*/
    background-position: center;
    position: absolute;
    top: 6% !important;
}


.selector.open .c2 input + label {
    background: #b6b6b6;
}

.selector.open .c2 input + label:hover {
    background: #347180;
}

.img2 {
    margin-bottom: -0.2vh;
}

.selector.open .c3 input + label {
    background: #b6b6b6;
    transform: rotate(270deg);
}

.img3 {
    margin-bottom: -0.2vh;
}

.selector.open .c3 input + label:hover {
    background: #9cd67e;
}

.selector.open .c4 input + label {
    background: #b6b6b6;
    transform: rotate(225deg);
}

.selector.open .c4 input + label:hover {
    background: #67cc73;
}

.selector.open .c5 input + label {
    background: #b6b6b6;
    transform: rotate(180deg);
}

.img5 {
    margin-bottom: 0.3vh;
    margin-left: 0.2vh;
}

.selector.open .c5 input + label:hover {
    background: #f5a330;
}

.selector.open .c6 input + label {
    background: #b6b6b6;
    transform: rotate(132deg);
}

.img6 {
    margin-bottom: -0vh;
}

.selector.open .c6 input + label:hover {
    background: #ed4d33;
}

.selector.open .c7 input + label {
    background: #b6b6b6;
    transform: rotate(90deg);
}

.selector.open .c7 input + label:hover {
    background: #159699;
}

.img7 {
    margin-top: 1vh;
}

.selector.open .c8 input + label {
    background: #b6b6b6;
    transform: rotate(43deg);
}

.img8 {
    margin-bottom: -0.2vh;
    margin-right: -0.1vh;
}

.selector.open .c8 input + label:hover {
    background: #1e7c6c;
}

.quotations {
    padding-top: 3.3rem;
    padding-left: 0rem;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

.quotation {
    margin: 0 auto;
    text-align: center;
}

.quotation p {
    font-family: 'Palanquin', sans-serif;
    font-weight: 200;
    font-size: 21px;
    color: #969696;
    margin-left: 18vw;

}

.quotation p:last-child {
    font-size: 17px;
    padding-top: 0.2rem;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    color: #bebebe;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    margin-left: -29vh;
    margin-top: -11vh;
    font-size: 2.2vh;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip .c2 {
    visibility: hidden;
    width: 120px;
    color: #bebebe;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    margin-left: -11.8vh;
    margin-top: -17.6vh;
    font-size: 2.2vh;
    transform: rotate(315deg);
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .c2 {
    visibility: visible;
}

.tooltip .c3 {
    visibility: hidden;
    width: 120px;
    color: #bebebe;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    margin-left: -18.5vh;
    margin-top: -17.6vh;
    font-size: 2.2vh;
    transform: rotate(270deg);
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .c3 {
    visibility: visible;
}

.tooltip .c4 {
    visibility: hidden;
    width: 150px;
    color: #bebebe;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    margin-left: -28.1vh;
    margin-top: -13.1vh;
    font-size: 2.2vh;
    transform: rotate(225deg);
    position: absolute;
    z-index: 1;
}

.tooltip:hover .c4 {
    visibility: visible;
}

.tooltip .c5 {
    visibility: hidden;
    width: 150px;
    color: #bebebe;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    margin-left: -30.8vh;
    margin-top: -11.4vh;
    font-size: 2.2vh;
    transform: rotate(180deg);
    position: absolute;
    z-index: 1;
}

.tooltip:hover .c5 {
    visibility: visible;
}

.tooltip .c6 {
    visibility: hidden;
    width: 150px;
    color: #bebebe;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    margin-left: -10.6vh;
    margin-top: -21.4vh;
    font-size: 2.2vh;
    transform: rotate(135deg);
    position: absolute;
    z-index: 1;
}

.tooltip:hover .c6 {
    visibility: visible;
}

.tooltip .c7 {
    visibility: hidden;
    width: 150px;
    color: #bebebe;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    margin-left: -14.9vh;
    margin-top: -21.2vh;
    font-size: 2.2vh;
    transform: rotate(90deg);
    position: absolute;
    z-index: 1;
}

.tooltip:hover .c7 {
    visibility: visible;
}

.tooltip .c8 {
    visibility: hidden;
    width: 150px;
    color: #bebebe;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    margin-left: -26.9vh;
    margin-top: -21.2vh;
    font-size: 2.2vh;
    transform: rotate(45deg);
    position: absolute;
    z-index: 1;
}

.tooltip:hover .c8 {
    visibility: visible;
}


.tooltip:hover .tooltiptext {
    visibility: visible;
}

.burgermenu {
    display: none;
}

.right {
    position: absolute;
    right: -10px;
    top: 50px;
    width: 0%;
}

.right {
    background: #bebebe;
    display: inline-block;
    white-space: nowrap;
    transition: width 1s;
    overflow: hidden;
}

.right:hover {
    width: 250px;
    overflow: hidden;
}

.item {
    height: 73px;
    color: #fff;
    float: none;
    margin-top: 45px;
}

.item a {
    color: #f4f4f4;
    text-decoration: none;
}

.c1-1 {
    width: 72%;
    height: 72%;
    background-image: url("../images/Group 8.png");
    background-position: center;
    background-size: contain;
    margin-left: 0.4vh;
}

.parent:hover .c1-1,
.parent:focus .c1-1 {
    background-image: url("../images/Group_8.1.png");
}

.c1text {
    margin-left: 95px;
    font-size: 24px;
    text-align: center;
    line-height: 60px;
}

.c1text:hover {
    color: #355767;
}

.c2-2 {
    width: 80%;
    height: 80%;
    background-image: url("../images/ic_local_phone_48_px.png");
    background-position: center;
    background-size: cover;
    margin-left: -0.1vh;
}

.parent:hover .c2-2,
.parent:focus .c2-2 {
    background-image: url("../images/slusalica.png");
}

.c2text {
    margin-left: 88px;
    font-size: 24px;
    text-align: center;
    line-height: 60px;
}

.c2text:hover {
    color: #347180;
}

.c3-3 {
    width: 80%;
    height: 80%;
    background-image: url("../images/Group10.png");
    background-position: center;
    background-size: cover;
    margin-left: -0.1vh;
}

.parent:hover .c3-3,
.parent:focus .c3-3 {
    background-image: url("../images/Group-10.png");
}

.c3text {
    margin-left: 88px;
    font-size: 24px;
    text-align: center;
    line-height: 60px;
}

.c3text:hover {
    color: #9cd67e;
}

.c4-4 {
    width: 70%;
    height: 80%;
    background-image: url("../images/ic_fingerprint_48_px.png");
    background-position: center;
    background-size: cover;
    margin-left: 0.1vh;
}

.parent:hover .c4-4,
.parent:focus .c4-4 {
    background-image: url("../images/fingerprint1.png");
}

.c4text {
    margin-left: 88px;
    font-size: 24px;
    text-align: center;
    line-height: 60px;
}

.c4text:hover {
    color: #67cc73;
}

.c5-5 {
    width: 80%;
    height: 70%;
    background-image: url("../images/ic_important_devices_48_px.png");
    background-position: center;
    background-size: cover;
    margin-left: 0.1vh;
}

.parent:hover .c5-5,
.parent:focus .c5-5 {
    background-image: url("../images/important_devices1.png");
}

.c5text {
    margin-left: 88px;
    font-size: 24px;
    text-align: center;
    line-height: 60px;
}

.c5text:hover {
    color: #f5a330;
}

.c6-6 {
    width: 77%;
    height: 50%;
    background-image: url("../images/eye1.png");
    background-position: center;
    background-size: cover;
    margin-left: 0.1vh;
}

.parent:hover .c6-6,
.parent:focus .c6-6 {
    background-image: url("../images/eye.png");
}

.c6text {
    margin-left: 88px;
    font-size: 24px;
    text-align: center;
    line-height: 40px;
}

.c6text:hover {
    color: #ed4d33;
}

.c6-6text {
    margin-left: 105px;
    font-size: 24px;
    text-align: center;
    line-height: 10px;
}

.c6-6text:hover {
    color: #ed4d33;
}

.c7-7 {
    width: 56.6%;
    height: 80.5%;
    background-image: url("../images/lightbulb1.png");
    background-position: center;
    background-size: contain;
    margin-left: 1.1vh;
    margin-top: -3.8vh;
    /*    margin-top: 0vh;*/

}

.parent:hover .c7-7,
.parent:focus .c7-7 {
    background-image: url("../images/lightbulb.png");
}

.c7text {
    margin-left: 82px;
    font-size: 24px;
    text-align: center;
    line-height: 60px;
}

.c7text:hover {
    color: #159699;
}

.c8-8 {
    width: 80%;
    height: 80%;
    background-image: url("../images/ic_copyright_48_px.png");
    background-position: center;
    background-size: contain;
    margin-top: -18px;
}

.parent:hover .c8-8,
.parent:focus .c8-8 {
    background-image: url("../images/copyright1.png");
}

.c8text {
    margin-left: 88px;
    font-size: 24px;
    text-align: center;
    line-height: 45px;
}

.c8text:hover {
    color: #1e7c6c;
}

.c8-8text {
    margin-left: 100px;
    font-size: 24px;
    text-align: center;
    line-height: 10px;
}

.c8-8text:hover {
    color: #1e7c6c;
}

.parent {
    width: 85px;
    height: 85px;
}

.title {
    background-color: #eee;
    border-style: solid;
    border-color: #ccc;
    border-width: 1px;
    box-sizing: border-box;
}


/*
@media only screen and (min-height:350px) and (max-width:680px) {
    .proba {
        margin-left: 8.4vw;
        margin-top: 11vw;
    }
    
    .c1.tooltip label {
        margin-left: -150px;
    }
}
*/

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

    .selector {
        position: absolute;
        left: 48.5%;
        top: 50%;
        width: 50px;
        height: 50px;
        margin-top: 20px;
        margin-left: -17.4px;
        z-index: 1;
    }

    .proba {
        margin-top: -1.6%;
        margin-left: -1.4%;
    }

    .selector button img {
        position: relative;
        left: -79.8px;
        top: -72.4px;
    }

    body {
        overflow: hidden;
    }

    .quotations {
        padding-top: 1.3rem;
        padding-bottom: 0rem;
        margin: 0 auto;
        margin-left: -10px;
        text-align: center;
        width: 100%;
    }

    .c1.tooltip {
        transform: rotate(3.7deg) !important;
    }

    .c2.tooltip {
        transform: rotate(48.7deg) !important;
    }

    .c3.tooltip {
        transform: rotate(93.7deg) !important;
    }

    .c4.tooltip {
        transform: rotate(138.7deg) !important;
    }

    .c5.tooltip {
        transform: rotate(183.7deg) !important;
    }

    .c6.tooltip {
        transform: rotate(230.5deg) !important;
    }

    .c7.tooltip {
        transform: rotate(273.7deg) !important;
    }

    .c8.tooltip {
        transform: rotate(318.7deg) !important;
    }

    .tooltip span {
        display: none !important;
    }


    .tooltip:hover .c8 {
        visibility: hidden;
    }

    .burgermenu {
        display: block;
        width: 100%;
        height: 100%;
        position: fixed;
        left: 393.6px !important;
        top: -13.4px !important;
    }

    .burgermenu:hover {
        cursor: pointer;
    }

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

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

    .selector {
        display: none;
    }

    .proba {
        display: none;
    }

    body {
        overflow: scroll;
    }

    .quotations {
        padding-top: 4.3rem;
        padding-bottom: 0rem;
        margin: 0 auto;
        margin-left: -10px;
        text-align: center;
        width: 100%;
    }

    .c1.tooltip {
        transform: rotate(3.7deg) !important;
    }

    .c2.tooltip {
        transform: rotate(48.7deg) !important;
    }

    .c3.tooltip {
        transform: rotate(93.7deg) !important;
    }

    .c4.tooltip {
        transform: rotate(138.7deg) !important;
    }

    .c5.tooltip {
        transform: rotate(183.7deg) !important;
    }

    .c6.tooltip {
        transform: rotate(230.5deg) !important;
    }

    .c7.tooltip {
        transform: rotate(273.7deg) !important;
    }

    .c8.tooltip {
        transform: rotate(318.7deg) !important;
    }

    .tooltip span {
        display: none !important;
    }


    .tooltip:hover .c8 {
        visibility: hidden;
    }

    .burgermenu {
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        left: 303.6px !important;
        top: -13.4px !important;
    }

    .burgermenu:hover {
        cursor: pointer;
    }

    .right {
        margin-top: 100px;
        padding-left: -10px;
        width: 100%;
    }

    .right:hover {
        width: 100%;
        overflow: hidden;
    }
}

@media only screen and (max-height: 360px) {
    .selector {
        position: absolute;
        left: 48.5%;
        top: 50%;
        width: 50px;
        height: 50px;
        margin-top: 20px;
        margin-left: -7.4px;
        z-index: 1;
    }

    .selector button img {
        position: relative;
        left: -79.8px;
        top: -72.4px;
    }

    .proba {
        margin-top: 11.6%;
        margin-left: 0.3%;
    }

    .quotations {
        padding-top: 33.1rem;
        padding-bottom: 0rem;
    }
}

@media only screen and (max-height: 280px) {
    .selector {
        margin-top: 77.8px;
        margin-left: -4.4px;
    }
    .proba {
        padding-top: 120px;
    }
}

@media only screen and (max-height: 640px) {
    .quotations {
        position: relative;
/*        top: -70px;*/
    }

    .proba {
        margin-top: 30px;
    }
}

/* Iphone landscape */
@media only screen and (max-width: 812px) and (max-height: 375px){
    .selector {
        margin-top: 87.8px;
    }
    
    .proba {
        padding-top: 210px;
    }
}

/* Iphone portrait */
@media only screen and (max-width: 375px) and (max-height: 812px){
    .selector {
        display: none;
    }

    .proba {
        display: none;
    }

    body {
        overflow: scroll;
    }

    .quotations {
        padding-top: 0rem !important;
        padding-bottom: 0rem;
        margin: 0 auto;
        margin-left: -10px;
        text-align: center;
        width: 100%;
    }

    .c1.tooltip {
        transform: rotate(3.7deg) !important;
    }

    .c2.tooltip {
        transform: rotate(48.7deg) !important;
    }

    .c3.tooltip {
        transform: rotate(93.7deg) !important;
    }

    .c4.tooltip {
        transform: rotate(138.7deg) !important;
    }

    .c5.tooltip {
        transform: rotate(183.7deg) !important;
    }

    .c6.tooltip {
        transform: rotate(230.5deg) !important;
    }

    .c7.tooltip {
        transform: rotate(273.7deg) !important;
    }

    .c8.tooltip {
        transform: rotate(318.7deg) !important;
    }

    .tooltip span {
        display: none !important;
    }


    .tooltip:hover .c8 {
        visibility: hidden;
    }

    .burgermenu {
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        left: 303.6px !important;
        top: -13.4px !important;
    }

    .burgermenu:hover {
        cursor: pointer;
    }

    .right {
        margin-top: 100px;
        padding-left: -10px;
        width: 100%;
    }

    .right:hover {
        width: 100%;
        overflow: hidden;
    }
}

/* Iphone Plus portrait */
@media only screen and (max-width: 414px) and (max-height: 812px){
    .selector {
        display: none;
    }

    .proba {
        display: none;
    }

    body {
        overflow: scroll;
    }

    .quotations {
        padding-top: 0rem;
        padding-bottom: 0rem;
        margin: 0 auto;
        margin-left: -10px;
        text-align: center;
        width: 100%;
    }

    .c1.tooltip {
        transform: rotate(3.7deg) !important;
    }

    .c2.tooltip {
        transform: rotate(48.7deg) !important;
    }

    .c3.tooltip {
        transform: rotate(93.7deg) !important;
    }

    .c4.tooltip {
        transform: rotate(138.7deg) !important;
    }

    .c5.tooltip {
        transform: rotate(183.7deg) !important;
    }

    .c6.tooltip {
        transform: rotate(230.5deg) !important;
    }

    .c7.tooltip {
        transform: rotate(273.7deg) !important;
    }

    .c8.tooltip {
        transform: rotate(318.7deg) !important;
    }

    .tooltip span {
        display: none !important;
    }


    .tooltip:hover .c8 {
        visibility: hidden;
    }

    .burgermenu {
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        left: 303.6px !important;
        top: -13.4px !important;
    }

    .burgermenu:hover {
        cursor: pointer;
    }

    .right {
        margin-top: 100px;
        padding-left: -10px;
        width: 100%;
    }

    .right:hover {
        width: 100%;
        overflow: hidden;
    }
}

/* Pixel portrait */
@media only screen and (max-width: 411px) and (max-height: 823px){
    .selector {
        display: none;
    }

    .proba {
        display: none;
    }

    body {
        overflow: scroll;
    }

    .quotations {
        padding-top: 0rem;
        padding-bottom: 0rem;
        margin: 0 auto;
        margin-left: -10px;
        text-align: center;
        width: 100%;
    }

    .c1.tooltip {
        transform: rotate(3.7deg) !important;
    }

    .c2.tooltip {
        transform: rotate(48.7deg) !important;
    }

    .c3.tooltip {
        transform: rotate(93.7deg) !important;
    }

    .c4.tooltip {
        transform: rotate(138.7deg) !important;
    }

    .c5.tooltip {
        transform: rotate(183.7deg) !important;
    }

    .c6.tooltip {
        transform: rotate(230.5deg) !important;
    }

    .c7.tooltip {
        transform: rotate(273.7deg) !important;
    }

    .c8.tooltip {
        transform: rotate(318.7deg) !important;
    }

    .tooltip span {
        display: none !important;
    }


    .tooltip:hover .c8 {
        visibility: hidden;
    }

    .burgermenu {
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        left: 303.6px !important;
        top: -13.4px !important;
    }

    .burgermenu:hover {
        cursor: pointer;
    }

    .right {
        margin-top: 100px;
        padding-left: -10px;
        width: 100%;
    }

    .right:hover {
        width: 100%;
        overflow: hidden;
    }
}

/* laptop 900p*/
@media only screen and (max-width: 1600px) and (max-height: 900px) {
    .quotations {
        position: relative;
        top: -70px !important;
    }

    .proba {
        margin-top: 1.4px !important;
    }

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        color: #bebebe;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        margin-left: -36vh;
        margin-top: -14.7vh;
        font-size: 2.2vh;

        /* Position the tooltip */
        position: absolute;
        z-index: 1;
    }

    .tooltip .c2 {
        visibility: hidden;
        width: 120px;
        color: #bebebe;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        margin-left: -15.1vh;
        margin-top: -22.7vh;
        font-size: 2.2vh;
        transform: rotate(315deg);
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
    }

    .tooltip:hover .c2 {
        visibility: visible;
    }

    .tooltip .c3 {
        visibility: hidden;
        width: 120px;
        color: #bebebe;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        margin-left: -27.8vh;
        margin-top: -23.4vh;
        font-size: 2.2vh;
        transform: rotate(270deg);
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
    }

    .tooltip:hover .c3 {
        visibility: visible;
    }

    .tooltip .c4 {
        visibility: hidden;
        width: 150px;
        color: #bebebe;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        margin-left: -29.4vh;
        margin-top: -24.5vh;
        font-size: 2.2vh;
        transform: rotate(225deg);
        position: absolute;
        z-index: 1;
    }

    .tooltip:hover .c4 {
        visibility: visible;
    }

    .tooltip .c5 {
        visibility: hidden;
        width: 150px;
        color: #bebebe;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        margin-left: -38.5vh;
        margin-top: -14.8vh;
        font-size: 2.2vh;
        transform: rotate(180deg);
        position: absolute;
        z-index: 1;
    }

    .tooltip:hover .c5 {
        visibility: visible;
    }

    .tooltip .c6 {
        visibility: hidden;
        width: 150px;
        color: #bebebe;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        margin-left: -17vh;
        margin-top: -26.3vh;
        font-size: 2.2vh;
        transform: rotate(135deg);
        position: absolute;
        z-index: 1;
    }

    .tooltip:hover .c6 {
        visibility: visible;
    }

    .tooltip .c7 {
        visibility: hidden;
        width: 150px;
        color: #bebebe;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        margin-left: -28.7vh;
        margin-top: -24.2vh;
        font-size: 2.2vh;
        transform: rotate(90deg);
        position: absolute;
        z-index: 1;
    }

    .tooltip:hover .c7 {
        visibility: visible;
    }

    .tooltip .c8 {
        visibility: hidden;
        width: 150px;
        color: #bebebe;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        margin-left: -31.3vh;
        margin-top: -26.2vh;
        font-size: 2.2vh;
        transform: rotate(45deg);
        position: absolute;
        z-index: 1;
    }
}

/* laptop 720p*/
@media only screen and (max-width: 1280px) and (max-height: 720px) {
    .quotations {
        position: relative;
        top: -70px !important;
    }

    .proba {
        margin-top: 17.1px !important;
    }
    
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        color: #bebebe;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        margin-left: -36vh;
        margin-top: -14.7vh;
        font-size: 2.2vh;

        /* Position the tooltip */
        position: absolute;
        z-index: 1;
    }

    .tooltip .c2 {
        visibility: hidden;
        width: 120px;
        color: #bebebe;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        margin-left: -15.1vh;
        margin-top: -22.7vh;
        font-size: 2.2vh;
        transform: rotate(315deg);
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
    }

    .tooltip:hover .c2 {
        visibility: visible;
    }

    .tooltip .c3 {
        visibility: hidden;
        width: 120px;
        color: #bebebe;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        margin-left: -27.8vh;
        margin-top: -23.4vh;
        font-size: 2.2vh;
        transform: rotate(270deg);
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
    }

    .tooltip:hover .c3 {
        visibility: visible;
    }

    .tooltip .c4 {
        visibility: hidden;
        width: 150px;
        color: #bebebe;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        margin-left: -29.4vh;
        margin-top: -24.5vh;
        font-size: 2.2vh;
        transform: rotate(225deg);
        position: absolute;
        z-index: 1;
    }

    .tooltip:hover .c4 {
        visibility: visible;
    }

    .tooltip .c5 {
        visibility: hidden;
        width: 150px;
        color: #bebebe;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        margin-left: -38.5vh;
        margin-top: -14.8vh;
        font-size: 2.2vh;
        transform: rotate(180deg);
        position: absolute;
        z-index: 1;
    }

    .tooltip:hover .c5 {
        visibility: visible;
    }

    .tooltip .c6 {
        visibility: hidden;
        width: 150px;
        color: #bebebe;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        margin-left: -17vh;
        margin-top: -26.3vh;
        font-size: 2.2vh;
        transform: rotate(135deg);
        position: absolute;
        z-index: 1;
    }

    .tooltip:hover .c6 {
        visibility: visible;
    }

    .tooltip .c7 {
        visibility: hidden;
        width: 150px;
        color: #bebebe;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        margin-left: -28.7vh;
        margin-top: -24.2vh;
        font-size: 2.2vh;
        transform: rotate(90deg);
        position: absolute;
        z-index: 1;
    }

    .tooltip:hover .c7 {
        visibility: visible;
    }

    .tooltip .c8 {
        visibility: hidden;
        width: 150px;
        color: #bebebe;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        margin-left: -31.3vh;
        margin-top: -26.2vh;
        font-size: 2.2vh;
        transform: rotate(45deg);
        position: absolute;
        z-index: 1;
    }
}

/* laptop 576p*/
@media only screen and (max-width: 1024px) and (max-height: 576px) {
    .quotations {
        position: relative;
        top: 540px !important;
    }

    .proba {
        margin-top: 19.3px !important;
    }
    
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        color: #bebebe;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        margin-left: -46.2vh;
        margin-top: -16.2vh;
        font-size: 2.2vh;

        /* Position the tooltip */
        position: absolute;
        z-index: 1;
    }

    .tooltip .c2 {
        visibility: hidden;
        width: 120px;
        color: #bebebe;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        margin-left: -21.8vh;
        margin-top: -25.5vh;
        font-size: 2.2vh;
        transform: rotate(315deg);
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
    }

    .tooltip:hover .c2 {
        visibility: visible;
    }

    .tooltip .c3 {
        visibility: hidden;
        width: 120px;
        color: #bebebe;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        margin-left: -37.5vh;
        margin-top: -23.4vh;
        font-size: 2.2vh;
        transform: rotate(270deg);
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
    }

    .tooltip:hover .c3 {
        visibility: visible;
    }

    .tooltip .c4 {
        visibility: hidden;
        width: 150px;
        color: #bebebe;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        margin-left: -32.4vh;
        margin-top: -26vh;
        font-size: 2.2vh;
        transform: rotate(225deg);
        position: absolute;
        z-index: 1;
    }

    .tooltip:hover .c4 {
        visibility: visible;
    }

    .tooltip .c5 {
        visibility: hidden;
        width: 150px;
        color: #bebebe;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        margin-left: -45.7vh;
        margin-top: -18.5vh;
        font-size: 2.2vh;
        transform: rotate(180deg);
        position: absolute;
        z-index: 1;
    }

    .tooltip:hover .c5 {
        visibility: visible;
    }

    .tooltip .c6 {
        visibility: hidden;
        width: 150px;
        color: #bebebe;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        margin-left: -20.1vh;
        margin-top: -31.4vh;
        font-size: 2.2vh;
        transform: rotate(135deg);
        position: absolute;
        z-index: 1;
    }

    .tooltip:hover .c6 {
        visibility: visible;
    }

    .tooltip .c7 {
        visibility: hidden;
        width: 150px;
        color: #bebebe;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        margin-left: -35.6vh;
        margin-top: -28vh;
        font-size: 2.2vh;
        transform: rotate(90deg);
        position: absolute;
        z-index: 1;
    }

    .tooltip:hover .c7 {
        visibility: visible;
    }

    .tooltip .c8 {
        visibility: hidden;
        width: 150px;
        color: #bebebe;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        margin-left: -36.1vh;
        margin-top: -30.7vh;
        font-size: 2.2vh;
        transform: rotate(45deg);
        position: absolute;
        z-index: 1;
    }
}