body{
    margin:0;
    font-family:Arial;
    background:#f2f2f2;
}

/* NAVBAR */
.navbar{
    background:#2c5d63;
    overflow:hidden;
}

.navbar a{
    float:left;
    display:block;
    color:white;
    padding:14px 20px;
    text-decoration:none;
    transition:0.3s;
}

.navbar a:hover{
    background:white;
    color:black;
}

/* BOX MODEL */
.box{
    background:white;
    margin:20px;
    padding:20px;
    border:5px solid #2c5d63;
}

/* FLOAT */
.left{
    float:left;
    width:45%;
    margin:2%;
    background:white;
    padding:20px;
}

.right{
    float:right;
    width:45%;
    margin:2%;
    background:white;
    padding:20px;
}

/* IMAGE HOVER */
.imgbox{
    width:250px;
    opacity:0.7;
    transition:0.4s;
}

.imgbox:hover{
    opacity:1;
    transform:scale(1.1);
}

/* Z-INDEX HOVER BOX */
.hover-container{
    position:relative;
    margin:40px;
}

.hidden-box{
    position:absolute;
    top:0;
    left:0;
    width:200px;
    height:200px;
    background:red;
    z-index:1;
    opacity:0;
    transition:0.3s;
}

.hover-container:hover .hidden-box{
    opacity:1;
    z-index:10;
}