/* general */
body {
    height: 100%;
    background-color: #ebedef;
}

html {
    height: 100%;
}


i {
  border: solid black;
  border-width: 0 .1vw .1vw 0;
  display: inline-block;
  padding: 3px;
}

.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.main {
    background-color: #ebedef;
}

.periodic-table {
    width: 40%;
}

.periodic-table > .landing {
    margin-bottom: 2vh;
}

.footer {
    position: fixed;
    right: .2%;
    bottom: 0;
    font-size: .75vw;
    opacity: .75;
}

/* main periodic table element */
@keyframes elementIn {
    from {
    opacity: 0;
    transform: translateY(-800px);

}
    to {
    opacity: 1.0;
    transform: translateY(0px);
}
}

.element {
    height: 10.5vw;
    width: 10.5vw;
    padding: 1px;
    cursor: pointer;
    opacity: 1.0;
    animation-name: elementIn;
    animation-duration: 2s;
    color: initial;
}

.element .symbol {
    font-size: 2.9vw;
}

.element .bg-c1 {
    background-color: white;
}

.element .bg-c2 {
    background-color: #61FD65;
}

.element .bg-c3 {
    background-color: #FED568;
}

.element .bg-c4 {
    background-color: #FFFD76;
}

.element .bg-c5 {
    background-color: #E3C9CA;
}

.element .bg-c6 {
    background-color: #8ED4FD;
}

/*these are not real colors these are images*/
.element .bg-c100 {
    background-image: url("../images/photos/barncorner_small.jpg");
    background-size: auto 100%;
    color: #d6e4c0;
}

.element .bg-c200 {
    background-image: url("../images/photos/waves_small.jpg");
    background-size: auto 100%;
    color: #d6e4c0;
}

.element .bg-c300 {
    background-image: url("../images/photos/converse_small.jpg");
    background-size: auto 100%;
    color: #d6e4c0;
}

.element .bg-c400 {
    background-image: url("../images/photos/chair_small.jpg");
    background-size: auto 100%;
    color: #d6e4c0;
}

.element .bg-c500 {
    background-image: url("../images/photos/1A_NatureMorte2_Tintype13x18_small.jpg");
    background-size: auto 100%;
    color: #d6e4c0;
}

.element .name {
    font-size: .9vw;
}

.element-col {
    width: 10vw;
}

.annotation {
    height: 10.5vw;
    padding: 1px;
}

.annotation .info {
    font-size: .7vw;
}

/* myown elements and related */
.tool {
	position: fixed;
    right: .9%;
    top: 1.5%;
    height: 2.3vw;
    width: 2.3vw;
    cursor: pointer;
    transition-property: width, height, background-color;
    transition-duration: 0.5s;
    transition-timing-function: ease;
}

@media only screen and (max-width: 991px) {
    .tool {
        height: 0px;
        width: 0px;
    }
}

.tool-myown {
	position: absolute;
    right: .3vw;
    top: .4vw;
    height: 1.5vw;
    width: 1.5vw;
}

.myown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5vw, 10.5vw) ) ;;
  grid-gap: 1px;
  grid-auto-rows: minmax(10.5vw, 10.5vw);
}

.grid-element {
  background-color: #e4e4e4;
  height: 100%;
  color: #fff;
  border-radius: 5px;
  font-size: 150%;
}

.edit {
    position: absolute;
    max-height: 10.3vw;
    max-width: 10vw;
    cursor: initial;
    transition: transform 1s;
}

.edit .symbol {
    font-size: 2vw;
    background-color: inherit;
}

.edit .name {
    font-size: .7vw;
    background-color: inherit;
}

.edit .color {
    height: 1.4vw;
    width: 1.4vw;
    border-style: double;
    cursor: pointer;
}

.edit .color:active {
    border-style: solid;
}

/* bootstrap tooltip override */
.tooltip-inner {
    max-width: 350px;
    font-size: .7vw;
}


.carousel .carousel-control-prev { visibility: hidden; }
.carousel:hover .carousel-control-prev { visibility: visible; }

.carousel .carousel-control-next { visibility: hidden; }
.carousel:hover .carousel-control-next { visibility: visible; }