/*****************************************/
/* Shared styles */
/*****************************************/
.orange {
    color: #ed7930;
}

#background-container {
    background-image: url("../images/wood-flooring.jpg");
    background-size: cover;
    background-attachment: fixed;
    min-height: 500px;
}

#content-container {
    background-color: rgba(0, 0, 0, 0.6);
    min-height: 500px;
    position: relative;
}

#page {
    background-image: url("../images/wood-flooring.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-color: rgba(0, 0, 0, 0.9);
}

.containers {
    border-radius: 3px;
}

.alert-divs {
    position: absolute;
    width: 100%;
    top: -50px;
    height: 50px;
}

.translate-alert {
    transform: translateY(50px);
    transition-duration: 1s;
}

a:hover, a:link, a:visited, a:active {
    color: #e5a227;
}

/*****************************************/
/* Login page styles */
/*****************************************/
#login-form {
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    top: 10%;
    left: 30%;
}

/* Projects styles */
/*****************************************/
.project-cards p {
    font-weight: bold;
}

/* Projects images styles */
/*****************************************/
.containers {
    background-color: #f7f7f7;
    box-shadow: 0px 0px 2px #f39c12;
}
.images-cards img {
    width: 100%;
}

/* Pagination styles */
/*****************************************/
.pg-buttons {
    width: 80px;
}

/* Icons styles */
/*****************************************/
.update-icon {
    color: forestgreen;
}
.delete-icon {
    color: #f39c12;
}

/*****************************************/
/* Testimony styles */
/*****************************************/
.circle {
    position: relative;
    bottom: 25px;
    width: 30px;
    height: 30px;
    background-color: #f39c12;
    border-radius: 15px;
}

div.testimony .circle i {
    color: #ffffff;
}

span.customers {
    color: #343a40;
    font-weight: bold;
}

.stars {
    color: #f39c12;
}

/* Review form styles */
/*****************************************/
#review-form {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    top: 10%;
    left: 20%;
}

#review-background-container {
    background-image: url("../images/wood-flooring.jpg");
    background-size: cover;
    background-attachment: fixed;
    min-height: 700px;
}

#review-content-container {
    background-color: rgba(0, 0, 0, 0.6);
    min-height: 700px;
    position: relative;
}
.invitation-rows {
    border-radius: 3px;
}

.invitation-icons i {
    color: #f39c12;
}

.invitations {
    border-radius: 3px;
}

/*****************************************/
/* Breakpoints styles */
/*****************************************/
/* Extra large devices */
@media (min-width: 1300px) {

    #background-container {
        min-height: 800px;
    }

    #content-container {
        min-height: 800px;
    }

    #login-form {
        top: 25%;
        width: 30%;
        left: 35%;
    }

    #review-background-container {
        min-height: 850px;
    }

    #review-content-container {
        min-height: 850px;
    }

    #review-form {
        top: 10%;
        width: 40%;
        left: 30%;
    }
}

/* iPad & tablets - landscape mode */
@media (max-width: 1024px) {
    #background-container {
        min-height: 700px;
    }

    #content-container {
        min-height: 700px;
    }

    #login-form {
        width: 60%;
        left: 20%;
    }
}

/* iPad & tablets - portrait mode */
@media (max-width: 768px) {
    #background-container {
        min-height: 900px;
    }

    #content-container {
        min-height: 900px;
    }

    #login-form {
        width: 60%;
        left: 20%;
    }
}

/* Small screens - Cell phones */
@media (max-width: 400px) {
    #background-container {
        min-height: 500px;
    }

    #content-container {
        min-height: 500px;
    }

    #login-form {
        width: 80%;
        left: 10%;
    }

    #review-form {
        top: 10%;
        width: 90%;
        left: 5%;
    }

    #company-title {
        display: none;
    }
}