@import url(/googleapis.com/css?family=Titillium+Web:300); @import url(/com/api/?family=entypo); *, *:before, *:after { margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } #gal { position:relative; width:1180px; height:460px; margin:0 auto; top:100px; background:white; -webkit-box-shadow:0px 0px 0px 10px white, 5px 5px 0px 10px rgba(0,0,0,0.1); -moz-box-shadow:0px 0px 0px 10px white, 5px 5px 0px 10px rgba(0,0,0,0.1); box-shadow:0px 0px 0px 10px white, 5px 5px 0px 10px rgba(0,0,0,0.1); -webkit-transform:translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #gal:after { content:''; position:absolute; bottom:37px; right:0; left:0; width:100%; height:1px; background:rgba(255,255,255,0.35); z-index:3; } #gal ul {list-style-type:none;} input[type="radio"], input[type="radio"] + label { position:absolute; bottom:25px; display:block; width:26px; height:26px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; cursor:pointer; } input[type="radio"] { opacity:0; z-index:9; } input[value="one"], input[value="one"] + label {left:100px;} input[value="two"], input[value="two"] + label {left:336px;} input[value="three"], input[value="three"] + label {left:572px;} input[value="four"], input[value="four"] + label {left:808px;} input[value="five"], input[value="five"] + label {left:1044px;} input[type="radio"] + label { background:rgba(255,255,255,0.35); z-index:7; -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15); -moz-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15); box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15); -webkit-transition:all .3s; -moz-transition:all .3s; -o-transition:all .3s; transition:all .3s; } [class*="entypo-"]:before { position:absolute; font-family: 'entypo', sans-serif; } figure[class*="entypo-"]:before { left:10px; top:5px; font-size:2rem; color:rgba(255,255,255,0); z-index:1; -webkit-transition:color .1s; -moz-transition:color .1s; -o-transition:color .1s; transition:color .1s; } a[class*="entypo-"]:before { top:8px; left:9px; font-size:1.5rem; color:white; } a:hover[class*="entypo-"]:before { color:white; } figure, figure img, figcaption { position:absolute; top:0; right:0; } figure { bottom:0; left:0; width:1180px; height:460px; display:block; overflow:hidden; } figure img { bottom:0; left:0; display:block; width:1180px; height:460px; z-index:1; -webkit-transform:translateX(600px); -moz-transform:translateX(600px); -ms-transform:translateX(600px); -o-transform:translateX(600px); transform:translateX(600px); -webkit-transition:all .15s .15s, z-index 0s; -moz-transition:all .15s .15s, z-index 0s; -o-transition:all .15s .15s, z-index 0s; transition:all .15s .15s, z-index 0s; } figcaption { display:block; width:450px; height:460px; padding:20px 80px; background-image:radial-gradient(rgba( 0,0,0,0.8), transparent); background-size:600px 600px; background-repeat:no-repeat; text-align:center; z-index:3; -webkit-transform:translateX(460px); -moz-transform:translateX(460px); -ms-transform:translateX(460px); -o-transform:translateX(460px); transform:translateX(460px); -webkit-transition:all .35s; -moz-transition:all .35s; -o-transition:all .35s; transition:all .35s; } figcaption h4 { width:100%; float:left; color:#fff; font-size:26px; } figcaption h4 a{ color:#fff; display:inline-block; line-height:60px; text-decoration:none; border-bottom:1px #868686 solid; } figcaption ul { width:100%; float:left; padding-top:10px; } figcaption ul li { width:100%; display:inline-block; } figcaption ul li a { width:90%; height:38px; color:#fff; margin:0 5%; display:inline-block; text-decoration:none; line-height:38px; font-size:14px; text-align:center; -webkit-transition:all .15s; -moz-transition:all .15s; -o-transition:all .15s; transition:all .15s; } figcaption ul li a:hover { background:rgba(255,255,255,0.1); padding:0 20px; -webkit-box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,1); -moz-box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,1); box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,1); } figcaption p { padding:50px 15px; font-family:'Titillium Web', sans-serif; font-weight:300; color:#333; background-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0.35)), color-stop(0.3, rgba(255,255,255,0.35)), color-stop(0.3, transparent), color-stop(0.7, transparent), color-stop(0.7, rgba(255,255,255,0.35)), to(rgba(255,255,255,0.35))); background-image:-webkit-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%); background-image:-moz-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%); background-image:-o-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%); background-image:linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%); background-size:1px 100%; background-repeat:no-repeat; background-position:50% 0%; } input[type="radio"]:hover + label { background:rgba(255,255,255,0.6); } input[type="radio"]:checked + label { background:rgba(255,255,255,1); -webkit-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3); -moz-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3); box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3); } input[type="radio"]:checked + label:before {} input[type="radio"]:checked ~ figure img { z-index:2; -webkit-transform:translatex(0px); -moz-transform:translatex(0px); -ms-transform:translatex(0px); -o-transform:translatex(0px); transform:translatex(0px); -webkit-transition:all .15s, z-index 0s; -moz-transition:all .15s, z-index 0s; -o-transition:all .15s, z-index 0s; transition:all .15s, z-index 0s; } input[type="radio"]:checked ~ figure[class*="entypo-"]:before { z-index:3; color:rgba(255,255,255,0.5); -webkit-transition:color .5s; -moz-transition:color .5s; -o-transition:color .5s; transition:color .5s; } input[type="radio"]:checked ~ figure figcaption { z-index:8; -webkit-transform:translateX(0px); -moz-transform:translateX(0px); -ms-transform:translateX(0px); -o-transform:translateX(0px); transform:translateX(0px); -webkit-transition:all .35s, .7s; -moz-transition:all .35s, .7s; -o-transition:all .35s, .7s; transition:all .35s, .7s; } /* FILE ARCHIVED ON 20:54:42 Sep 29, 2017 AND RETRIEVED FROM THE INTERNET ARCHIVE ON 07:34:50 Apr 25, 2024. JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE. ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C. SECTION 108(a)(3)). */ /* playback timings (ms): captures_list: 0.56 exclusion.robots: 0.113 exclusion.robots.policy: 0.105 cdx.remote: 0.059 esindex: 0.009 LoadShardBlock: 202.446 (3) PetaboxLoader3.datanode: 162.844 (4) PetaboxLoader3.resolve: 119.119 (2) load_resource: 150.559 */