.next {
  position: absolute; 
  top: 10px; 
  right: 10px; 
  bottom: 10px;
  background-color: transparent!important;
  box-shadow: none!important;
}

.swiper-slide{
  box-shadow: 0px 0px 6px #969696;
  margin:15px;
  /*    width: 16%!important;*/
}

.swiper-slide:hover{
  box-shadow: 2px 2px 9px #969696;
/*  margin:15px;
      width: 16%!important;*/
}

.swiper-slide .detail h3 {
  font-size: 24px
}

.case1_banner{
  background-image: url(../ucodiceNew/images/case_study/header_purple.png);
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  min-height: 600px;
}

.case2_banner{
/*  background-image: url(https://www.ucodice.com/ucodiceNew/case-study/case2/header_blue.png);*/
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  min-height: 600px;
}

.case_intro{
  padding-top: 9%;
  margin: 0 auto;
  text-align: center;
}

.case_intro img{
  max-width: 20%;
}

.case_intro p{
    font-size: 20px;
    font-family: lato;
    padding-top: 10px;
    color: #fff;
    text-shadow: 0px 0px 10px #545454;
}

.case1_sec2{
      width: 48%;
    margin: 0 auto;
    text-align: left;
    padding-left: 12%;
    padding-top: 20px;
    padding-right: 8%;
}

.case1_sec2 h1 {
    color: #2c2d2d;
    font-size: 45px;
    font-weight: bolder;
    font-family: Lato;
    margin: 0;
    text-transform: uppercase;
}

.case1_sec2 p{
  padding-top: 20px;
  /*padding-left: 50px;*/
  color: #2c2c2c;
  font-size: 18px;
  font-weight: 400;
  font-family: Lato;
  margin: 0;
}

.case1_mobile_float{
  position: absolute;
  z-index: 999999;
  right: 0px;
  top: 200px;
  background-size: cover;
}

.case2_flowerpot_float{
  position: absolute;
  z-index: 999999;
  right: 50px;
  bottom: -500px;
  background-size: cover;
  animation-name: floating;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.case2_background_theme_float{
  position: absolute;
  z-index: 999999;
  left: 0;
  bottom: 100px;
  background-size: cover;
  cursor: pointer;
  /*box-shadow: 0px 0px 5px #000;*/
}

.case_arrow_float{
  width: 10%;
  position: absolute;
  z-index: 999999;
  left: 0px;
  bottom: 150px;
  background-size: cover;
}


.case1_sec3{
  position: relative;
  background-image: url(../case-study/case1_sec3_back.png);
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 800px;
}

.case1_sec3 h1{
    margin-top: 130px;
    color: #fff;
    font-size: 44px;
    text-transform: uppercase;
    /*background-color: #ba7fb5;*/
    margin: 145px auto 0px;
    padding: 10px 20px;
    width: 550px;
    border-radius: 10px;
    /*box-shadow: 0px 0px 20px #8e8e8e;*/
    box-shadow: 0px 0px 32px -2px rgba(0,0,0,0.15);
}

/*.case1_sec3_box1{
  position: absolute;
  top: 49%;
    left: 15%;
    animation: case_box 2s ease-in-out 3s;
    animation-delay: 5s;
}*/




.case1_sec3_xd {
  position: absolute;
  top: 47%;
  left: 15%;
  animation: 
    pulse 3s ease infinite alternate, 
    nudge_xd 5s linear infinite alternate;
}
.case1_sec3_xd:hover{
  -webkit-animation-play-state:paused;
  -moz-animation-play-state:paused;
  -o-animation-play-state:paused;
  animation-play-state:paused;
  cursor: pointer;
}

/*@keyframes pulse {
  0%, 100% {
    background-color: red;
  }
  50% {
    background-color: orange;
  }
}*/

@keyframes nudge_xd {
  0%, 100% {
    transform: translate(0, 0);
  }
  
  50% {
    transform: translate(150px, 0);
  }
  
  80% {
    transform: translate(-150px, 0);
  }
}

@keyframes nudge_my {
  0%, 100% {
    transform: translate(0, 0);
  }
  
  50% {
    transform: translate(-150px, 0);
  }
  
  80% {
    transform: translate(150px, 0);
  }
}

@keyframes nudge_ps {
  0%, 100% {
    transform: translate(0, 0);
  }
  
  50% {
    transform: translate(-150px, 0);
  }
  
  80% {
    transform: translate(150px, 0);
  }
}

@keyframes nudge_react {
  0%, 100% {
    transform: translate(0, 0);
  }
  
  50% {
    transform: translate(150px, 0);
  }
  
  80% {
    transform: translate(-150px, 0);
  }
}

@keyframes nudge_js {
  0%, 100% {
    transform: translate(0, 0);
  }
  
  50% {
    transform: translate(80px, 0);
  }
  
  80% {
    transform: translate(-110px, 0);
  }
}

@keyframes nudge_html {
  0%, 100% {
    transform: translate(0, 0);
  }
  
  50% {
    transform: translate(120px, 0);
  }
  
  80% {
    transform: translate(-50px, 0);
  }
}

@keyframes nudge_css {
  0%, 100% {
    transform: translate(0, 0);
  }
  
  50% {
    transform: translate(120px, 0);
  }
  
  80% {
    transform: translate(-50px, 0);
  }
}

@keyframes nudge_php {
  0%, 100% {
    transform: translate(0, 0);
  }
  
  50% {
    transform: translate(-60px, 0);
  }
  
  80% {
    transform: translate(150px, 0);
  }
}

@keyframes nudge_bootstrap {
  0%, 100% {
    transform: translate(0, 0);
  }
  
  50% {
    transform: translate(100px, 0);
  }
  
  80% {
    transform: translate(-40px, 0);
  }
}

@keyframes nudge_cordova {
  0%, 100% {
    transform: translate(0, 0);
  }
  
  50% {
    transform: translate(-150px, 0);
  }
  
  80% {
    transform: translate(40px, 0);
  }
}


.case1_sec3_mysql{
  position: absolute;
  top: 33%;
  left: 39%;
  animation: 
    pulse 3s ease infinite alternate, 
    nudge_my 5s linear infinite alternate;
}

.case1_sec3_mysql:hover {
  animation-play-state: paused;
}

.case1_sec3_ionic{
  position: absolute;
  top: 63%;
  left: 40%;
  animation: 
    pulse 3s ease infinite alternate, 
    nudge_my 4s linear infinite alternate;
}

.case1_sec3_ionic:hover {
  animation-play-state: paused;
}

.case1_sec3_cordova{
  position: absolute;
  top: 53%;
  right: 40%;
  animation: 
    pulse 3s ease infinite alternate, 
    nudge_cordova 4s linear infinite alternate;
}

.case1_sec3_cordova:hover {
  animation-play-state: paused;
}

.case1_sec3_photoshop{
  position: absolute;
  top: 67%;
  left: 33%;
  animation: 
    pulse 3s ease infinite alternate, 
    nudge_ps 5s linear infinite alternate;
}

.case1_sec3_photoshop:hover {
  animation-play-state: paused;
}

.case1_sec3_react{
  position: absolute;
    top: 62%;
    left: 60%;
    animation: 
    pulse 3s ease infinite alternate, 
    nudge_react 5s linear infinite alternate;
}

.case1_sec3_react:hover {
  animation-play-state: paused;
}


.case1_sec3_javascript{
  position: absolute;
    top: 30%;
    right: 10%;
    animation: 
    pulse 3s ease infinite alternate, 
    nudge_js 5s linear infinite alternate;
}

.case1_sec3_javascript:hover {
  animation-play-state: paused;
}

.case1_sec3_angular{
  position: absolute;
    top: 40%;
    right: 80%;
    animation: 
    pulse 3s ease infinite alternate, 
    nudge_js 3s linear infinite alternate;
}

.case1_sec3_angular:hover {
  animation-play-state: paused;
}

.case1_sec3_codeigniter{
  position: absolute;
    bottom: 20%;
    right: 40%;
    animation: 
    pulse 3s ease infinite alternate, 
    nudge_react 5s linear infinite alternate;
}

.case1_sec3_codeigniter:hover {
  animation-play-state: paused;
}

.case1_sec3_bootstrap{
  position: absolute;
    top: 16%;
    left: 45%;
    animation: 
    pulse 3s ease infinite alternate, 
    nudge_css 5s linear infinite alternate;
}

.case1_sec3_bootstrap:hover {
  animation-play-state: paused;
}

.case1_sec3_html{
  position: absolute;
    top: 16%;
    left: 10%;
    animation: 
    pulse 3s ease infinite alternate, 
    nudge_bootstrap 5s linear infinite alternate;
}

.case1_sec3_html:hover {
  animation-play-state: paused;
}

.case1_sec3_css{
  position: absolute;
    bottom: 16%;
    right: 10%;
    animation: 
    pulse 3s ease infinite alternate, 
    nudge_html 5s linear infinite alternate;
}

.case1_sec3_css:hover {
  animation-play-state: paused;
}

.case1_sec3_ajax{
  position: absolute;
    bottom: 17%;
    right: 10%;
    animation: 
    pulse 3s ease infinite alternate, 
    nudge_css 5s linear infinite alternate;
}

.case1_sec3_ajax:hover {
  animation-play-state: paused;
}

.case1_sec3_jquery{
  position: absolute;
  top: 47%;
  left: 28%;
  animation: 
    pulse 3s ease infinite alternate, 
    nudge_html 5s linear infinite alternate;
}

.case1_sec3_jquery:hover {
  animation-play-state: paused;
}

.case1_sec3_php{
  position: absolute;
    top: 42%;
    left: 10%;
    animation: 
    pulse 3s ease infinite alternate, 
    nudge_php 5s linear infinite alternate;
}

.case1_sec3_php:hover {
  animation-play-state: paused;
}


.slider_main{
  /*background-image: url(https://www.ucodice.com/ucodiceNew/images/case_study/slider_background.jpg);*/
  background-size: cover;
  margin: 0 auto;
  text-align: center;
  background-color: #151515;
}

.slider_main h2 {
  color: #ffffff;
  font-size: 18px;
  font-family: lato;
  font-weight: 600;
  margin: 0;
  padding-top: 80px;
  padding-bottom:20px;
}

.slider_main h1 {
  color: #383838;
  font-size: 40px;
  font-family: lato;
  font-weight: 700;
  margin: 0;
  padding-bottom: 50px;
}

.slider_main h3 {
  color: #101010;
  font-size: 40px;
  font-family: lato;
  font-weight: 700;
  margin: 0;
  padding-bottom: 20px;
}
.slider_h3{
  color:#ffffff !important;
}

.case1_sec5{
    width: 100%;
    margin: 0 auto;
    text-align: left;
    padding-left: 12%;
    padding-top: 80px;
}

.case1_sec5 h2 {
  color: #656565;
  font-size: 18px;
  font-family: lato;
  font-weight: 600;
  margin: 0;
  padding-bottom:10px;
}

.case1_sec5 h1 {
  color: #383838;
  font-size: 40px;
  font-family: lato;
  font-weight: 700;
  margin: 0;
  padding-bottom: 30px;
}

.sec5_slider_main{
  background-color: #fff;
  margin: 0 auto;
  text-align: center;
  z-index:9;
}

.feature_info{
  position: absolute;
  left: 10%;
  top: 30%;
  z-index: 999999;
}

.feature_info h1{
  color: #fff;
  text-align: left;
  font-size: 36px;
}

.feature_info h2{
  color: #fff;
  text-align: left;
  font-size: 36px;
}

.feature_info p{
  color: #fff;
  text-align: left;
  font-size: 17px;
  width: 40%;
  padding-top: 10px;
  line-height: 26px;
}

.feature_info2{
  position: absolute;
  left: 8%;
  top: 37%;
  z-index: 999999;
}

.feature_info2 h1{
  color: #fff;
  text-align: left;
  font-size: 30px;
}

.feature_info2 h2{
  color: #fff;
  text-align: left;
  font-size: 30px;

}

.feature_info2 p{
  color: #fff;
  text-align: left;
  font-size: 17px;
  width: 33%;
  padding-top: 10px;
  line-height: 26px;
}

/*Writen by Supriya */

.cd-nav-trigger{
  z-index: 9999; //to make sidemenu visible on mobile view 
}

@media only screen and (max-width: 1023px) and (min-width: 0px){

  .location_box1{
    margin-bottom:5px;
  }
  
  .tech_used{
    padding: 20px 0 ; 
  }

  .case1_sec3 div div{
      animation:unset;
    }
    .case1_sec3_codeigniter , .case1_sec3_ajax , 
    .case1_sec3_bootstrap, .case1_sec3_photoshop ,
     .case1_sec3_javascript, .case1_sec3_html,
      .case1_sec3_jquery, .case1_sec3_php, .case1_sec3_mysql,
       .case1_sec3_react , .case1_sec3_xd , .case1_sec3_css{
        top: unset;
        bottom: unset;
        left: unset;
        right: unset;
        width: 50%;
        display: inline;
        position: initial;
    }

  .case1_sec3 h1{
    font-size:25px !important;
  }

  .case1_mobile_float{
    right:0 !important;
    z-index: 9;
  }

  .case2_banner{
    min-height:520px !important; 
  }
  .upper_footer{ 
    height: 200px;
    padding-top:20px; 
  }

  .upper_footer_img {
    height: 160px;
     /*margin: 0px; */
     width: 100%;
     max-width: 340px;
    margin: 0 auto !important;
    background-size: contain;
    }

    .case1_sec3{
      min-height:450px;
      padding: 10px 10px;
    }

    .case1_sec3 div img{
      width:125px; height:125px;
    } 

 /*   .case1_sec3_jquery {
    position: absolute;
    top: 31%;
    left: 21%;
  }

  /*.case1_sec3_photoshop {
    top: 45%;
  }*/

  

  .case1_sec3_photoshop{
    bottom:10%; top:unset;
  }

  .case2_background_theme_float{
    left: -2px;
    bottom: 20px;
  }
}


/*for header*/

/*ipad devices*/
@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
    .case1_mobile_float{
      top:100px !important;
      width:80% !important;
    }

    .case1_sec2{
     width: 100%; 
    margin: 0 auto;
    text-align: center;
    padding-top: 115px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 50px; 
    }

    .tech_used{
    padding: 20px 0 ; 
  }

  .case1_sec3 div div{
      animation:unset;
    }
    .case1_sec3_codeigniter , .case1_sec3_ajax , 
    .case1_sec3_bootstrap, .case1_sec3_photoshop ,
     .case1_sec3_javascript, .case1_sec3_html,
      .case1_sec3_jquery, .case1_sec3_php, .case1_sec3_mysql,
       .case1_sec3_react , .case1_sec3_xd , .case1_sec3_css{
        top: unset;
        bottom: unset;
        left: unset;
        right: unset;
        width: 50%;
        display: inline;
        position: initial;
    }

    .upper_footer_img{
      width:80% !important;
      max-width: unset;
    }


}


/*@media only screen and (device-width: 768px) and (orientation:landscape){
     .case1_mobile_float{
      top:100px !important;
      transform: translate(10px, 10px);
      width:80% !important;

    }
  }*/


/* for ipad pro*/

@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {


    .case1_mobile_float{
      top:100px !important;
      transform: translate(10px, 10px);
      width:80% !important;

    }

    .case1_sec2{
     width: 100%; 
    margin: 0 auto;
    text-align: center;
    padding-top: 150px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 50px; 
    }

    .case1_sec3 div img{
      width:initial;
      height: initial;
    }

    .tech_used{
    padding: 20px 0 ; 
  }

  .case1_sec3 div div{
      animation:unset;
    }
    .case1_sec3_codeigniter , .case1_sec3_ajax , 
    .case1_sec3_bootstrap, .case1_sec3_photoshop ,
     .case1_sec3_javascript, .case1_sec3_html,
      .case1_sec3_jquery, .case1_sec3_php, .case1_sec3_mysql,
       .case1_sec3_react , .case1_sec3_xd , .case1_sec3_css{
        top: unset;
        bottom: unset;
        left: unset;
        right: unset;
        width: 50%;
        display: inline;
        position: initial;
    }

    .upper_footer_img{
      width:80% !important;
      max-width: unset;

    }


}

/*//ipad pro landscape*/

/*@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) and (orientation:landscape){
     .case1_mobile_float{
      top:100px !important;
      transform: translate(10px, 10px);
      width:80% !important;

    }
  }*/

  /*Updated by vikas */

  .case1_sec3_laravel{
position: absolute;
top: 60%;
left: 29%;
animation:
pulse 3s ease infinite alternate,
nudge_my 4s linear infinite alternate;
}

.case1_sec3_laravel:hover {
animation-play-state: paused;
}
    @media(max-width: 767px) and (min-width: 300px) and (orientation: landscape) {
            .case1_mobile_float {
              width: 55%!important;
              right: 133px !important;
              top: 312px!important;
            }  
          .case1_sec2 {
   padding-top: 40px!important;
}       
        }
         @media(min-width:768px) and (max-width:991px)  and (orientation: portrait) {
            .case1_sec2 {
                margin: 0px 76px !important;
                padding-top: 0px !important;
                padding-left: 0px !important;
            }
              .case1_mobile_float {
                top: 142px!important;
                width: 59% !important;
            }
         }
         @media(max-width: 1024px) and (min-width: 992px) and (orientation: landscape) {
            .case1_mobile_float {
                top: 160px !important;
                width: 60%;
              }
              .case1_sec3_html {
                  top: 25% !important;
              }
              .case1_sec3_bootstrap {
                top: 25% ! important;
              }
              .case1_sec3_mysql {
                top: 48% !important;
              }
              .case1_sec3_photoshop {
                top: 69% !important;
              }
              .case1_sec3_codeigniter {
                bottom: 0px!important;
              }
         }