* { box-sizing: border-box; }

/* Style the body - Estil del cos */
body
{
  background-image: url("../images/specialWeldings.00.jpg");
  font-family: verdana;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;  
  background-size: cover;
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar
{
  display: none;
}

/* Header/logo Title */
header
{
  /* position: fixed; */
	/* top: 5%;  */
	width: 100%;
	height: auto;
	z-index: 9;
	color:white;
  padding: 20px;
  text-align: center;
  background: rgba(52, 60, 168, 0.2);
  color: black;
}

#logo
{
  width: 360px;
  height: 120px;
  border-radius: 20%;
  opacity: 65%;
}

#logo
{
  animation: name duration timing-function delay iteration-count direction fill-mode;
  animation: rotate 2s 10 4s alternate;
  /* -webkit-animation: rotate 5s infinite 5s alternate; */
  

}

@-webkit-keyframes rotate
{
  100%
  {
      transform: rotateY(180deg);
      
  }
}

@keyframes rotate
{
  100%
  {
    transform: rotateY(180deg);
  }
}



#logo:hover
{
  transform: rotate(340deg);
  transition-delay: 0.5s;
 
  
  
  
  
}

#logo2
{
  width: 120px;
  height: 40px;
  border-radius: 20%;
  opacity: 65%;
}

.imgcenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

/* Footer */
footer
{
  display: grid;
  grid-auto-columns: 32% 34% 32%;
  color: whitesmoke;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-style: italic;
  font-size: 10px;
  background: rgba(52, 60, 168, 0.4);
}

footer > div
{
  padding: 15px;

}

footer > div > a
{
  color: whitesmoke;
}

.footer1
{
  grid-column: 1/2;
  text-align: left;
  padding-left: 15%;
}

.footer2
{
  grid-column: 2/3;
  text-align: center;
}

.footer3
{
  grid-column: 3/4;
  text-align: right;
}

.footer4
{
  grid-column: 1/4;
  text-align: center;
}

.footer4 > a
{
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: 12px;
  color: black;
  text-align: center;

}

a:link
{
  text-decoration: underline;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
/* Disseny responsiu: quan la pantalla tingui una amplada inferior a 700 px, feu que les dues columnes s’apilin les unes sobre les altres en lloc d’unes al costat de l’altra */
@media screen and (max-width: 700px)
{
  .row { flex-direction: column; } 
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
/* Disseny responsiu: quan la pantalla tingui una amplada inferior a 400 px,
   feu que els enllaços de navegació s’apilin els uns sobre els altres en lloc d’uns al costat dels altres */
@media screen and (max-width: 400px)
{
  nav a
  {
    float: none;
    width: 100%;
  }
}