body{
    font-family: "Open Sans",sans-serif;
    background: #37383D;
}

nav{
    background: #2c3e50;
    box-shadow: 5px 5px 8px #212328;
}
nav ul li a:hover{
    color: #7CB4EC;
}

footer.page-footer{
    background: #2c3e50;
    box-shadow: 5px 5px 8px #212328;
    height: 100px
}

#logo-img{
    padding-left: 10px;
    padding-top: 6px;
}

ul.side-nav a:hover{
    background: #2c3e50;
    color: #fff;
    -webkit-transition: all .5s;
    transition: all .5s;
    border-left: 10px solid #33aaff;
}

.card{
    background: #2c3e50;
}

.collection{
    font-size: 18px;
}

li i.material-icons{
    font-size: 18px;
}

ul.collection li.collection-item:hover{
    background: #ccc;
    cursor: pointer;
}

/* link style */

.hover-link-style{
    position: relative;
    color: #1e90ff;
    text-decoration: none;
    font-size: 18px;
}

.hover-link-style::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #2c3e50;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s;
    padding-top: 1px;
}

.hover-link-style:hover::before{
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

/* white underline */
.hover-link-style2{
    position: relative;
    color: #1e90ff;
    text-decoration: none;
    font-size: 18px;
}

.hover-link-style2::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #fff;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s;
    padding-top: 1px;
}

.hover-link-style2:hover::before{
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}


span.span-green-style{
    color: green;
    font-size: 19px;
}

span.span-red-style{
    color: red;
    font-size: 19px;
    font-style: italic;
}

.center-align {
    text-align: center;
}

a[href="#credit-modal"] {
    color: lightgrey;
    font-size: 14px;
}

#credit-modal .col {
    padding: 7px 0;
}

#credit-modal a {
    color: #2c3e50;
}

/* tabs design */

.tabs .tab a{
    color:#039be5;
} /*Black color to the text*/

.tabs .tab a:hover {
    background-color:#eee;
    color:#0277bd;
} /*Text color on hover*/

.tabs .tab a.active {
    color:#1e90ff;
} /*Background and text color when a tab is active*/

.tabs .indicator {
    background-color:#1e90ff;
} /*Color of underline*/

.content-img { max-width: 700px; }

/* media */

@media only screen and (max-width: 768px) {
    .content-img{
        max-width: 99%;
    }

    footer.page-footer{
        height: auto;
    }
}