/*************/ /* Products */ /*************/ .product-tag { height: 500px; width: 100%; /*display: block;*/ position: relative; /* height: 500px; width: 200px; */ /* position: relative; top: 0px; left: 0px; */ } .product-tag-recto { position: relative; /* top: 0 left: 0;*/ border: 1px solid #dddddd; background-color: #ffffff; height: inherit; width: inherit; text-align: center; } .product-image { height: 40%; width: 100%; /* background: url(http://placehold.it/50x50) no-repeat scroll 50% 50% rgba(39, 224, 255, 1); /* #27 e0 ff */ background: url(http://placehold.it/50x50) no-repeat scroll 50% 50% #55759A;/* #849EBB; */ } .product-image img { position: absolute; top: 20%; left: 50%; transform: translate(-50%, -50%); } .product-caption { margin-top: 20%; background: #FFFFFF; } .product-logo { height: 17%; width: 100%; margin-top: 0; display: inline-block; h1.sub-title { border-bottom: 1px solid #FF420E; display: inline-block; } h3 { color: #FF420E; margin-top: -5px; } } .product-logo img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .product-description { height: 23%; font-size: 13px; margin-top:0; padding: 10px; overflow: hidden; } .product-description.more { height: 100%; } .product-more-info { width: 75%; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; margin-top: 10px; margin-bottom: 20px; padding: 5px 10px; color: #FFFFFF; background: no-repeat scroll 0 0 #555555; } .product-more-info:before { content: "READ MORE"; } .shade { /* background-size: cover;*/ background: rgba(0, 0, 0, 0.5); /*opacity: 1;*/ position: absolute; top: 0; /* top: 0; left: 0; */ width: inherit; height: inherit; display: none; } .product-tag-verso { color: white; position: absolute; top: 0; height: inherit; width: inherit; display: none; } #offer article { margin-bottom: 20px; /*tags bottom margin */ } /* defining colors for each kind of products */ @generate-gtfs: #55759a; @transit-interface: #c42847; @third-party: #5e6e4e; @transit-apps: #cc5521; @generate-gtfs: #55759a; /* blue */ @third-party: #5e6e4e; /* dark green */ @transit-interface: #b5424c; /* dark red */ @transit-apps: #cc5521; /* dark orange */ @generate-gtfs: #55759a; /* blue */ @third-party: #028090; /* blue lighter */ @transit-interface: #b5424c; /* dark red */ @transit-apps: #5e6e4e; /* dark green */ /* @generate-gtfs: #55759a; // blue @third-party: #028090; // blue lighter @transit-interface: #809AB9; @transit-apps: #b5c6da; // dark green */ .product-image(@color) { height: 40%; width: 100%; /* background: url(http://placehold.it/50x50) no-repeat scroll 50% 50% rgba(39, 224, 255, 1); /* #27 e0 ff */ background: url(http://placehold.it/50x50) no-repeat scroll 50% 50% @color;/* #849EBB; */ } #urbineris .product-image { .product-image(@generate-gtfs); } #urbiplan .product-image { .product-image(@generate-gtfs); } #urbitran .product-image { .product-image(@generate-gtfs); } #urbiplan_realtime .product-image { .product-image(@generate-gtfs); } #google_transit .product-image { .product-image(@third-party); } #opentripplanner .product-image { .product-image(@third-party); } #urb_api .product-image { .product-image(@transit-interface); } #urbaliti .product-image { .product-image(@transit-interface); } #widget .product-image { .product-image(@transit-interface); } #virtual_ticketing .product-image { .product-image(@transit-apps); } #mobile_app .product-image { .product-image(@transit-apps); } #mobile_site .product-image { .product-image(@transit-apps); } #transit_map .product-image { .product-image(@transit-apps); } .product-control{ /* background-color: #bbbbbb;*/ padding: 20px; position: relative; width:100%; overflow: hidden; height: 100px; margin-bottom: 30px; } .num-container{ float: left; margin-right: 10px; } .product-range { text-transform: uppercase; margin-left: 10px; color: #000; line-height: 1.5; font-weight: 300; /*font-size: 14px;*/ display: block; overflow: hidden; } .numberCircle(@color) { border-radius: 50%; behavior: url(PIE.htc); /* remove if you don't care about IE8 */ width: 36px; height: 36px; /* padding: 8px;*/ display: block; /* position: absolute; top: 0; bottom:0; */ background: @color; /* border: 2px solid #666;*/ /* color: #666;*/ color: white; text-align: center; font-size: 20px; font-weight: 600; } #generate-gtfs .numberCircle{ .numberCircle(@generate-gtfs); } #third-party .numberCircle{ .numberCircle(@third-party); } #transit-interface .numberCircle{ .numberCircle(@transit-interface); } #transit-apps .numberCircle{ .numberCircle(@transit-apps); }