.popup-container{/*width: 1170px;*/ width:80%; margin: 0 auto;}
.bdr-popup .popup-container{width:68%;}
.bdr-popup .popup-content{min-height:55vh;height:auto;}
.bdr-popup .usecase-whitebg{min-height:70vh;height: auto;position: relative;}
.popup-content{position: relative;
  background: #FFF;
  padding:45px 30px;
  width: 388px;
  max-width: 90%; height: 79vh;
  margin: 90px 0 0 0 !important; float: left;
    display: block;
  text-align: left;
box-shadow: 0 0px 5px #888;}

.pbg{position:absolute; left: 4px;  bottom: 16px;  width: 388px;  height: 480px; z-index: -1;background: #FFF; box-shadow: 0 0px 5px #888; display:none;}
.pbg2{height:500px;}
.bgshow{display: block;}
.bgpop .popup-content{background: none; box-shadow: 0 0px 0px #888;}
.white-popup.intelligent .popup-content{margin-left: 49% !important; }
.popup_next_link{ position:absolute; right:-25px; top:35%;}

.popup_previous_link {position:absolute; left:-25px; top:35%;}
.p_ct{ position: relative;    width: 87%; margin: 0 auto; }

.p_head1{ font-weight: 700;font-family: "BentonSansBold";font-size: 22px; margin: 0 0 15px 0;}
.p_head2{font-weight: normal;font-family: "BentonSansMedium";font-size: 14px;}
.p_desc{margin:6px 0 13px 0;font-size: 15px;}
.p_desc2{font-size: 14px;    margin: 6px 0 0 0;}
.p_img{margin:0 0 10px 0;}
a.figure-click{color:#008FD3;font-family: "BentonSansBold"; text-decoration: underline;}
.usecase-whitebg a{color:#008FD3;font-family: "BentonSansBold"; text-decoration: underline;}
.white-popup ul{ margin:4px 0 0 16px; padding:0;}
.white-popup ul li{padding:0 0 3px 0;}
.power-popup .popup-content{min-height: 311px;}

.white-popup.scalability .popup-content{margin-left:34% !important;}
.white-popup.develop .popup-content{margin-left:67% !important;}

.white-popup.usecase-popup{width:100%; color:#000;}
.white-popup.usecase-popup dt{color:#fff;}
.white-popup.usecase-popup.bdr-popup .popup_previous_link {  left: 48%; top:-2%; }
.white-popup.usecase-popup.bdr-popup .popup_next_link {    left: 48% !important;right:auto !important; bottom:0; top:auto;}
.white-popup.usecase-popup.bdr-popup .popup_link img {  width: 1.6vw;}
.white-popup.usecase-popup .popup_link {top:46%;}
.white-popup.usecase-popup{ background: rgba(0,0,0,0.9); border: 0; box-shadow: 0 0 0;padding: 6% 0 0 0;height: 100%;}
.white-popup.usecase-popup.bdr-popup{ color:#000;padding: 6% 0 0 0;}
.white-popup.usecase-popup .popup-container{padding:0 0px 0 0; border: 0; box-shadow:0 0 0; position: relative; background-size: cover !important;border-radius: 0.8vw; }
.white-popup.usecase-popup .popup-container::before{position:absolute; right:0; top:0; content:' ';width:33.1%; height:100%; border-radius: 0 0.8vw 0.8vw 0;z-index: 1;}
.white-popup.database_platform_for_next_generation-popup .popup-container::before{background: url(../images/bg_database_platform.jpg) no-repeat top center; background-size: cover;}
.white-popup.innovative_application_development-popup .popup-container::before{background: url(../images/bg_innovative_application.jpg) no-repeat top left; background-size: cover;}
.white-popup.extension_of_SAP-popup .popup-container::before{background: url(../images/bg_extension_sap.jpg) no-repeat -340px 0px; background-size: cover;}
.white-popup.data_warehousing-popup .popup-container::before{background: url(../images/bg_data_warehousing.jpg) no-repeat top right; background-size: cover;}
.white-popup.internet_things_data-popup .popup-container::before{background: url(../images/bg_internet_things_data.jpg) no-repeat top center; background-size: cover;}
.white-popup.intelligent_applications-popup .popup-container::before{background: url(../images/bg_intelligent_applications.jpg) no-repeat -245px 0px; background-size: cover;}
.white-popup.it_simplification-popup .popup-container::before{background: url(../images/bg_it_simplification.jpg) no-repeat -183px 0px; background-size: cover;}
.white-popup.workload_capacity-popup .popup-container::before{background: url(../images/bg_workload_capacity_expansion.jpg) no-repeat -194px 0px; background-size: cover;}
.white-popup.demand_forecasting-popup .popup-container::before{background: url("../images/bg_demand.jpg") no-repeat -365px 0px; background-size: cover;}
.white-popup.predictive_maintenance-popup .popup-container::before{background: url("../images/bg_predictive_maintenance.jpg") no-repeat -184px 0px; background-size: cover;}
.white-popup.impact_analysis-popup .popup-container::before{background: url("../images/bg_impact_analysis.jpg") no-repeat -194px 0px; background-size: cover;}
.white-popup.asset_management-popup .popup-container::before{background: url("../images/bg_asset_management.jpg") no-repeat -160px 0px; background-size: cover;}
.white-popup.business_network-popup .popup-container::before{background: url("../images/bg_business_network.jpg") no-repeat -194px 0px; background-size: cover;}
.white-popup.data_anonymization-popup .popup-container::before{background: url("../images/bg_data_anonymization.jpg") no-repeat -194px 0px; background-size: cover;}
.white-popup.cost_control-popup .popup-container::before{background: url("../images/bg_cost_control.jpg") no-repeat -360px 0px; background-size: cover;}
.white-popup.extreme_online_transactional_processing-popup .popup-container::before{background: url("../images/bg_extreme_online_transactional.jpg") no-repeat -562px 0px; background-size: cover;}
.white-popup.migration_legacy_systems-popup .popup-container::before{background: url("../images/bg_migration_legacy_systems.jpg") no-repeat -212px 0px; background-size: cover;}

.white-popup.bdr-popup .popup-container{border-radius: 0.8vw;background:#ffffff; }
.white-popup.bdr-popup .usecase-whitebg {width:100%; background:transparent;padding: 2.6vw 2vw 2vw 3.5vw; margin:0px;}

.white-popup .collapsible-title {margin:72.8vh 0 0 0;padding: 0.5vw 0.5vw;  font-size: 0.95vw; z-index: 11111;width:15vw; text-align: center;}
.white-popup .collapsible-content{margin-top:0px;}
.white-popup .collapsible-title.firsr-dt{margin-left: 2vw;}
.white-popup .collapsible-title:after{display:none;}
.white-popup.usecase-popup .popup-content{margin:0px !important; background: none; padding: 0px; width: 100%; max-width: 100%;border: 0; box-shadow: 0 0 0;float:none;}
.usecase-whitebg{ background: #F1F1F1; padding:2.6vw 2vw 2vw 3.5vw; width: 58%;  margin: 0 0 0 19%; height: 100%;position: relative;border-radius:0.8vw 0 0 0.8vw;    z-index: 1;}
.ucpop .usecase-whitebg{ padding:0; width: 82%;  margin: 0 0 0 0%;}
.ucpop .carousel { height: 100%; }
.ucpop .carousel-indicators li {text-indent: 0; text-align: center; display: block;width: 100%;
    height: auto;
    border-radius: 0; border:0; border-bottom: 1px solid #E1E1E1; margin:0px;}
.ucpop .carousel-indicators li span { display: block; padding: 2.35vw 0.5vw 0; }
.ucpop .carousel-indicators{left:0px !important;}
.ucpop .carousel-indicators li.lightfont.active, .ucpop .carousel-indicators li.active span{font-family: "BentonSansMedium";}
.ucpop .carousel-indicators li.active, .ucpop .carousel-indicators li.libg {color: #000000; background: #F1F1F1;}
.ucpop .carousel-inner { width: 81%; margin: 0 0 0 20%;padding: 2.6vw 2vw 2vw 2.5vw;}
.usecase-whitebg.width58{width: 48%; }
.popup-bottom-nav{font-size: 11px; margin:0px 0 0 0; position: absolute; top:0; left:0px;width: 19%; height: 100%; border-radius: 0.8vw 0 0 0.8vw; background:#fff; text-align: center;  font-family: "BentonSansMedium";z-index: 1;  box-shadow: 2px 0px 9px #bbb;    overflow: hidden;}
.popup-bottom-nav a, .popup-bottom-nav li{padding: 1.35vw 0.5vw;  font-size: 0.95vw;  z-index: 11111;  width: 100%;  text-align: center; text-decoration: none;color: #000000; display: inline-block; border-bottom: 1px solid #E1E1E1; }
.popup-bottom-nav a.nobdr, .ucpop .carousel-indicators li.nobdr {border-bottom:0px;}
.popup-bottom-nav a.lightfont, .ucpop .carousel-indicators li.lightfont, .ucpop .carousel-indicators .lightfont{font-family: "BentonSansLight";}
.popup-bottom-nav a.pfirstlink{border-radius: 0.8vw 0 0 0;}
.popup-bottom-nav a.plastlink{border-radius:0 0 0 0.8vw;}

.white-popup.usecase-popup.popup-fullwidth .usecase-whitebg, .collapsible-content.popup-fullwidth .usecase-whitebg{width:100%;}
.white-popup.usecase-popup .row, .white-popup.usecase-popup .col-sm-12{margin:0px; padding: 0px;}
.white-popup.usecase-popup ul{ margin: 0vw 0 0.8vw 1.2vw;}
.white-popup.usecase-popup hr{border-top: 1px solid #888; margin-bottom: 10px; }
.white-popup.usecase-popup .head5{margin: 15px 0 2px 0; text-transform: uppercase;}
.bdr-popup.white-popup.usecase-popup .head5 {margin: 15px 0 15px 0; text-transform: none;}
.popup_bottom_arrows{ position: absolute; bottom: -2vw;  left: 50%;width:3vw; height:2vw;}
.popup_slide-num {  color: #fff;  position: absolute;  left: 0.2vw;  top: 1.1vw;font-size: 1vw;width: 3vw; text-align: center;}
.white-popup.usecase-popup .popup_link img {  width: 0.7vw;}
.white-popup.usecase-popup .popup_next_link{ right:-1.5vw; }
.white-popup.usecase-popup .popup_previous_link {left:-1.5vw; }
.usecase-whitebg img{  margin: 1vw 0 1vw 0; }
.white-popup.usecase-popup .usecase-whitebg img{  margin: 0vw 0 0vw 0; }
.usecase-whitebg .vimg{width: 7vw; margin: 2vw 0 0.7vw 0 !important;}
.font4{ margin:0 0 0px 0;}
.margin4{margin: 0 0 1.4vw 0;}

.figure-img-h34 img{height:34vh; width:auto;}
.figure-img-h37 img{height:37vh; width:auto;}
.figure-img-h38 img{height:19.5vw; width:auto;}
.figure-img-h40 img{height:40vh; width:auto;}
.figure-img-h47 img{height:45vh; width:auto;}
.figure-img-w100 img{width:100%;}
.figure-img-w80 img{width:80%;}

.white-popup.usecase-popup .mfp-close {
    color: #fff;
    background: url(../images/close_icon_black.png) no-repeat top left;
	background-size:cover;
	text-indent:-9999px;
    border-radius: 50%;
    width: 1.5vw;
    height: 1.5vw;
    line-height: 2.2vw;
    font-size: 2.5vw;
    opacity: 1;
    top: 1.2vw;
    right: 1.2vw;
}
.ucp.white-popup.usecase-popup .mfp-close{background: url(../images/close_icon_black.png) no-repeat top left; background-size:cover; top: 0.8vw;  right:1vw;}
.ucp.white-popup.usecase-popup .mfp-close.whiteclose{background: url(../images/close_icon_white.png) no-repeat top left; background-size:cover; }
.bimgblock{width: 3.9vw;
    vertical-align: middle;}
.bimage{width: 90%;  padding: 0 0vw 0vw 0;
    text-align: center;}
.bimage img{width: 3.4vw; margin:0px;    vertical-align: top;}
.smallimg .bimage img{width:1.7vw;}
td.btext {padding-left: 1vw !important;}
.btext h5{font-size: 1.5vw;font-family: "BentonSansBold"; margin:0;color: #FDB913; }
.benefits_bottomtext{font-size: 0.6vw;  line-height: 0.9vw;  position: absolute;  left: 2vw;  bottom: 1vw;   width: 93%;}
.bsec td{padding: 0 0 1vw 0;}
.bsec5 td{padding: 0 0 1vw 0;}
.bsec4 td{padding: 0 0 1vw 0;}
.bsec3 td{padding: 0 0 1vw 0;}

.popuplink{ width:100%; position:absolute; height:162px; top:0; left:0; z-index:11111;}
.content .popup_head{ margin: 40px -27px 0 0; padding:10px 0px 39px 0px; background-size: cover; color:#fff; font-family: Arial, sans-serif;  font-size:13px; }


.color_blue{ color:#00A0E3;}
.color_green { color: #71BF43;}
.color_orange {   color: #F36F21;}
.color_purple {  color: #AB208E;}
.color_gold {  color: #FDB813;}
.color_pink {  color: #D84B9A;}
.color_pink1 {  color: #BC3894;}
.color_gray {  color: #D7D8DA;}
#home .color_green{color:#44A13E;}

.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid #06D85F;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: #06D85F;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background:url(../images/page3_bg.png) no-repeat top center;
  background-size:cover;
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0; z-index:1111111; 
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup.popup2{background: rgba(255, 255, 255, 0.9);}
.popup {
  margin: 20px auto;
  padding: 0px;
  /*background: rgba(255, 255, 255, 0.9);*/
  border-radius: 1px;
  width: 92%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  
}
.popup .close {
  position: absolute;
  top: 4px;
  right: 40px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: normal;
  text-decoration: none;
  color: #333; z-index:111;
}
.popup .close:hover {
  color: #06D85F;
}
.popup .content {
  max-height: 30%;
  overflow: auto; margin:0 0 0 30px;
}


/*###### popup slider #####*/

.csslider .navigation label {
            background: #B1B1B1;
        }
        .csslider .arrows label {
            border-left-color: #B1B1B1;
            border-right-color: #B1B1B1;
        }
        .csslider.inside .navigation label {
            border: 1px solid #FFF;
        }

        @import url(http://fonts.googleapis.com/css?family=Raleway:400,700|Lato);

        * {
            margin: 0;
            padding: 0;
        }

        /*::-webkit-scrollbar { 
            width: 2px;
            background: rgba(255, 255, 255, 0.1);
        }

        ::-webkit-scrollbar-track {
            background: none;
        }

        ::-webkit-scrollbar-thumb {
            background:none;
        }*/

        ul, ol {
            padding-left: 40px;
        }

        
        #slider1, .csslider {
            margin: 0px;
           
        }

            #slider1 > ul > li:nth-of-type(3) {
                
            }

            .csslider > input:nth-of-type(3):checked ~ ul #bg {
                width: 80%;
                padding: 22px;
                -moz-transition: .5s .5s;
                -o-transition: .5s .5s;
                -webkit-transition: .5s .5s;
                transition: .5s .5s;
            }

                .csslider > input:nth-of-type(3):checked ~ ul #bg div {
                    -moz-transform: translate(0);
                    -ms-transform: translate(0);
                    -o-transform: translate(0);
                    -webkit-transform: translate(0);
                    transform: translate(0);
                    -moz-transition: .5s .9s;
                    -o-transition: .5s .9s;
                    -webkit-transition: .5s .9s;
                    transition: .5s .9s;
                }

        #bg {
            color: #000;
            padding: 22px 0;
            position: absolute;
            left: 0;
            top: 16%;
            height: 20%;
            width: 0;
            z-index: 10;
            overflow: hidden;
        }

            #bg:before {
                content: '';
                position: absolute;
                left: -1px;
                top: 1px;
                height: 100%;
                width: 100%;
                z-index: -1;
                background: url(./themes/fruit.jpg) 1px 23%;
                -webkit-filter: blur(7px);
            }

            #bg:after {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                height: 100%;
                width: 100%;
                z-index: 20;
                background: rgba(0, 0, 0, 0.35);
                pointer-events: none;
            }

            #bg div {
                -moz-transform: translate(120%);
                -ms-transform: translate(120%);
                -o-transform: translate(120%);
                -webkit-transform: translate(120%);
                transform: translate(120%);
            }

        .scrollable p {
            padding: 30px;
            text-align: justify;
            line-height: 140%;
            font-size: 120%;
        }
		
.csslider {
  -moz-perspective: 1300px;
  -ms-perspective: 1300px;
  -webkit-perspective: 1300px;
  perspective: 1300px;
  display: inline-block;
  text-align: left;
  position: relative;
  margin-bottom: 22px;
}
.csslider > input {
  display: none;
}
.csslider > input:nth-of-type(10):checked ~ ul li:first-of-type {
  margin-left: -900%;
}
.csslider > input:nth-of-type(9):checked ~ ul li:first-of-type {
  margin-left: -800%;
}
.csslider > input:nth-of-type(8):checked ~ ul li:first-of-type {
  margin-left: -700%;
}
.csslider > input:nth-of-type(7):checked ~ ul li:first-of-type {
  margin-left: -600%;
}
.csslider > input:nth-of-type(6):checked ~ ul li:first-of-type {
  margin-left: -500%;
}
.csslider > input:nth-of-type(5):checked ~ ul li:first-of-type {
  margin-left: -400%;
}
.csslider > input:nth-of-type(4):checked ~ ul li:first-of-type {
  margin-left: -300%;
}
.csslider > input:nth-of-type(3):checked ~ ul li:first-of-type {
  margin-left: -200%;
}
.csslider > input:nth-of-type(2):checked ~ ul li:first-of-type {
  margin-left: -100%;
}
.csslider > input:nth-of-type(1):checked ~ ul li:first-of-type {
  margin-left: 0%;
}
.csslider > ul {
  position: relative;
  width: 100%;
  height: 560px;
  z-index: 1;
  font-size: 0;
  line-height: 0;
  background-color:transparent;
  border: 0px solid #d1d1d1;
  margin: 0 auto;
  padding: 0 30px 0 0px;
  overflow: hidden;
  /*white-space: nowrap;*/
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.csslider > ul > li {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  overflow: visible;
  font-size: 15px;
  font-size: initial;
  line-height: normal;
  /*-moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);*/
  background: rgba(255, 255, 255, 0.9);
  vertical-align: top;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: normal;
}
.csslider > ul > li.scrollable {
  overflow-y: scroll;
}
.csslider > .navigation {
  position: absolute;
  bottom: -10px;
  left: 50%;
  z-index: 10;
  margin-bottom: -10px;
  font-size: 0;
  line-height: 0;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.csslider > .navigation > div {
  margin-left: -100%;
}
.csslider > .navigation label {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-radius: 50%;
  margin: 0 2px;
  padding: 5px;
  background: #d1d1d1;
}
.csslider > .navigation label:hover:after {
  opacity: 1;
}
.csslider > .navigation label:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -3px;
  margin-top: -3px;
  background: #0097ef;
  border-radius: 50%;
  padding: 3px;
  opacity: 0;
}
.csslider > .arrows {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.csslider.inside .navigation {
  bottom: 10px;
  margin-bottom: 10px;
}
.csslider.inside .navigation label {
  border: 1px solid #7e7e7e;
}
.csslider > input:nth-of-type(1):checked ~ .navigation label:nth-of-type(1):after,
.csslider > input:nth-of-type(2):checked ~ .navigation label:nth-of-type(2):after,
.csslider > input:nth-of-type(3):checked ~ .navigation label:nth-of-type(3):after,
.csslider > input:nth-of-type(4):checked ~ .navigation label:nth-of-type(4):after,
.csslider > input:nth-of-type(5):checked ~ .navigation label:nth-of-type(5):after,
.csslider > input:nth-of-type(6):checked ~ .navigation label:nth-of-type(6):after,
.csslider > input:nth-of-type(7):checked ~ .navigation label:nth-of-type(7):after,
.csslider > input:nth-of-type(8):checked ~ .navigation label:nth-of-type(8):after,
.csslider > input:nth-of-type(9):checked ~ .navigation label:nth-of-type(9):after,
.csslider > input:nth-of-type(10):checked ~ .navigation label:nth-of-type(10):after,
.csslider > input:nth-of-type(11):checked ~ .navigation label:nth-of-type(11):after {
  opacity: 1;
}
.csslider > .arrows {
  position: absolute;
  left: -10px;
  top: 50%;
  width: 96%;
  height: 26px;
  padding: 0 31px;
  z-index: 11;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.csslider > .arrows label {
  display: none;
  position: absolute;
  top: -50%;
  padding: 13px;
  box-shadow: inset 2px -2px 0 1px #ffffff;
  cursor: pointer;
  -moz-transition: .15s;
  -o-transition: .15s;
  -webkit-transition: .15s;
  transition: .15s;
}
.csslider > .arrows label:hover {
  box-shadow: inset 2px -2px 0 1px #ffffff;
  margin: 0 0px;
}
.csslider > .arrows label:before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  height: 300%;
  width: 300%;
}
.csslider.infinity > input:first-of-type:checked ~ .arrows label:last-of-type,
.csslider > input:nth-of-type(1):checked ~ .arrows label:nth-of-type(0),
.csslider > input:nth-of-type(2):checked ~ .arrows label:nth-of-type(1),
.csslider > input:nth-of-type(3):checked ~ .arrows label:nth-of-type(2),
.csslider > input:nth-of-type(4):checked ~ .arrows label:nth-of-type(3),
.csslider > input:nth-of-type(5):checked ~ .arrows label:nth-of-type(4),
.csslider > input:nth-of-type(6):checked ~ .arrows label:nth-of-type(5),
.csslider > input:nth-of-type(7):checked ~ .arrows label:nth-of-type(6),
.csslider > input:nth-of-type(8):checked ~ .arrows label:nth-of-type(7),
.csslider > input:nth-of-type(9):checked ~ .arrows label:nth-of-type(8),
.csslider > input:nth-of-type(10):checked ~ .arrows label:nth-of-type(9),
.csslider > input:nth-of-type(11):checked ~ .arrows label:nth-of-type(10) {
  display: block;
  left: 0;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.csslider.infinity > input:last-of-type:checked ~ .arrows label:first-of-type,
#popup1 .csslider > input:nth-of-type(1):checked ~ .arrows label:nth-of-type(2),
.csslider > input:nth-of-type(1):checked ~ .arrows label:nth-of-type(2),
.csslider > input:nth-of-type(2):checked ~ .arrows label:nth-of-type(3),
.csslider > input:nth-of-type(3):checked ~ .arrows label:nth-of-type(4),
.csslider > input:nth-of-type(4):checked ~ .arrows label:nth-of-type(5),
.csslider > input:nth-of-type(5):checked ~ .arrows label:nth-of-type(6),
.csslider > input:nth-of-type(6):checked ~ .arrows label:nth-of-type(7),
.csslider > input:nth-of-type(7):checked ~ .arrows label:nth-of-type(8),
.csslider > input:nth-of-type(8):checked ~ .arrows label:nth-of-type(9),
.csslider > input:nth-of-type(9):checked ~ .arrows label:nth-of-type(10),
.csslider > input:nth-of-type(10):checked ~ .arrows label:nth-of-type(11),
.csslider > input:nth-of-type(11):checked ~ .arrows label:nth-of-type(12) {
  display: block;
  right: 0;
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}
/*#region MODULES */
/*#endregion */




@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}