img{
border:0px none;}
body{
color:#333333;
line-height:1.2;
font-size:15px;
margin:0;
padding:0;
background-image:url(http://www.gelateriaromana.com/source/sf-page.jpg);
background-repeat:repeat;
background-position:center top;}body a:link{
color: #333333;
text-decoration: none;
}body a:visited{
color: #333333;
text-decoration: none;
}body a:hover{
color: #333333;
text-decoration: underline;
}
.cb { clear:both }#blk_21850{}#blk_21873{
margin-bottom:10px;
position:relative;
}#blk_21854{float:left;
}#blk_21876{
height:375px;
position:relative;
}#blk_21875{
height:350px;
position:relative;
}#blk_21852{}#blk_21870{}#blk_21859{
height:200px;
}#blk_21853{
position:relative;
}#blk_21863{}#blk_21883{
height:350px;
position:relative;
}#blk_21895{}#blk_21872{
position:relative;
}#blk_21884{
position:relative;
}#blk_21901{
position:relative;
}#blk_21890{
width:915px;
margin-right:auto;
margin-left:auto;
padding-top:40px;
}#blk_21858{}#blk_21900{
width:100%;
margin:0 auto;
}#blk_21857{}#blk_21851{}#blk_21865{float:left;
}#blk_21869{
margin-bottom:10px;
position:relative;
}#blk_21877{float:left;
}#blk_21871{
position:relative;
}#blk_21896{}#blk_21880{float:left;
}#blk_21898{
position:relative;
}#blk_21855{
position:relative;
}#blk_22111{}#blk_21892{
padding:20px 0;
position:relative;
}#blk_21864{}#blk_21904{
height:288px;
background-image:url(http://www.gelateriaromana.com/source/sf-combinazione.png);
background-repeat:no-repeat;
background-position:center top;
display:none;
}#blk_21878{float:left;
}#blk_21881{float:left;
}#blk_21874{
display:inline-block;
margin:30px 0;
}#blk_21886{float:left;
}#blk_22048{}#blk_22137{}#blk_22082{}#blk_22052{}#blk_22054{}#blk_22109{}#blk_21889{
display:none;
}#blk_21868{float:left;
}#blk_21891{}#blk_21891 a:link{
color: #ffffff;
}#blk_21891 a:visited{
color: #ffffff;
}#blk_21891 a:hover{
color: #BFAF9B;
}#blk_21897{}#blk_22080{}#blk_22133{}#blk_22135{}#blk_21885{}#blk_21882{float:left;
}#blk_21879{float:left;
}#blk_22136{}#blk_21867{}#blk_22112{}#blk_21887{float:left;
}#blk_21866{
height:208px;
position:relative;
}#blk_22134{}#blk_21856{}#blk_22083{}#blk_22138{}#blk_22053{}#blk_22049{}#blk_22055{}#blk_22081{}#blk_22110{}#blk_21899{
height:auto !important;
}#blk_21894{}#blk_21888{}#blk_21893{float:left;
}#blk_21862{
overflow:hidden;
}#blk_21861{
position:relative;
}#blk_21849{float:left;
}#blk_21902{
height:512px;
width:439px;
max-width:100%;
position:relative;
background-image:url(http://www.gelateriaromana.com/source/cornice-combinazione.png);
background-repeat:no-repeat;
background-position:center top;
margin:0 auto;
}#blk_21860{
position:relative;
}#blk_21903{
height:512px;
max-width:100%;
margin:0 auto;
padding:21px 19px;
background-image:url(http://www.gelateriaromana.com/source/cornice-dolce-mese.png);
background-repeat:no-repeat;
background-position:center top;
}#blk_22042{
position:relative;
}#blk_22043{
position:relative;
}#blk_22015{}#blk_22044{
position:relative;
}#blk_22016{}#blk_22050{}#blk_22051{}#blk_22143{}#contenuto_183244{
text-align:center;
width:627px;
left:287px;
top:0;
position:absolute;width:627px;
}#contenuto_183104{
width:672px;
left:0;
top:0;
position:absolute;width:672px;
}#contenuto_183107{
position:absolute;
left:0;
top:0;}#contenuto_183128{
left:260px;
top:28px;
position:absolute;}#contenuto_183139{
left:242px;
top:55px;
position:absolute;}#contenuto_183162{
padding-top:85px;}#contenuto_183226{
text-align:right;
width:500px;
top:152px;
right:0px;
position:absolute;width:500px;
}#contenuto_183267{
left:767px;
top:-7px;
position:absolute;}#contenuto_183266{
text-align:right;
margin-top:31px;}#contenuto_183268{
top:15px;
right:0;
position:absolute;}#contenuto_183268 > a{
margin:0 2px;}#contenuto_183197{
left:63px;
top:66px;
position:absolute;}#contenuto_183275{
text-align:center;
color:#FFFFFF;
line-height:20px;
font-weight:bold;
font-family:'\'Georgia\'';
font-size:20px;
padding-top:40px;}#contenuto_183182{
text-align:right;}#contenuto_183280{
text-align:right;}#contenuto_183243{
left:200px;
top:55px;
position:absolute;}#contenuto_183251 .linea_t{
padding-bottom:15px;}#contenuto_183251 .linea_b{
padding-top:15px;}#contenuto_183215{
text-align:right;
font-weight:bold;
font-family:'Georgia';
font-size:23px;
padding-right:250px;}#contenuto_183870{
color:#BFAD99;
line-height:1em;
font-family:'\\\'Georgia\\\'';
font-size:19px;}#contenuto_183270 a:link{
color: #000000;
}#contenuto_183270 a:visited{
color: #000000;
}#contenuto_183270 a:hover{
color: #000000;
}#contenuto_183258{
text-align:right;
margin-top:52px;}#contenuto_183281{
padding:106px 0 0 80px;}#contenuto_183087{
text-align:right;
margin-top:52px;}#contenuto_183263{
text-align:right;
margin-top:52px;}#contenuto_183256{
text-align:right;}#contenuto_183110{
text-align:right;
margin-top:52px;}#contenuto_183204{
left:265px;
top:102px;
position:absolute;}#contenuto_183109{
text-align:right;}#contenuto_183212{
padding-left:65px;}#contenuto_184270{
float:left;
clear:both;}#contenuto_183184{
left:230px;
top:142px;
position:absolute;}#contenuto_183247{
text-align:center;
color:#000000;
font-weight:bold;
font-family:'\'Georgia\'';
font-size:22px;
padding-top:20px;}#contenuto_183098{
left:242px;
top:55px;
position:absolute;}#contenuto_183100{
text-align:center;
margin-bottom:15px;}#contenuto_183117{
left:200px;
top:80px;
position:absolute;}#contenuto_183135{
left:256px;
top:82px;
position:absolute;}#contenuto_183142{
left:256px;
top:92px;
position:absolute;}#contenuto_183151{
left:256px;
top:77px;
position:absolute;}#contenuto_183165{
position:absolute;
right:38px;
top:-38px;}#contenuto_183199{
top:72px;
right:0px;
position:absolute;}#contenuto_183200{
position:absolute;
left:535px;
top:70px;}#contenuto_183230{
margin-bottom:25px;}#contenuto_183177{
text-align:right;}#contenuto_183094{
text-align:right;
margin-top:52px;}#contenuto_183269{
font-family:'Georgia';
font-size:30px;
top:15px;
right:130px;
position:absolute;}#contenuto_183278{
text-align:right;}#contenuto_183120{
text-align:right;}#contenuto_183216{
color:#BFAD99;
line-height:1em;
font-family:'Georgia';
font-size:19px;
left:285px;
top:15px;
position:absolute;}#contenuto_183207{
border:4px solid #BFAF9B;
}#contenuto_183201{
left:256px;
top:37px;
position:absolute;}#contenuto_183194{
padding:89px 95px 0 81px;}#contenuto_183206{
left:185px;
top:159px;
position:absolute;}#contenuto_183214{
text-align:center;
font-size:33px;
color:#000000;
display:none;}#contenuto_183225{
border:4px solid #BFAF9B;
}#contenuto_183224{
border:4px solid #BFAF9B;}#contenuto_183260{
text-align:right;}#contenuto_183285{
text-align:right;
margin-top:52px;}#contenuto_183283{
text-align:right;
margin-top:52px;}#contenuto_183210{
text-align:center;
font-size:18px;
color:#ffffff;
line-height:1em;
font-family:Georgia;
height:277px;
width:278px;
left:0;
top:0;
position:absolute;
background-image:url(http://www.gelateriaromana.com/source/sf-news.png);
background-repeat:no-repeat;
background-position:center top;width:278px;
}#contenuto_183210 a:link{
color: #ffffff;
}#contenuto_183210 a:visited{
color: #ffffff;
}#contenuto_183210 a:hover{
color: #ffffff;
}#contenuto_183249{
text-align:center;
font-size:23px;
color:#FFFFFF;
line-height:1;
height:188px;
width:188px;
top:-32px;
right:38px;
position:absolute;
background-image:url(http://www.gelateriaromana.com/source/tondo-nero.png);width:188px;
}#contenuto_183249 a:link{
color: #FFFFFF;
}#contenuto_183249 a:visited{
color: #FFFFFF;
}#contenuto_183249 a:hover{
color: #FFFFFF;
}#contenuto_183196{
border-top:1px solid #999999;
border-bottom:1px solid #999999;
padding:7px 0;
right:170px;
top:138px;
position:absolute;}#contenuto_183209{
font-size:19px;
line-height:34px;
font-family:Georgia;
margin-bottom:40px;
padding-left:45px;
background-image:url(http://www.gelateriaromana.com/source/bollino.png);
background-repeat:no-repeat;
background-position:left center;}#contenuto_183209 a:link{
text-decoration: underline;
}#contenuto_183209 a:visited{
text-decoration: underline;
}#contenuto_183209 a:hover{
text-decoration: underline;
}#contenuto_183160{
text-align:right;
margin-top:31px;}#contenuto_228749{
text-align:right;
}#contenuto_228747{
text-align:right;}#contenuto_183111{
text-align:right;
margin-top:52px;}#contenuto_183192{
text-align:right;}#contenuto_183872{
font-size:18px;
color:#BFAD99;
line-height:1;
font-family:'Georgia';
height:260px;
width:340px;
background-image:url(http://www.gelateriaromana.com/source/sf-app2.png);
margin:15px auto;}#contenuto_183872 a:link{
color: #BFAD99;
}#contenuto_183872 a:visited{
color: #BFAD99;
}#contenuto_183872 a:hover{
color: #BFAD99;
}#contenuto_183195{
font-size:18px;
color:#BFAD99;
line-height:1;
font-family:'Georgia';
height:260px;
width:340px;
top:0;
right:0px;
position:absolute;
background-image:url(http://www.gelateriaromana.com/source/sf-app2.png);}#contenuto_183195 a:link{
color: #BFAD99;
}#contenuto_183195 a:visited{
color: #BFAD99;
}#contenuto_183195 a:hover{
color: #BFAD99;
}#contenuto_183241{
text-align:right;}#contenuto_183221{
margin-top:20px;}#contenuto_292847{
text-align:right;
color:#999;
font-size:12px;
margin:15px 0;}#contenuto_292847 a:link{
color: #999;
}#contenuto_292847 a:visited{
color: #999;
}#contenuto_292847 a:hover{
color: #999;
}#contenuto_183264{
background-color:#912D39;
background-position:95% center;
background-repeat:no-repeat;
color:#FFFFFF;
font-size:14px;
font-weight:700;
margin-top:0;
padding:4px 30px 4px 8px;
position:absolute;
right:0;
width:190x;width:190x;
}#contenuto_183286{
text-align:center;
color:#FFFFFF;
font-size:12px;
padding:10px 30px 10px;
min-height:76px;}#contenuto_183239{
text-align:center;}#contenuto_291342{
padding:6px 15px;
right:214px;
z-index:20;
position:absolute;
background-color:#fff;
color:#bfaf9b;}#contenuto_291342 a:link{
color: #000;
}#contenuto_291342 a:visited{
color: #000;
}#contenuto_291342 a:hover{
color: #000;
}#contenuto_183198{
color:#9C8363;
font-size:13px;
margin:15px 0;}#contenuto_183121{
padding:106px 0 0 65px;}#contenuto_183273{
text-align:center;}#contenuto_183274{
text-align:center;
font-size:12px;
padding:10px 30px 10px;}#contenuto_294749{
color:#bfaf9b;
padding:6px 12px;
right:149px;
z-index:20;
position:absolute;
background-color:#fff;}#contenuto_183240{
text-align:center;
margin:15px auto 0;}#contenuto_183276{
text-align:center;
line-height:20px;
font-weight:bold;
font-family:'Georgia';
font-size:20px;
padding:40px 30px 10px;}#contenuto_183238{
text-align:center;
color:#000000;
font-weight:bold;
font-family:'\'Georgia\'';
font-size:22px;
padding-top:20px;}#contenuto_183250{
text-align:right;}#contenuto_183112{
min-width:955px;}#contenuto_183132{
margin-bottom:10px;}#contenuto_183252{
position:relative;}#contenuto_183186{
margin-bottom:10px;}#contenuto_183113{
padding-top:20px;}#contenuto_183095{
height:20px;}#contenuto_183119{
margin-bottom:30px;}#contenuto_183282{
text-align:center;
border-bottom:1px solid #000;
font-size:18px;
font-family:Georgia;
margin-bottom:9px;
padding-bottom:3px;}#contenuto_183227{
text-align:right;
padding-top:15px;}#contenuto_183173{
font-size:13px;}#contenuto_183163{
margin:15px 0;}#contenuto_183138{
border:7px solid #BFAF9B;
margin-top:30px;}#contenuto_183231{
font-size:23px;
margin-bottom:10px;
height:50px;}#contenuto_183231 a:link{
text-decoration: none;
}#contenuto_183231 a:visited{
text-decoration: none;
}#contenuto_183231 a:hover{
text-decoration: none;
}#contenuto_183188{
padding-bottom:15px;}#contenuto_183234{
border:4px solid #BFAF9B;
margin-top:20px;}#contenuto_183193{
border:4px solid #BFAF9B;
margin-top:20px;}#contenuto_200378{
text-align:center;
color:#912C39;
font-family:'Georgia';
font-size:36px;
margin-top:15px;
margin-bottom:30px;
}#contenuto_200380{
padding-top:30px;
}#contenuto_183131{
clear:both;}#contenuto_228507{
text-align:right;
padding-top:15px;}#contenuto_183232{
padding:30px 0 20px;}#contenuto_200381{
padding-top:15px;}#contenuto_239507{
text-align:right;
padding-top:15px;}#contenuto_183134{
margin-top:20px;
margin-bottom:30px;}#contenuto_183170{
margin-top:15px;}#contenuto_183262{
font-size:20px;
margin-bottom:10px;}#contenuto_183262 a:link{
text-decoration: none;
}#contenuto_183262 a:visited{
text-decoration: none;
}#contenuto_183262 a:hover{
text-decoration: none;
}#contenuto_183185{
margin-bottom:25px;}#contenuto_183101{
height:30px;
clear:both;}
.voce_menu_23039{
}.voce_menu_14491{
}.voce_menu_14492{
}.voce_menu_14493{
}.voce_menu_14489{
}.voce_menu_14490{
}.voce_menu_14496{
}.voce_menu_14497{
}.voce_menu_14494{
}.voce_menu_14495{
}.voce_menu_14499{
}.voce_menu_14498{
}#menu_1433 {}#menu_1433  ul {
display: block;
list-style: none;
z-index: 90
}#menu_1433  ul li {
float: left;
list-style-type: none;
letter-spacing:1px;
padding:24px 0;
}#menu_1433 li:Hover {
}#menu_1433 ul li a {
float: left;
display: block;
width: auto;
background: transparent;
text-decoration: none;
}/* Commented Backslash Hack hides rule from IE5-Mac \*/
#menu_1433  ul li a {
float: none;
}/* End IE5-Mac hack */#menu_1433  ul.level2, #menu_1433 ul.level3 {
position: absolute;
display: none;
z-index:90;
}#menu_1433 ul.level2 li, #menu ul.level3 li {
float: none;
letter-spacing:1px;
padding:24px 0;
}#menu_1433  ul.level2 li a, #menu ul.level3 li a {}.rf-box-login{}
.form-login-pag{}
.lenostreproposte{}
.linee{}
.barra-menu-mobile{}
.bordo{}/* Media query - Smartphone */@media screen and (max-width: 767px) {
#contenuto_183265{
font-size:21px;}
#contenuto_183251{
text-align:justify;}
#contenuto_183093{
text-align:center;
margin-top:30px;}
#contenuto_183215{
text-align:center;
padding-right:0;}
#contenuto_183192{
text-align:center;}
#contenuto_183094{
text-align:center;}
#contenuto_183160{
text-align:center;}
#contenuto_183260{
text-align:center;}
#contenuto_183162{
padding-top:65px;}
#contenuto_183173{
text-align:center;
margin-top:15px;}
#contenuto_183174{
text-align:center;
margin-top:15px;}
#contenuto_183182{
text-align:center;
margin-bottom:15px;}
#contenuto_183871{
text-align:center;}
#contenuto_183870{
text-align:center;}
#blk_21859{
text-align:center;
display:inline-block;
height:auto;
width:100%;}
#contenuto_183194{
padding:80px 50px 0;;}
#contenuto_183110{
text-align:center;}
#contenuto_183241{
text-align:center;}
#contenuto_183283{
text-align:center;}
#contenuto_183256{
text-align:center;}
#contenuto_183120{
text-align:center;}
#contenuto_183111{
text-align:center;}
#contenuto_183177{
text-align:center;}
#contenuto_183285{
text-align:center;}
#contenuto_183278{
text-align:center;}
#contenuto_183250{
text-align:center;}
#contenuto_183227{
text-align:center;}
#contenuto_183258{
text-align:center;}
#contenuto_183121{
padding:100px 0 0 5px;}
#contenuto_183281{
padding:90px 0 0 5px;}
#contenuto_183216{
left:0;
top:0;
position:relative;}
#contenuto_183184{
left:0;
top:0;
position:relative;}
#blk_21899{
height:auto;}
#blk_22042{
text-align:center;}
#contenuto_184270{
display:inline-block;
float:none;}
#contenuto_183109{
text-align:center;}
#contenuto_183263{
text-align:center;}
#contenuto_183266{
text-align:center;}
#contenuto_183212{
padding-left:5px;}
#contenuto_183217{
text-align:center;}
#contenuto_183269{
float:left;
top:0;
right:0;
position:relative;}
#contenuto_183268{
float:none;
margin-left:15px;
top:0;
position:relative;}
#contenuto_228507{
text-align:center;}
#contenuto_228747{
text-align:center;}
#contenuto_228749{
text-align:center;}
#contenuto_239507{
text-align:center;}
#contenuto_292847{
text-align:center;}#contenuto_292847 a:link{
color: #999;
}#contenuto_292847 a:visited{
color: #999;
}#contenuto_292847 a:hover{
color: #999;
}
}/* Media query - Tablet */@media screen and (min-width: 768px) and (max-width: 991px) {
#contenuto_183265{
font-size:25px;
margin:0 auto;
padding:101px 0 0 66px;}
#contenuto_183251{
text-align:justify;}
#contenuto_183093{
text-align:center;
margin-top:30px;}
#contenuto_183192{
text-align:center;}
#contenuto_183178{
margin:20px auto 0;}
#contenuto_183098{
left:445px;}
#contenuto_183219{
margin:20px auto 0;}
#contenuto_183094{
text-align:center;}
#contenuto_183160{
text-align:center;}
#contenuto_183260{
text-align:center;}
#contenuto_183182{
text-align:center;
margin-bottom:15px;}
#contenuto_183186{
height:510px;}
#contenuto_183269{
float:left;
top:0;
right:0;
position:relative;}
#contenuto_183184{
left:0;
top:0;
position:relative;}
#contenuto_183283{
text-align:center;}
#contenuto_183256{
text-align:center;}
#contenuto_183263{
text-align:center;}
#contenuto_183241{
text-align:center;}
#contenuto_183266{
text-align:center;}
#contenuto_183285{
text-align:center;}
#contenuto_183111{
text-align:center;}
#contenuto_183177{
text-align:center;}
#contenuto_183120{
text-align:center;}
#contenuto_183212{
margin:0 auto;}
#contenuto_183278{
text-align:center;}
#contenuto_183227{
text-align:center;}
#contenuto_183258{
text-align:center;}
#contenuto_183132{
height:510px;}
#contenuto_184270{
display:inline-block;}
#blk_21899{
height:auto;}
#contenuto_183110{
text-align:center;}
#contenuto_183109{
text-align:center;}
#contenuto_183284{
margin:20px auto 0;}
#contenuto_183204{
left:460px;}
#contenuto_183117{
left:390px;}
#blk_21859{
display:inline-block;
height:auto;
width:100%;}
#contenuto_183268{
float:left;
margin-left:15px;
top:0;
position:relative;}
#contenuto_183216{
left:0;
top:0;
position:relative;}
#contenuto_228507{
text-align:center;}
#contenuto_228747{
text-align:center;}
#contenuto_228749{
text-align:center;}
#contenuto_239507{
text-align:center;}
}/* Media query - Desktop */@media screen and (min-width: 992px) and (max-width: 1199px) {
#contenuto_183265{
font-size:26px;
padding:104px 0 0 66px;}
#contenuto_183251{
text-align:right;
padding-left:120px;}
#contenuto_183093{
text-align:right;
margin-top:50px;}
#contenuto_183243{
top:55px;
position:absolute;}
#contenuto_183186{
height:410px;}
#contenuto_183132{
height:410px;}
#blk_21898{
height:300px;}
}/* Media query - Large Desktop */@media screen and (min-width: 1200px) {
#contenuto_183265{
font-size:26px;
padding:102px 0 0 66px;}
#contenuto_183093{
text-align:right;
margin-top:50px;}
#contenuto_183243{
top:55px;
position:absolute;}
#contenuto_183251{
text-align:right;
padding-left:20px;}
#contenuto_183132{
height:410px;}
#contenuto_183186{
height:410px;}
#blk_21898{
height:300px;}
}/* generali */
.cat_fl{
float:left;
}
.cat_cb {
clear:both;
}.cat_ChiudiDiv {
text-align: right;
margin-bottom: 10px;
}/* zoom foto scheda prodotto */
#cat_zoom_gallery a {
border:1px solid #eeeeee;
display:inline-block;
}
#cat_zoom_gallery a.zoomGalleryActive{
border:1px solid #FFCC00;
}
#cat_zoom_gallery a img {
display:block;
}
#noCookieMsg {
position:fixed;
background-color: orange;
color:#fff;
text-align: center;
line-height:1.5;
padding: 3px 0;
width: 100%;
bottom:0;
left:0;
z-index:10000;
}#wishlistAddProdotto .msg_text {
margin-bottom:13px;
font-weight: bold;
}
#wishlistAddProdotto .msg_link {
margin:10px 0;
}/* riquadri prodotti */
.cat_clearRiga {
clear:both;
}/* account */
.voce_my_account {
margin:10px 0;
padding-bottom:10px;
border-bottom:1px solid #cccccc;
}
.ico_account {
margin-right:10px;
}
.cat_stars_wrap {
display:none;
}
.cat_star{
width:44px;
height:44px;
display:inline-block;
background-image:url("https://backoffice3.titanka.com/catalog/img/star_b.png");
}
.cat_star.selected{
background-image:url("https://backoffice3.titanka.com/catalog/img/star_g.png");
}
.cat_star.active{
background-image:url("https://backoffice3.titanka.com/catalog/img/star_a.png");
}
.cat_recensione_prodotto {
margin-bottom:10px;
padding-bottom:10px;
border-bottom:1px solid #ddd;
}
.cat_recensione_prodotto_c1 {
width:200px;
margin-right: 10px;
}
.cat_recensione_prodotto_c2 {
width:500px;
}
.cat_star_rating {
height:19px;
width:96px;
display: inline-block;
}
.cat_star_rating_05, .cat_star_rating_15, .cat_star_rating_25, .cat_star_rating_35, .cat_star_rating_45 {
background-image:url("https://backoffice3.titanka.com/catalog/img/stelle_mezze.png");
}
.cat_star_rating_10, .cat_star_rating_20, .cat_star_rating_30, .cat_star_rating_40, .cat_star_rating_50 {
background-image:url("https://backoffice3.titanka.com/catalog/img/stelle_piene.png");
}
.cat_star_rating_05, .cat_star_rating_10{
background-position: -76px 0;
}
.cat_star_rating_15, .cat_star_rating_20{
background-position: -57px 0;
}
.cat_star_rating_25, .cat_star_rating_30{
background-position: -38px 0;
}
.cat_star_rating_35, .cat_star_rating_40{
background-position: -19px 0;
}
.cat_star_rating_45, .cat_star_rating_50{
background-position: 0 0;
}/* login guest */
.col_sx_login_registrazione{
float:left;
width:34%;
}
.guest_login_form {
width:80%;
text-align:left;
margin-left:auto;
margin-right:auto;
}
.wrapper_link_registrazione{
margin-top:40px;
padding-top:20px;
}
.col_dx_reg_guest {
float:left;
width:45%;
}
.cat_barrato {
text-decoration:line-through;
}/* autocomplete ricerca */
.cat_autocomp_el {
font-size:90%;
}
.cat_autocomp_img{}
.cat_autocomp_img_wrap {
width:44px;
display:inline-block;
background-color:#fff;
border:1px solid #cccccc;
padding:2px 0;
text-align:center;
}.email_conferma_ordine{
margin:20px 0;
padding:10px;
border:1px solid #cccccc;
}
.email_conferma_ordine .titoloParagrafo {
margin:5px 0px;
padding:3px;
color:#000;
background-color:#efefef;
font-weight:bold;
border-bottom:1px solid #cccccc;
}
.email_conferma_ordine .cat_evidenziaPremio {
font-weight:bold;
color:#0000CC;
}.cat_pagination {
margin:0;
padding:0;
}
.cat_pagination > li {
display: inline;
list-style: none;
}
.cat_pagination > li > a, .cat_pagination > li > span{
padding: 6px 8px;
}
.cat_pag_prodotti {
margin: 10px 0px;
clear: both;
}#darkLayer {
background-color: #555555;
opacity: 0.6;
}.cat_text_right {
text-align: right;
}#opz_after_add_cart {
margin-top: 20px;
}
.opz_prosegui {
float: left;
text-align: left;
width: 40%;
}
.opz_carrello{
float: right;
text-align: right;
width: 40%;
}
.opz_prosegui a,
.opz_carrello a {
font-size: 1.2em;
}.headFormTitle {
font-weight: bold;
}
.wrapForm {
text-align: left;
margin-bottom: 10px;
}#FormAddCartWrapper .labelForm,
#FormAddCartWrapper .fieldForm {
width: 45%;
}/* blocca scorrimento body in caso di popup aperto */
.darklayer-open{
overflow: hidden;
}
/* http://davidwalsh.name/detect-scrollbar-width */
.cat-scrollbar-measure {
width: 100px;
height: 100px;
overflow: scroll;
position: absolute;
top: -9999px;
}/* messaggio chiusura per ferie in carrello */
.cat_msg_ferie {
margin: 10px 0;
padding: 15px;
border: 1px solid #faebcc;
background-color: #fcf8e3;
color: #8a6d3b;
}#custom_product_conf{
width: 100%;
height: 500px;
}.cat_dett_ordine_prodotto {
margin-bottom: 10px;
}.cat_indietro {
margin-top: 10px;
}.cat-btn-cart-del {
background-image: url("https://backoffice3.titanka.com/catalog/img/cart_cancel.png");
background-repeat: no-repeat;
background-position: center;
width: 35px;
height: 35px;
display: inline-block;
cursor: pointer;
}.cat-formprev .cat_modulo {
width: 50%;
}
.cat-formprev textarea.cat_modulo {
height: 100px;
}.cat-forminfo .cat_modulo {
width: 96%;
}
.cat-forminfo textarea.cat_modulo {
height: 100px;
}.cat-reguser .cat_modulo,
.cat-reguser-guest .cat_modulo,
.cat-formaddress .cat_modulo {
width: 100%;
box-sizing: border-box;
}
.cat-reguser .cat-codicefiscale,
.cat-reguser-guest .cat-codicefiscale {
width: 94%;
float: left;
}
.cat-reguser-guest .cat-codicefiscale {
width: 78%;
}
.cat-reguser .cat-calcola-cf,
.cat-reguser-guest .cat-calcola-cf {
background-image: url("https://admin.abc.sm/img/icone/icona-codice-fiscale.png");
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
display: block;
float: left;
height: 25px;
margin-left: 1%;
width: 5%;
}
.cat-reguser-guest .cat-calcola-cf {
float: right;
width: 17%;
margin-left: 0;
}
.cat-reguser .cat-data-nascita {
width: 32%;
}
.cat-reguser .cat-data-nascita + .cat-data-nascita {
margin-left: 2%;
}
.cat-reguser textarea.cat_modulo {
height: 100px;
}
.cat-reguser hr {
width: 90%;
margin-top: 20px;
margin-bottom: 20px;
}.cat-altrafoto img {
border: 0 none;
margin: 5px;
}.cat-formavvisadisponibile {
text-align: left;
}
/* Common style */
figcaption,figure{display:block;}.grid {
position: relative;
margin: 0;
padding: 0;
max-width: 1000px;
float: left;
list-style: none;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}/* Common style */
.grid figure {
position: relative;
overflow: hidden;
margin: 0;
/*min-width: 320px;
max-width: 480px;
max-height: 360px; */
width: auto;
/*background: #3085a3;*/
text-align: center;
cursor: pointer;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}.grid figure img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 0.8;
}.grid figure figcaption {
padding: 2em;
color: #fff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}.grid figure figcaption::before,
.grid figure figcaption::after {
pointer-events: none;
}.grid figure figcaption,
.grid figure figcaption > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}.grid figure h2 {
word-spacing: -0.15em;
font-weight: 300;
}.grid figure h2 span {
font-weight: 800;
}.grid figure h2,
.grid figure p {
margin: 0;
}.grid figure p {
letter-spacing: 1px;
font-size: 68.5%;
}/*---------------*/
/***** Lily *****/
/*---------------*/figure.effect-lily img {
max-width: none;
width: -webkit-calc(100% + 50px);
width: calc(100% + 50px);
opacity: 0.7;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-40px,0, 0);
transform: translate3d(-40px,0,0);
}figure.effect-lily figcaption {
text-align: left;
}figure.effect-lily figcaption > div {
position: absolute;
bottom: 0;
left: 0;
padding: 2em;
width: 100%;
height: 50%;
}figure.effect-lily h2,
figure.effect-lily p {
-webkit-transform: translate3d(0,40px,0);
transform: translate3d(0,40px,0);
}figure.effect-lily h2 {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}figure.effect-lily p {
color: rgba(255,255,255,0.8);
opacity: 0;
-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
transition: opacity 0.2s, transform 0.35s;
}figure.effect-lily:hover img,
figure.effect-lily:hover p {
opacity: 1;
}figure.effect-lily:hover img,
figure.effect-lily:hover h2,
figure.effect-lily:hover p {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}figure.effect-lily:hover p {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
}/*---------------*/
/***** Sadie *****/
/*---------------*/figure.effect-sadie figcaption::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
content: '';
opacity: 0;
-webkit-transform: translate3d(0,50%,0);
transform: translate3d(0,50%,0);
}figure.effect-sadie h2 {
position: absolute;
top: 50%;
left: 0;
width: 100%;
color: #484c61;
-webkit-transition: -webkit-transform 0.35s, color 0.35s;
transition: transform 0.35s, color 0.35s;
-webkit-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0);
}figure.effect-sadie figcaption::before,
figure.effect-sadie p {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}figure.effect-sadie p {
position: absolute;
bottom: 0;
left: 0;
padding: 2em;
width: 100%;
opacity: 0;
-webkit-transform: translate3d(0,10px,0);
transform: translate3d(0,10px,0);
}figure.effect-sadie:hover h2 {
color: #fff;
-webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
}figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}/*---------------*/
/***** Roxy *****/
/*---------------*/figure.effect-roxy {
background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
background: linear-gradient(45deg, #ff89e9 0%,#05abe0 100%);
}figure.effect-roxy img {
max-width: none;
width: -webkit-calc(100% + 60px);
width: calc(100% + 60px);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-50px,0,0);
transform: translate3d(-50px,0,0);
}figure.effect-roxy figcaption::before {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
border: 1px solid #fff;
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-20px,0,0);
transform: translate3d(-20px,0,0);
}figure.effect-roxy figcaption {
padding: 3em;
text-align: left;
}figure.effect-roxy h2 {
padding: 30% 0 10px 0;
}figure.effect-roxy p {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-10px,0,0);
transform: translate3d(-10px,0,0);
}figure.effect-roxy:hover img {
opacity: 0.7;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}figure.effect-roxy:hover figcaption::before,
figure.effect-roxy:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}/*---------------*/
/***** Bubba *****/
/*---------------*/figure.effect-bubba {
background: #9e5406;
}figure.effect-bubba img {
opacity: 0.7;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}figure.effect-bubba:hover img {
opacity: 0.4;
}figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}figure.effect-bubba figcaption::before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0,1);
transform: scale(0,1);
}figure.effect-bubba figcaption::after {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1,0);
transform: scale(1,0);
}figure.effect-bubba h2 {
padding-top: 30%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,-20px,0);
transform: translate3d(0,-20px,0);
}figure.effect-bubba p {
padding: 20px 2.5em;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}figure.effect-bubba:hover h2,
figure.effect-bubba:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}/*---------------*/
/***** Romeo *****/
/*---------------*/figure.effect-romeo {
-webkit-perspective: 1000px;
perspective: 1000px;
}figure.effect-romeo img {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,0,300px);
transform: translate3d(0,0,300px);
}figure.effect-romeo:hover img {
opacity: 0.6;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}figure.effect-romeo figcaption::before,
figure.effect-romeo figcaption::after {
position: absolute;
top: 50%;
left: 50%;
width: 80%;
height: 1px;
background: #fff;
content: '';
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}figure.effect-romeo:hover figcaption::before {
opacity: 0.5;
-webkit-transform: translate3d(-50%,-50%,0) rotate(45deg);
transform: translate3d(-50%,-50%,0) rotate(45deg);
}figure.effect-romeo:hover figcaption::after {
opacity: 0.5;
-webkit-transform: translate3d(-50%,-50%,0) rotate(-45deg);
transform: translate3d(-50%,-50%,0) rotate(-45deg);
}figure.effect-romeo h2,
figure.effect-romeo p {
position: absolute;
top: 50%;
left: 0;
width: 100%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}figure.effect-romeo h2 {
-webkit-transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
}figure.effect-romeo p {
padding: 0.25em 2em;
-webkit-transform: translate3d(0,-50%,0) translate3d(0,150%,0);
transform: translate3d(0,-50%,0) translate3d(0,150%,0);
}figure.effect-romeo:hover h2 {
-webkit-transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
}figure.effect-romeo:hover p {
-webkit-transform: translate3d(0,-50%,0) translate3d(0,100%,0);
transform: translate3d(0,-50%,0) translate3d(0,100%,0);
}/*---------------*/
/***** Layla *****/
/*---------------*/figure.effect-layla {
/*background: #18a367;*/
}figure.effect-layla img {
height: auto;
}figure.effect-layla figcaption {
/*padding: 3em; */
}figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after {
position: absolute;
content: '';
opacity: 0;
}figure.effect-layla figcaption::before {
top: 50px;
right: 30px;
bottom: 50px;
left: 30px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0,1);
transform: scale(0,1);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}figure.effect-layla figcaption::after {
top: 30px;
right: 50px;
bottom: 30px;
left: 50px;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1,0);
transform: scale(1,0);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}figure.effect-layla h2 {
padding-top: 26%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}figure.effect-layla p {
padding: 0.5em 2em;
text-transform: none;
opacity: 0;
-webkit-transform: translate3d(0,-10px,0);
transform: translate3d(0,-10px,0);
}figure.effect-layla img,
figure.effect-layla h2 {
-webkit-transform: translate3d(0,-30px,0);
transform: translate3d(0,-30px,0);
}figure.effect-layla img,
figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after,
figure.effect-layla p {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}figure.effect-layla:hover img {
opacity: 0.7;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}figure.effect-layla:hover figcaption::before,
figure.effect-layla:hover figcaption::after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}figure.effect-layla:hover h2,
figure.effect-layla:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}figure.effect-layla:hover figcaption::after,
figure.effect-layla:hover h2,
figure.effect-layla:hover p,
figure.effect-layla:hover img {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}/*---------------*/
/***** Honey *****/
/*---------------*/figure.effect-honey {
/*background: #4a3753; */
}figure.effect-honey img {
opacity: 0.9;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}figure.effect-honey:hover img {
opacity: 0.5;
}figure.effect-honey figcaption::before {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10px;
background: #fff;
content: '';
-webkit-transform: translate3d(0,10px,0);
transform: translate3d(0,10px,0);
}figure.effect-honey h2 {
position: absolute;
bottom: 0;
left: 0;
padding: 1em 1.5em;
width: 100%;
text-align: left;
-webkit-transform: translate3d(0,-30px,0);
transform: translate3d(0,-30px,0);
}figure.effect-honey h2 i {
font-style: normal;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,-30px,0);
transform: translate3d(0,-30px,0);
}figure.effect-honey figcaption::before,
figure.effect-honey h2 {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}figure.effect-honey:hover figcaption::before,
figure.effect-honey:hover h2,
figure.effect-honey:hover h2 i {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}/*---------------*/
/***** Oscar *****/
/*---------------*/figure.effect-oscar {
background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);
}figure.effect-oscar img {
opacity: 0.9;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}figure.effect-oscar figcaption {
padding: 3em;
background-color: rgba(58,52,42,0.7);
-webkit-transition: background-color 0.35s;
transition: background-color 0.35s;
}figure.effect-oscar figcaption::before {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
border: 1px solid #fff;
content: '';
}figure.effect-oscar h2 {
margin: 20% 0 10px 0;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}figure.effect-oscar figcaption::before,
figure.effect-oscar p {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(0);
transform: scale(0);
}figure.effect-oscar:hover h2 {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}figure.effect-oscar:hover figcaption::before,
figure.effect-oscar:hover p {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}figure.effect-oscar:hover figcaption {
background-color: rgba(58,52,42,0);
}figure.effect-oscar:hover img {
opacity: 0.4;
}/*---------------*/
/***** Marley *****/
/*---------------*/figure.effect-marley figcaption {
text-align: right;
}figure.effect-marley h2,
figure.effect-marley p {
position: absolute;
right: 30px;
left: 30px;
padding: 10px 0;
}figure.effect-marley p {
bottom: 30px;
line-height: 1.5;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}figure.effect-marley h2 {
top: 30px;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}figure.effect-marley:hover h2 {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}figure.effect-marley h2::after {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 4px;
background: #fff;
content: '';
-webkit-transform: translate3d(0,40px,0);
transform: translate3d(0,40px,0);
}figure.effect-marley h2::after,
figure.effect-marley p {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}figure.effect-marley:hover h2::after,
figure.effect-marley:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}/*---------------*/
/***** Ruby *****/
/*---------------*/figure.effect-ruby {
/*background-color: #17819c;*/
}figure.effect-ruby img {
opacity: 0.7;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.15);
transform: scale(1.15);
}figure.effect-ruby:hover img {
opacity: 0.5;
-webkit-transform: scale(1);
transform: scale(1);
}figure.effect-ruby h2 {
margin-top: 20%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}figure.effect-ruby p {
margin: 1em 0 0;
padding: 3em;
border: 1px solid #fff;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,20px,0) scale(1.1);
transform: translate3d(0,20px,0) scale(1.1);
}figure.effect-ruby:hover h2 {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}figure.effect-ruby:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0) scale(1);
transform: translate3d(0,0,0) scale(1);
}/*---------------*/
/***** Milo *****/
/*---------------*/figure.effect-milo {
background: #2e5d5a;
}figure.effect-milo img {
max-width: none;
width: -webkit-calc(100% + 60px);
width: calc(100% + 60px);
opacity: 1;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-30px,0,0) scale(1.12);
transform: translate3d(-30px,0,0) scale(1.12);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}figure.effect-milo:hover img {
opacity: 0.5;
-webkit-transform: translate3d(0,0,0) scale(1);
transform: translate3d(0,0,0) scale(1);
}figure.effect-milo h2 {
position: absolute;
right: 0;
bottom: 0;
padding: 1em 1.2em;
}figure.effect-milo p {
padding: 0 10px 0 0;
width: 50%;
border-right: 1px solid #fff;
text-align: right;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-40px,0,0);
transform: translate3d(-40px,0,0);
}figure.effect-milo:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}/*---------------*/
/***** Dexter *****/
/*---------------*/figure.effect-dexter {
background: -webkit-linear-gradient(top, rgba(37,141,200,1) 0%, rgba(104,60,19,1) 100%);
background: linear-gradient(to bottom, rgba(37,141,200,1) 0%,rgba(104,60,19,1) 100%);
}figure.effect-dexter img {
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}figure.effect-dexter:hover img {
opacity: 0.4;
}figure.effect-dexter figcaption::after {
position: absolute;
right: 30px;
bottom: 30px;
left: 30px;
height: -webkit-calc(50% - 30px);
height: calc(50% - 30px);
border: 7px solid #fff;
content: '';
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);
}figure.effect-dexter:hover figcaption::after {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}figure.effect-dexter figcaption {
padding: 3em;
text-align: left;
}figure.effect-dexter p {
position: absolute;
right: 60px;
bottom: 60px;
left: 60px;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,-100px,0);
transform: translate3d(0,-100px,0);
}figure.effect-dexter:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}/*---------------*/
/***** Sarah *****/
/*---------------*/figure.effect-sarah {
background: #42b078;
}figure.effect-sarah img {
max-width: none;
width: -webkit-calc(100% + 20px);
width: calc(100% + 20px);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-10px,0,0);
transform: translate3d(-10px,0,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}figure.effect-sarah:hover img {
opacity: 0.4;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}figure.effect-sarah figcaption {
text-align: left;
}figure.effect-sarah h2 {
position: relative;
overflow: hidden;
padding: 0.5em 0;
}figure.effect-sarah h2::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: #fff;
content: '';
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
}figure.effect-sarah:hover h2::after {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}figure.effect-sarah p {
padding: 1em 0;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}figure.effect-sarah:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}/*---------------*/
/***** Zoe *****/
/*---------------*/figure.effect-zoe figcaption {
top: auto;
bottom: 0;
padding: 1em;
height: 3.75em;
background: #fff;
color: #3c4a50;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}figure.effect-zoe h2 {
float: left;
}figure.effect-zoe p.icon-links a {
float: right;
color: #3c4a50;
font-size: 1.4em;
}figure.effect-zoe:hover p.icon-links a:hover,
figure.effect-zoe:hover p.icon-links a:focus {
color: #252d31;
}figure.effect-zoe p.description {
position: absolute;
bottom: 8em;
padding: 2em;
color: #fff;
text-transform: none;
font-size: 90%;
opacity: 0;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
-webkit-backface-visibility: hidden; /* Fix for Chrome 37.0.2062.120 (Mac) */
}figure.effect-zoe h2,
figure.effect-zoe p.icon-links a {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,200%,0);
transform: translate3d(0,200%,0);
}figure.effect-zoe p.icon-links a span::before {
display: inline-block;
padding: 8px 10px;
font-family: 'feathericons';
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}.icon-eye::before {
content: '\e000';
}.icon-paper-clip::before {
content: '\e001';
}.icon-heart::before {
content: '\e024';
}figure.effect-zoe h2 {
display: inline-block;
}figure.effect-zoe:hover p.description {
opacity: 1;
}figure.effect-zoe:hover figcaption,
figure.effect-zoe:hover h2,
figure.effect-zoe:hover p.icon-links a {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}figure.effect-zoe:hover h2 {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}figure.effect-zoe:hover p.icon-links a:nth-child(3) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}figure.effect-zoe:hover p.icon-links a:nth-child(2) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}figure.effect-zoe:hover p.icon-links a:first-child {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}/*---------------*/
/***** Chico *****/
/*---------------*/figure.effect-chico img {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.12);
transform: scale(1.12);
}figure.effect-chico:hover img {
opacity: 0.5;
-webkit-transform: scale(1);
transform: scale(1);
}figure.effect-chico figcaption {
padding: 3em;
}figure.effect-chico figcaption::before {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
border: 1px solid #fff;
content: '';
-webkit-transform: scale(1.1);
transform: scale(1.1);
}figure.effect-chico figcaption::before,
figure.effect-chico p {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}figure.effect-chico h2 {
padding: 20% 0 20px 0;
}figure.effect-chico p {
margin: 0 auto;
max-width: 200px;
-webkit-transform: scale(1.5);
transform: scale(1.5);
}figure.effect-chico:hover figcaption::before,
figure.effect-chico:hover p {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}/*---------------*/
/***** Julia *****/
/*---------------*/figure.effect-julia {
background: #2f3238;
}figure.effect-julia img {
max-width: none;
height: 400px;
-webkit-transition: opacity 1s, -webkit-transform 1s;
transition: opacity 1s, transform 1s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}figure.effect-julia figcaption {
text-align: left;
}figure.effect-julia h2 {
position: relative;
padding: 0.5em 0;
}figure.effect-julia p {
display: inline-block;
margin: 0 0 0.25em;
padding: 0.4em 1em;
background: rgba(255,255,255,0.9);
color: #2f3238;
text-transform: none;
font-weight: 500;
font-size: 75%;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-360px,0,0);
transform: translate3d(-360px,0,0);
}figure.effect-julia p:first-child {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}figure.effect-julia p:nth-of-type(2) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}figure.effect-julia p:nth-of-type(3) {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}figure.effect-julia:hover p:first-child {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}figure.effect-julia:hover p:nth-of-type(2) {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}figure.effect-julia:hover p:nth-of-type(3) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}figure.effect-julia:hover img {
opacity: 0.4;
-webkit-transform: scale3d(1.1,1.1,1);
transform: scale3d(1.1,1.1,1);
}figure.effect-julia:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}/*-----------------*/
/***** Goliath *****/
/*-----------------*/figure.effect-goliath {
background: #df4e4e;
}figure.effect-goliath img,
figure.effect-goliath h2 {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}figure.effect-goliath img {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}figure.effect-goliath h2,
figure.effect-goliath p {
position: absolute;
bottom: 0;
left: 0;
padding: 30px;
}figure.effect-goliath p {
text-transform: none;
font-size: 90%;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,50px,0);
transform: translate3d(0,50px,0);
}figure.effect-goliath:hover img {
-webkit-transform: translate3d(0,-80px,0);
transform: translate3d(0,-80px,0);
}figure.effect-goliath:hover h2 {
-webkit-transform: translate3d(0,-100px,0);
transform: translate3d(0,-100px,0);
}figure.effect-goliath:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}/*-----------------*/
/***** Hera *****/
/*-----------------*/figure.effect-hera {
background: #303fa9;
}figure.effect-hera h2 {
font-size: 158.75%;
}figure.effect-hera h2,
figure.effect-hera p {
position: absolute;
top: 50%;
left: 50%;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
-webkit-transform-origin: 50%;
transform-origin: 50%;
}figure.effect-hera figcaption::before {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
border: 2px solid #fff;
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
-webkit-transform-origin: 50%;
transform-origin: 50%;
}figure.effect-hera p {
width: 100px;
text-transform: none;
font-size: 121%;
line-height: 2;
}figure.effect-hera p a {
color: #fff;
}figure.effect-hera p a:hover,
figure.effect-hera p a:focus {
opacity: 0.6;
}figure.effect-hera p a i {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}figure.effect-hera p a:first-child i {
-webkit-transform: translate3d(-60px,-60px,0);
transform: translate3d(-60px,-60px,0);
}figure.effect-hera p a:nth-child(2) i {
-webkit-transform: translate3d(60px,-60px,0);
transform: translate3d(60px,-60px,0);
}figure.effect-hera p a:nth-child(3) i {
-webkit-transform: translate3d(-60px,60px,0);
transform: translate3d(-60px,60px,0);
}figure.effect-hera p a:nth-child(4) i {
-webkit-transform: translate3d(60px,60px,0);
transform: translate3d(60px,60px,0);
}figure.effect-hera:hover figcaption::before {
opacity: 1;
-webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
}figure.effect-hera:hover h2 {
opacity: 0;
-webkit-transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
}figure.effect-hera:hover p i:empty {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0); /* just because it's stronger than nth-child */
opacity: 1;
}/*-----------------*/
/***** Winston *****/
/*-----------------*/figure.effect-winston {
background: #162633;
text-align: left;
}figure.effect-winston img {
-webkit-transition: opacity 0.45s;
transition: opacity 0.45s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}figure.effect-winston figcaption::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(http://admin.abc.sm/cms/library/css_effects/tympanus.net/img/triangle.svg) no-repeat center center;
background-size: 100% 100%;
content: '';
-webkit-transition: opacity 0.45s, -webkit-transform 0.45s;
transition: opacity 0.45s, transform 0.45s;
-webkit-transform: rotate3d(0,0,1,45deg);
transform: rotate3d(0,0,1,45deg);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}figure.effect-winston h2 {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}figure.effect-winston p {
position: absolute;
right: 0;
bottom: 0;
padding: 0 1.5em 7% 0;
}figure.effect-winston a {
margin: 0 10px;
color: #5d504f;
font-size: 170%;
}figure.effect-winston a:hover,
figure.effect-winston a:focus {
color: #cc6055;
}figure.effect-winston p a i {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,50px,0);
transform: translate3d(0,50px,0);
}figure.effect-winston:hover img {
opacity: 0.6;
}figure.effect-winston:hover h2 {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}figure.effect-winston:hover figcaption::before {
opacity: 0.7;
-webkit-transform: rotate3d(0,0,1,20deg);
transform: rotate3d(0,0,1,20deg);
}figure.effect-winston:hover p i {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}figure.effect-winston:hover p a:nth-child(3) i {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}figure.effect-winston:hover p a:nth-child(2) i {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}figure.effect-winston:hover p a:first-child i {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}/*-----------------*/
/***** Selena *****/
/*-----------------*/figure.effect-selena {
background: #fff;
}figure.effect-selena img {
opacity: 0.95;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}figure.effect-selena:hover img {
-webkit-transform: scale3d(0.95,0.95,1);
transform: scale3d(0.95,0.95,1);
}figure.effect-selena h2 {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}figure.effect-selena p {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: perspective(1000px) rotate3d(1,0,0,90deg);
transform: perspective(1000px) rotate3d(1,0,0,90deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}figure.effect-selena:hover h2 {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}figure.effect-selena:hover p {
opacity: 1;
-webkit-transform: perspective(1000px) rotate3d(1,0,0,0);
transform: perspective(1000px) rotate3d(1,0,0,0);
}/*-----------------*/
/***** Terry *****/
/*-----------------*/figure.effect-terry {
background: #34495e;
}figure.effect-terry figcaption {
padding: 1em;
}figure.effect-terry figcaption::before,
figure.effect-terry figcaption::after {
position: absolute;
width: 200%;
height: 200%;
border-style: solid;
border-color: #101010;
content: '';
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}figure.effect-terry figcaption::before {
right: 0;
bottom: 0;
border-width: 0 70px 60px 0;
-webkit-transform: translate3d(70px,60px,0);
transform: translate3d(70px,60px,0);
}figure.effect-terry figcaption::after {
top: 0;
left: 0;
border-width: 15px 0 0 15px;
-webkit-transform: translate3d(-15px,-15px,0);
transform: translate3d(-15px,-15px,0);
}figure.effect-terry img,
figure.effect-terry p a {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}figure.effect-terry img {
opacity: 0.85;
}figure.effect-terry h2 {
position: absolute;
bottom: 0;
left: 0;
padding: 0.4em 10px;
width: 50%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}@media screen and (max-width: 920px) {
figure.effect-terry h2 {
padding: 0.75em 10px;
font-size: 120%;
}
}figure.effect-terry p {
float: right;
clear: both;
text-align: left;
text-transform: none;
font-size: 111%;
}figure.effect-terry p a {
display: block;
margin-bottom: 1em;
color: #fff;
opacity: 0;
-webkit-transform: translate3d(90px,0,0);
transform: translate3d(90px,0,0);
}figure.effect-terry p a:hover,
figure.effect-terry p a:focus {
color: #f3cf3f;
}figure.effect-terry:hover figcaption::before,
figure.effect-terry:hover figcaption::after {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}figure.effect-terry:hover img {
opacity: 0.6;}figure.effect-terry:hover h2,
figure.effect-terry:hover p a {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}figure.effect-terry:hover p a {
opacity: 1;
}figure.effect-terry:hover p a:first-child {
-webkit-transition-delay: 0.025s;
transition-delay: 0.025s;
}figure.effect-terry:hover p a:nth-child(2) {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}figure.effect-terry:hover p a:nth-child(3) {
-webkit-transition-delay: 0.075s;
transition-delay: 0.075s;
}figure.effect-terry:hover p a:nth-child(4) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}/*-----------------*/
/***** Phoebe *****/
/*-----------------*/figure.effect-phoebe {
background: #675983;
}figure.effect-phoebe img {
opacity: 0.85;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}figure.effect-phoebe:hover img {
opacity: 0.6;
}figure.effect-phoebe figcaption::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(http://admin.abc.sm/cms/library/css_effects/tympanus.net/img/triangle2.svg) no-repeat center center;
background-size: 100% 100%;
content: '';
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale3d(5,2.5,1);
transform: scale3d(5,2.5,1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}figure.effect-phoebe:hover figcaption::before {
opacity: 0.6;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}figure.effect-phoebe h2 {
margin-top: 1em;
-webkit-transition: transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,40px,0);
transform: translate3d(0,40px,0);
}figure.effect-phoebe:hover h2 {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}figure.effect-phoebe p a {
color: #fff;
font-size: 140%;
opacity: 0;
position: relative;
display: inline-block;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}figure.effect-phoebe p a:first-child {
-webkit-transform: translate3d(-60px,-60px,0);
transform: translate3d(-60px,-60px,0);
}figure.effect-phoebe p a:nth-child(2) {
-webkit-transform: translate3d(0,60px,0);
transform: translate3d(0,60px,0);
}figure.effect-phoebe p a:nth-child(3) {
-webkit-transform: translate3d(60px,-60px,0);
transform: translate3d(60px,-60px,0);
}figure.effect-phoebe:hover p a {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}/*-----------------*/
/***** Apollo *****/
/*-----------------*/figure.effect-apollo {
background: #3498db;
}figure.effect-apollo img {
opacity: 0.95;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale3d(1.05,1.05,1);
transform: scale3d(1.05,1.05,1);
}figure.effect-apollo figcaption::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.5);
content: '';
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
}figure.effect-apollo p {
position: absolute;
right: 0;
bottom: 0;
margin: 3em;
padding: 0 1em;
max-width: 150px;
border-right: 4px solid #fff;
text-align: right;
opacity: 0;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}figure.effect-apollo h2 {
text-align: left;
}figure.effect-apollo:hover img {
opacity: 0.6;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}figure.effect-apollo:hover figcaption::before {
-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
}figure.effect-apollo:hover p {
opacity: 1;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}/*-----------------*/
/***** Kira *****/
/*-----------------*/figure.effect-kira {
background: #fff;
text-align: left;
}figure.effect-kira img {
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}figure.effect-kira figcaption {
z-index: 1;
}figure.effect-kira p {
padding: 2.25em 0.5em;
font-weight: 600;
font-size: 100%;
line-height: 1.5;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,-10px,0);
transform: translate3d(0,-10px,0);
}figure.effect-kira p a {
margin: 0 0.5em;
color: #101010;
}figure.effect-kira p a:hover,
figure.effect-kira p a:focus {
opacity: 0.6;
}figure.effect-kira figcaption::before {
position: absolute;
top: 0;
right: 2em;
left: 2em;
z-index: -1;
height: 3.5em;
background: #fff;
content: '';
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,4em,0) scale3d(1,0.023,1) ;
transform: translate3d(0,4em,0) scale3d(1,0.023,1);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}figure.effect-kira:hover img {
opacity: 0.5;
}figure.effect-kira:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}figure.effect-kira:hover figcaption::before {
opacity: 0.7;
-webkit-transform: translate3d(0,5em,0) scale3d(1,1,1) ;
transform: translate3d(0,5em,0) scale3d(1,1,1);
}/*-----------------*/
/***** Steve *****/
/*-----------------*/figure.effect-steve {
z-index: auto;
overflow: visible;
background: #000;
}figure.effect-steve:before,
figure.effect-steve h2:before {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background: #000;
content: '';
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}figure.effect-steve:before {
box-shadow: 0 3px 30px rgba(0,0,0,0.8);
opacity: 0;
}figure.effect-steve figcaption {
z-index: 1;
}figure.effect-steve img {
opacity: 1;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: perspective(1000px) translate3d(0,0,0);
transform: perspective(1000px) translate3d(0,0,0);
}figure.effect-steve h2,
figure.effect-steve p {
background: #fff;
color: #2d434e;
}figure.effect-steve h2 {
position: relative;
margin-top: 2em;
padding: 0.25em;
}figure.effect-steve h2:before {
box-shadow: 0 1px 10px rgba(0,0,0,0.5);
}figure.effect-steve p {
margin-top: 1em;
padding: 0.5em;
font-weight: 800;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale3d(0.9,0.9,1);
transform: scale3d(0.9,0.9,1);
}figure.effect-steve:hover:before {
opacity: 1;
}figure.effect-steve:hover img {
-webkit-transform: perspective(1000px) translate3d(0,0,21px);
transform: perspective(1000px) translate3d(0,0,21px);
}figure.effect-steve:hover h2:before {
opacity: 0;
}figure.effect-steve:hover p {
opacity: 1;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}/*-----------------*/
/***** Moses *****/
/*-----------------*/figure.effect-moses {
background: -webkit-linear-gradient(-45deg, #EC65B7 0%,#05E0D8 100%);
background: linear-gradient(-45deg, #EC65B7 0%,#05E0D8 100%);
}figure.effect-moses img {
opacity: 0.85;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}figure.effect-moses h2,
figure.effect-moses p {
padding: 20px;
width: 50%;
height: 50%;
border: 2px solid #fff;
}figure.effect-moses h2 {
padding: 20px;
width: 50%;
height: 50%;
text-align: left;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(10px,10px,0);
transform: translate3d(10px,10px,0);
}figure.effect-moses p {
float: right;
padding: 20px;
text-align: right;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}figure.effect-moses:hover h2 {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}figure.effect-moses:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}figure.effect-moses:hover img {
opacity: 0.6;
}/*---------------*/
/***** Jazz *****/
/*---------------*/figure.effect-jazz {
background: -webkit-linear-gradient(-45deg, #f3cf3f 0%,#f33f58 100%);
background: linear-gradient(-45deg, #f3cf3f 0%,#f33f58 100%);
}figure.effect-jazz img {
opacity: 0.9;
}figure.effect-jazz figcaption::after,
figure.effect-jazz img,
figure.effect-jazz p {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}figure.effect-jazz figcaption::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
content: '';
opacity: 0;
-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}figure.effect-jazz h2,
figure.effect-jazz p {
opacity: 1;
-webkit-transform: scale3d(0.8,0.8,1);
transform: scale3d(0.8,0.8,1);
}figure.effect-jazz h2 {
padding-top: 26%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}figure.effect-jazz p {
padding: 0.5em 2em;
text-transform: none;
font-size: 0.85em;
opacity: 0;
}figure.effect-jazz:hover img {
opacity: 0.7;
-webkit-transform: scale3d(1.05,1.05,1);
transform: scale3d(1.05,1.05,1);
}figure.effect-jazz:hover figcaption::after {
opacity: 1;
-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
}figure.effect-jazz:hover h2,
figure.effect-jazz:hover p {
opacity: 1;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}/*---------------*/
/***** Ming *****/
/*---------------*/figure.effect-ming {
background: #030c17;
}figure.effect-ming img {
opacity: 0.9;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}figure.effect-ming figcaption::before {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
border: 2px solid #fff;
box-shadow: 0 0 0 30px rgba(255,255,255,0.2);
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale3d(1.4,1.4,1);
transform: scale3d(1.4,1.4,1);
}figure.effect-ming h2 {
margin: 20% 0 10px 0;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}figure.effect-ming p {
padding: 1em;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.5);
transform: scale(1.5);
}figure.effect-ming:hover h2 {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}figure.effect-ming:hover figcaption::before,
figure.effect-ming:hover p {
opacity: 1;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}figure.effect-ming:hover figcaption {
background-color: rgba(58,52,42,0);
}figure.effect-ming:hover img {
opacity: 0.4;
}/*---------------*/
/***** Lexi *****/
/*---------------*/figure.effect-lexi {
background: -webkit-linear-gradient(-45deg, #000 0%,#fff 100%);
background: linear-gradient(-45deg, #000 0%,#fff 100%);
}figure.effect-lexi img {
margin: -10px 0 0 -10px;
max-width: none;
width: -webkit-calc(100% + 10px);
width: calc(100% + 10px);
opacity: 0.9;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(10px,10px,0);
transform: translate3d(10px,10px,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}figure.effect-lexi figcaption::before,
figure.effect-lexi p {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}figure.effect-lexi figcaption::before {
position: absolute;
right: -100px;
bottom: -100px;
width: 300px;
height: 300px;
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 900px rgba(255,255,255,0.2);
content: '';
opacity: 0;
-webkit-transform: scale3d(0.5,0.5,1);
transform: scale3d(0.5,0.5,1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}figure.effect-lexi:hover img {
opacity: 0.6;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}figure.effect-lexi h2 {
text-align: left;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(5px,5px,0);
transform: translate3d(5px,5px,0);
}figure.effect-lexi p {
position: absolute;
right: 0;
bottom: 0;
padding: 0 1.5em 1.5em 0;
width: 140px;
text-align: right;
opacity: 0;
-webkit-transform: translate3d(20px,20px,0);
transform: translate3d(20px,20px,0);
}figure.effect-lexi:hover figcaption::before {
opacity: 1;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}figure.effect-lexi:hover h2,
figure.effect-lexi:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}/*---------------*/
/***** Duke *****/
/*---------------*/figure.effect-duke {
background: -webkit-linear-gradient(-45deg, #34495e 0%,#cc6055 100%);
background: linear-gradient(-45deg, #34495e 0%,#cc6055 100%);
}figure.effect-duke img,
figure.effect-duke p {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}figure.effect-duke:hover img {
opacity: 0.1;
-webkit-transform: scale3d(2,2,1);
transform: scale3d(2,2,1);
}figure.effect-duke h2 {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: scale3d(0.8,0.8,1);
transform: scale3d(0.8,0.8,1);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}figure.effect-duke p {
position: absolute;
bottom: 0;
left: 0;
margin: 20px;
padding: 30px;
border: 2px solid #fff;
text-transform: none;
font-size: 90%;
opacity: 0;
-webkit-transform: scale3d(0.8,0.8,1);
transform: scale3d(0.8,0.8,1);
-webkit-transform-origin: 50% -100%;
transform-origin: 50% -100%;
}figure.effect-duke:hover h2,
figure.effect-duke:hover p {
opacity: 1;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}@media screen and (max-width: 50em) {
.content {
padding: 0 10px;
text-align: center;
}
.grid figure {
display: inline-block;
float: none;
margin: 10px auto;
width: 100%;
}
}@-webkit-keyframes bgzoom{from{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);o-transform:scale(1,1);transform:scale(1,1)}to{-webkit-transform:scale(1.02, 1.02);-moz-transform:scale(1.02, 1.02);o-transform:scale(1.02, 1.02);transform:scale(1.02, 1.02)}}
@-moz-keyframes bgzoom{from{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);o-transform:scale(1,1);transform:scale(1,1)}to{-webkit-transform:scale(1.02, 1.02);-moz-transform:scale(1.02, 1.02);o-transform:scale(1.02, 1.02);transform:scale(1.02, 1.02)}}
@-o-keyframes bgzoom{from{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);o-transform:scale(1,1);transform:scale(1,1)}to{-webkit-transform:scale(1.02, 1.02);-moz-transform:scale(1.02, 1.02);o-transform:scale(1.02, 1.02);transform:scale(1.02, 1.02)}}
@keyframes bgzoom{from{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);o-transform:scale(1,1);transform:scale(1,1)}to{-webkit-transform:scale(1.02, 1.02);-moz-transform:scale(1.02, 1.02);o-transform:scale(1.02, 1.02);transform:scale(1.02, 1.02)}}@-webkit-keyframes bgzoom-reverse{from{-webkit-transform:scale(1.021,1.02);-moz-transform:scale(1.02,1.02);o-transform:scale(1.02,1.02);transform:scale(1.02,1.02)}to{-webkit-transform:scale(1.00, 1.00);-moz-transform:scale(1.00, 1.00);o-transform:scale(1.02, 1.02);transform:scale(1.00, 1.00)}}
@-moz-keyframes bgzoom-reverse{from{-webkit-transform:scale(1.02,1.02);-moz-transform:scale(1.02,1.02);o-transform:scale(1.02,1.02);transform:scale(1.02,1.02)}to{-webkit-transform:scale(1.00, 1.00);-moz-transform:scale(1.00, 1.00);o-transform:scale(1.02, 1.02);transform:scale(1.00, 1.00)}}
@-o-keyframes bgzoom-reverse{from{-webkit-transform:scale(1.02,1.02);-moz-transform:scale(1.02,1.02);o-transform:scale(1.02,1.02);transform:scale(1.02,1.02)}to{-webkit-transform:scale(1.00, 1.00);-moz-transform:scale(1.00, 1.00);o-transform:scale(1.02, 1.02);transform:scale(1.00, 1.00)}}
@keyframes bgzoom-reverse{from{-webkit-transform:scale(1.02,1.02);-moz-transform:scale(1.02,1.02);o-transform:scale(1.02,1.02);transform:scale(1.02,1.02)}to{-webkit-transform:scale(1.00, 1.00);-moz-transform:scale(1.00, 1.00);o-transform:scale(1.02, 1.02);transform:scale(1.00, 1.00)}}.bgzoom img{animation:bgzoom-reverse 0.3s ease-out;
-moz-animation:bgzoom-reverse 0.3s ease-out;
-o-animation:bgzoom-reverse 0.3s ease-out;
-webkit-animation:bgzoom-reverse 0.3s ease-out;
animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;}.bgzoom img:hover{animation:bgzoom 0.3s ease-out;
-moz-animation:bgzoom 0.3s ease-out;
-o-animation:bgzoom 0.3s ease-out;
-webkit-animation:bgzoom 0.3s ease-out;
animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
}
/*Caching, expire 17/04/2017 20:03*/