html{ margin: 0;
      padding:0;
      
}


a{text-decoration:none;
    
}
a:link{Color:white;
}
a:visited{Color:white;
}
a:hover{Color:#b1b1b1;
}
a:active{Color:white;
}

body{background-image:url("img/Background-01.jpg");
     margin:0;
     padding:0;
	width: 100%;
    
}

header{ background-color: black;
        width: 100% ;
        height:2rem;
        padding:1rem;
       position: fixed;
      top:0;
   -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.15);
-moz-box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.15);
box-shadow: 0px 15px 10px 0px rgba(0, 0, 0, 0.15);
     
     
}

header label{ display:none;
              width:1rem;
              height:1rem;
              padding:1rem;
              cursor:pointer;


}


section{margin-top:8rem;
        margin-left:0;
       
}

section article{display: flex;
                flex-wrap: wrap;
                padding-left:2rem;
    
}

section li{font-family: verdana;
  font-style: italic;
  font-size:14px;
  padding-top: 2%;
  
}

#btn-menu{display:none;

}

.menu ul{ margin:0;
          list-style:none;
          padding-right:2rem;
          display:flex;
          justify-content:flex-end;

}

.menu li{font-family:arial;
          margin-left: 1em;
}

.menu li a{display:block;
           padding:5px 10px;
           

}


 


/* ------- @ MEDIAS ----- */

@media(max-width:768px){
    header{padding-top:0;
           padding-bottom:2rem;
        
    }
    header label{ display:block;
                  margin:left:2rem;
                  
  }
    section {flex-direction:column;
        
    }
	
	article.contcopidis2 {
	
		transition:all 0,8s;
	}
    
    section.beneficios{padding:0;
        margin:0 auto;
        text-align: center;
        width: 80%;
    }
    
    section.beneficios img{ margin:0;
                     width: 100%;
                     flex-direction:column;
                     
    }
    .beneficioimg01 {padding-top:0;
        width: 100%;
       
    
}
    section.beneficioimg01 img{ height: 70px;

        
    }
    
    
        section .beneficioimg02 img{padding-top:0;
            width:75%;
            text-align: center;
            margin: 0 auto;
          
    
}
    
    
                    
    

    .menu{ position:absolute;
           left:0px;
           background-color: rgba(0,0,0,0.7);
           width:80%;
           padding-top:2rem;
           margin-left:-80%;
           
          
       }   

    .menu ul{ flex-direction:column;
                 
       }     

    .menu li{border-bottom:1px solid #858585;
             margin:10px -10px;
       }    

    .menu li:hover{background-color:rgba(255,255,255,0.2);
       }
    #btn-menu:checked ~ .menu{
       margin-left: 0;
       transition:all 0.8s;
       }
   
    
 section .imgcopidis{ height: 5rem;
                      transition:all 0.8s;
                      
    
        }  
    
section .listado1{margin-bottom: 2rem;
                  width:20rem;
                  transition:all 0,8s;
          
    
        }
section .mock img {
    width: 18rem;
    margin-left: -30px;
    margin-top:1rem;
    transition:all 0,8s;
    
}
article .contcopidis2{flex-direction:column;
    }
    
	section .descarga img { margin-left: 0;
                            width: 50%;
                            transition:all 0.8s;
                            margin-top: 2rem;
                            text-align: center;
	}

	
	
  .logo1 {visibility: hidden; 
  
  }
    
     
    
    
   
    
    
 section .slogan h1{font-size: 12pt;
     transition:all 0,8s;
    
}
    article .centrardiv p{margin-left:-2rem;
        
    }




}







/*---titulos y parrafos--*/


h1{font-family:Century Gothic;
    Color:#fff;
    text-align: center;
    margin-top: 0;
    padding:10px;
  }  
h1 span{ color: aquamarine;
    
}
h2{font-family:sans-serif;
    Color:#7CBCA4;
    text-align: center;
    margin-bottom: 20px;
  }
h3{font-family:Trebuchet ms;
    Color:#7CBCA4;
    text-align: left;
  } 
h4{font-size:9rem;
   margin-top:5px;
   margin-bottom:5px;
   
    
}

h5{font-family:sans-serif;
    text-align: center;
  }

p{font-family: verdana;
  font-style: italic;
  font-size:14px;
    padding-top: 3rem;
   
}








/*---Class--*/
.beneficios{width:100%;
            margin:auto;
            padding-top:5rem;
            text-align: center;
    
    
             
    
}
.botondescarga{background-color:#6806F4;
               width:15rem;
               border-radius: 10px 10px 10px 10px;
               -moz-border-radius: 10px 10px 10px 10px;
               -webkit-border-radius: 10px 10px 10px 10px;
               border: 0px solid #000000;
}

.botondescarga h2{color: white;
                  padding:1rem;
                  font-family:roboto;
                  
}
section .beneficioimg01 {padding-top: 1rem;

	

    
}
section .beneficioimg02 {padding-right: rem;
	
                    
    
}



.beneficioimg02 img{height:30%;
	width: 15%;
	
                    
    
}
.copidis2 {width: 100%;
	background-color: #1ac9d0;
	margin-top: 5%;
	
    
}
.copidis3 {width: 100%;
	background-color: #1ac9d0;
	margin-top: 5%;
    
	}


	

.parrafos {display: flex;
		justify-content:space-between;
		  flex-wrap: wrap;
			margin:auto 0;
		padding:auto 0;
		 text-align: center;
		 font-family: verdana;
		 font-size:14px;

}

.p1 {width:75%;
	font-family: verdana;
 	font-size:12px;
    color: white;
	font-weight: 300;
    text-align: center;
}


.centrardiv{padding-left:3rem;
    
}

.copidis3 h1 { 
    padding-top: 2rem;
	padding-bottom: 2rem;
    color: black;
    font-weight: 900;
    font-size: 2.25rem;
	text-align: left;
	margin-left:5rem;
    font-family: 'Covered By Your Grace', cursive;
	
   
}
.contcopidis2 img{width:17rem;
                  padding:0rem;
    
}
.contcopidis2 div{width:450px;
                  padding-bottom: 1rem;
                  margin:auto;
    
}
.contcopidis2{width:100%;
              display: flex;
              justify-content:space-around;
             
	                   
}




.descarga { margin-left: 0rem;
            
}

.imgcopidis{ height:10rem;
        
    }

.listado1{margin-bottom: 2rem;
          width:23rem;
          
    
}


.mock {
    width:50%;
    margin-left:2rem;
	margin-top: 2rem;

    
}



.mock img {margin-left: 20%;
    width: 100%;
    image-resolution: from-image;
    
    
}


.parrafocopidis {
    margin top: 20rem;
    float:left;
    width:28rem;
}


footer {background-color: Black;
	width: 100%;
	margin: 0rem;
	padding: 0;
	height: 100%;
	
}

footer p {color: White;
	padding: 3rem;

}

.logo1 {width: 105;

	margin-left: 2rem;
	
	float: left;
	position: absolute;
	opacity: 0.2;
    filter: alpha(opacity=50);
     transition:all 1s;
	

}

.logo1:hover {
    opacity: 1.0;
    filter: alpha(opacity=100)
        

}

article .bloque1 {margin-left: 1rem;
  
    
}



nav.menu {float: none;
    
}


.slogan {margin-top: 1rem;
      
    
}

.slogan h1 {color: #6806F4;
            padding:0;
            margin:0;
    text-align: left;
    font-size: 2.5rem;
    font-family: 'Covered By Your Grace', cursive;
            
    
}

.legales{
    margin: 0rem;
    text-align: center;
    font-style: normal;
    font-size: 0.7rem;
}