@media only screen and (min-width: 769px) { .li1, .li2, .li3 { width: 33%; transition: 0.8s; -moz-transition: 0.8s; -webkit-transition: 0.8s; -o-transition: 0.8s; min-height: 265px; margin-right: 0; } .active1 { width: 60%!important; background: #06c; } .nav_active { width: 20% !important; min-height: 265px; background: #333; } } .li1 { width:33%; } .li2 { width:33%; } .li3 { width:33%; margin-right: 0 } .list_title { font-weight: bold; font-size: 26px; line-height: 33px; text-align: left; } .list_text { font-size: 14px; line-height: 20px; width: 100%; text-align: left; } .list_box { padding: 65px 30px 40px 30px; color: #fff; position: absolute; top: 0; left: 0; box-sizing: border-box; width: 100%; height: 100%; z-index: 1; background-color: rgba(0, 0, 0, 0.2); transition: 0.8s; -moz-transition: 0.8s; -webkit-transition: 0.8s; -o-transition: 0.8s; } #company { width: 100%; } #company li { position: relative; display: block; overflow: hidden; float: left; } .list_box>img { -moz-transition: all 2.4s ease 0s; -ms-transition: all 2.4s ease 0s; -o-transition: all 2.4s ease 0s; -webkit-transition: all 2.4s ease 0s; transition: all 2.4s ease 0s; display: block; width: 50px; margin-bottom: 20px; } #company li { overflow: hidden; } #company li:hover img { -moz-transform: scale(1.3, 1.3); -ms-transform: scale(1.3, 1.3); -o-transform: scale(1.3, 1.3); -webkit-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); } #company li>img { position: absolute; top: 0; right: 0; width: auto; height: auto; max-width: none; moz-transition: all 2.4s ease 0s; -ms-transition: all 2.4s ease 0s; -o-transition: all 2.4s ease 0s; -webkit-transition: all 2.4s ease 0s; transition: all 2.4s ease 0s; display: block; height: 100%; } .list_title { font-weight: bold; font-size: 22px; line-height: 46px; } .list_box { padding: 30px 30px 40px 30px; color: #fff; position: absolute; top: 0; left: 0; box-sizing: border-box; width: 100%; height: 100%; z-index: 1; background-color: rgba(0, 0, 0, 0); transition: 0.8s; -moz-transition: 0.8s; -webkit-transition: 0.8s; -o-transition: 0.8s; } .list_box:hover { color: #fff; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0); } .active1 .list_box { background-color: rgba(0, 0, 0, 0); } .list_text { font-weight: 100; font-size: 12px; line-height: 26px; width: 30em; } .hvr-sweep-to-right { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-sweep-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.15); -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active1 { color: white; } .hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active1:before { -webkit-transform: scaleX(1); transform: scaleX(1); } .hvr-sweep-to-left { display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } .hvr-sweep-to-left:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-sweep-to-left:hover, .hvr-sweep-to-left:focus, .hvr-sweep-to-left:active1 { color: white; } .hvr-sweep-to-left:hover:before, .hvr-sweep-to-left:focus:before, .hvr-sweep-to-left:active1:before { -webkit-transform: scaleX(1); transform: scaleX(1); } .codrops-header { margin: 0 auto; padding: 2em; text-align: center; } .codrops-header h1 { margin: 0; font-weight: 300; font-size: 2.5em; } .codrops-header h1 span { display: block; padding: 0 0 0.6em 0.1em; font-size: 0.6em; opacity: 0.7; } .codrops-top { width: 100%; text-transform: uppercase; font-weight: 700; font-size: 0.69em; line-height: 2.2; } .codrops-top a { display: inline-block; padding: 0 1em; text-decoration: none; letter-spacing: 1px; } .codrops-top span.right { float: right; } .codrops-top span.right a { display: block; float: left; } .codrops-icon:before { margin: 0 4px; text-transform: none; font-weight: normal; font-style: normal; font-variant: normal; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; } .codrops-icon-drop:before { content: "\e001"; } .codrops-icon-prev:before { content: "\e004"; } section { text-align: center; } section h2 { font-weight: 300; font-size: 2em; padding: 1em 0; } .codrops-header+section { padding-top: 1.5em; } .bt6 { font-weight: bold; line-height: 2em; font-size: 1.25rem; color: #454545; } @media only screen and (max-width: 768px) { .active1 { background: #06c; } .nav_active { min-height: 265px; background: #333; } .li1 { width: 100% !important } .li2 { width: 100% !important } .li3 { width: 100% !important } #c_static_001_P_516-1645059733196 .e_html-1 { display-radio: 1; background_radio: 1; min-width: 0px; max-height: 100%; min-height: 550px; max-width: 1560px; width: 94%; margin-left: auto; margin-right: auto; margin-top: 30px; height: 3000px !important; } .li1, .li2, .li3 { width: 100%; transition: 0.8s; -moz-transition: 0.8s; -webkit-transition: 0.8s; -o-transition: 0.8s; min-height: 265px; margin-bottom: 10px; width: 100% !important; } } @media screen and (max-width: 25em) { .codrops-icon span { display: none; } }