body {
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: repeat(12, 1fr);
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  background-color: #fff;
  color: #004E89;
}

/* Start the header */
header {
  background-color: #FF6B35;
  grid-column: 1 / span 12;
  height: 130px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  position: fixed;
  width: 130px;
  top: 30px;
  right: 100px;
}

.logo img {
  width: 150px;
}

/* end of header */


/* style the main for left and right colms text */
.txt {
  padding: 5%;
}

.title {
  font-family: 'Aparey', Times, serif;
  font-size: 3.5vw;
  margin-bottom: -0.1em;
}

h2 {
  color: #FF6B35;
  font-size: 2rem;
}

p {
  font-size: 1rem;
}

/* end setting of main text */

/* set the colm widths*/
.Lcol {
  display: grid;
  place-items: center;
  grid-column: 1 / span 6;
}

.Rcol {
  display: grid;
  place-items: center;
  grid-column: 7 / span 12;
}

div img {
  width: 100%;
}

.gifimg {
  background-image: url("../img/sib.gif");
  background-size: cover;
}

/* end setting the colm width */

/* footer */
.footer {
  color: #004E89;
  background-color: #F7C59F;
  grid-column: 1 / span 12;
  border-top: 9px solid #FF6B35;
  padding: 1rem;
  text-align: center;
}

.price {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 5%;
  padding: 0 5%;
}

.price>div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: left;
  padding: 3%;
}

table {
  width: 100%;
  color: black;
}

table,
th,
td {
  border-bottom: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 15px;
  text-align: left;
}

/* end footer */



/* menu bar */
#mainnav ul {
  position: absolute;
  top: -20px;
  left: -60px;
  z-index: 100;
}

#mainnav li {
  list-style: none;
  font-size: 1.75em;
  margin: 2em;
}

#mainnav li:hover span {
  opacity: 1;
  transition: 0.25s;
}

#mainnav li.invisible {
  opacity: 0;
  display: none;
  transition: all 0.5s;
}

#mainnav li.animate {
  opacity: 0;
  animation-duration: 0.25s;
  animation-name: easeOutBounce;
  animation-fill-mode: forwards;
}

#mainnav li.animate:nth-child(4) {
  animation-delay: 0s;
}

#mainnav li.animate:nth-child(4) {
  animation-delay: 0.15s;
}

#mainnav li.animate:nth-child(4) {
  animation-delay: 0.3s;
}

#mainnav li.animate:nth-child(4) {
  animation-delay: 0.5s;
}

#mainnav a {
  text-decoration: none;
  color: rgba(0, 0, 0, .0);
}

#mainnav i {
  background-color: #004E89;
  border: 8px solid #FF6B35;
  padding: .5em;
  border-radius: 25%;
}

/* icon pack */
.menuicon,
.homeicon,
.workicon,
.contacticon,
.abouticon {
  background-size: cover;
  background-position: center;
}

.menuicon {
  background-image: url("../img/4x/menu.png");
}

.homeicon {
  background-image: url("../img/4x/home.png");
}

.workicon {
  background-image: url("../img/4x/work.png");
}

.abouticon {
  background-image: url("../img/4x/about.png");
}

.contacticon {
  background-image: url("../img/4x/contact.png");
}

/* hidding icon words*/
#mainnav span {
  color: #004E89;
  padding: .35em;
  margin-left: .5em;
  border-radius: .2em;
  font-size: .75em;
  transition: .3s;
  background: #F7C59F;
  opacity: 0;
  position: relative;
}

#mainnav span:before {
  content: '';
  width: 0px;
  height: 0px;
  position: absolute;
  left: -.4em;
  top: 50%;
  margin-top: -.5em;
  border-style: solid;
  border-width: .5em .5em .5em 0;
  border-color: transparent #F7C59F transparent transparent;
}

/* Imitates jQuery UI's ease-out-bounce animation effect */
@keyframes easeOutBounce {
  0% {
    font-size: 0;
  }

  35% {
    font-size: 1.75em;
  }

  59% {
    font-size: 1.3125em;
  }

  75% {
    font-size: 1.75em;
  }

  80% {
    font-size: 1.6275em;
  }

  90% {
    font-size: 1.75em;
  }

  95% {
    font-size: 1.715em;
  }

  100% {
    font-size: 1.75em;
    opacity: 1;
  }
}


/* contact page */
.map {
  background-image: url("../img/map.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

/* Work show case page */
.catag {
  margin: 5px 0 25px;
}

.catag>a {
  background-color: #205F82;
  color: #efefd0;
  padding: 5px;
  border-radius: 5px;
}

.catag>a:hover {
  background-color: black;
}

.date {
  font-size: 13px;
  font-weight: bold;
}

/* page size of work width */
#projects {
  grid-column: 1 / span 12;
  position: relative;
  text-align: center;
  margin: 30px auto;

}

#projects .flip {
  width: 400px;
  height: 400px;
  display: inline-block;
  text-align: left;
  -webkit-transform: scale(0.90);
  -moz-transform: scale(0.90);
  -o-transform: scale(0.90);
  -ms-transform: scale(0.90);
  transform: scale(0.90);

  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .2);

  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -ms-transition: all 0.3s;
  transition: all 0.3s;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
}

#projects .flip:hover {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);

  -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, .2);
  box-shadow: 0 5px 25px rgba(0, 0, 0, .2);
  cursor: pointer;
}

#projects .flip.blur {
  -webkit-filter: blur(3px);

  -webkit-transform: scale(0.88);
  -moz-transform: scale(0.88);
  -o-transform: scale(0.88);
  -ms-transform: scale(0.88);
  transform: scale(0.88);
  filter: alpha(opacity=60);
  opacity: 0.6;
}

#projects .flip.rotate {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

#projects:hover .clicked {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.front,
.back {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;

}

.front {
  z-index: 2;
}

.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
  width: 100%;
  height: 100%;
  padding: 20px;
  z-index: 1;
  background: #efefd0;
}

/* About Page*/
h1 {
  font-family: 'Aparey', Times, serif;
  color: #004E89;
  margin-bottom: 0;
}

.about {
  grid-column: 2 / span 10;
  color: black;
  margin-top: 2%;
}

.umlogo {
  width: 20%;
  font-size: large;
  text-align: left;
  float: left;
}

.tagline {
  width: 54%;
  text-align: center;
  font-size: large;
  float: left;
  padding-left: 3%;
  padding-right: 3%;
}

.tagline h1 {
  background-color: #004E89;
  color: aliceblue;
  padding: 5px;
  text-transform: uppercase;
}

.tagline h2 {
  margin-bottom: -5px;

}

.tagline h3 {
  font-size: 1rem;
}

.tagline img {
  width: 80%;
}

.tech {
  width: 20%;
  text-align: left;
  float: right;
}

.tech>img {
  width: 40%;
}


/* for small screen */
@media screen and (max-width: 800px) {
  body {
    display: block;
  }

  .title {
    font-size: 3em;
  }

  h2 {
    font-size: 1.5em;
  }

  p {
    font-size: 1em;
  }

  .footer,
  .price {
    display: block;
  }

  .logo {
    right: 20px;
  }

  .about {
    display: inline;
  }


  .umlogo,
  .tagline,
  .tech {
    float: none;
    width: 90%;
  }
}

@media screen and (max-width:450px) {
  #projects .flip {
    width: 250px;
    height: 250px;
  }
}