.bg11{ margin-top: 0; } .bg12{ display:block; width:100%; height:auto; padding-top:40px; padding-bottom:40px;background-color:#f4f1ec; background-image:url(../images/t9.png); background-position:left bottom; background-repeat:no-repeat;} .byTitle { text-align: center; font-size: 30px; color: #5d4b3c; line-height: 44px; font-weight: bold; margin-bottom: 0px; letter-spacing: 5px; } .titleCon { padding-top: 15px; cursor: default; } .titleCon h2 { font-size: 20px; line-height: 2; text-align: center; font-weight: bold; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; color: #5d4b3c; } .titleCon span { font-size: 16px; line-height: 1.5; text-align: center; color: #9e9e9e; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .itemList li { width: 23%; float: left; margin-left: 2%; } #loadOvrlay { background-color: #e8e8e8; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2000; } .items-container { padding: 0; } .itemVideo { padding-top: 15px; padding-bottom: 15px; } .code-link { background-color: #f5f5f5; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 2px; color: #6a8d9d; display: block; font-family: "text me one"; font-size: 13px; font-weight: bold; margin: 10px 0; padding: 3px 0; text-align: center; text-decoration: none; width: 70px; } .code-link:hover { text-decoration: none; background-color: #f8f8f8; border: 1px solid #c6c6c6; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); color: #6a8d9d; } .code-link:active { outline: 0 none; text-decoration: none; } .btn { width: 100%; overflow: hidden; position: relative; -webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3); } .btn img { width: 100%; position: relative; top: 0; left: 0; } .btn>img { height: 220px; } .btn .ovrly { background: rgba(0, 0, 0, 0.5); height: 100%; left: 0; position: absolute; top: 0; width: 100%; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .btn .buttons { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .btn .buttons .fa-link { left: -10px; } .btn .buttons .fa-search { left: 10px; } .btn:hover .buttons .fa { opacity: 1; left: 0; color: rgba(50, 50, 50, 0.9); } .btn:hover .ovrly { opacity: 1; } .btn .buttons { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .btn .buttons .fa { background: rgb(256, 256, 256); -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; display: inline-block; line-height: 40px; font-size: 16px; text-align: center; text-decoration: none; width: 40px; height: 40px; opacity: 1; position: relative; -webkit-transition: all 0.3s, color 0.1s 0.3s; -moz-transition: all 0.3s, color 0.1s 0.3s; -o-transition: all 0.3s, color 0.1s 0.3s; transition: all 0.3s, color 0.1s 0.3s; color: transparent; } .btn .buttons .fa-link { left: -10px; } .btn .buttons .fa-search { left: 10px; } .btn:hover .buttons .fa { opacity: 1; left: 0; color: rgba(50, 50, 50, 0.9); } .btn:hover .ovrly { opacity: 1; } .muneTip{ display: none; width: 80px; position: relative; top: 40px; left: 34px; } @media screen and (max-width: 640px){ .itemList li{ width: 96%; float: none; margin: 0 auto; } .bg11{ padding-top: 40px; } .muneTip{ display: inline-block; } }