#project { width: 96%; max-width: 1300px; padding: 0 2%; margin: 0 auto; position: relative; }

.projecttable { width: 100%; display: table; padding-bottom: 80px; }
.project_text { vertical-align: top; display: table-cell; width: 60%; }
.project_links { display: table-cell; vertical-align: top; text-align: right; word-wrap: break-word; }

.project_button { width: 45%; margin-left: 5%; padding: 15px; text-align: center; float: right; box-sizing: border-box; cursor: pointer; text-transform: uppercase; font-size: 15px; color: #ffffff; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.35); -moz-box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.35); box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.35); }
.button_title { font-family: Dessert Menu Sans; font-size: 25px; padding-bottom: 20px; line-height: 22px; }

.button1 { background: #6a0f6d; }
.button2 { background: #53b7e8; }
.button2 { background: #53b7e8; }
.button3 { background: #72bf44; }
.button4 { background: #ffdc0d; }
.button5 { background: #ff6619; }


.details { display: none; position: absolute; z-index: 100; box-sizing: border-box; padding: 20px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }

.detailstable { width: 100%; display: table; word-wrap: break-word; }
.details_text { vertical-align: top; display: table-cell; width: 60%; }
.details_links { display: table-cell; vertical-align: top; text-align: right; }

.details_button1 { width: 40%; margin-left: 5%; text-align: center; float: right; background: #ffffff; box-sizing: border-box; font-size: 14px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.35); -moz-box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.35); box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.35); }
.details_button2 { width: 50%; margin-left: 5%; margin-bottom: 15px; text-align: center; float: right; background: #ffffff; box-sizing: border-box; font-size: 14px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.35); -moz-box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.35); box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.35); }
.details_title { font-family: Dessert Menu Sans; font-size: 25px; padding: 15px; line-height: 22px; color: #ffffff; background: #09183d; -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; border-top-left-radius: 8px; border-top-right-radius: 8px; }
.details_title_middle { font-family: Dessert Menu Sans; font-size: 25px; padding: 15px; line-height: 22px; color: #ffffff; background: #09183d; }
.details_desc { padding: 15px; }

.details h3 { margin-top: 0; }

.project1 { background: #e3d2e4; }
.project2 { background: #e3d2e4; }
.project3 { background: #dff1fb; }
.project4 { background: #e4f3dc; }
.project5 { background: #e4f3dc; }
.project6 { background: #fff8d1; }
.project7 { background: #fff8d1; }
.project8 { background: #ffc6a9; }
.project9 { background: #ffc6a9; }




@media screen and (max-width: 980px) {
    
    .project_text { width: 50%; }
    .details_text { width: 50%; }
    
}


@media screen and (max-width: 768px) {
    
    .projecttable { padding-bottom: 30px; }
    .project_text { display: block; width: 100%; }
    .project_links { display: block; margin-top: 15px; }
    
    .details_text { display: block; width: 100%; }
    .details_links { display: block; margin-top: 15px; }
    
    .project_button { margin: 0 2.5%; }
    
    .details_button1 { margin: 0 2.5%; }
    .details_button2 { margin: 0 2.5% 15px 2.5%; }
    
}

@media screen and (max-width: 420px) {
    
    .project_button { width: 100%; margin: 0 0 10px 0; float: none; }
    
    .details_button1 { width: 100%; margin: 0 0 10px 0; float: none; }
    .details_button2 { width: 100%; margin: 0 0 10px 0; float: none; }
    
}