#btn-menu {
    display: none;
}


header label{
    color: #fff;
	    display: none;
	    font-size: 50px;
	    position: absolute;
	    right: 10px;
	    top: 20px;
	    z-index:7;
    
}


header label:hover {
    cursor: pointer;
    color: black;
  
}








.header_menu{
    width: 450px;
    display: flex;
   
 
    list-style: none;
    margin-top: 1.5%;
    
    
}
.header_menu ul{
    
    width: 100%;
    display: flex;
    margin: 0;
    list-style: none;
    transition: all 1s;
    
}








.header_menu li a {
    display: block;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
    font-weight: 200;
}

  
    .header_menu a:hover{
    color: black;
        font-weight: 700;
}





@media screen and (max-width:550px){
/*------- base----*/
 .container{ 
    width: 100%;
    }
p {
	font-size: 13px;
	
    
}

p.mini{
	font-size: 12px;
	
}

     .title {
	font-size: 25px;
	font-weight: 900;
	line-height: 100px;    
	top: -15px;
	margin-bottom: 40px;
}

     
    
.title-bg {
	font-size: 40px;
	top: 0px;
	font-weight: 200;    

}
   
.container-portfolio .title {
	margin-bottom: 0px;
}

/*-------// base----*/
    
/*------- header----*/
   
    
header label{
        display: block;
	    right: 5px;
	    top: 20px;   

}
    
    
header label:hover {
    cursor: pointer;
    background: rgba(255,255,255,0.1);
    color: black;

   
}

      
    #btn-menu:checked ~ .header_menu{
        margin-top: 0%;

    }
    
.header_menu {
    
        text-align: center;
        position: absolute;
        width: 100%;
        margin-top:-130%;
        transition: all 1s ;
  
    
    
    }
    
    .header_menu ul {
        
        padding: 0;
        margin-top: 23%;
        flex-direction: column;
       background: linear-gradient(90deg,rgba(96, 118, 186,1) 0%,rgba(5, 10, 48,1) 100%);
    }

  
    
   
    .header_menu li a {
    width: 100%;
    display: block;
    padding: 30px 0px;
    color: white;
    text-decoration: none;
    
    font-weight: 400;
    

    
}
    
    
    .header_menu a:hover{
    color: black;
        font-weight: 500;
    
}
    

/*------- header ----*/
    
/*------- home----*/    
    
.header {
    width: 100%;
	height: 90px;
	padding-top: 0;

}
.container_header {
    width: 100%;
}


.log{
    float: left;
    margin-top: 8%;
	height: 39px;
	width: 129px;
	
	}
    
.social_header { 
    
    float: left;
    width: 180px;   
    margin-top: 10%;
    text-align: center;
}
.social_header em {
    padding: 0 3px 0 3px;
    font-size: 23px;
}
.home{
    width: 100%;
}  
    
.container-home{   
    max-width: 550px;
    height: 350px;
    position: relative;
    overflow: hidden;
}

    
.imgfondo{  
    background-size:contain;
    background-size: 200%; 
    height: 350px;
    
}

.slider-text-wrapper{
	top: 50%;
	width: 100%;
	height: 83px;
    text-align: end;
	margin-top: -3.5%;
   padding:3px 20px;
	
}

.big{
		font-size: 12px;
		line-height: 12px;
}


.b-btn1 {
    font-size: 12.7px;
    width: 190px;
    height: 50px;
    padding: 2px;
     margin: 0 3px;
}
.b-btn2 {
    font-size: 12px;
    width: 120px;
	color: #ffffff;
     margin: 0 0px;
}
/*------- //base----*/    
    


    
/*------  SKILLS BLOCK  ------*/
.skills{
        margin-top: 2%;
        width: 100%
    }
.container-slider{
    height: 230px;
    max-width: 100%;     
}
    
.skills-block {
    width: 100%;
    max-width: 290px;
    padding-top: 3%; 
}
    
.skills-block-slider{
    width: 100%;
    height: 190px;
    margin: 0% 0% 0% 0%;
   
}
   
.skills-wrapper {
    height: 210px;
    width: 72.5px;
    font-size: 10px;
    line-height: 13px;
    border-bottom: 1px solid #2b2b2b;
    margin: 0 1% 0 1%;
    padding: 0 0 0 0;
	}

.btn-skills{
    width: 27px;
    height: 27px;
    font-size: 27px;
    line-height: 23px;
}

.skills-name {
		margin-bottom: 10px;

	}

.skills-block em{
		font-size: 20px;
		margin-bottom: -50px;
	}

 .skills .mini{
     
     font-size: 10px;
        
    }

/*------  //SKILLS BLOCK  muwstra ------*/

/*------  //SERVICES BLOCK  muwstra ------*/ 
.services {
    
    height:100%;
    width: 100%;
    margin-top: 5%;
}

.container-services{
    height: 500px;
    max-width: 500px;
}
   
.ser-slide input[type="radio"] + label {
    padding: 0 5px 0 5px;
    width: 70px;
    height: 70px;
}
.serv-slide input[type="radio"] + label {
     padding: 0 5px 0 5px;
    width: 70px;
    height: 70px;
}

.ser-slide {
    
    width: 100%;
    height: 160px; 
    margin-top: -18%;
}

.serv-slide {
    width: 100%;
    height: 150px;
    margin-top: 7%;
}
    
.services-slide {
    margin-top: 11%;
}

    
.services p {
    width: 100%;
    text-align: center;
    margin-top: 30%;
    
	}


.services strong{
    width: 90px;
    font-size: 10px;
	}

/*------  //SERVICES BLOCK  muwstra ------*/

.about {
    width: 100%;
    margin-top: 7%;
	
}

.container-about{
  
    height: 490px;
    max-width: 550px;
}

.conten_about {
    margin-top:-22%;
    }



.flex-text {
   display: block;
    width:100%;
    word-spacing: 0.25em;
   line-height: .8em;
   
}


  .flexvideo {
        width: 250px;
		height: 190px;
		float: right;
        margin: 13% 0% 0 0;
       
	}
	.about video{
        width: 250px;
	}

 .a-btn1 {
    margin: 0 55px;
    padding: 2px;
}  

    

/*------  //ABOUT ------*/

.achievement{
	background-size: 134%;
	height: 250px;
	margin-top:7%;
}

.container-achievement{
    width: 100%;
    max-width: 550px;
    padding: 5% 0% 0% 0;
    margin: auto;
}


.achievement-block {
	
    font-weight: 200;
	font-size: 15px;
    font-weight: 200;
    width: 130px;
    margin:0px 20px;
    padding-bottom:20px;
}
.achievement-block span{
	font-size: 50px;
	line-height: 60px;

 
}


    
    /*------  ARTICULOS ------*/
.portfolio {
    width: 100%;
    margin-top: 6.5%;
	height: 100%;
} 

.container-portfolio {
    height: 100%;
    width: 100%;
	margin-top: calc(30%);
}
.portfolio-slider{
    margin-top: -15%;
}



.img-port {
    width: 100%; 
    position: absolute; 
}
 
 .slide {
    height: 140px; 
    width: 50%;
}

.slide-details {       
    width: 100%;
    height: 190px; 
}
.slide-details .name {
    font-size: 13.2px;
    line-height: 13.2px;
    padding: 0 10px;
    width: 100%;
    left: 0;
    margin-bottom: 100px;   
}

.slide-details .position{
		font-size: 9px;
		color: #999;
		line-height: 9px;
		font-weight: 200;
		position: absolute;
		width: 100%;
		left: 0;
		text-align: center;
		bottom:0%;
		margin-bottom: 0px;
}

.slide-details .button {
    width: 56px;
    height: 56px;
    line-height: 50px;
    font-size: 40px;
    padding: 0;
    position: absolute;
    left: 50%;
    top: 30%;
    margin: -100px 0 0 -28px;
}


.slide-details:hover .position{
		bottom: 35%;		
	}
	.slide-details:hover .name{
		bottom: -10%;
	}
.slide-details:hover .button{
		top: 70%;
	}

/*------  //ARTICULOS ------*/
/*------  TEAM ------*/
    
    .team{
        width: 100%;
    margin-top: 7%;
    }
    

.container-team {
   
    height: 560px;
    width: 100%;
}

.member-block {
    width: 50%;
    height: 270px;
padding: 0 1% 0% 1%;
    margin:0 0 2% 0;
   

}


.member-block-wrapper {
    padding: 20px 10px 0;
    height: 270px;
}

.member-block-wrapper .name{
		font-size: 15px;
		line-height: 20px;
	}

.member-block-wrapper .position{
		font-size: 13px;
		line-height: 15px;
		margin-top: 12px;
		margin-bottom: 20px;
		font-weight: 200;
	}
.member-block-animate{
		height: 205px;
		overflow: hidden;
	}
/*---.animate .member-block {
	-moz-transform: scale(0, 0);
	-webkit-transform: scale(0, 0);
	-o-transform: scale(0, 0);
	-ms-transform: scale(0, 0);
	transform: scale(0, 0);
}	---*/

	.member-block-footer{
		margin: 0 0;
		line-height: 0px;
	}
		.member-block-footer a{
			margin:10px 7.2px;
			font-size: 16px;
			
		}
		
.member-block-wrapper p{
       
		line-height: 12px;
	}
.member-block-wrapper img{
		height: 120px;
		border-radius: 50%;
		margin-bottom: 15px;
	}
.member-block-wrapper:hover img{
		height: 40px;
		margin-bottom: 0px;
	}
	


/*------  //TEAM ------*/



/*------  FEED ------*/
    
    .feedback{
    margin-top: 7%;
    height: 220px;
	background-size: contain;
    }
    

.container-feed{
    height: 500px;
    width: 100%;
    max-width: 550px;
   margin: auto;
}

.feedback-title{
		font-size: 18px;
		line-height: 20px;
		margin-top: 20px;
	}
.feedback p{
    font-size: 15px;
		width: 100%;
    text-align: center;
	}

.feedback em{
		font-size: 24px;
		line-height: 0px;
		margin: 30px 0 0;
	}

.feedback strong{
		font-size: 11px;
		line-height: 9.6px;
		margin-top: 0px;
	}

.flexslides{
        width:100%;
        height: 110px;
}






/*------  //FEED ------*/

/*------  IDEA ------*/

/*------  FEED ------*/
    

    
	
	  .idea {
    margin-top: 7%;
    height: 132px;

    }
    


.container-idea{
    width:350px;
    padding-top:8%;
    display: inline-block;
}

.idea span{
    font-size: 14px;
    margin: 0px 0px; 
	}

.i-btn1 {
    font-size: 12px;
    width: 200px;
    height: 40px;
    margin: 10px 0px;
    padding: 0px 0px;
}





/*------  //IDEA ------*/

/*------  BUY-NOW ------*/
   .buy-now {
    
        width: 100%;
    margin-top: 8%;
    }
    

.container-buy-now{
    height: 120px;
    max-width: 550px;
}
    
.buy-now-text div{
     
		font-size: 18px;
		line-height: 25px;
}
    
.buy-now-text {
     
    font-size: 14px;
    line-height: 18px;
    padding-left: 8px;
    padding-top: 15px;
}	


.bu-btn1 {
    width: 200px;
    height: 40px;
    padding: 0px 0px;
	right: 15px;
	bottom: 7px;
}






/*------  //BUY-NOW ------*/


/*------  CONTACS------*/
    
    .contacts{
         width: 100%;
    margin-top: 3%;
    }
    

.container-contacs{
    max-width: 550px;

}

.form {
    height: 370px;
        float: left;
	    width: 100%;
        margin-left: 0px;
	}

.info {
    float:none;
    width: 83%;
    margin-top: 0%;
    letter-spacing: 2px;
    word-spacing: 2px;
    padding-left:0;
}
.contacts-details {
    margin-top:10px;
  
}


.contacts-details em{

	font-size: 25px;
	line-height: 0px;
    margin: 0px 0 0 0px;
   
}

    
.contacts-details span{  

	font-size: 18px;
    line-height: 80px;
}

    
    
    
    
.col-md-2 {
    float: left;
    width: 50%;
    
}
    .contact_container{
        margin-top: -15%;
        
    }
.col-1{
    padding-right: 10px;
}


/*----solicita una-----*/

.f-btn1 { /*----enviar-----*/
    font-size: 14px;
    width: 130px;
    height: 45px;
    padding: 0px;
    margin: 34px 6px 0px;
}

.f-btn2 {
    font-size: 13px;
    width: 200px;
    height: 45px;
    padding: 0px;
    margin: 0px 5px;
} 



/*------  //CONTACS ------*/

/*------  FOOTER  ------*/
footer {
	height: 100px;
	margin-top: 50px;
	font-size: 11px;
}
.container-footer {
    
    width: 100%;
    max-width: 550px;
}
.log_footer {
    
    float: left;
    height: 36px;
	width: 120px;
    margin-top: 6%;
    padding-right: 0px;
    
}

.social_ft {
    
    float: left;
    width: 50px;
    word-spacing: 0px;
    text-align: center;
}
     .social_ft em {
       font-size: 20px;
        margin: 0% 2% 30% 0%;
      
    }

.footters {
    font-size: 10px;
    float: left;
    width: 130px;
    line-height: 20px;
    margin-top: 5%;
     padding-right: 0%;
    margin-left: 0%;
    font-weight: 400;
}
.up {
    float: right;
    border: none;
    padding-top: 0%;
    padding-left: 0%;
}
    .up a {
    font-size: 25px;   
    width: 30px;
    height: 30px;
    margin-top: 30%;
    border: 2px solid #fff;
	color: #fff;
    padding-top: 0.2%;
    padding-left: 0.2%;
}
    
	
	 .grid .item {
	
	width: calc(50%);	
}
	.grid {

	position: relative;
	width: 100%;
	opacity: 0;
	transition: opacity 0.5s linear 1s;
}
	
	
/*------  //FOOTER  ------*/    
}

/*--------------------------  400px- 425px  --------------------------*/ 
@media (min-width:400px) and (max-width:425px){
  .title {
	font-size: 35px;

	margin-bottom: 50px;
}
    
    
.title-bg {
	font-size: 50px;
    

}
       
    
    p {
	font-size: 15px;
	
    
}

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

.log{
    float: left;
    margin-top:4%;
	height: 55px;
	width: 180px;
	
	}
    
.social_header { 
    
    float: left;
    width: 160px;   
    margin-top: 7%;
    
    text-align: center;
}
.social_header em {
    padding: 0 2px 0 2px;
    font-size: 30px;
}
    
header label{
   
	    right: 10px; 

}
    
.imgfondo{  
    background-size: contain;
    background-size: 175%;
    height: 350px;
    
}
 
    .header_menu ul {
        margin-top: 20%;
    }

.slider-text-wrapper{
	top: 40%;
	height: 90px;
   padding:3px 15px;
	
}

.big{
		font-size: 15px;
		line-height: 15px;
}
.b-btn1 {
    font-size: 13px;
     margin: 0 20px;
}
.container-slider{
    height: 240px;
}
.skills-block {
  
    max-width: 350px;
    
}
    

   
.skills-wrapper {
    height: 220px;
    width: 90px;
    font-size:13px;
    
	}
 .skills .mini{
     
     font-size: 12px
        
    }
    
.container-services{
    height: 550px;
  
} 
	    
    .ser-slide {
    height: 180px; 
}

.services strong {
    width:95px;
    font-size: 12px;
}

 .a-btn1 {
    margin: 0 80px;
    padding: 2px;
}  

.flex-text {
   font-size: 17px;
   word-spacing: 0.25em;
    line-height: 1.4em;
}
.container-team {
   margin-top:6%;
    height: 590px;
   
}

.member-block {
 
    height: 290px;
padding: 0 1% 0% 1%;
    margin:0 0 2% 0;
}


.member-block-wrapper {
    padding: 10px 5px 0;
    height: 290px;
}
.member-block-wrapper .name{
		font-size: 22px;
		line-height: 20px;
	}

.member-block-wrapper .position{
		font-size: 19px;
		line-height: 18px;
	}
.member-block-animate{
		height: 237px;
	}
	
.member-block-wrapper p{
       font-size: 14.5px;
       line-height: 13.2px;
	} 	
.member-block-wrapper img{
		height: 150px;
		margin-bottom: 15px;
	} 
	
		.feedback{
    margin-top: 9%;
    height: 220px;
	
    }
    
.container-feed{
     height: 500px;
     width:393px;
    max-width: 400px;
   
}

.feedback-title{
		font-size: 22px;
		line-height: 22px;
		margin-top: 10px;
	}
	
	
	.feedback p{
		font-size:17px;
		}
		
.flexslides{
        width:100%;
        height: 120px;
}
	
	
	
  .idea {
    margin-top: 9%;
    height: 132px;

    }
    



.buy-now-text div{
  
		font-size: 20px;
		line-height: 40px;

}
.buy-now-text {
    
    height: 100%;
    font-size: 15px;

    line-height: 19px;

    padding-left: 8px;
    padding-top: 10px;
  

}
.contacts{
    margin-top: 6%;
    }
    
.form {
    height: 420px;
      
	}
	
.f-btn1 { /*----enviar-----*/
    font-size: 15px;
    width: 130px;
    height: 50px;
    padding: 3px;
    margin: 40px 8px 0px;
}

.f-btn2 {
    font-size: 14px;
    width: 250px;
    height: 50px;
    padding: 3px;
    margin: 0px 4px;
} 

.contacts-details em{

	font-size: 27px;
   
}

    
.contacts-details span{  

	font-size: 20px;

}
    textarea {

	height: 150px;
	font-family: 'Lato';

	font-size: 20px;

}
   input[type="text"]{  
	height: 60px;
	font-size: 20px;


} 

    
  
 .log_footer {
    
   
   height: 40px;
	width: 140px;
    margin-top: 4%;
  
    }

.social_ft {
    
    width: 45px;
    word-spacing: 0px;

}
     .social_ft em {
       font-size: 20px;
        margin: 0% 2% 40% 0%;
      
    }

.footters {
   
    font-size: 13.9px;
    line-height: 27px;
     width: 185px;
    margin-top: 2%;

}
	
    
}
/*--------------------------  426px- 550px  --------------------------*/ 
@media (min-width:426px) and (max-width:550px){
     .title {
	font-size: 38px;

	margin-bottom: 60px;
}
	

.title-bg {
	font-size: 55px;
    

}
    
p {
	font-size: 17px;
	
    
}

p.mini{
	font-size: 16px;
	
}

.log{
    float: left;
    margin-top:3%;
	height: 65px;
	width: 215px;
	
	}
    
.social_header { 

    float: left;
    width: 160px;   
    margin-top: 7%;
    
    text-align: center;
}
.social_header em {
    padding: 0 3px 0 1px;
    font-size: 30px;
}
    
header label{
   
	    right: 10px; 

}
.imgfondo{  
    background-size: contain;
    background-size: 163%;
    height: 350px;
    
}
 .header_menu ul {
        
      
        margin-top: 18%;
      
    }
    
    .slider-text-wrapper{
	top: 40%;
	height: 95px;
   padding:3px 15px;
	
}

.big{
		font-size: 16px;
		line-height: 16px;
}
 .b-btn1 {
    font-size: 13px;
     margin: 0 20px;
} 
  
 .container-slider{
    height: 240px;
}
.skills-block {
	
    max-width: 380px;
    
}
    

   
.skills-wrapper {
    height: 220px;
    width: 120px;
     font-size:14px;
	}
	
.skills .mini{
     
     font-size: 13px;
        
    }
	
.container-services{
    height: 620px;
  
} 
	
.ser-slide {
    
    
    height: 200px; 

}


.services strong {
    width:105px;
    font-size: 13px;
}


.flex-text {
   font-size: 17px;
   word-spacing: 0.25em;
    line-height: 1.5em;
}
 .a-btn1 {
    margin: 0 100px;
    padding: 2px;
}  



.container-team {
   margin-top:6%;
    height: 590px;
   
}

.member-block {
 
    height: 290px;
padding: 0 1% 0% 1%;
    margin:0 0 2% 0;
   

}


.member-block-wrapper {
    padding: 10px 5px 0;
    height: 290px;
}
.member-block-wrapper .name{
		font-size: 22px;
		line-height: 20px;
	}

.member-block-wrapper .position{
		font-size: 19px;
		line-height: 18px;
	}
.member-block-animate{
		height: 237px;
	}
	.member-block-wrapper p{
       font-size: 16px;
       line-height: 13px;
	}
.member-block-wrapper img{
		height: 150px;
		margin-bottom: 15px;
	} 
	
	.feedback{
    margin-top: 9%;
    height: 220px;
	
    }
    
.container-feed{
     height: 500px;
      width:393px;
    max-width: 420px;
   
}

.feedback-title{
		font-size: 22px;
		line-height: 22px;
		margin-top: 10px;
	}
	
	
	.feedback p{
		font-size:17px;
		}
	.flexslides{
        width:100%;
        height: 120px;
}
	
	
	
  .idea {
    margin-top: 9%;
    height: 132px;

    }
    




	

.buy-now-text div{
  
		font-size: 22px;
		line-height: 40px;

}
.buy-now-text {
    
    height: 100%;
    font-size: 16px;

    line-height: 19px;

    padding-left: 5px;
    padding-top: 10px;
  

}


.contacts{
    margin-top: 6%;
    }
    
.form {
    height: 400px;
      
	}
	
	.f-btn1 { /*----enviar-----*/
    font-size: 16px;
    width: 140px;
    height: 50px;
    padding: 3px;
    margin: 40px 12px 0px;
}

.f-btn2 {
    font-size: 15px;
    width: 260px;
    height: 50px;
    padding: 3px;
    margin: 0px 6px;
} 
	
	

.contacts-details em{

	font-size: 27px;
   
}

    
.contacts-details span{  

	font-size: 20px;

}
    textarea {

	height: 150px;
	font-family: 'Lato';

	font-size: 20px;

}
   input[type="text"]{  
	height: 60px;
	font-size: 20px;


} 
  
    
    
  
 .log_footer {
    
   
   height: 48px;
	width: 153px;
    margin-top: 4%;
  
    }

.social_ft {
    
    width: 60px;
    word-spacing: 0px;

}
     .social_ft em {
       font-size: 23px;
        margin: 0% 2% 30% 0%;
      
    }

.footters {
    font-size: 14px;
    line-height: 27px;
     width: 190px;
    margin-top: 2%;

}

  

}

/*--------------------------  551px- 770px  --------------------------*/ 
@media (min-width:551px) and (max-width:770px){
/*------- base----*/
 .container{ 
    width: 100%;
    }
p {
	font-size: 18px;
	
    
}

p.mini{
	font-size: 15px;
	
}

     .title {
	font-size: 50px;
	font-weight: 900;
	line-height: 100px;    
	top: -15px;
	margin-bottom: 40px;
}
    
    
.title-bg {
	font-size: 80px;
	top: 0px;
	font-weight: 200;    

}
   

/*-------// base----*/
    
/*------- header----*/
   
    
header label{
        display: block;
	    right: 10px;
	    top: 40px;   
     font-size: 60px;

}
    
    
header label:hover {
    cursor: pointer;
    background: rgba(255,255,255,0.1);
    color: black;

   
}

      
    #btn-menu:checked ~ .header_menu{
        margin-top: 0%;

    }
    
.header_menu {
    
        text-align: center;
        position: absolute;
        width: 100%;
        margin-top:-130%;
        transition: all 1s ;
  
    
    
    }
    
    .header_menu ul {
        
        padding: 0;
        margin-top: 19%;
        flex-direction: column;
       background: linear-gradient(90deg,rgba(96, 118, 186,1) 0%,rgba(5, 10, 48,1) 100%);
    }

  
    
   
    .header_menu li a {
    width: 100%;
    display: block;
    padding: 30px 0px;
    color: white;
    text-decoration: none;
    font-weight: 400;
}
    
    
    .header_menu a:hover{
    color: black;
        font-weight: 500;
    
}
    

/*------- header ----*/
    
/*------- home----*/    
    
.header {
    width: 100%;
	height: 150px;
	padding-top: 0;

}
.container_header {
    width: 100%;
}



.log{
    float: left;
    margin-top: 6%;
    margin-left: 1%;
	height: 70px;
	width: 230px;
	
	}
    
 .social_header { 
     
    float:left;
    margin-top:7%;
    margin-left:6%;
    width: 330px;
    text-align: center;
    
}
.social_header em {
    padding: 0 10px 0 10px;
    font-size: 40px;
}
.home{
    width: 100%;
}  
    
.container-home{   
    max-width: 770px;
    height: 550px;
    position: relative;
    overflow: hidden;
}

    
.imgfondo{  
    background-size:contain;
    background-size: 150%; 
    height: 550px;
    
}

.slider-text-wrapper{
	top: 50%;
	width: 100%;
	height: 170px;
    text-align: end;
   padding:3px 20px;
	
}

.big{
		font-size: 20px;
		line-height: 30px;
}


/*------- //base----*/    
    


    
/*------  SKILLS BLOCK  ------*/
.skills{
        margin-top: 2%;
        width: 100%;
            margin:auto;
    }
.container-slider{
    max-width: 650px;  
    height: 320px;
    margin: auto;
    overflow: hidden;
    position: relative;    
}
    
.skills-block {
    width: 100%;
    max-width: 550px;
    padding-top: 5%; 
}
    
.skills-block-slider{
    width: 100%;
    height: 290px;
    margin: 0% 0% 0% 0%;
   
}
   
.skills-wrapper {
    height: 280px;
    width: 138px;
    font-size: 18px;
    line-height: 18px;
    margin: 0 1% 0 1%;
    padding: 5% 0 0 0;
	}

.btn-skills{
    width: 50px;
    height: 50px;
    font-size: 50px;
    line-height: 42px;
}

.skills-name {
		margin-bottom: 10px;

	}

.skills-block em{
		font-size: 30px;
		margin-bottom: -50px;
	}

 .skills .mini{
     
     font-size: 15px;
        
    }

/*------  //SKILLS BLOCK  muwstra ------*/

/*------  //SERVICES BLOCK  muwstra ------*/ 

.services {
    height:100%;
    width: 100%;
    margin-top: 10%;
}

.container-services{
  
    height: 750px;
    max-width: 650px;
}
   
.ser-slide input[type="radio"] + label {
    padding: 0 5px 0 5px;
    width: 130px;
    height: 130px;
}
.serv-slide input[type="radio"] + label {
    padding: 0 5px 0 5px;
    width: 130px;
    height: 130px;
}

.ser-slide {
    width: 100%;
    height: 210px; 
    margin-top: -5%;
}

.serv-slide {
    width: 100%;
    height: 190px;
    margin-top: 7%;
}
    
.services-slide {
    margin-top: 14%;
}

    
.services p {
    width: 100%;
    text-align: center;
    margin-top: 30%;
    
	}


.services strong{
    width: 150px;
    font-size: 20px;
	}

/*------  //SERVICES BLOCK  muwstra ------*/

.about {
    width: 100%;
    margin-top: 7%;
	
}

.container-about{
    height: 600px;
    max-width: 650px;
    margin-top:0%;
    }
.conten_about {
    margin-top:-10%;
    }



.flex-text p {
    font-size: 23px;
    width: 650px;
    word-spacing: 0.25em;
    line-height: 1.5em;
    margin-top: 0%;
}


  .flexvideo {
        width: 350px;
		height: 260px;
		float: right;
        margin: 10% 0% 0 1%;
       
}
	.about video{
        width: 350px;
	}    
 .a-btn1 {
    height:50px;
    margin: 0 170px;
    padding: 2px;
}  
/*------  //ABOUT ------*/

.achievement{
	background-size: 134%;
	height: 300px;
	margin-top:10%;
}

.container-achievement{
    width: 100%;
    max-width: 700px;
    padding: 0% 0% 0% 0;
}


.achievement-block {
    font-weight: 200;
	font-size: 20px;
    font-weight: 200;
    width: 130px;
    margin:0px 40px;
    padding-bottom: 0px;
}
.achievement-block span{
	
	font-size: 70px;
	line-height: 100px;
}
    
    /*------  ARTICULOS ------*/
.portfolio {
    width: 100%;
    margin-top: calc(30%);
}

.portfolio-slider{
    margin-top: -5%;
}


.img-port {
    width: 100%; 
    position: absolute; 
}
 .grid .item {
	
	width: calc(33.33%);	
}
	
 .slide {
    height: 240px; 
    width: 50%;
}

.slide-details {       
    width: 100%;
    height: 100%; 
    
}
.slide-details .name {
    font-size: 16px;
    line-height: 14px;
    padding: 0 10px;
    width: 100%;
    left: 0;
    margin-bottom: 0px;   
}

.slide-details .position{
		font-size: 14px;
		color: #999;
		line-height: 20px;
		font-weight: 200;
		position: absolute;
		width: 100%;
		left: 0;
		text-align: center;
		bottom:0%;
		margin-bottom: -50px;
}

.slide-details .button {
    width: 60px;
    height: 40px;
    line-height: 40px;
    font-size: 50px;
    padding: 0;
    position: absolute;
    left: 50%;
    top: 0%;
    margin: -140px 0 0 -30px;
}


.slide-details:hover .position{
		bottom: 35%;		
	}
	.slide-details:hover .name{
		bottom: 20%;
	}
.slide-details:hover .button{
		top: 70%;
	}

/*-----

/*------  //ARTICULOS ------*/
/*------  TEAM ------*/
    
    .team{
        width: 100%;
    margin-top: 10%;
    }
    

.container-team {
   
    height: 850px;
    width: 100%;
}

.member-block {
    width: 48.5%;
    height: 410px;
padding: 0 1% 0% 1%;
    margin:3% 0% 0% 1%;
   

}


.member-block-wrapper {
    padding: 20px 20px 0;
    height: 410px;
}

.member-block-wrapper .name{
		font-size: 23px;
		line-height: 20px;
	}

.member-block-wrapper .position{
		font-size: 19px;
		line-height: 15px;
		margin-top: 20px;
		margin-bottom: 25px;
		font-weight: 200;
	}
.member-block-animate{
		height: 320px;
		overflow: hidden;
	}

	.member-block-footer{
		margin: 0 0;
		line-height: 0px;
	}
		.member-block-footer a{
			
			font-size: 30px;
            margin:15px 20px;
			
		}
		
.member-block-wrapper p{
        font-size: 16px;
		line-height: 25px;
	}

.member-block-wrapper img{
		height: 200px;
		border-radius: 50%;
		margin-bottom: 15px;
        margin-top: 20px;
	}
.member-block-wrapper:hover img{
		height: 100px;
		margin-bottom: 5px;
    margin-top: 0px;
	}
.member-block-wrapper:hover .position{
		margin-top: 10px;
		margin-bottom: 10px;
		
	}	


/*------  //TEAM ------*/



/*------  FEED ------*/
    
    .feedback{
    margin-top: 10%;
    height: 320px;
	background-size: contain;
    }
    

.container-feed{
     height: 320px;
    width:650px;
   
}

.feedback-title{
		font-size: 26px;
		line-height: 30px;
		margin-top: 50px;
	}
.feedback p{
    font-size: 20px;
		width: 100%;
    text-align: center;
	}

.feedback em{
		font-size: 26px;
		line-height: 28px;
		margin: 30px 0 0;
	}

.feedback strong{
		font-size: 18px;
		line-height: 18px;
		margin-top: 0px;
	}

.flexslides{
        height: 120px;
        display: flex;
}





/*------  //FEED ------*/

/*------  IDEA ------*/

/*------  FEED ------*/
    

    
	
	  .idea {
    margin-top: 10%;
    height: 220px;

    }
    .container-idea{
    width:550px;
    padding-top:10%;
    display: inline-block;
}

.idea span{
    font-size: 20px;
    margin: 0px 0px; 
	}

.i-btn1 {
    font-size: 13px;
    width: 200px;
    height: 40px;
    margin: 20px 0px;
    padding: 0px 0px;
}

    



/*------  //IDEA ------*/

/*------  BUY-NOW ------*/
   .buy-now {
    
        width: 100%;
    margin-top: 10%;
    }
    

.container-buy-now{
    height: 200px;
    max-width: 650px;
}
    
.buy-now-text div{
     
		font-size: 30px;
		line-height: 40px;
}
    
.buy-now-text {
     
    font-size: 25px;
    line-height: 35px;
    padding-left: 18px;
    padding-top: 35px;
}	


.buy-now  .button{
	margin-right: 25%;
}







/*------  //BUY-NOW ------*/


/*------  CONTACS------*/
    
    .contacts{
    width: 100%;
    margin-top: 10%;
    }
    

.container-contacs{
    max-width: 650px;

}

.form {
    height: 550px;
        float: left;
	    width: 100%;
        margin-left: 0px;
        margin-top: 10%;
	}

    textarea {

	height: 250px;
	font-family: 'Lato';

	font-size: 23px;

}
   input[type="text"]{  
	height: 65px;
	font-size: 23px;


} 
.info {
    float:none;
    width: 83%;
    margin-top: 0%;
    letter-spacing: 2px;
    word-spacing: 2px;
    padding-left:0;
}
.contacts-details {
    color: #ffffff;
	
}

.contacts-details em{

	font-size: 38px;
	line-height: 0px;
    margin: 0px 0 0 0px;
   
}

    
.contacts-details span{  

	font-size: 25px;
    line-height: 80px;
}

    
    
    
    
.col-md-2 {
    float: left;
    width: 50%;
    
}
    .contact_container{
        margin-top: -15%;
        
    }
.col-1{
    padding-right: 10px;
}
.f-btn1 { /*----enviar-----*/
    font-size: 18px;
    width: 180px;
    height: 55px;
    padding: 0px;
    margin: 60px 30px 0px;
}

.f-btn2 {
    font-size: 17px;
    width: 330px;
    height: 55px;
    padding: -1px;
    margin: 0px 10px;
} 



/*------  //CONTACS ------*/

/*------  FOOTER  ------*/
footer {
	height: 150px;
	margin-top: 50px;
	font-size: 11px;
}
.container-footer {
    
    width: 100%;
    max-width: 730px;
}
.log_footer {
    
    float: left;
    height: 70px;
	width: 250px;
    margin-top: 5%;
    padding-right: 0px;
    
}

.social_ft {
    
    float: left;
    width: 120px;
    word-spacing: 0px;
    text-align: center;
}
     .social_ft em {
       font-size: 35px;
        margin: 0% 15% 16% 0%;
      
    }

.footters {
    font-size: 20px;
    float: left;
    width: 290px;
    line-height: 45px;
    margin-top: 2%;
     padding-right: 0%;
    margin-left: 0%;
}
.up {
    float: right;
    border: none;
    padding-top: 0%;
    padding-left: 0%;
}
    .up a {
    font-size: 35px;   
    width: 40px;
    height: 40px;
    margin-top: 80%;
    border: 2px solid #fff;
	color: #fff;
    padding-top: 0%;
    padding-left: 0%;
}
    
/*------  //FOOTER  ------*/    
}

/*--------------------------  551px- 650px  --------------------------*/ 
@media (min-width:551px) and (max-width:650px){
     
        .title {
	font-size: 40px;
	font-weight: 900;
	line-height: 100px;    
	top: -15px;
	margin-bottom: 40px;
}
    
    
.title-bg {
	font-size: 75px;
	top: 0px;
	font-weight: 200;    

}  
     



.log{
    float: left;
    margin-top: 6%;
    margin-left: 1%;
	height: 65px;
	width: 200px;
	
	}
    
       
.social_header {  

    margin-top: 8%;
    width: 280px;
    text-align: center;
}
.social_header em {
    padding: 0 10px 0 0px;
}

header label{
        
	    right: 10px;
	    top: 40px;   
}
      
.container-home{   
    max-width: 770px;
    height: 450px;
}

    
.imgfondo{  
    background-size:contain;
    background-size: 170%; 
    height: 450px;
    
}

.slider-text-wrapper{
	top: 40%;
	width: 100%;

	
}
    
    .container-slider{
    max-width: 650px;  
    height: 320px;
    margin: auto;
    overflow: hidden;
    position: relative;    
}
    
.skills-block {
    width: 100%;
    max-width: 480px;
    padding-top: 5%; 
}
    .btn-skills{
    width: 40px;
    height: 40px;
    font-size: 40px;
    line-height: 35px;
}
    

       
.ser-slide input[type="radio"] + label {
    padding: 0 5px 0 5px;
    width: 110px;
    height: 110px;
}
.serv-slide input[type="radio"] + label {
    padding: 0 5px 0 5px;
    width: 110px;
    height: 110px;
}
    .services strong{
    width: 140px;
    font-size: 16px;
	}

.services p {
    font-size: 14px;
    width: 100%;
    text-align: center;
    margin-top: 30%;
}

    .container-about{
    height: 600px;
    max-width: 650px;
    }
    
.conten_about {
    margin-top:-10%;
    }


    
.flex-text p {
    font-size: 20px;
    width: 550px;
    word-spacing: 0.25em;
    line-height: 1.5em;
    margin-top: 0%;
}




.achievement-block span{
	
	font-size: 70px;
	line-height: 100px;
}


.img-port {
    width: 120%; 
    position: absolute; 
}    
    
    
    
    
    .slide-details:hover .button{
		top: 115%;
	}
    
    .member-block-footer a{
			
			font-size: 22px;
            margin:19px 15px;
			
		}
 .member-block-wrapper p{
        font-size: 16px;
		line-height: 20px;
	}   
    
    
    .container-feed{
     height: 320px;
    width:550px;
   
}
   
.buy-now-text div{
     
		font-size: 28px;
		line-height: 40px;
}
    
.buy-now-text {
     
    font-size: 22px;
    line-height: 35px;
    padding-left: 18px;
}

.log_footer {
    
    float: left;
    height: 60px;
	width: 190px;
    margin-top: 5%;
    padding-right: 0px;
    
}

.social_ft {
    width: 100px;
    word-spacing: 0px;
    
}

.social_ft em {
       font-size: 28px;
        margin: 0% 10%;
      
    }

.footters {
    font-size: 15px;
    float: left;
    width: 200px;
    line-height: 45px;
    margin-top: 1%;
   
}
.up {
    float: right;
    border: none;
    padding-top: 6%;
    padding-right: 8%;
    }


    .up a {
    font-size: 30px;   
    width: 35px;
    height: 35px;
    margin-top: 80%;
  
}
}

/*--------------------------  771px- 1030px  --------------------------*/ 
@media (min-width:771px) and (max-width:1025px){
 
 
 .header.bg .log {
	max-height: 80px;
	max-width:  305px;
    width: 265px;
	background:url(../images/IDGrupoILT.png) no-repeat; 
	background-size:contain;
    margin-top: .5%; 
    margin-left: 5%;
}



.header.bg {
    
    margin-top: 9px;
	padding-top: 0px;
	height: 0px;
}

.header.bg:before {
    background: linear-gradient(90deg,rgba(255,255,255,.5) 0%,rgba(38, 80, 135,.5) 100%); 
    content: "";
    height: 90px;
    left: 0;
    position: fixed;
    top: 10px;
    padding-top: -10px;
    width: 100%;
    z-index: -1;  
    
}



.header.bg a{
    font-weight: 500;
    padding-left: 13px;
    
}
.header.bg .social_header {
    text-align: center;
    
}
.header.bg .social_header em {
    font-size: 35px;
    padding: 0 1px 0 0px;
}



 
 
 
 
    

.slider-text-wrapper{
	top: 28%;
	width: 100%;
	height: 160px;
    text-align: end;
	margin-top: -3.5%;
   padding:3px 80px;
	
}

.big{
		font-size: 25px;
		line-height: 30px;
}

  
/*------  SKILLS BLOCK  ------*/


    
.skills-block {
    width: 100%;
    max-width: 930px;
}
    
.skills-block-slider{
    width: 100%;
    height: 230px;
   
}

.achievement-block span{
	

    padding: 0px 0px 0px;
    
    
}

 .achievement-block {
    font-weight: 200;
	font-size: 20px;
    font-weight: 200;
    width: 170px;
    margin:100px 20px;
    padding-bottom: 0px;
}

.member-block-animate {
    height: 315px;
  
}
.member-block-wrapper p{
        font-size: 17px;
		line-height: 21px;
	}   

.member-block-wrapper:hover .position{
		margin-top: 10px;
		margin-bottom: 15px;
		
	}	
	
.container-footer {
    width: 100%;
    max-width: 1025px;
}
	
	.social_ft {
    float: left;
    width: 400px;
   
}


.footters {
    font-weight: 300;
    
}
.social_ft em {
    font-size: 35px;
    padding: 0 0px 0 20px;
}
.a-btn1{
    height:50px;
    margin: 0 170px;
    padding: 2px;
} 
.f-btn1 { /*----enviar-----*/
    font-size: 18px;
    width: 180px;
    height: 55px;
    padding: 0px;
    margin: 60px 10px 0px;
}

.f-btn2 {
    font-size: 17px;
    width: 330px;
    height: 55px;
    padding: -1px;
    margin: 0px 10px;
} 
.bu-btn1 {
    width: 200px;
    height: 50px;
    padding: 2px 0px;
	right: 15px;
	bottom: 30px;
}

.slide-details .name {
    font-size: 19px;
   
}


.slide-details:hover .position{
		bottom: 35%;		
	}
	.slide-details:hover .name{
		bottom: 35%;
	}
.slide-details:hover .button{
		top: 50%;
	}

}




/*--------------------------  771px- 1030px  --------------------------*/ 
@media (min-width:1025px) and (max-width:2024px){
 
 
 .header.bg .log {
	max-height: 80px;
	max-width:  305px;
    width: 265px;
	background:url(../images/IDGrupoILT.png) no-repeat; 
	background-size:contain;
    margin-top: .5%; 
    margin-left: 5%;
}



.header.bg {
    
    margin-top: 9px;
	padding-top: 0px;
	height: 0px;
}

.header.bg:before {
    background: linear-gradient(90deg,rgba(255,255,255,.5) 0%,rgba(38, 80, 135,.5) 100%); 
    content: "";
    height: 90px;
    left: 0;
    position: fixed;
    top: 10px;
    padding-top: -10px;
    width: 100%;
    z-index: -1;  
    
}



.header.bg a{
    font-weight: 500;
    padding-left: 13px;
    
}
.header.bg .social_header {
    text-align: center;
    
}
.header.bg .social_header em {
    font-size: 35px;
    padding: 0 1px 0 0px;
}



.animacion {
	opacity: 0;
}

.top1 {
    animation: top1 1s;
    transition: all 0.3s linear;	
}
}
@keyframes top1 {
    0%{
        transform: translateY(50px);
    }
    100%{
        transform: translateY(0);
    }
}

.top2 {
    animation: top2 2s;
    transition: all 0.3s linear 0.3s;
}
@keyframes top2 {
    0%{
        transform: translateY(70px);
    }
    100%{
        transform: translateY(0);
    }
}

.top3 {
    animation: top3 3s;
    transition: all 0.3s linear 0.6s;
}
@keyframes top3 {
    0%{
        transform: translateY(90px);
    }
    100%{
        transform: translateY(0);
    }
}
.top4 {
    animation: top4 4s;
    transition: all 0.3s linear 0.9s;
}
@keyframes top4 {
    0%{
        transform: translateY(110px);
    }
    100%{
        transform: translateY(0);
    }
}


@media screen and (max-width:426px){
	.portfolio {
    width: 100%;
    margin-top: calc(25%);
}
}