@charset "UTF-8";

@import url("header.css");

.main {
    width: 98%;
    max-width: 940px;
    /* 2019 */
    /*height: 300px;*/
    text-align: center;
    /* text-align-last: center; */
    /* 2019 */
    margin: 20px auto;
}

.main div {
    /* 2019 */
    /*width: 100px;*/
    width: 98px;
    /* height: 100px; */
    height: 98px;
    /* 2019 */
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    text-align: justify;
    position: relative;
}
.main div a span{
    position: absolute;
    bottom: 0;
    right: 0;
}

.main div:hover .slideup{
    transition: 1s;
    bottom: 0px;
    opacity: 1;
}
.slideup{
    position: absolute;
    bottom: 60px;
    width: 98px;
    height: 48px;
    transition: 1s;
    text-shadow: 1px 1px 2px black;
    font-family: Arial, Helvetica, sans-serif;
    overflow: visible;
    text-align: center;
    text-anchor: middle;
    opacity: 0;
    color:white;
    text-decoration-line: none;
    text-align: center;
    -moz-text-align-last: center;
    text-align-last: center;
    white-space: pre-wrap;
    background: linear-gradient(00deg, #868686bd, #fff0);
}

#one-2,
#three-5,
#three-8 {
    border: 1px solid black;
    /* 2019 */
    border-radius: 5px;
    width: 96px;
    height: 96px;
    /* 2019 */
    transition: opacity 3s ease;
}

#one-4,
#three-9 {
    background-color: green;
    /* 2019 */
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -webkit-transition: opacity 3s ease;
    -moz-transition: opacity 3s ease;
    -ms-transition: opacity 3s ease;
    -o-transition: opacity 3s ease;
    transition: opacity 3s ease;
    border-radius: 5px;
    /* 2019 */
}

#two-2,
#two-8 {
    background-color: gray;
    /* 2019 */
    /*border: 1px solid white;*/
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -webkit-transition: opacity 3s ease;
    -moz-transition: opacity 3s ease;
    -ms-transition: opacity 3s ease;
    -o-transition: opacity 3s ease;
    transition: opacity 3s ease 1s;
    border-radius: 5px;
    /* 2019 */
}

#two-5,
#three-1 {
    background-color: orange;
    /* 2019 */
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -webkit-transition: opacity 3s ease;
    -moz-transition: opacity 3s ease;
    -ms-transition: opacity 3s ease;
    -o-transition: opacity 3s ease;
    transition: opacity 3s ease 2s;
    border-radius: 5px;
    /* 2019 */
}

#one-1 {
    background-image: url('images/index1.jpg');
    -webkit-transition: opacity 0.65s ease;
    -moz-transition: opacity 0.65s ease;
    -ms-transition: opacity 0.65s ease;
    -o-transition: opacity 0.65s ease;
    transition: opacity 0.65s ease;
    /*border-radius: 5px;*/
    /* 2019 */
    animation: fade-in-move-right 3.0s;
    position: relative;
}

#one-7 {
    background-image: url('images/index2.jpg');
    /* 2019 */
    -webkit-transition: opacity 0.65s ease;
    -moz-transition: opacity 0.65s ease;
    -ms-transition: opacity 0.65s ease;
    -o-transition: opacity 0.65s ease;
    transition: opacity 0.65s ease;
    animation: fade-in-move-right 3.0s;
}

#two-3 {
    background-image: url('images/index3.jpg');
    /* 2019 */
    /* margin-left: -1px; */
    -webkit-transition: opacity 0.65s ease;
    -moz-transition: opacity 0.65s ease;
    -ms-transition: opacity 0.65s ease;
    -o-transition: opacity 0.65s ease;
    transition: opacity 0.65s ease;
    /*border-radius: 5px;*/
    /* 2019 */
    animation: fade-in-move-left 3.5s;
}

#two-5 {
    /* 2019 */
    /*margin-left: 1px;*/
    /* 2019 */
}

#two-6 {
    background-image: url('images/index4.jpg');
    /* 2019 */
    /*border: 1px solid white;*/
    -webkit-transition: opacity 0.65s ease;
    -moz-transition: opacity 0.65s ease;
    -ms-transition: opacity 0.65s ease;
    -o-transition: opacity 0.65s ease;
    transition: opacity 0.65s ease;
    /*border-radius: 5px;*/
    /* 2019 */
    animation: fade-in-move-left 3.5s;
}

#one-6,
#three-3 {
    border: 1px solid brown;
    /* 2019 */
    width: 96px;
    height: 96px;
    border-radius: 5px;
    /* 2019 */
}

#three-4 {
    background-image: url('images/index5.jpg');
    /* 2019 */
    -webkit-transition: opacity 0.65s ease;
    -moz-transition: opacity 0.65s ease;
    -ms-transition: opacity 0.65s ease;
    -o-transition: opacity 0.65s ease;
    transition: opacity 0.65s ease;
    /*border-radius: 5px;*/
    /* 2019 */
    animation: fade-in-move-right 3.5s;
}

#one-9 {
    background-image: url('images/index6.jpg');
    /* 2019 */
    -webkit-transition: opacity 0.65s ease;
    -moz-transition: opacity 0.65s ease;
    -ms-transition: opacity 0.65s ease;
    -o-transition: opacity 0.65s ease;
    transition: opacity 0.65s ease;
    /*border-radius: 5px;*/
    /* 2019 */
    animation: fade-in-move-right 2.5s;
}

#three-7 {
    background-image: url('images/index7.jpg');
    /* 2019 */
    -webkit-transition: opacity 0.65s ease;
    -moz-transition: opacity 0.65s ease;
    -ms-transition: opacity 0.65s ease;
    -o-transition: opacity 0.65s ease;
    transition: opacity 0.65s ease;
    /*border-radius: 5px;*/
    /* 2019 */
    animation: fade-in-move-right 4s;
}
.main div #one-5 {
    display: inline-block;  
}

/* 2019 */
.newline {
    display: block;
    width: 0px;
    height: 0px;
}
@media only screen and (max-width: 940px) {
    #one-3, #two-1, #three-2 {
        display: none;
    }
}

/* @media only screen and (max-width: 940px) {
    #one-3, #two-1, #three-2 {
        display: none;
    }
  } */

  @media only screen and (max-width: 880px) {
    #one-3 {
        display: none;
    }
    #one-5 {
        display: none;
    }
    #two-1 {
        display: none;
    }
    #two-5 {
        display: none;
    }
    #two-8 {
        display: none;
    }
    #two-9 {
        display: none;
    }
    #three-2 {
        display: none;
    }
    #three-6 {
        display: none;
    }
  }
  @media only screen and (max-width: 680px) {
    #one-2 {
        display: none;
    }
    #one-3 {
        display: none;
    }
    #one-5 {
        display: none;
    }
    #two-1 {
        display: none;
    }
    #two-5 {
        display: none;
    }
    #two-7 {
        display: none;
    }
    #two-8 {
        display: none;
    }
    #two-9 {
        display: none;
    }
    #three-2 {
        display: none;
    }
    #three-6 {
        display: none;
    }
    #three-8 {
        display: none;
    }
    #three-9 {
        display: none;
    }
    .nav a {
        font-family: 'Microsoft Sans Serif';
        font-size: 12pt;
        font-weight: lighter;
        letter-spacing: 1px;
        text-decoration: none;
        color: #727273;
        padding-right: 15px;
    }
  }

@media only screen and (max-width: 345px) {
    .main{
        max-width: 940px;
        text-align: center;
        margin: 0 auto;
    }
     .main div{
        width: 90px;
        height: 90px;
    }

    #one-6, #three-3{
        width: 89px;
        height: 89px;
    }
/*
    #one-3, #two-1, #three-2 {
        display: none;
    } */
}
@keyframes fade-in-move-right {
	0% {
	  opacity: 0;
	  transform: translateX(-55rem);
	}
	100% {
	  opacity: 1;
	  transform: translateX(0);
    }
}

@keyframes fade-in-move-left {
	0% {
	  opacity: 0;
	  transform: translateX(25rem);
	}
	100% {
	  opacity: 1;
	  transform: translateX(0);
    }
}

@keyframes fade-in-move-up {
	0% {
	  opacity: 0;
	  transform: translateY(20rem);
	}
	100% {
	  opacity: 1;
	  transform: translateY(0);
    }
}