/*----psstyles-----*/

body {
    font-family: 'nunito';
    margin: 0;
    
}

.center {
    display: inline-flex;
    margin: auto;
    width: 80%;
    /* border: 3px solid green; */
    padding: 10px;
  }

h1{
    text-align: center;
    font-family: 'nunito';
    font-weight: 400;
    font-size: 30px;
    min-width:100px;
    padding-top: 10px;
    scroll-padding-bottom: 0%;
    margin: 0px;
}

h2 {
    font-family: 'nunito';
    font-weight: 200;
    font-size: 16px;
     padding-top: 0%;
     scroll-padding-bottom: 0%;
     margin: 0px;
}

h3 {
    font-family: 'nunito';
    font-weight: 200;
}
 /* unvisited link */
 a:link {
  color:black;
}

/* visited link */
a:visited {
  color: black;
}

/* mouse over link */
a:hover {
  color: grey;
}

/* selected link */
a:active {
  color: black;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

.content-wrap {
    
    display: flex;
    justify-content: center;
   /* background-color: aqua; */
/*    max-width: 950px;*/
    margin: 0 auto;
    padding: 10px;
    overflow: hidden;
    
    
}

.content-wrap2 {
    
   display: flex;
   justify-content: space-around;
   background-color: aqua;
   width: fit-content;  
   /* max-width: 950px;
   min-width: 350px; */
    /* margin: 0 auto; */
    padding: 10px;
    /* overflow: hidden; */
    
    
}

.flex-container {
    display: flex;
    /* flex-direction: column; */
  }

img {
    margin:10px;    
}

p{
  margin:10px; 
}

b{
  margin:10px; 
}

.texto{
    display: inline-block;
    max-width: 450px;
    min-width: 300px;
    margin: 15px;
    /* margin-bottom: 150px; */
}

.shw {
 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

a:hover{
    opacity: 20%;
}

.logo-text {
    justify-content: center;
    /* width: fit-content;
    height: fit-content; */
   /* background-color: firebrick; */
    
}

.home_photo {
    margin: 5px;
}

.web_logo {

    width: 70px;
    height: 70px;
    /* border-radius: 50%; */
    /* float: left; */
    margin-right: 10px;
    padding-top: 0px;
    }




/*Animación Título*/

.logo{

  opacity: 0;
  margin-top: 20px;
  margin-bottom: 10px;
  animation-name: logo;
  animation-duration: 3s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  transition-property: transform;
  transition-duration: 1s;
}

@keyframes logo {
  0%   {opacity:0}
  100% {opacity: 1}
}

/*Animación Fotos*/
.image1 {
  font-size: 50px;
  line-height: 1.3;
  position: relative;
  animation: heading;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes heading {
  0%   {top: -500px;}
  100% {top: 0px;}
}

.image2 {
  
  position: relative;
  animation: heading2;
  animation-duration: 1s;
/*  animation-fill-mode: forwards;*/
}

@keyframes heading2 {
  0%   {left: -500px;}
  100% {left: 0px;}
}

.image3 {
  
  position: relative;
  animation: heading3;
  animation-duration: 1s;
/*  animation-fill-mode: forwards;*/
}

@keyframes heading3 {
  0%   {right: -500px;}
  100% {right: 0px;}
}

.image4 {
  
  position: relative;
  animation: heading4;
  animation-duration: 1s;
/*  animation-fill-mode: forwards;*/
}

@keyframes heading4 {
  0%   {bottom: -500px;}
  100% {bottom: 0px;}
}

/*Difuminado Hover*/

/*
.hoverblur:hover{
  
  opacity: 20%;
*/

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #45a049;
}

/* Add a background color and some padding around the form */
.contact {
  border-radius: 5px;
  background-color: #f2f2f2;
  max-width: 400px;
  min-width: 300px;
  margin: 25px 50px 50px 50px;
  padding: 20px;
}

.margincontact{
  margin: 20px;
}



@keyframes blur {
  0%   {opacity: 0}
  100% {opacity: 1}
}

/*--------- Widget Bandcamp Widget -----------------*/

.bandmargin{
  margin-top: 30px;
  margin-bottom: 50px;
}

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


/*------------- Images Margin ------------------------*/

.imagemargin{
  margin: 15px;
  margin-top: 80px;
}


/*Main, Footer*/

main {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 100%;
    margin: 0, 10px;    
    }
        
footer {
     width: 100%;
    margin: 2em 0 2em;
       }


.box{
  max-width: 450px;
  min-width: 450px;

}