* {
    box-sizing: border-box;
    font-family: "Berlin Sans FB";
}

.parent {
    display: grid;
    grid-template-columns: repeat(6, auto);
}




/* start header ----------------------------- */
#header {
    /* background-color: #F1F6F9; */
    grid-column: span 6;
    display: flex;
    flex-direction: row;
    padding-top: 30px;
}

#header div {
    height: 500px;
    width: calc(100%/3);
    margin: 3%;
    background-color: #78c9ff79;
    border-radius: 5%;
    -webkit-border-radius: 5%;
    -moz-border-radius: 5%;
    -ms-border-radius: 5%;
    -o-border-radius: 5%;
    text-align: center;
    color: #5f9beb;
}

#header div img {
    border-radius: 5%;
    -webkit-border-radius: 5%;
    -moz-border-radius: 5%;
    -ms-border-radius: 5%;
    -o-border-radius: 5%;
}

#header div h2 {
    text-align: left;
}

/*  end header----------------------------------- */

/* start main */
#main {
    /* background-color:#39486782; */
    grid-column: span 6;
    height: 600px;
    display: grid;
    grid-template-columns: repeat(2, auto);
    /* color: white; */
}

#main .col1 {
    grid-column: span auto;
    background-image: url("img/giphy\ \(1\).gif");
    background-size: cover;
    height: 80%;
    width: 80%;
    position: relative;
    left: 10%;
    top: 15%;
}


#main .col2 {
    grid-column: span auto;
    width: 90%;
    height: 90%;
    background-image: url("img/istockphoto-1419532732-1024x1024.jpg");
    position: relative;
    top: 10%;
}


/* end  main */

/* start  second main */
#main2 {
    /* background-color:#39486782; */
    grid-column: span 6;
    height: 600px;
    display: grid;
    grid-template-columns: repeat(2, auto);
    /* color: white; */
}

.col12 {
    grid-column: span auto;
    height: 80%;
    width: 500px;
    position: relative;
    left: 17%;
    top: 15%;
}

.col12 #back {
    background-color: #5f9ceb71;
    height: 300px;
    text-align: center;
    padding-top: 60px;
    font-size: 50px;
    font-weight: bold;
}

#click2 {
    background-color: #78C8FF;
    /* margin-top: 10px; */
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.col22 {
    grid-column: span auto;
    width: 700px;
    height: 100%;
    background-color: #78c9ff3f;
    position: relative;
    top: 1%;
    /* left: 13%; */

}

.col22 img {
    position: relative;
    left: 25%;
    bottom: 10%;

}

/* end  second main */

/* start card */
#card {

    grid-column: span 6;
    height: 700px;
    margin-top: 40px;
    display: flex;
    flex-direction: row;

}

#card #image {
    height: 500px;
    width: calc(100%/3);
    padding: 1%;
}

#card img {
    width: 100%;
}

#card #image {
    transition-delay: 1s;
    transition-duration: 1s;
    transition-property: all;
    transition-timing-function: ease-in-out;
}

#card #image:hover {
    width: 40%;
}

/* end card */

/* Large screens (default: your current styles) */

/* Tablets */
@media (max-width: 992px) {

  #header {
    flex-direction: column;
    align-items: center;
  }

  #header div {
    width: 90%;
    margin: 10px 0;
  }

  #main, #main2 {
    grid-template-columns: 1fr;
    height: auto;
  }

  .col12, .col22 {
    width: 90%;
    left: 0;
    margin: auto;
    top: 0;
  }

  #card {
    flex-direction: column;
    align-items: center;
    height: auto;
    
  }

  #card #image {
    width: 80%;
    margin-bottom: 200px;
  }
  #card img {
    width: 100%;
}

#card #image {
    transition-delay: 1s;
    transition-duration: 1s;
    transition-property: all;
    transition-timing-function: ease-in-out;
}

#card #image:hover {
    width: 100%;
}
#click2 {
    position: relative;
    left: 4rem;
    top:80%;
}
}

/* Mobiles */
@media (max-width: 576px) {

  #header div {
    height: auto;
  }

  #header div img {
    height: auto;
    max-height: 200px;
  }
}