html{
    scroll-behavior: smooth;
}

body{
  font-family: Arial, sans-serif;
  background-color: white;
  color: #242424;
  font-size: 18px;
  margin: 0;
  padding: 0;
}

a:link {
  color: #00274C;
}
a:visited {
  color: #465E85;
}
a:hover {
  color: #00274C;
  text-decoration: overline; 
}

h1{
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  padding: 50px 0;
  text-align: center;
}

h2{
  font-size: 24px;
  color: #1c1c1c;
  padding-bottom: 20px
}

nav li{
  display:inline;
  padding-right:20px;
}

#current_page_nav{
  font-weight: bold;
  font-size: 18px;
}

nav a{
  color: #242424;
  text-decoration: none; 
  font-size: 12px;
}

nav a:hover{
  color: black;
  text-decoration: underline;
}

.skip a{
  background: white;
  left: 0;
  padding: 6px;
  -webkit-transition: top 1s ease-out;
  transition: top 1s ease-out;
  z-index: 1;
  position: absolute;
  top: -40px;
}


 .skip a:focus{
  background: white;
  border-radius: 5px;
  left: 0;
  padding: 6px;
  -webkit-transition: top 1s ease-out;
  transition: top 1s ease-out;
  z-index: 1;
  position: absolute;
  top: 0px;
}


:focus{
  border: 2px solid black;
}

/*************************************** Effects Definition ******************************************/

/************** Back to TOP button: https://www.w3schools.com/howto/howto_js_scroll_to_top.asp ******************/
#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 35px; /* Place the button at the bottom of the page */
  right: 35px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #808080; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 5px; /* Rounded corners */
  font-size: 12px; /* Increase font size */
}
#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}
/***************** Back to Top Button END **********************/
 

/***************************** Puff in animation: https://animista.net/play/entrances/puff-in ********************************/ 
/*Keyframes for animation*/
@-webkit-keyframes puff-in {
  0% {
    -webkit-transform: scale(4);
            transform: scale(4);
    -webkit-filter: blur(10px);
            filter: blur(10px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}

@keyframes puff-in {
  0% {
    -webkit-transform: scale(4);
            transform: scale(4);
    -webkit-filter: blur(10px);
            filter: blur(10px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
.puff-in {
  -webkit-animation: puff-in 1.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
          animation: puff-in 1.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}
/************* Puff in animation END ********************/


/************** contact form: https://www.w3schools.com/howto/howto_css_contact_form.asp ***************/
/* 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: #1c1c1c;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
/* When moving the mouse over the submit button, add color */
input[type=submit]:hover {
  background-color: #00274C;
}
/* Style the reset button with a specific background color etc */
input[type=reset] {
  background-color: #1c1c1c;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
/* When moving the mouse over the reset button, add a darker blue color */
input[type=reset]:hover {
  background-color: #00274C;
}

.parallax{
  background-attachment: fixed; /* Parallax effect */     
  background-position: center;  /* Parallax effect */
  background-repeat: no-repeat; /* Parallax effect */
  background-size: cover;       /* Parallax effect */
  color: white;
  height: 1100px;                /* Parallax effect */
  background-image: url("../images/cloud2.jpg");
  /*background-color: black;*/
}
/**** Contact Form End ****/


/******************** Flip Card: https://www.w3schools.com/howto/howto_css_flip_card.asp **************************/
/* The flip card container - set the width and height to whatever you want. */
/* We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner  {
  transform: rotateY(180deg);
}
.flip-card:focus .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card:focus-within .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card: active .flip-card-inner {
  transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: transparent;
  color: black;
}

/* Style the back side */
.flip-card-back {
  border-radius: 500px;
  background-color: black;
  color: white;
  transform: rotateY(180deg);
}
/************** Filp Card End **************************/

/*************************************** Effects Definition END ******************************************/

footer{
  background-color: white;
  font-size: 12px;
  line-height: 1.5;
  color: #242424;
  grid-column: 1 / -1;
  grid-row: 7 / auto;
  padding-top: 30px;
  padding-bottom: 30px;
  text-align: center;
}

nav{
  background-color: white;
  padding: 20px 0; 
  text-align: left;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;

  grid-column: 1 / -1;
  grid-row: 1 / span 1;
}

header{
  color: #1c1c1c;
  grid-column: 1 / -1;
  grid-row: 2 / span 1;
}

header p{
  color: #242424;
  font-size: 18px;
  padding: 0 100px;
  text-align: center;
  line-height: 130%;
}


/*****************************************************
          for screen smaller than 800px
*****************************************************/
.container{
  display: grid;
  grid-template-columns: auto 400px auto;
  grid-template-rows: 50px 100px 10px 280px 280px 400px 150px;
  grid-row-gap: 15px;
}

/************************************* Home Page for small screen **********************************************/
/* column */
.umich, .bupt, .education, .experience {
  grid-column: 2 / span 1;
}

.umich-image, .bupt-image{
  grid-column: 1 / -1;
  max-height: 1200px;
  overflow: hidden;
  margin: 20px 20px;
}

.parallax{
  grid-column: 1 / -1;
  grid-row: 3 / span 5;
}
/* row */
.education{
  grid-row: 3 / span 1;
}

.umich, .umich-image {
  grid-row: 4 / span 1;
}

.bupt, .bupt-image {
  grid-row: 5 / span 1;
}

.experience {
  grid-row: 6 / span 1;
}
.text-block{
  border-radius: 5px;
  background-color: rgba(255, 255, 255, .8);
  padding: 30px;
  text-align: center;
  width: auto;
  height: fit-content;
  align-self: center;
  line-height: 1.3;
}
.umich-image {
  border-radius: 5px;
  background-image: url("../images/umich.jpg");
  background-size: cover;
  background-position: center;
  background-size: cover;
}
.umich-image:hover {
  border-radius: 5px;
  background-image: url("../images/umich2.jpg");
  background-size: cover;
  background-position: center;
  background-size: cover;
  }
.bupt-image{
  border-radius: 5px;
  background-image: url("../images/bupt.png");
  background-size: cover;
  background-position: center;
  background-size: cover;
}
.bupt-image:hover {
    border-radius: 5px;
    background-image: url("../images/bupt2.jpg");
    background-size: cover;
    background-position: center;
    background-size: cover;
  }


  /**************************** Home Page END *********************************/


  /************************************* Sharing Page for small screen ***************************************/
.container-share {
  display: grid;
  grid-template-columns: auto 400px auto;
  grid-template-rows: 50px 100px 170px 50px 100px 50px 100px 50px 100px 300px 200px;
  grid-row-gap: 15px;
}

.share-link:hover{
  color:cornflowerblue;
  text-decoration: underline;
}
  /* column */
  .share {
    grid-column: 1 / span 3 ;
  }

  .share-image {
    grid-column: 1 / span 3 ;
    max-height: 600px;
    overflow: hidden;
  }

.csdn-image {
  border-radius: 5px;
  background-image: url("../images/csdn.jpg");
  background-size: contain;
  background-position: center;
  background-repeat:no-repeat;
}

.zhihu-image {
  border-radius: 5px;
  background-image: url("../images/zhihu.jpg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.github-image {
  border-radius: 5px;
  background-image: url("../images/github.jpg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.csdn-image, .zhihu-image, .github-image {
  grid-column: 2 / span 1;
}
  .csdn, .zhihu, .github{
    grid-column: 2 / 4;
    margin: auto 20px auto 100px;
  }

  /* row */
  .share-image {
    grid-row: 3 / span 1;
  }

  .share {
    grid-row: 3 / span 1;
  }

  .csdn-image {
    grid-row: 4 / span 1;
  }
  .csdn{
    grid-row: 5 / span 1;
  }

  .github-image{
    grid-row: 6 / span 1;
  }
  .github{
    grid-row: 7 / span 1
  }

  .zhihu-image, .zhihu{
    grid-row: 8 / span 1;
  }

  .zhihu{
    grid-row: 9 / span 1;
  }

  .map
  {
    grid-row: 10 / span 1;
    grid-column: 1 / -1;
  }
.share-footer {
  grid-row: 11 / span 1;

  background-color: white;
  font-size: 12px;
  line-height: 1.5;
  color: #242424;
  grid-column: 1 / -1;
  padding-top: 30px;
  padding-bottom: 30px;
  text-align: center;
}

.share-image {
  border-radius: 5px;
  background-image: url("../images/inter.jpg");
  background-size: 324px 432px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-size: cover;
}

/*************************** Sharing Page for small screen END ******************/



/********************************** Gallary Page for small screen *********************************/
  .gallary_photo {
    grid-column: 1 / -1;
    grid-row: 3 / span 4;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: repeat(9,150px);
    margin: auto;
    width: 200px;
  }

  .img-1 {
    border-radius: 5px;
    background-image: url("../images/chur.jpg");
    background-size: 200px 150px;
    background-repeat: no-repeat;
    background-position: center;
    filter: grayscale(100%);
  }

  .img-2 {
    border-radius: 5px;
    background-image: url("../images/dis.jpg");
    background-size: 200px 150px;
    background-repeat: no-repeat;
    background-position: center;
    filter: grayscale(100%);
  }

  .img-3 {
    border-radius: 5px;
    background-image: url("../images/metro.jpg");
    background-size: 200px 150px;
    background-repeat: no-repeat;
    background-position: center;
    filter: grayscale(100%);
  }

  .img-4 {
    border-radius: 5px;
    background-image: url("../images/muscial.jpg");
    background-size: 200px 150px;
    background-repeat: no-repeat;
    background-position: center;
    filter: grayscale(100%);
  }

  .img-5 {
    border-radius: 5px;
    background-image: url("../images/nyc.jpg");
    background-size: 200px 150px;
    background-repeat: no-repeat;
    background-position: bottom;
    filter: grayscale(100%);
  }

  .img-6 {
    border-radius: 5px;
    background-image: url("../images/beach.jpg");
    background-size: 200px 150px;
    background-repeat: no-repeat;
    background-position: center;
    filter: grayscale(100%);
  }

  .img-7 {
    border-radius: 5px;
    background-image: url("../images/spring.jpg");
    background-size: 200px 150px;
    background-repeat: no-repeat;
    background-position: center;
    filter: grayscale(100%);
  }

  .img-8 {
    border-radius: 5px;
    background-image: url("../images/fall.jpg");
    background-size: 200px 150px;
    background-repeat: no-repeat;
    background-position: center;
    filter: grayscale(100%);
  }

  .img-9 {
    border-radius: 5px;
    background-image: url("../images/winter.jpg");
    background-size: 200px 150px;
    background-repeat: no-repeat;
    background-position:center;
    filter: grayscale(100%);
  }

.img-10 {
  border-radius: 5px;
  background-image: url("../images/sea.jpg");
  background-size: 150px 100px;
  background-repeat: no-repeat;
  background-position: left;
  filter: grayscale(100%);
}



  .img-1:hover {
    filter: grayscale(0);
  }

  .img-2:hover {
    filter: grayscale(0);
  }

  .img-3:hover {
    filter: grayscale(0);
  }

  .img-4:hover {
    filter: grayscale(0);
  }

  .img-5:hover {
    filter: grayscale(0);
  }

  .img-6:hover {
    filter: grayscale(0);
  }

  .img-7:hover {
    filter: grayscale(0);
  }

  .img-8:hover {
    filter: grayscale(0);
  }

  .img-9:hover {
    filter: grayscale(0);
  }

.img-10:hover {
  filter: grayscale(0);
}
  .gallary_photo div {
    overflow: hidden;
  }
/*************************************** Gallary Page End ************************************/


/*************************************** Contact Page for small screen ***********************************/
.container-contact {
  display: grid;
  grid-template-columns: auto 400px auto;
  grid-template-rows: 50px 100px 100px 400px 50px 300px 50px;
  grid-row-gap: 15px;
}

.flex-box{
  display: flex;
  flex-direction: column;
  grid-column: 2 / span 2 ;
  grid-row: 3 / span 1;
}

  .contact_form {
    grid-column: 2 / span 1;
  }

  .contact_form {
    grid-row: 4 / span 4;
  }
.flip-card {
  grid-row: 6 / span 6;
  grid-column: 2 / span 3;
  align-items: center;
  margin: 10px auto;
}

  .contact-footer{
    grid-row: 7 / span 7;
  }
/*************************************** Contact Page End ***********************************/





/*****************************************************
          for tablet (800px - 1024px)
*****************************************************/

/*************************************** Home Page for tablet********************************************/
@media all and (min-width: 800px) and (max-width: 1024px)  {

  .container {
    display: grid;
    grid-template-columns: auto 40px 340px 300px auto;
    grid-template-rows: 70px 70px 10px 280px 280px 300px 100px;
    grid-row-gap: 50px;
  }

  /*row 1*/
  nav {
    background-color: white;
    text-align: left;
    padding: 40px;
    align-self: center;
  }

    nav a {
      font-size: 18px;
    }



  /*row 2*/
  header {
    color: #1c1c1c;
    grid-column: 2 / span 3;
    grid-row: 2 / span 1;
  }


  /* column */
  .education {
    grid-column: 2 / span 2;
    margin: 20px auto;
  }

  .experience {
    grid-column: 2 / span 3;
  }

  .bupt-image, .gallary-image, .umich-image {
    grid-column: 2 / span 2;
  }

  .umich, .bupt, .gallary {
    grid-column: 4 / span 1;
  }

  /* row */
  .education {
    grid-row: 3 / span 1;

  }

  .umich, .umich-image {
    grid-row: 4 / span 1;
  }

  .bupt, .bupt-image {
    grid-row: 5 / span 1;
  }

  .experience {
    grid-row: 6 / span 1;
  }
}
/*************************************** Home Page tablet End *********************************************/


/*************************************** Sharing Page for tablet ********************************************/
@media all and (min-width: 800px) and (max-width: 1024px) {

  .container-share {
    display: grid;
    grid-template-columns: auto 300px 200px 300px auto;
    grid-template-rows: 70px 70px 150px 100px 100px 100px 300px 100px;
    grid-row-gap: 50px;
  }

  /* column */
  .share {
    grid-column: 3 / span 3;
  }

  .share-image {
    grid-column: 3 / span 3;
    max-height: 600px;
    overflow: hidden;
  }


  .csdn-image, .zhihu-image, .github-image {
    grid-column: 2 / span 1;
  }

  .csdn, .zhihu, .github {
    grid-column: 3 / span 4;
    margin: auto auto;
  }

  /* row */
  .share-image, .share {
    grid-row: 3 / span 1;
  }

  .csdn-image, .csdn {
    grid-row: 4 / span 1;
  }

  .github-image, .github {
    grid-row: 5 / span 1;
  }


  .zhihu-image, .zhihu {
    grid-row: 6 / span 1;
  }

  .map {
    grid-row: 7 / span 1;
    grid-column: 2 / span 4;
  }

  .share-footer {
    grid-row: 8 / span 1;
    background-color: white;
    font-size: 12px;
    line-height: 1.5;
    color: #242424;
    grid-column: 2 / span 4;
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: center;
  }

  .share-image {
    border-radius: 5px;
    background-image: url("../images/inter.jpg");
    background-size: 324px 432px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-size: cover;
  }
  /*************************************** Sharing Page tablet End********************************************/



  /******************* For gallary page Location ************************/
  .gallary_photo {
    grid-column: 2 / span 3; /* 760 px*/
    grid-row: 3 / span 4; /* 1900 px*/
    display: grid;
    grid-template-columns: 190px 190px 190px 190px;
    grid-template-rows: 320px 320px 320px 320px 300px 300px 300px;
    margin: auto;
    width: 760px;
    grid-row-gap: 0;
  }

  .img-1 {
    grid-column: 1 / span 1;
    grid-row: 1 / span 3;
    overflow: hidden;
    border-radius: 0;
    background-size: 900px 1200px;
  }

  .img-2 {
    grid-column: 2 / span 3;
    grid-row: 1 / span 1;
    overflow: hidden;
    border-radius: 0;
    background-size: 700px 400px;
  }

  .img-3 {
    grid-column: 2 / span 2;
    grid-row: 2 / span 1;
    overflow: hidden;
    border-radius: 0;
    background-size: 600px 400px;
  }

  .img-4 {
    grid-column: 2 / span 2;
    grid-row: 3 / span 1;
    overflow: hidden;
    border-radius: 0;
    background-size: 600px 400px;
  }

  .img-5 {
    grid-column: 4 / span 1;
    grid-row: 2 / 5;
    overflow: hidden;
    border-radius: 0;
    background-size: 1600px 1200px;
  }

  .img-6 {
    grid-column: 1 / span 1;
    grid-row: 4 / span 1;
    overflow: hidden;
    border-radius: 0;
    background-size: 800px 600px;
  }

  .img-7 {
    grid-column: 1 / span 4;
    grid-row: 5 / span 1;
    overflow: hidden;
    border-radius: 0;
    background-size: 800px 600px;
  }

  .img-8 {
    grid-column: 1 / span 4;
    grid-row: 6 / span 1;
    overflow: hidden;
    border-radius: 0;
    background-size: 800px 600px;
  }

  .img-9 {
    grid-column: 1 / span 4;
    grid-row: 7 / span 1;
    overflow: hidden;
    border-radius: 0;
    background-size: 800px 600px;
  }

  .img-10 {
    grid-column: 2 / span 2;
    grid-row: 4 / span 1;
    overflow: hidden;
    border-radius: 0;
    background-size: 800px 600px;
  }

  /*************************Contact Page for tablet *******************************/
  .container-contact {
    display: grid;
    grid-template-columns: auto 400px auto;
    grid-template-rows: 50px 100px 100px 200px 200px 150px;
    grid-row-gap: 15px;
  }

  .flex-box {
    grid-column: 2 / span 3;
  }

  .contact_form {
    grid-column: 2 / span 3;
  }

  .contact_form {
    grid-row: 4 / span 2;
  }

  .flip-card {
    grid-row: 6 / span 6;
    grid-column: 2 / span 2;
    display:grid;
    align-items: center;
    margin: 10px auto;
  }

  .contact-footer {
    grid-row: 7 / span 1;
    background-color: white;
    font-size: 12px;
    line-height: 1.5;
    color: #242424;
    grid-column: 2 / span 3;
    padding-top: 30px;
    padding-bottom: 30px;
   
    display: grid;
    align-items: center;
    margin: 10px auto;
  }
  /*************************Contact Page for tablet END *******************************/
}

/********************* END: tablet screen ************************/



/*****************************************************
          for big screen (bigger than 1024px)
*****************************************************/

@media all and (min-width: 1024px) {

  .container {
    display: grid;
    grid-template-columns: auto 40px 340px 300px auto;
    grid-template-rows: 70px 70px 10px 280px 280px 300px 100px;
    grid-row-gap: 50px;
  }

  /*row 1*/
  nav {
    background-color: white;
    text-align: left;
    padding: 40px;
    align-self: center;
  }

    nav a {
      font-size: 18px;
    }



  /*row 2*/
  header {
    color: #1c1c1c;
    grid-column: 2 / span 3;
    grid-row: 2 / span 1;
  }

  /*************************************** Home Page for big screen*********************************************/

  /* column */
  .education {
    grid-column: 2 / span 2;
  }

  .experience {
    grid-column: 2 / span 3;
  }

  .bupt-image, .gallary-image, .umich-image {
    grid-column: 2 / span 2;
  }

  .umich, .bupt, .gallary {
    grid-column: 4 / span 1;
  }

  /* row */
  .education {
    grid-row: 3 / span 1;
    margin: 20px 20px;
  }

  .umich, .umich-image {
    grid-row: 4 / span 1;
  }

  .bupt, .bupt-image {
    grid-row: 5 / span 1;
  }

  .experience {
    grid-row: 6 / span 1;
  }
}
    /*************************************** Home Page End *********************************************/


    /*************************************** Sharing Page for big screen ********************************************/
  @media all and (min-width: 800px) {

    .container-share {
      display: grid;
      grid-template-columns: auto 300px 200px 300px auto;
      grid-template-rows: 70px 70px 150px 100px 100px 100px 300px 100px;
      grid-row-gap: 50px;
    }
    .sharing-header{
        grid-column: 2 /span 4;
    }
    /* column */
    .share {
      grid-column: 2 / span 4;
    }

    .share-image {
      grid-column: 2 / span 4;
      max-height: 600px;
      overflow: hidden;
    }


    .csdn-image, .zhihu-image, .github-image {
      grid-column: 2 / span 1;
    }

    .csdn, .zhihu, .github {
      grid-column: 3 / span 4;
    }

    /* row */
    .share-image, .share {
      grid-row: 3 / span 1;
    }

    .csdn-image, .csdn {
      grid-row: 4 / span 1;
    }

    .github-image, .github {
      grid-row: 5 / span 1;
    }


    .zhihu-image, .zhihu {
      grid-row: 6 / span 1;
    }

    .map {
      grid-row: 7 / span 1;
      grid-column: 2 / span 4;
    }
    .share-footer {
      grid-row: 8 / span 1;
      background-color: white;
      font-size: 12px;
      line-height: 1.5;
      color: #242424;
      grid-column: 2 / span 4;
      padding-top: 30px;
      padding-bottom: 30px;
      text-align: center;
    }

    .share-image {
      border-radius: 5px;
      background-image: url("../images/inter.jpg");
      background-size: 324px 432px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      background-size: cover;
    }



    /*************************************** Sharing Page End********************************************/

    /******************* For gallary page Location ************************/
    .gallary_photo {
      grid-column: 2 / span 3; /* 760 px*/
      grid-row: 3 / span 4; /* 1900 px*/
      display: grid;
      grid-template-columns: 190px 190px 190px 190px;
      grid-template-rows: 320px 320px 320px 320px 300px 300px 300px;
      margin: auto;
      width: 760px;
      grid-row-gap: 0;
    }

    .img-1 {
      grid-column: 1 / span 1;
      grid-row: 1 / span 3;
      overflow: hidden;
      border-radius: 0;
      background-size: 900px 1200px;
    }

    .img-2 {
      grid-column: 2 / span 3;
      grid-row: 1 / span 1;
      overflow: hidden;
      border-radius: 0;
      background-size: 700px 400px;
    }

    .img-3 {
      grid-column: 2 / span 2;
      grid-row: 2 / span 1;
      overflow: hidden;
      border-radius: 0;
      background-size: 600px 400px;
    }

    .img-4 {
      grid-column: 2 / span 2;
      grid-row: 3 / span 1;
      overflow: hidden;
      border-radius: 0;
      background-size: 600px 400px;
    }

    .img-5 {
      grid-column: 4 / span 1;
      grid-row: 2 / 5;
      overflow: hidden;
      border-radius: 0;
      background-size: 1600px 1200px;
    }

    .img-6 {
      grid-column: 1 / span 1;
      grid-row: 4 / span 1;
      overflow: hidden;
      border-radius: 0;
      background-size: 800px 600px;
    }

    .img-7 {
      grid-column: 1 / span 4;
      grid-row: 5 / span 1;
      overflow: hidden;
      border-radius: 0;
      background-size: 800px 600px;
    }

    .img-8 {
      grid-column: 1 / span 4;
      grid-row: 6 / span 1;
      overflow: hidden;
      border-radius: 0;
      background-size: 800px 600px;
    }

    .img-9 {
      grid-column: 1 / span 4;
      grid-row: 7 / span 1;
      overflow: hidden;
      border-radius: 0;
      background-size: 800px 600px;
    }

    .img-10 {
      grid-column: 2 / span 2;
      grid-row: 4 / span 1;
      overflow: hidden;
      border-radius: 0;
      background-size: 800px 600px;
    }

    /*************************Contact Page for big screen *******************************/
    .container-contact {
      display: grid;
      grid-template-columns: auto 400px auto;
      grid-template-rows: 70px 100px 100px 300px 150px 300px 150px;
      grid-row-gap: 15px;
    }
    #header-contact{
      margin: 31px auto 20px auto;
    }
    .flex-box {
      grid-column: 2 / span 4;
    }

    .contact_form {
      grid-column: 2 / span 3;
    }

    .contact_form {
      grid-row: 4 / span 2;
    }

    .flip-card {
      grid-row: 6 / span 6;
      grid-column: 2 / span 3;
      display: grid;
      align-items: center;
      margin: 10px auto;
    }

    .contact-footer {
      grid-row: 7 / span 1;
      background-color: white;
      font-size: 12px;
      line-height: 1.5;
      color: #242424;
      grid-column: 2 / span 3;
      padding-top: 30px;
      padding-bottom: 30px;
      text-align: center;
    }
    /*************************Contact Page for big screen END *******************************/
  }

    /*End the media query*/

    @media screen and (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto; /* Removes scroll animation */
      }

      .skip a {
        -webkit-transition: none;
        transition: none;
      }

      /*reduce motion for header*/
      @-webkit-keyframes puff-in {
        0% {
          -webkit-transform: scale(1);
          transform: scale(1);
          -webkit-filter: blur(0px);
          filter: blur(0px);
          opacity: 0;
        }

        100% {
          -webkit-transform: scale(1);
          transform: scale(1);
          -webkit-filter: blur(0px);
          filter: blur(0px);
          opacity: 1;
        }
      }

      @keyframes puff-in {
        0% {
          -webkit-transform: scale(1);
          transform: scale(1);
          -webkit-filter: blur(0px);
          filter: blur(0px);
          opacity: 0;
        }

        100% {
          -webkit-transform: scale(1);
          transform: scale(1);
          -webkit-filter: blur(0px);
          filter: blur(0px);
          opacity: 1;
        }
      }

      /*reduce motion for animation text*/
      @keyframes change {
        100% {
          transform: translate3d(0, 0, 0);
        }
      }
    }