#portfolio_tem{ margin-top: 70px; } #portfolio_tem .left_box{ margin-left: 0; } #portfolio_tem .left_box .big{ margin-bottom: 40px; position: relative; height: 431px; } #portfolio_tem .left_box .big img{ position: absolute; border-radius: 5px; } #portfolio_tem .thumbs .thumb{ float: left; position: relative; margin-right: 30px; cursor: pointer; margin-bottom: 10px; } #portfolio_tem .thumbs .thumb.last{ margin: 0; } #portfolio_tem .thumbs .thumb:hover .mask { display: block; opacity: 1; filter: alpha(opacity = 100); } #portfolio_tem .thumbs .thumb .mask { position: absolute; opacity: 0; filter: alpha(opacity = 0); box-shadow: 0px 1px 6px 2px #b1b1b1; top: 0px; left: 0px; border-radius: 5px; height: 100%; width: 100%; background: rgba(17, 137, 217, 0.5); -webkit-transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; transition: opacity .25s ease-in-out; } #portfolio_tem .thumbs .thumb .mask .more { color: #fff; font-size: 30px; font-weight: bold; position: absolute; bottom: 40%; left: 43%; } #portfolio_tem .right_box{ float: right; margin-top: 14px; } #portfolio_tem .right_box h2{ font-size: 28px; line-height: 27px; margin: 0 0 25px 0; } #portfolio_tem .right_box p{ font-size: 14px; line-height: 24px; margin-bottom: 18px; color: #3F3F3F; } /* Responsive -------------------------------------------------- */ /* Large desktop */ @media (min-width: 1200px) { } @media (min-width: 980px) { } @media (max-width: 979px) { } /* Portrait tablet to landscape and desktop */ @media (min-width: 768px) and (max-width: 979px) { #portfolio_tem .left_box .big{ height: 372px; } } /* Landscape phone to portrait tablet */ @media (max-width: 767px) { #portfolio_tem .left_box{ margin-bottom: 50px; } #portfolio_tem .left_box .thumbs{ overflow: hidden; } } /* Landscape phones and down */ @media (max-width: 480px) { #portfolio_tem .left_box .big { max-height: 350px; } #portfolio_tem .left_box .big img { margin-bottom: 10px; max-height: 350px; } #portfolio_tem .thumbs .thumb{ margin-right: 5px; } }