* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'open sans';
}

img{
  vertical-align: top;
}

html {
  scroll-behavior: smooth;
}

/* Preloader */
.hidden{
  overflow: hidden;
}

.centrado{
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: #000;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lds-facebook {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}

.lds-facebook div {
  display: inline-block;
  position: absolute;
  left: 6px;
  width: 13px;
  background: #cef;
  animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}

.lds-facebook div:nth-child(1) {
  left: 6px;
  animation-delay: -0.24s;
}

.lds-facebook div:nth-child(2) {
  left: 26px;
  animation-delay: -0.12s;
}

.lds-facebook div:nth-child(3) {
  left: 45px;
  animation-delay: 0;
}

@keyframes lds-facebook {
  0% {
    top: 6px;
    height: 51px;
  }

  50%,
  100% {
    top: 19px;
    height: 26px;
  }
}

/* Header */

nav{
  width: 100%;
  position: fixed;
  z-index: 50;
  font-family: 'futura';
}

.nav1{
  background: transparent;
  height: 80px;
  color:#fff;
  z-index: 50;
}
.nav1 a{
  color:#fff;
}

.nav2{
  background: #fff;
  height:80px;
  color:#000;
  box-shadow: 0 0 10px 0 rgba(0,0,0,.5)
}
.nav2 a{
  color:#000;
}

.nav2 .info-open{
  color:#000;
}

.contenedor-nav{
  display: flex;
  margin: auto;
  width: 95%;
  justify-content: space-between;
  align-items: center;
  max-width:1000px;
  height:inherit;
  overflow: hidden; 
}

nav .enlaces a{
  display: inline-block;
  /* padding: 5px 0; */
  margin-right: 17px;
  font-size: 16px;
  font-weight: 300;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  color: inherit;
}

nav .enlaces a:hover{
  border-bottom: 3px solid #BA35D6;
  transition: 0.5s;
}

.enlaces .btn-web{
  background: #D938A9;
  color: #fff;
  padding: 5px 15px 3px ;
  border-radius: 30px;
}

.logo a{
  font-size: 30px;
  font-family: futura, Tahoma, Verdana, Geneva,  sans-serif;
  text-decoration: none;
  cursor: pointer; 
}

.logo span{
  color: #BA35D6;
}

.icono{
  display:none;
  font-size: 24px;
  padding: 23.5px 20px;
}

.main{
  background-image: url("../img/fondo.jpg");
  width: 100%;
  height: 600px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  background-repeat: no-repeat;
}

/* video{
  width: 100%;
  z-index: -1;
  position: relative;
  
} */


/* .video-title h1{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-transform: uppercase;
  position: absolute;
  overflow: hidden;
  color: #fff; 
  font-size: 50px
} */

/* Header finish */


                                  /* Development Page Head*/
.header-info a{
  background-image: url(/img/phone.png);
  background-repeat:  no-repeat;
  background-size: 30px;
  background-position: left;
  padding: 0 0 0 40px;
  font-size: 30px;
  font-weight: bold;
}

.info-open{
  font-size: 12px;
  line-height: 0;
  text-align: center;
  padding-left: 40px;
  color: #fff;
}

.development-hero{
  position: relative;
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  height: 600px;
  background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
}

.hero-content{
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
}

.hero-txt {
  width: 45%;
}

.hero-img img {
  width: 500px;
}

.hero-txt h1{
  color: #fff;
  font-size: 46px;
  font-family: futura, Tahoma, Verdana, sans-serif;
}

.hero-txt h4{
  color: #fff;
  font-size: 22px;
  font-family: futura, Tahoma, Verdana, sans-serif;
}

.hero-txt p{
  color: #fff;
  font-size: 16px;
}

.hero-txt a {
  z-index: 40;
  position: relative;
  display: inline-block;
  width: 150px;
  background: #D938A9;
  border-radius: 50px;
  color: #fff;
  font-weight: 600;
  padding: 10px 15px;
  margin-top: 20px;
  text-align: center;
  cursor: pointer;
}

.container-wave{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  overflow: hidden;
}

.line{
  position: absolute;
  width: 100%;
  overflow: hidden;
  height: 100%;
}

.line-1{
  z-index: 15;
  opacity: 0.5;
}

.line-2{
  z-index: 10;
  opacity: 0.7;
}

.line-3{
  z-index: 5;
}

.wave{
  position: absolute;
  left: 0;
  width: 400%;
  height: 100%;
  background-repeat: repeat no-repeat;
  background-position: 0 bottom;
  transform-origin: center bottom;
}

.wave1{
  -webkit-background-size: 50% 80px;
  background-size: 50% 80px;
}
.wave2{
  -webkit-background-size: 50% 100px;
  background-size: 50% 100px;
  animation: animate 12s linear infinite;
}
.wave3{
  -webkit-background-size: 50% 80px;
  background-size: 50% 80px;
  animation: animate 18s linear infinite;
}

@keyframes animate{
  0%{
      transform: translateX(0) translateZ(0) scaleY(1);
  }
  50%{
      transform: translateX(-25%) translateZ(0) scaleY(0.5);
  }
  100%{
      transform: translateX(-50%) translateZ(0) scaleY(1);
  }
}


                              /* Main */

/* About start */
.container-about{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;  
  margin: 80px 0;
}

.container-ourservice{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;  
  margin: 80px 0;
  flex-direction: row-reverse;
}

.container-ourservice img{
  width: 45%;   
}

.content h3{
  text-align: center;
  font-weight: 600;
  font-size: 28px;
  color: #BA35D6;
  padding-bottom: 20px;
  font-weight: 300;
  
}
.container-about img{
  width: 45%;   
}
.content{
  width: 40%; 
}
.content a{
  text-decoration: none;
  display: block;
  position: relative;
  background-color:transparent;
  color: #BA35D6;
  text-align: center;
  margin: auto;
  margin-top: 40px;
  font-family: 'futura';
}
.button{
  width: 150px;
  font-weight: 300;
  border: 2px solid #BA35D6;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 10px;
  transition: color 0.4 linear;
  cursor: pointer;
}
.button:hover{
  color: #fff;
}

.button::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #BA35D6;
  z-index: -1;
  transition: transform 0.5s;
  transform-origin: 0 0;
  transition-timing-function: cubic-bezier(0, 5, 1.6, 0.4 ,0.7);
}
.button::before{
  transform: scaleX(0);
}
.button:hover::before{
  transform: scaleX(1);
}



/* Slide start */
.slider-container{
  background: #f6f6f6;

}
.slider{
width: 100%;
margin: auto;
overflow: hidden;
}

.slider ul{
  display: flex;
  padding: 80px 0;
  width: 400%;
  animation: cambio 20s infinite alternate;
}

.slider ul:hover{
  animation-play-state: paused;
  cursor: pointer;
}
.slider li{
  width: 100%;
  list-style: none;
}
.slider img{
  width: 100%;
  height: 400px;
  object-fit: cover;
}
@keyframes cambio{
  0%{margin-left: 0%;}
  20%{margin-left: 0%;}

  25%{margin-left: -100%;}
  45%{margin-left: -100%;}

  50%{margin-left: -200%;}
  70%{margin-left: -200%;}

  75%{margin-left: -300%;}
  100%{margin-left: -300%;}
}
/* Slide finish */


/* Company detail start */
.container{
  width: 80%;
  max-width: 1150px;
  overflow: hidden;
  margin: auto;
}
.container  h2{
  justify-content: center;
  display: flex;
  margin-top: 60px;
  margin-bottom: 40px;
  font-size: 30px;
  color: #2f3030;
  font-family: 'futura';
}
  
.table{
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 40px;
}
.table th{
  width: 25%;
  padding: 15px;
  border-top: 1px solid rgb(143, 141, 141) ;
  color: #3C4449;
  font-weight: 300;
  text-align: left;
  
}
.table td{
  border-top: 1px solid rgb(143, 141, 141) ;
  color: #3C4449;
  padding: 15px;
  font-weight: 300;
}
  
.table .map a{
  margin-left: 15px;
  padding: 5px;
  text-decoration: none;
  border: 1px solid rgb(190, 190, 190);
  border-radius: 5px;
  font-size: 14px;
  color:#474c4f;
}

.table .tel a{
  font-size: 16px;
  color:#dc143c;
  font-weight: 600;
}
/* Company detail finish */


/* Contact Us Botton */
.contact-us{
background-image: url(/img/contact.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 300px;
}

.contact__content{
  width: 80%;
  padding: 60px 0;
  margin: 0 auto;
}
.contact__content h3{
  font-size: 24px;
  text-align: center;
  color: #fff;
}
.contact__content a{
  display: block;
  text-decoration: none;
  background-color: #D938A9;
  border-radius: 100px;
  width: 200px;
  padding: 10px 0;
  text-align: center;
  color: #fff;
  margin: 50px auto;
  font-weight: 700;
  font-size: 18px;
}

.form_wrap{
  width: 80%;
  height: auto;
  margin: 50px auto;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}

@media (max-width: 500px) {
.contact__content h3{
  font-size: 22px;
}
.contact__content a{
  margin: 25px auto;
}
.contact__content{
  width: 90%;
  padding: 50px 0;
  margin: 0 auto;
}
}


/* Contact Form*/
.cantact_info::before{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #dc143c;
  opacity: 0.8;
}

.cantact_info{
  width: 100%;
  height: 200px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url('/img/form-fondo.jpg');
  background-size: cover;
  background-position: center center;
}

.info_title,
.info_items{
  position: relative;
  z-index: 2;
  color: #fff;
}

.info_title{
  margin-bottom: 20px;
}

.info_title span{
  font-size: 70px;
  display: block;
  text-align: center;
  margin: 20px 0 ;
}

.info_title h2{
  font-size: 24px;
  text-align: center;
}

.info_title a,h4{
  font-size: 24px;
  /* text-align: center; */
  color: #fff;
}

.info_title p{
  font-size: 14px;
  text-align: center;
  color: #fff;
}

.info_items p{
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-size: 16px;
  color: #fff;
}

/* お問い合わせ*/
.form-header img{
  width: 100%;
  height: 80px;
  overflow: hidden;
  object-fit: cover;
  background-position: center; 
  background-size: cover;
}

form.form_contact{
  width: 100%;
  padding: 30px 60px;
}

form.form_contact h2{
font-size: 20px;
font-weight: 600;
color: #dc143c;
margin-bottom: 30px;
}

form.form_contact .user_info{
  display: flex;
  flex-direction: column;
}

form.form_contact label span{
  color: #fa0606;
  font-size: 18px;
}

.user_info p ,a{
  font-size: 14px;
}

form.form_contact input,
form.form_contact textarea{
  width: 100%;
  padding: 8px 0px 5px;
  margin-bottom: 20px;
  border: none;
  border-bottom: 1px solid #D1D1D1;
  font-family: 'Open sans';
  font-size: 14px;
  font-weight: 400;
}

form.form_contact textarea{
  max-width: 100%;
  min-width: 100%;
  min-height: 100px;
  max-height: 100px;
}

form.form_contact input[type="submit"]{
  width: 180px;
  background: #dc143c;
  padding: 10px;
  border: none;
  border-radius: 25px;
  margin-top: 30px;
  align-self: center;
  color: #fff;
  font-family: 'Open sans';
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

form.form_contact input[type="submit"]:hover{
  background: #3371B6;
}

/* Ventana de errores*/
.modal_wrap{
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.7);

  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;

  display: flex;
  justify-content: center;
  align-items: center;
}

.mensaje_modal{
  background: #fff;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
  width: 400px;
  padding: 30px 20px 15px;
}

.mensaje_modal h3{
  text-align: center;
  font-family: 'Ubuntu';
font-size: 20px;
font-weight: 400;
}

.mensaje_modal h3:after{
  content: '';
display: block;
width: 100%;
height: 1px;
background: #C5C5C5;
margin: 10px 0px 15px;
}

.mensaje_modal p{
  font-size: 16px;
  color: #606060;
}

.mensaje_modal p:before{
  content: "\f00d";
  font-family: FontAwesome;
  display: inline-block;
  color: #E25151;
  margin-right: 8px;
}

#btnClose{
  display: inline-block;
padding: 3px 10px;
margin-top: 10px;

background: #E25151;
color: #fff;
border: 2px solid #B14141;
cursor: pointer;
}

.privacy a{
  text-decoration: none;
  color: #3371B6;
}

/* Send Page*/
.send_wrap{
  width: 90%;
  padding: 30px;
  height: auto;
  margin: 120px auto;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}

.send-message{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.send-message h1{
  font-size: 33px;
  display: block;
  text-align: center;
  margin-bottom: 20px;
}

.send-message a{
  display: block;
  padding: 10px 30px;
  background: #dc143c;
  text-decoration: none;
  color: #fff;
  margin-top: 30px;
  border-radius: 100px;
}

.send-message a:hover{
  background: #c01134; 
}


@media (max-width: 768px) {
.form_wrap{
  width: 90%;
}
}

@media (max-width: 500px) {
.form_wrap{
  width: 95%;
}

.send-message h1{
  font-size: 24px;
}

.info_title span{
  font-size: 70px; 
}

.info_title h2{
  font-size: 26px;
}

.info_items p{
  font-size: 16px;
  font-weight: 300;
}

form.form_contact{
  padding: 30px 20px;
}

form.form_contact h2{
font-size: 22px;
}
}

/* Footer start*/
.footer-container{
  background: #f2f2f2;
}

.footer-detail{
  display: block;
  justify-content: center;
  text-align: center;
  padding-top: 50px;

}

h3{
  color:#474c4f;
  font-size: 20px;
  font-family: futura, Verdana, Geneva, Tahoma, sans-serif;
}

p{
  color:#474c4f;
  padding-top: 10px;
}

.social ul{
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
}

.social li i{
  padding: 20px 10px;
  font-size: 20px; 
}

.social li .fab{
  color: #474c4f;
}

.copyright{
  text-align: center;
  padding: 20px 0;
  font-size: 12px;
  font-weight: 300;
  font-family: 'futura';
}
/* Footer finish*/


                            /***** about-us PAGE start *****/
.header-image{
  position: relative;
}

.header-image h1{
  display:flex;
  position: absolute;
  justify-content: center;
  width: 100%;
  top: 40%;
  left: 0%;
  font-family: 'optima','cursive', 'Arial Narrow', Arial, sans-serif;
  font-size: 50px;
  color: #fff;
}
.header-image img{
  width: 100%;
  height: 400px;
  overflow: hidden;
  object-fit: cover;
  background-attachment: fixed;
  background-position: center; 
  background-size: cover;
}

/* Our Philosophy start */
.philosophy-container{
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: auto;
}

.content-text{
  width: 32%;
  margin: 60px auto 0;
  padding: 40px 10px;
  text-align: center;
  background: #f2f2f2;
  opacity: 0.7;
  z-index: 1;
  border-bottom: 2px solid #BA35D6;
}

.philosophy-img img{
max-width: 100%;
height: auto;
display: block;
margin: -30px auto;
z-index: -5;
margin-bottom: 50px;
}

.philosophy-img{
  max-width: 100%;
  margin: auto;
}

.content-text h3{
  color: #BA35D6;
}

.content-text p{
  color: #111111;
}


/* What we do start */
.our-work{
  background: #f6f6f6;
  margin: 20px 0;
  padding: 30px 0;
}

.our-work-content{
  text-align: center;
  width: 80%;
  margin: auto;
}

.our-work-content h3{
  margin-bottom: 15px;
}


/* CEO message start */
.ceoword-container{
  width: 90%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: auto;
  position: relative;
}
.ceoword-container img{
  margin: 50px auto 80px;
  border-radius: 5px;
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, .3)
}

.word-content{
  position: absolute;
  background: #BA35D6;
  opacity: 0.9;
  text-align: center;
  padding: 20px;
  bottom: 30px;
  width: 40%;
}

.word-content p{
  color: #fff;
}

.word-content h3{
  color: #fff;
}

.word-content a{
  display: block;
  margin: 20px auto 5px;
  text-decoration: none;
  background: #fff;
  border-radius: 100px;
  width: 120px;
  padding: 5px;
  color: #BA35D6;
  cursor: pointer;
}
/***** about-us PAGE finish *****/



                            /***** Service PAGE start *****/
.about-services{
  text-align: center;
  margin: 50px 0;
  padding: 50px 0;
  background: #f2f2f2;
}
.about-service{
  width: 90%;
  margin: auto;
}

a{
  text-decoration: none;
}

.Carousel{
  display: flex;
  width: 100%;
  align-items: center;
}

.about-service  h2{
  font-size: 33px;
}

.about-service  p{
  font-size: 16px;
  padding-bottom: 30px;
}

/* images */

.slick-list{
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  padding: 10px 0px;
  margin: 0px auto;
  max-width: 90vw;
  overflow: hidden;
}
.slick-track{
  position: relative;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  transition: .5s ease-in-out;
}
.slick{
  position: relative;
  width: 275px;
  padding: 0 18px;
  float: left;
  box-sizing: border-box;
  display: flex;
  height: 100%;
}
.slick h4{
  position: absolute;
  z-index: 1;
  font-size: 22px;
  line-height: 23px;
  color: #fff;
  padding: 15px;
}
.slick h4 small{
  font-size: 15px;
  display: block;
}
.slick a img{
  object-fit: cover;
  height: 300px;
  width: 100%;
  border-radius: 4px;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,.2);
  transition: .3s ease-in-out;
}
.slick a img:hover{
  opacity: .85;
}

/* buttons */
.slick-arrow{
  border-radius: 30px;
  background-color: #fff;
  position: absolute;
  z-index: 4;
  width: 48px;
  height: 48px;
  text-align: center;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,.15);
  border: 0;
  cursor: pointer;
}
.slick-arrow:focus{
  outline: 0;
}
.slick-arrow svg{
  width: 12px;
  height: 100%;
  color: rgba(0,0,0,.7);
}
.slick-prev{
  left: 0px;
}
.slick-next{
  right: 0px;
}

/* Benefit & Rental*/
.service-benefit, .rental-service{
  text-align: center;
  /* margin: 50px 0; */
  padding: 50px 0;
}

.service-bene, .rental-service{
  width: 90%;
  margin: auto;
}

.service-benefit h2, .rental-service h2{
  font-size: 33px;
}

.service-benefit p, .rental-service p{
  font-size: 16px;
  padding-bottom: 30px;
}

.benefit, .rental-content{
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
}
.benefit img{
  width: 100%;
}

.benefit-txt h4, .rental-txt h4{
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 33px;
}


/***** Service PAGE finish *****/



                                      /***** Members PAGE start *****/
.member-container{
display: flex;
flex-wrap: wrap;
width: 80%;
justify-content: space-evenly;
text-align: center;
margin: 80px auto;

}
.member{
  width: 30%;
}

.member img{
  width: 60%;
  border-radius: 50%;
  overflow: hidden; 
}

.member p{
  padding: 10px 0 5px;
}

.member h5{
  margin-bottom: 50px;
  font-size: 16px;
}



                                        /***** CEO message Page start *****/
.message-container{
  display: flex;
  justify-content: center;
  text-align: center;
  width: 90%;
  margin: auto;
}
.message img{
  width: 65%;
  margin: 60px auto;
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, .5);
}
.message-txt h5{
  font-size: 28px;
  margin-bottom: 20px;
}
.message p{
  margin-bottom: 80px;
}


                                      /***** RENTAL Page start *****/

.rental-container{
  display: block;
  width: 90%;
  text-align: center;
  margin: 0 auto 80px;
}

.rental h3{
  color: #012e5a;
  background-color: #e9eef9;
  /* border-radius: 0 50px 50px 0; */
  padding: 18px;
  font-size: 22px;
  margin: 80px auto 0;
  text-align: center;
}

.money span{
  font-size: 18px;
  color: #B14141;
}

.rental h6{
  margin: 15px 0 0;
  font-size: 14px;
  color: #474c4f;
}

.rental-container p{
  padding: 20px 0;
}
  
.rental img{
  max-width: 60%;
  overflow: hidden; 
}
  
.rental p{
  padding: 0 0 5px;
}

.rental-table__content{
  display: table;
  text-align: center;
  width: 100%;
  margin: 20px auto 30px;
  color: #404141;
}
  
.d01{
  background-color: #ededed;
}
  
.rental-table__content td{
  width: 25%;
  text-align: left;
  padding: 8px 10px;
}
  
.rental-table__content th{
  text-align: left;
  padding: 8px 10px;
}

.table-coment{
  width: 90%;
  margin: auto;
  font-size: 14px;
  padding-bottom: 30px;
}

.price-day{
  display: flex;
  justify-content: space-evenly;
}

.price-day img{
  width: 70%;
  margin-bottom: 50px;
}


  
@media screen and (max-width: 500px){
.rental img{
  width: 90%;
}

.rental-table__content th, td{
  font-size: 13px;
}

.price-day img{
  width: 100%;
}
}




                                  /***** Development Page client start *****/

/***** Subsidy Support start *****/                                  
/* .section__title{
  padding-top: 70px;
}
.support-content{
  width: 90%;
  max-width: 1150px;
  margin: 50px auto;
  border: solid 1px rgb(60, 175, 252);
  padding: 30px;
  box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.support-content h2{
  color:  rgb(60, 175, 252);;
}

.subsidy-content{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.subsidy-content a{
  display: inline-block;
  background: rgb(31, 160, 247);
  color: #fff;
  font-size:18px;
  padding: 10px 40px;
  margin-top: 20px;
  border-radius: 5px;
  font-weight: bold;
}

.subsidy-table__content{
  display: table;
  text-align: center;
  width: 90%;
  max-width: 1150px;
  margin: 20px auto 10px;
  color: #404141;
  margin-top: 30px;
}

.d01{
  background-color: #ededed;
}
.t01{
  width: 20%; 
}

.subsidy-table__content td{
  text-align: left;
  padding: 8px 10px;
}

.table-coment{
  width: 90%;
  margin: auto;
  font-size: 14px;
  padding-bottom: 30px;
}  */
/***** Subsidy Support finish *****/    


/***** Campaing Start *****/ 
/* 
.campaing-wrapper{
  background-image: url(/img/haikei-pc.jpg);
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 630px;
  margin: 80px auto;
 position: relative;
} */

.campaing-head{
  display: flex;
  justify-content: center;
}

.campaing-head img{
  margin-top: -20px;
  width: auto;
  padding-top: 60px;
}

.campaing-list{
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin: 50px 50px 0 50px;
}

.campaing-foo{
  display: block;
  text-align: center;
  margin-top: 4px;
  color: #fff;
  font-size: 20px;
}

.campaing-foo__finish{
  background: #fff;
  padding: 5px 6px;
  border-radius: 3px;
  color: #b80303;
  font-weight: bold;
}

.campaing-table__content{
  display: table;
  text-align: center;
  width: 90%;
  margin: 20px auto 60px;
  color: #404141;
}

.d01{
  background-color: #ededed;
}

.d01 span{
  color: #e70404;
}

.campaing-table__content td{
  width: 50%;
  text-align: left;
  padding: 8px 10px;
}

.table-coment{
  width: 90%;
  margin: auto;
  font-size: 14px;
  padding-bottom: 30px;
}

.expiration{
  display: flex;
  justify-content: center;
  width: 100%;
  margin: -40px 0 60px;
}

.expiration p{
  background-color: #e70404;
  padding: 10px 35px;
  color: rgb(255, 255, 255);
  border-radius: 30px;
  font-weight: 800;
}


@media screen and (max-width: 768px){
/* .campaing-wrapper{
  background-image: url(/img/haikei-sp.jpg);
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 945px;
} */

.campaing-head img{
  width: 90%;
}

.campaing-item__1{
  padding: 20px 0;
}

.campaing-item__1 img{
  width: auto;
}

.campaing-foo{
  background: #b80303;
  padding: 10px;
  margin-top: 30px;
}

}

@media screen and (max-width: 600px){
.hero-img img {
  width: 350px;
}   

/* .campaing-wrapper{
  height: 895px;
} */
.subsidy-content img{
  margin-bottom: 20px;
}
}

@media screen and (max-width: 500px){
.header-info a{
  font-size: 15px;
  background-size: 25px;
  padding: 0 0 0 30px;
}

.info-open{
  font-size: 10px;
  padding-left: 30px;
}

.hero-img img {
  width: 300px;
}   

.hero-txt {
  width: 80%;
  padding-top: 60px;
}

.hero-txt h1{
  font-size: 26px;
}
.hero-txt h4{
  font-size: 18px;
}
.hero-txt p{
  font-size: 13px;
}
.hero-txt a {
  margin-left: 22%;
}

/* .campaing-wrapper{
  height: 810px;
} */

.campaing-head img{
  width: 100%;
  margin-top: -10px;
}

.campaing-item__1 img{
  width: 330px;
}

.d01 th{
  font-size: 12px;
}

/* .campaing-foo{
  font-size: 16px;
} */

.section__title{
  font-size: 28px;
}

.section-title__text{
  font-size: 16px;
  width: 90%;
}
.campaing-foo{
  font-size: 15px;
  margin-top: 40px;
}
}
/***** Campaing finish *****/ 


/***** Subsidy Support start *****/ 
@media screen and (max-width: 500px){
.support-content h2{
  font-size: 20px;
}
.support-content{
  padding: 10px;
}
}
/***** Subsidy Support finish *****/ 


/***** Web Manegement start *****/ 
.web-manegement{
  display: flex;
  justify-content: space-evenly;
  max-width: 1150px;
  margin: 0 auto;
}
.web-manegement img{
  width: 50%;
  margin-bottom: 50px;
}

.hp-plan{
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1150px;
  margin: 0 auto;
}

.hp-plan img{
  width: 45%;
  height: auto;
  margin-bottom: 50px;
}

.plan-btn {
  width: 250px;
  font-size: 18px;
  text-align: center;
  margin: 0 auto 60px;
  background: #4FD1C5; 
  background: linear-gradient(90deg,  rgb(0, 198, 251) 0%, #005bea 100%);
  border: none;
  border-radius: 1000px;
  box-shadow: 8px 8px 24px rgba(0, 198, 251,.64);
  transition: all 0.3s ease-in-out 0s;
  cursor: pointer;
  outline: none;
  position: relative;
  padding: 15px;
  }

.plan-btn a{
  color: #fff;
  position: relative;
 }

.plan-btn::before {
  content: '';
  border-radius: 1000px;
  min-width: calc(250px + 12px);
  min-height: calc(60px + 12px);
  border: 1px solid #005bea;
  box-shadow: 0 0 30px rgba(0,198, 251,.64);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all .3s ease-in-out 0s;
}

.plan-btn:hover, .plan-btn:focus {
  color: #313133;
  transform: translateY(-6px);
}

.plan-btn:hover::before, .plan-btn:focus::before {
  opacity: 1;
}

.plan-btn::after {
  content: '';
  width: 30px; height: 30px;
  border-radius: 100%;
  border: 3px solid #005bea;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ring 1.5s infinite;
}

.plan-btn:hover::after, .plan-btn:focus::after {
  animation: none;
  display: none;
}

@keyframes ring {
  0% {
    width: 30px;
    height: 30px;
    opacity: 1;
  }
  100% {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}


@media screen and (max-width: 600px){
.web-manegement img{
  width: 80%;
}
}

@media screen and (max-width: 500px){
.hp-plan{
  flex-direction: column;
  align-items: center;
}
.hp-plan img{
  width: 90%;
}
}
/***** Web Manegement finish *****/


/***** Price Table start *****/ 
.price-table{
  background: #f8f7f7;
  padding: 1px 0 50px;
}

.price-container {
	width: 100%;
	max-width: 1150px;
	margin: auto;
	padding: 0 10px 0;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.tabla {
	background: rgba(0,0,0,.7);
	width: 340px;
	color: #fff;
	text-align: center;
	border-radius: 10px;
	cursor: pointer;
	overflow: hidden;
	transition: .5s;
	margin-bottom: 15px;
}

.tabla:hover {
	transform: scale(1.05);
}

.titulo {
	background: #00CD2A;
	padding: 15px 0;
}

.titulo .fas {
	font-size: 50px;
	margin-bottom: 10px;
}

.titulo h2 {
	font-size: 24px;
	text-transform: uppercase;
}

.precio {
	padding: 10px 0;
}

.precio h3 {
	font-size: 30px;
	color: #00CD2A;
}

.precio h3 span {
	font-size: 40px;
	margin-left: 5px;
}

.descripcion ul li {
	list-style: none;
	padding: 10px 0;
	border-bottom: 1px solid rgba(255,255,255,.5);
}

.descripcion ul li .fa-check {
	color: #00CD2A;
}

.descripcion ul li .fa-times {
	color: #FF4032;
}

/* .enlace a {
	display: inline-block;
	text-decoration: none;
	background: #00CD2A;
	color: #fff;
	margin: 40px 0;
	padding: 10px 40px;
	border-radius: 50px;
	font-size: 22px;
	text-transform: uppercase;
	transition: .3s;
}	 */

.tabla:nth-child(2) .titulo,
.tabla:nth-child(2) .enlace a {
	background: #3e82f0;
}

.tabla:nth-child(2) .precio h3 {
	color: #3e82f0;
}

.tabla:nth-child(3) .titulo,
.tabla:nth-child(3) .enlace a {
	background: #ff4032;
}

.tabla:nth-child(3) .precio h3 {
	color: #ff4032;
}

@media screen and (max-width: 750px) {
.tabla {
	width: 225px;
}

.titulo .fa {
	font-size: 40px;
	margin-bottom: 5px;
}

.titulo h2 {
	font-size: 18px;
}

.precio {
	padding: 4px 0;
}

.precio h3 {
	font-size: 20px;
}

.enlace a {
	margin: 20px 0;
	padding: 8px 20px;
	font-size: 18px;
}

.enlace a:hover {
	transform: scale(1.05);
}
	
.tabla:hover {
	transform: none;
}
}

.price-banner{
  display: flex;
  justify-content: space-around;
}
.price-banner img{
  max-width: 100%;
  padding-top: 50px;
}

.price__btn a{
  display: block;
  text-decoration: none;
  background-color: #D938A9;
  border-radius: 100px;
  width: 220px;
  padding: 15px 0;
  text-align: center;
  color: #fff;
  margin: 50px auto 0;
  font-weight: 700;
  font-size: 18px;
}
.price__btn a:hover{
  background-color: #BA35D6;
}

@media screen and (max-width: 470px) {
.tabla {
	width: 300px;
  margin-bottom: 40px;
}
}

/***** WEB制作事例 start *****/ 
.client{
  /* background: #f8f7f7; */
  width: 100%;
}

.section__title{
  text-align: center;
  font-size: 36px;
  margin-top: 30px;
}

.section__title b{
  color: #BA35D6;
}

.section-title__text {
  text-align: center;
  margin: auto;
  padding: 20px 0 70px;
  width: 80%;
}

.client__list{
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 auto;
  max-width: 1150px;
  margin-bottom: 50px;
}

.client__text-01{
  font-size: 14px;
  color: #656768;
}

.client__text-02{
  font-size: 16px;
  color: #111;
  font-weight: bold;
}

.client-list__item{
  padding-bottom: 60px; 
}

.client-list__item img{
  box-shadow: 2px 1px 3px 1px #b5b6b8;
}

.client-list__item img:hover{
  transform: scale(1.05);
}

.contact-us__develop{
  background-image: url(/img/contact-develp.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 300px;
  }

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

.hero-txt h1{
  font-size: 36px;
}

.hero-txt {
  width: 45%;
}

.hero-img img {
  width: 400px;
}

.campaing-list{
  margin: 50px 0 0 0;
}
}

@media screen and (max-width: 768px){
.hero-content{
  flex-direction: column-reverse;
}

.hero-txt {
  width: 80%;
  margin-top: -140px;
}

.hero-img img {
  width: 400px;
}
.hero-txt h1{
  font-size: 36px;
}
.hero-txt p{
  font-size: 13px;
}
}

@media screen and (max-width: 500px){
.hero-img img {
   width: 330px;
}
.client-list__item img{
  width: 300px;
}
}
/***** WEB制作事例 finish *****/ 
/***** Development Page client finish *****/



                                            /* Responsive start */
/* nav start */
@media screen and (max-width: 800px){
.content h3{
  font-size: 22px;
}
}

@media screen and (max-width: 700px){
  .nav2{
    color: #fff;
  }

  .icono{
    display:block;
    cursor: pointer;
  }

  .enlaces{
    position: fixed;
    top:80px;
    background: #2c3e50;
    opacity: 0.8;
    left: 0;
    height: 100%;
    transition: 1s;
    width: 0;
    overflow: hidden;
  }

.enlaces a{
   display: block;
   width: 100%;
   height: 50px;
   padding: 20px;
   text-align: center;
   color:#111;
}

.enlaces .btn-web{
  padding: 15px 0;
  border-radius: 0;
}


/* .video h1{
  height: 50%;
  font-size: 26px;
} */


/* about us btn start */
.container-about{
  flex-direction: column;
}

.container-about img{
  width: 90%;
}

.container-ourservice img{
  width: 90%;
}

.content{
  width: 90%;
}
.content h3{
  margin-top: 15px;
  font-size: 24px;
}
.content p{
  font-size: 17px;
}

.member-container{
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 80px auto;
}
.member{
  width: 45%;
  margin: auto;
}

/* our philosophy start */
.philosophy-container{
display: flex;
flex-wrap: wrap;
}
.content-text{
  width: 40%;
}
.philosophy-img{
  margin-top: -300px;
}

/* ceo message start */
.ceoword-container img{
  width: 80%;
}

.word-content{
  margin-top: 150px;
  width: 60%;
}
.word-content h3{
font-size: 20px;
}
.word-content p,a{
  font-size: 14px;
  }

  /* Benefit start */
.benefit-txt h4{
  font-size: 28px;
}
}


@media screen and (max-width: 500px){
.nav1 a{
  font-size: 24px;
}
.nav2 a{
  font-size: 24px;
}


/* header de cada pagina */
.header-image img{
  height: 250px;
}

.main{
  width: 100%;
  height: 400px;
}
/* .video-title h1{
  font-size: 18px;
  margin-top: 20px;
} */

/* about us btn start */
.content p{
  font-size: 15px;
}

/* slider */
.slider img{
  height: 300px;
}

.company-detail .container{
  width: 90%;
}

.header-content h1{
  font-size: 40px;
}

/* members start */
.member-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  width: 100%;
  margin: 80px auto;
}

.member{
  width: 50%;
  margin: auto;
}


/* our philosophy start */
.philosophy-container{
  display: flex;
  flex-wrap: wrap;
}

.content-text{
  width: 80%;
  opacity: 1;
}

.philosophy-img{
  display: none;
}

/* ceo message start */
.ceoword-container img{
  width: 90%;
}
.word-content{
  width: 70%;
  padding: 10px 5px;
}

.word-content h3{
font-size: 16px;
}

.word-content p,a{
  font-size: 12px;
}
/* ceo message Page */
.message img{
  width: 100%;
}
.message-txt h5{
  font-size: 24px;
}

 /* SERVICE start */
.about-service{
 width: 90%;
}

 .about-service h2{
  font-size: 28px;
}

 .about-service p{
  font-size: 16px;
}

 /* Benefit start */
 .service-bene h2{
  font-size: 28px;
 }

 /* .social li i{
  font-size: 25px;
} */
}

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

/* .video-title h1{
  font-size: 16px;
  margin-top: 10px;
} */

/* about us btn start */
.content h3{
  font-size: 20px;
  padding-bottom: 10px;
}

.content p{
  font-size: 14px;
}

/* company detail start */
.container h2{
  font-size: 26px;
}

.table tbody{
  font-size: 14px;
}

.company-detail .container{
  width: 95%;
}

/* Benefit start */
.benefit-txt h4{
  font-size: 20px;
}
.social li i{
  font-size: 16px; 
}
}

/****************** Privacy Policy *****************/
.privacy-container{
  width: 90%;
  margin: 50px auto;
  color: #44484a;
  -webkit-font-smoothing: antialiased;
}

.paragraph-header h1{
  padding-bottom: 30px;
  font-size: 24px;
  font-weight: 400;
}

.paragraph-header{
  padding-bottom: 50px;
}

.paragraph h2{
  border-bottom: 1px solid #ddd;
  padding-bottom: 4px;
  font-size: 18px;
  font-weight: 600;
  margin: 24px 0;
}

.paragraph p,ol,li{
  padding-bottom: 20px;
}

.paragraph ol{
  padding-left: 16px;
}