/* Common Files */ .ch-grid { margin: 20px 0 0 0; padding: 0; list-style: none; display: block; text-align: center; width: 100%; } .ch-grid:after, .ch-item:before { content: ''; display: table; } .ch-grid:after { clear: both; } .ch-grid li { width: 220px; height: 220px; display: inline-block; margin:20px 50px; } /* End common files */ .ch-item { border-radius: 50%; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); cursor: default; } .ch-info-wrap{ position: absolute; width: 180px; height: 180px; border-radius: 50%; -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; -ms-perspective: 800px; perspective: 800px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; top: 20px; left: 20px; background: #f9f9f9 url(../images/tg-home-header-bg.jpg); box-shadow: 0 0 0 10px rgba(255,255,255,1), inset 0 0 3px rgba(115,114, 53, 0.8); } .ch-info-wrap2{ position: absolute; width: 180px; height: 180px; border-radius: 50%; -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; -ms-perspective: 800px; perspective: 800px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; top: 20px; left: 20px; box-shadow: 0 0 0 10px rgba(255,255,255,1), inset 0 0 3px rgba(115,114, 53, 0.8); } .ch-info{ position: absolute; width: 180px; height: 180px; border-radius: 50%; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .ch-info > div { display: block; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-position: center center; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } .ch-info .ch-info-back { -webkit-transform: rotate3d(0,1,0,180deg); -moz-transform: rotate3d(0,1,0,180deg); -o-transform: rotate3d(0,1,0,180deg); -ms-transform: rotate3d(0,1,0,180deg); transform: rotate3d(0,1,0,180deg); background: #ED9C28 url(../images/tg-home-icon-bg.jpg); box-shadow:0 0 10px #1C3F40; border:10px solid rgba(255,255,255,0.5); } .ch-info .ch-info-back1 { -webkit-transform: rotate3d(0,1,0,180deg); -moz-transform: rotate3d(0,1,0,180deg); -o-transform: rotate3d(0,1,0,180deg); -ms-transform: rotate3d(0,1,0,180deg); transform: rotate3d(0,1,0,180deg); /*background: #7A5354 url(../images/tg-home-icon-bg.jpg);*/ background: #7A5354 url(../images/2tg-home-icon-bg.jpg); box-shadow:0 0 10px #1C3F40; border:10px solid rgba(255,255,255,0.5); } .ch-info .ch-info-back2 { -webkit-transform: rotate3d(0,1,0,180deg); -moz-transform: rotate3d(0,1,0,180deg); -o-transform: rotate3d(0,1,0,180deg); -ms-transform: rotate3d(0,1,0,180deg); transform: rotate3d(0,1,0,180deg); background: #8193A7; box-shadow:0 0 10px #1C3F40; border:10px solid rgba(255,255,255,0.5); } .ch-info .ch-info-back3 { -webkit-transform: rotate3d(0,1,0,180deg); -moz-transform: rotate3d(0,1,0,180deg); -o-transform: rotate3d(0,1,0,180deg); -ms-transform: rotate3d(0,1,0,180deg); transform: rotate3d(0,1,0,180deg); background: #7CA086; box-shadow:0 0 10px #1C3F40; border:10px solid rgba(255,255,255,0.5); } .ch-img-1 { background-image: url(../svg/tg-home-main1.svg); background-repeat: no-repeat; } .ch-img-2 { background-image: url(../svg/tg-home-main2.svg); background-repeat: no-repeat; } .ch-img-3 { background-image: url(../svg/tg-home-main3.svg); background-repeat: no-repeat; } .ch-info h3 { color: #fff; font-weight:800; text-transform: uppercase; letter-spacing: 0px; font-size: 18px; margin: 0 15px; padding: 25px 0 0 0; height: 60px; /*text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3);*/ } .ch-info p { color: #fff; padding: 10px 5px; font-style: italic; margin: 0 10px; font-size: 12px; /*border-top: 1px solid rgba(255,255,255,0.5);*/ } .ch-info p a { display: block; color: #fff; color: rgba(255,255,255,0.7); font-style: normal; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; padding-top: 4px; font-family: 'Open Sans', Arial, sans-serif; } .ch-info a:hover { text-decoration:none; } .ch-info p a:hover { color: #fff222; color: rgba(255,242,34, 0.8); text-decoration:none; } .ch-item:hover .ch-info-wrap { box-shadow: 0 0 0 0 rgba(255,255,255,0.8), inset 0 0 50px rgba(255,255,255, 0.8); } .ch-item:hover .ch-info-wrap2 { box-shadow: 0 0 0 0 rgba(255,255,255,0.8), inset 0 0 50px rgba(255,255,255, 0.8); } .ch-item:hover .ch-info { -webkit-transform: rotate3d(0,1,0,-180deg); -moz-transform: rotate3d(0,1,0,-180deg); -o-transform: rotate3d(0,1,0,-180deg); -ms-transform: rotate3d(0,1,0,-180deg); transform: rotate3d(0,1,0,-180deg); } .hovered .ch-info-wrap { box-shadow: 0 0 0 0 rgba(255,255,255,0.8), inset 0 0 50px rgba(255,255,255, 0.8); } .hovered .ch-info-wrap2 { box-shadow: 0 0 0 0 rgba(255,255,255,0.8), inset 0 0 50px rgba(255,255,255, 0.8); } .hovered .ch-info { -webkit-transform: rotate3d(0,1,0,-180deg); -moz-transform: rotate3d(0,1,0,-180deg); -o-transform: rotate3d(0,1,0,-180deg); -ms-transform: rotate3d(0,1,0,-180deg); transform: rotate3d(0,1,0,-180deg); } .hovered4 { color:#ffffff; text-shadow:0 0 3px #C44711; box-shadow:0 0 3px #000; background:#f0ad4e!important; } .hovered1 { color:#ffffff; text-shadow:0 0 0px #000; box-shadow:0 0 3px #000; background:#7A5354!important; } .hovered2 { color:#ffffff; text-shadow:0 0 0px #000; box-shadow:0 0 3px #000; background:#8193A7!important; } .hovered3 { color:#ffffff; text-shadow:0 0 0px #000; box-shadow:0 0 3px #000; background:#7CA086!important; }