/* ! normalize.css v1.0.0 | MIT License | git.io/normalize */ /* ========================================================================== HTML5 display definitions ========================================================================== */ /* * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3. */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } /* * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */ audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } /* * Prevents modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /* * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, * and Safari 4. * Known issue:no IE 6 support. */ [hidden] { display: none; } /* ========================================================================== Base ========================================================================== */ /* * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using * `em` units. * 2. Prevents iOS text size adjust after orientation change, without disabling * user zoom. */ /* CSS Document */ @font-face { font-family: 'brandon'; src: url('http://www.ing-graphics.com/css/fonts/brandon_blk-webfont.eot'); src: url('http://www.ing-graphics.com/css/fonts/brandon_blk-webfont.eot?#iefix') format('embedded-opentype'), url('http://www.ing-graphics.com/css/fonts/brandon_blk-webfont.woff') format('woff'), url('http://www.ing-graphics.com/css/fonts/brandon_blk-webfont.ttf') format('truetype'), url('http://www.ing-graphics.com/css/fonts/brandon_blk-webfont.svg#brandon_grotesqueblack') format('svg'); font-weight: 900; font-style: normal; } @font-face { font-family: 'brandon'; src: url('http://www.ing-graphics.com/css/fonts/brandon_bld-webfont.eot'); src: url('http://www.ing-graphics.com/css/fonts/brandon_bld-webfont.eot?#iefix') format('embedded-opentype'), url('http://www.ing-graphics.com/css/fonts/brandon_bld-webfont.woff') format('woff'), url('http://www.ing-graphics.com/css/fonts/brandon_bld-webfont.ttf') format('truetype'), url('http://www.ing-graphics.com/css/fonts/brandon_bld-webfont.svg#brandon_grotesquebold') format('svg'); font-weight: 700; font-style: normal; } @font-face { font-family: 'brandon'; src: url('http://www.ing-graphics.com/css/fonts/brandon_reg-webfont.eot'); src: url('http://www.ing-graphics.com/css/fonts/brandon_reg-webfont.eot?#iefix') format('embedded-opentype'), url('http://www.ing-graphics.com/css/fonts/brandon_reg-webfont.woff') format('woff'), url('http://www.ing-graphics.com/css/fonts/brandon_reg-webfont.ttf') format('truetype'), url('http://www.ing-graphics.com/css/fonts/brandon_reg-webfont.svg#brandon_grotesque_regularRg') format('svg'); font-weight: 500; font-style: normal; } html { font-size: 100%; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -ms-text-size-adjust: 100%; /* 2 */ } html, html a { -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); } /* * Addresses `font-family` inconsistency between `textarea` and other form * elements. */ html, button, input, select, textarea { font-family: 'Varela Round', sans-serif; } /* * Addresses margins handled incorrectly in IE 6/7. */ body { margin: 0; font-family: 'brandon', sans-serif; } /* ========================================================================== Links ========================================================================== */ /* * Addresses `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } /* * Improves readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* ========================================================================== Typography ========================================================================== */ /* * Addresses font sizes and margins set differently in IE 6/7. * Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5, * and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; color: #353535; } h2 { font-size: 1.5em; margin: 0.83em 0; } h3 { font-size: 1.17em; margin: 1em 0; } h4 { font-size: 1em; margin: 1.33em 0; } h5 { font-size: 0.83em; margin: 1.67em 0; } h6 { font-size: 0.75em; margin: 2.33em 0; } /* * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /* * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. */ b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } /* * Addresses styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /* * Addresses styling not present in IE 6/7/8/9. */ mark { background: #ff0; color: #000; } /* * Addresses margins set differently in IE 6/7. */ p, pre { margin: 1em 0; } /* * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome. */ code, kbd, pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } /* * Improves readability of pre-formatted text in all browsers. */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } /* * Addresses CSS quotes not supported in IE 6/7. */ q { quotes: none; } /* * Addresses `quotes` property not supported in Safari 4. */ q:before, q:after { content: ''; content: none; } small { font-size: 75%; } /* * Prevents `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================================================================== Lists ========================================================================== */ /* * Addresses margins set differently in IE 6/7. */ dl, menu, ol, ul { margin: 1em 0; } dd { margin: 0 0 0 40px; } /* * Addresses paddings set differently in IE 6/7. */ menu, ol, ul { padding: 0 0 0 40px; } /* * Corrects list images handled incorrectly in IE 7. */ nav ul, nav ol { list-style: none; list-style-image: none; } /* ========================================================================== Embedded content ========================================================================== */ /* * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3. * 2. Improves image quality when scaled in IE 7. */ img { border: 0; /* 1 */ -ms-interpolation-mode: bicubic; /* 2 */ } /* * Corrects overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /* * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */ figure { margin: 0; } /* ========================================================================== Forms ========================================================================== */ /* * Corrects margin displayed oddly in IE 6/7. */ form { margin: 0; } /* * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /* * 1. Corrects color not being inherited in IE 6/7/8/9. * 2. Corrects text not wrapping in Firefox 3. * 3. Corrects alignment displayed oddly in IE 6/7. */ legend { border: 0; /* 1 */ padding: 0; white-space: normal; /* 2 */ *margin-left: -7px; /* 3 */ } /* * 1. Corrects font size not being inherited in all browsers. * 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, * and Chrome. * 3. Improves appearance and consistency in all browsers. */ button, input, select, textarea { font-size: 100%; /* 1 */ margin: 0; /* 2 */ vertical-align: baseline; /* 3 */ *vertical-align: middle; /* 3 */ } /* * Addresses Firefox 3+ setting `line-height` on `input` using ` !important` in * the UA stylesheet. */ button, input { line-height: normal; } /* * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Corrects inability to style clickable `input` types in iOS. * 3. Improves usability and consistency of cursor style between image-type * `input` and others. * 4. Removes inner spacing in IE 7 without affecting normal text inputs. * Known issue:inner spacing remains in IE 6. */ button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ *overflow: visible; /* 4 */ } /* * Re-set default cursor for disabled elements. */ button[disabled], input[disabled] { cursor: default; } /* * 1. Addresses box sizing set to content-box in IE 8/9. * 2. Removes excess padding in IE 8/9. * 3. Removes excess padding in IE 7. * Known issue:excess padding remains in IE 6. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ *height: 13px; /* 3 */ *width: 13px; /* 3 */ } /* * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /* * Removes inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /* * Removes inner padding and border in Firefox 3+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* * 1. Removes default vertical scrollbar in IE 6/7/8/9. * 2. Improves readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ========================================================================== Tables ========================================================================== */ /* * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } /* ========================================================================== Global Styles ========================================================================== */ a { color: #353535; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; outline: 0; } a:hover, a:focus, a:active { color: #04ddd5; text-decoration: none; outline: 0; } p { color: #8c9398; word-spacing: 1px; line-height: 25px; font-size: 14px; } h2 { font-size: 15px; color: #353535; text-transform: uppercase; font-weight: 900; } h2::after { content: " "; border: solid 1px #555; display: block; width: 120px; position: absolute; margin: 20px 0px 0px -60px; left: 50%; } h3 { font-size: 15px; letter-spacing: 3px; color: #353535; text-transform: uppercase; font-weight: 700; margin-bottom: 40px; } h3:after { content: " "; display: block; width: 50px; height: 2px; background: #333; position: absolute; margin: 20px 0px 0px -25px; left: 50%; } .section-padding { padding: 100px 0 80px } .dark-bg { background: #f3f5f8; } .light-bg { background-color: #fff; } .dark-box { background: #f3f5f8; -webkit-box-shadow: 0px 3px 0px 0px #f0f2f4; -moz-box-shadow: 0px 3px 0px 0px #f0f2f4; box-shadow: 0px 3px 0px 0px #f0f2f4; } .light-box { background-color: #fff; -webkit-box-shadow: 0px 3px 0px 0px #f0f2f4; -moz-box-shadow: 0px 3px 0px 0px #f0f2f4; box-shadow: 0px 3px 0px 0px #f0f2f4; padding: 20px 0; } .light-box:hover, .light-box:focus { -webkit-box-shadow: 0px 3px 0px 0px #f6d93d; -moz-box-shadow: 0px 3px 0px 0px #04ddd5; box-shadow: 0px 3px 0px 0px #04ddd5; } .box-hover { transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; } .box-hover:hover, .box-hover:focus { transform: translate(0, -15px); -webkit-transform: translate(0, -15px); -ms-transform: translate(0, -15px); } .wrapper { height: 650px; } .nopadding { padding: 0; } .inner { padding-top: 170px; } /* ========================================================================== Head ========================================================================== */ #head-menu { position: absolute; padding: 40px 0px 10px 0px; width: 100%; z-index: 9999999999;background: rgba(246, 217, 61, 0); } #head-menu #logo { height: 81px; } #head-menu-slim-home { position:fixed; -webkit-transform: translateZ(0); padding: 10px 0px 10px 0px; width: 100%; z-index: 9999999999; background: rgba(0, 0, 0, 0.9); box-shadow: 0px -10px 7px 10px; top: -100px; } #head-menu-slim-home.active { top: 0px; } #head-menu-slim { position:fixed; -webkit-transform: translateZ(0); padding: 10px 0px 10px 0px; width: 100%; z-index: 9999999999; background: rgba(0, 0, 0, 0.9); box-shadow: 0px -10px 7px 10px; top: 0px; } #head-menu-slim-home #logo, #head-menu-slim #logo { height: 50px; margin-left: 10px; } #head-menu-slim-home nav.top-big ul, #head-menu-slim nav.top-big ul { margin: 0px; } #head-menu-slim-home nav.top-big ul li a, #head-menu-slim nav.top-big ul li a { padding: 14px 20px; padding-left: 0; font-size: 15px; } #head-menu, #head-menu #logo, #head-menu-slim-home { -webkit-transition: all 0.3s ease-in 0s; -moz-transition: all 0.3s ease-in 0s; -ms-transition: all 0.3s ease-in 0s; -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; text-decoration: none; } #head-menu.slim, #head-menu.slim #logo, #head-menu-slim-home.active { -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; text-decoration: none; } /* ========================================================================== Logo ========================================================================== */ .logo { padding-left: 3%; } .logo { padding-left: 3%; } /* ========================================================================== Navigation ========================================================================== */ nav.top-big { background: none; padding-right: 3%; border-color: transparent; border: 0; margin: 0;} nav.top-big ul { list-style: none; padding: 0; text-align:right; } nav.top-big ul li { color: rgba(255, 255, 255, 1); display: inline-block; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; padding-left: 30px; position: relative; } nav.top-big ul li a { border: none; outline: none;color: rgba(255, 255, 255, 1); display: block; padding: 20px; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; padding-left: 0; position: relative; font-size: 17px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; background-color: transparent; line-height: 19px; } nav.top-big ul li a:hover, nav.top-big ul li a:focus { opacity: 0.6; background-color: transparent; } nav { background-color: #242830; margin-top: -1px; } nav ul { list-style: none; padding: 0; } nav ul li { color: rgba(255, 255, 255, 0.6); display: block; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; padding-left: 0; position: relative; } nav ul li:last-child { border: none; } nav ul li a { color: rgba(255, 255, 255, 0.6); display: block; padding: 20px; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; padding-left: 0; position: relative; } nav ul li a:hover, nav ul li a:focus { text-decoration: none; color: rgba(255, 255, 255, 1); } #nav-toggle { position: absolute; right: 15px; top: 0; } #nav-toggle { cursor: pointer; padding: 10px 35px 16px 0px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { cursor: pointer; border-radius: 1px; -moz-border-radius: 1px; -webkit-border-radius: 1px; -o-border-radius: 1px; height: 5px; width: 35px; background: #353535; position: absolute; display: block; content: ''; } #nav-toggle span:before { top: -10px; } #nav-toggle span:after { bottom: -10px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: all 500ms ease-in-out; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; } #nav-toggle.active span { background-color: transparent; } #nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; } #nav-toggle.active span:before { transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); } #nav-toggle.active span:after { transform: translateY(-10px) rotate(-45deg); -webkit-transform: translateY(-10px) rotate(-45deg); -ms-transform: translateY(-10px) rotate(-45deg); top: 10px; } .navicon { position: relative; height: 26px; } .indicator { position: absolute; right: 0 !important; } .pull { display: none; } .navbar-default .navbar-collapse { padding:0; border: 0; box-shadow: none; } .navbar-default .navbar-toggle { border: 0; border-radius: 0; } .navbar-default .navbar-toggle .icon-bar { background-color: #fff; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: transparent; } .navbar-default .navbar-toggle li { display: block !important; } /* ========================================================================== Land ========================================================================== */ .land { background: url('../img/land-bg.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding: 40px 0 300px 0; height: auto; } .land .inner { padding-top: 140px; padding-left: 3%; } .land h1 { font-size: 65px; font-weight: 900; color: #FFF; letter-spacing: 4px; margin: 10px 0px; line-height: 64px; text-transform: uppercase; } .land h1 span { color: #a1a9b0; display: inline-block; } .land p { font-size: 50px; font-weight: 500; color: #FFF; letter-spacing: 0px; margin: 30px 0px 0px 0px; line-height: 45px; text-transform: lowercase; } .learn-more-btn { background: rgba(61, 201, 179, 1); padding: 20px 40px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; color: #fff; text-transform: uppercase; letter-spacing: 1px; display: inline-block; -webkit-box-shadow: 0px 3px 0px 0px #309383; -moz-box-shadow: 0px 3px 0px 0px #309383; box-shadow: 0px 3px 0px 0px #309383; margin: 60px 0 0; font-weight: bold; } .learn-more-btn:hover, .learn-more-btn:focus { background: rgba(61, 201, 179, 0.6); color: #fff; } /* ========================================================================== Intro ========================================================================== */ .intro { background: #f3f5f8; } .intro p { margin: 50px 0 0; } h1.arrow { font-size: 15px; text-transform: uppercase; color: #353535; letter-spacing: 1px; background: url('../img/h1-bg.png') no-repeat center bottom; padding-bottom: 30px; font-weight: bold; } #loading-mask { display: block; position: absolute; left: 0; top: 0; background: rgba(79, 79, 79, 1); width: 100%; z-index: 999; } #loading-mask.home { } #wrapper-home { overflow: hidden; position: relative; background: #fffce1; width: 100%; height: 100%; } #wrapper-home * {cursor: pointer} #wrapper-home #section { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 500 } #wrapper-home #section>ul { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; margin: 0px; } #wrapper-home #section>ul.eye { background: #04ddd5; } #wrapper-home #section>ul>li { display: none; overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background-size: cover; background-position: center center; background-repeat: no-repeat; } #wrapper-home #section>ul>li>.land-img { width: 100%; height: 100%; } #wrapper-home #section>ul>li>img { position: absolute; left: 0; top: -45px; width: auto; height: 100%; } #wrapper-home #section>ul>li>img.widthauto { width: auto !important; margin-left: -50%; } #wrapper-home #section>ul>li.active {display: block;z-index:2} #wrapper-home #section>ul.active {z-index: 2} #wrapper-home #section>ul.ananas {background: #96e0e9} #wrapper-home #section>ul.ballon {background: #dbadd2} #wrapper-home #section>ul.boombox {background: #87e1bd} #wrapper-home #section>ul.casque {background: #e0b1c5} #wrapper-home #section>ul.cassette {background: #e3998e} #wrapper-home #section>ul.converse {background: #b4bad2} #wrapper-home #section>ul.dinosaur {background: #c2deab} #wrapper-home #section>ul.gizmo {background: #eedf8e} #wrapper-home #section>ul.joystick {background: #c3bfd8} #wrapper-home #section>ul.mario_bros {background: #edd494} #wrapper-home #section>ul.patins {background: #fbb5bf} #wrapper-home #section>ul.radio {background: #cab290} #wrapper-home #section>ul.television {background: #b4ded2} #wrapper-home #section>ul.trophe {background: #bbdfa2} #wrapper-home #section>ul.youppi {background: #e8786a} #landtit { z-index: 999999; position: relative; } #landtit h1 { font-size: 57px; font-weight: 900; color: #FFF; letter-spacing: 0px; margin: 30px 32px; line-height: 58px; text-transform: uppercase; } .layout-mobile #landtit h1 { font-size: 34px; font-weight: 900; color: #FFF; letter-spacing: 0px; margin: 30px 10px; line-height: 38px; text-transform: uppercase; width: 75%; } .layout-mobile #wrapper-home #section>ul>li>img { position: absolute; left: 0; top: 0px; width: auto; height: 100%; margin-left: 50%; } .layout-mobile #wrapper-home .inner { padding-top: 80px; } .layout-mobile #head-menu-slim-home { top: 0px; } .layout-mobile #loading-mask { z-index: 9999999; background: #4f4f4f url(../img/mobile_icon-slide.gif) no-repeat center center; background-size: 70%; } /* ========================================================================== Confian ========================================================================== */ .confian { background: #f7f7f7; height: 90px; padding: 20px 25px; text-align:justify; } .confian ul { text-align: justify; margin: 0px; padding: 1px 50px; } .confian img { display:inline-table; position: relative; } .confian ul:after { content: ""; display: inline-block; width: 80%; } .confian.in { background: #f7f7f7; padding: 110px 25px 20px 25px; text-align: justify; height:auto; } /* ========================================================================== Features ========================================================================== */ .features-wrapper, .team-wrapper { margin: 30px 0 70px 0; } .features-wrapper p strong { color: #353535; font-weight: normal; font-size: 14px; } .shadow { text-shadow: rgb(55, 181, 161) 1px 1px, rgb(55, 181, 161) 2px 2px, rgb(55, 181, 161) 3px 3px, rgb(55, 181, 161) 4px 4px, rgb(55, 181, 161) 5px 5px, rgb(55, 181, 161) 6px 6px, rgb(55, 181, 161) 7px 7px, rgb(55, 181, 161) 8px 8px, rgb(55, 181, 161) 9px 9px, rgb(55, 181, 161) 10px 10px, rgb(55, 181, 161) 11px 11px, rgb(55, 181, 161) 12px 12px, rgb(55, 182, 162) 13px 13px, rgb(55, 183, 163) 14px 14px, rgb(56, 184, 164) 15px 15px, rgb(56, 185, 165) 16px 16px, rgb(56, 186, 166) 17px 17px, rgb(57, 187, 167) 18px 18px, rgb(57, 188, 168) 19px 19px, rgb(57, 189, 169) 20px 20px, rgb(58, 191, 170) 21px 21px, rgb(58, 192, 171) 22px 22px, rgb(58, 193, 172) 23px 23px, rgb(59, 194, 173) 24px 24px, rgb(59, 195, 174) 25px 25px, rgb(59, 196, 175) 26px 26px, rgb(60, 197, 176) 27px 27px, rgb(60, 198, 177) 28px 28px, rgb(60, 199, 178) 29px 29px, rgb(61, 201, 179) 30px 30px; } .icon { height: 175px; width: 175px; line-height: 175px; max-width: 100%; background: #04ddd5; border-radius: 50%; -o-border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; display: block; color: #fff; font-size: 55px; text-align: center; vertical-align: middle; position: relative; margin: 0 auto 50px; } .icon img { width: 100%; height: auto; position: relative; top: -4px; } h2.sub-title { padding-left: 0; font-size: 22px; letter-spacing: 10px; font-weight: 900; margin-bottom: 50px; text-transform: uppercase; } figure.effect-zoe h2::after { content: " "; border: solid 1px #999; display: none; } .grid { overflow: hidden; margin: 0 1%; padding: 1em 0 0 0px; width: 98%; max-width: 1920px; list-style: none; text-align: center; } /* Common style */ .grid figure { position: relative; z-index: 1; display: inline-block; overflow: hidden; margin: 0.5%; width: 31.333%; height: 360px; cursor: pointer; } .grid figure img { position: relative; left: 50%; margin-left: -320px; top: 50%; margin-top: -200px; display: block; min-height: 100%; opacity: 0.8; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; } .grid figure figcaption { padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .grid figure figcaption::before, .grid figure figcaption::after { pointer-events: none; } .grid figure figcaption, .grid figure a { position: absolute; top: 0; left: 0; width: 101%; height: 100%; display: block; cursor: pointer; } /* Content */ .grid figure a { } .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%; } /* Effect */ 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 img { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0,0%,0); transform: translate3d(0,0%,0);} CC { float: left; } figure.effect-zoe figcaption > span { float: right; } figure.effect-zoe p { position: absolute; bottom: 8em; padding: 2em; color: #fff; text-transform: none; font-size: 90%; opacity: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; } figure.effect-zoe h2, figure.effect-zoe figcaption > span { -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0,200%,0); transform: translate3d(0,200%,0); } figure.effect-zoe figcaption > 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; float: left; padding: 10px 0px 0px 0px; font-size: 20px; } figure.effect-zoe:hover p { opacity: 1; } figure.effect-zoe:hover figcaption, figure.effect-zoe:hover h2, figure.effect-zoe:hover figcaption > span { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);} figure.effect-zoe:hover img { opacity: 1; -webkit-transform: translate3d(0,-5%,0); transform: translate3d(0,-5%,0); } figure.effect-zoe:hover h2 { -webkit-transition-delay: 0.05s; transition-delay: 0.05s;} figure.effect-zoe:hover figcaption > span:nth-child(4) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } figure.effect-zoe:hover figcaption > span:nth-child(3) { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } figure.effect-zoe:hover figcaption > span:nth-child(2) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s;} a.works-tot { display: inline-block; text-align: center; padding: 13px 25px; margin: 40px 0px; color: #04ddd5; font-size: 15px; letter-spacing: 3px; font-weight: 900; text-transform: uppercase; border: 3px solid #04ddd5; } a.works-tot:hover { background: #04ddd5; color: #fff; } h1.services-tit { padding-left: 0; font-size: 22px; letter-spacing: 10px; font-weight: 900; margin-bottom: 150px; text-transform: uppercase; } h1.services-tit::after { content: " "; border: solid 1px #555; display: block; width: 120px; position: absolute; margin: 20px 0px 0px -60px; left: 50%; } /* ========================================================================== iPhone Section ========================================================================== */ .iphone { width: 50%; background: #f3f5f8; float: left; height: 100%; box-shadow: inset -15px -11px 40px -6px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset -15px -11px 40px -6px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset -15px -11px 40px -6px rgba(0, 0, 0, 0.1); z-index: 1; } .fluid-white { width: 50%; background: #fff; float: right; height: 100%; z-index: 2; } .responsive-services { position: relative; } /* ========================================================================== Swag ========================================================================== */ .swag { background: url('../img/glass-bg.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; padding: 90px 0; margin: 80px 0px; } .swag h1 { color: #fff; font-size: 40px; text-transform: uppercase; letter-spacing: 5px; font-weight: 900; } .swag h1 span { display: block; font-size: 19px; margin-top: 20px; font-weight: 100; } .down-arrow-btn { width: 40px; height: 40px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; background: rgba(61, 201, 179, 0.8); display: inline-block; margin: 10px auto 20px; color: #fff; font-size: 16px; line-height: 40px; text-align: center; } .down-arrow-btn:hover, .down-arrow-btn:focus { color: #fff; background: rgba(61, 201, 179, 1); } /* ========================================================================== Portfolio ========================================================================== */ .effects { padding-left: 15px; } .effects .img { position: relative; margin-bottom: 50px; position: relative; z-index: 1; overflow: hidden; } .effects .img:nth-child(n) { margin-right: 5px; } .effects .img:first-child { margin-left: -15px; } .effects .img:last-child { margin-right: 0; } .effects .img img { display: block; margin: 0; padding: 0; height: auto; } .overlay { display: block; position: absolute; z-index: 20; background: rgba(100, 194, 158, 0.8); overflow: hidden; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; } a.close-overlay { display: block; position: absolute; top: 0; right: 0; z-index: 100; width: 45px; height: 45px; font-size: 20px; font-weight: 700; color: #fff; line-height: 45px; text-align: center; background-color: #000; cursor: pointer; } a.close-overlay.hidden { display: none; } a.expand { display: block; position: absolute; z-index: 100; text-align: center; color: #fff; font-weight: 600; font-size: 14px; text-transform: uppercase; line-height: 30px; } .overlay-effect .img i { font-size: 30px; } .overlay-effect .overlay { bottom: 0; left: 0; right: 0; width: 100%; height: 100%; opacity: 0; } .overlay-effect .overlay a.expand { left: 0; right: 0; bottom: 47%; margin: 0 auto -30px auto; } .overlay-effect .img.hover .overlay { height: 100%; opacity: 1; } .img img { width: -webkit-calc(100% + 40px) !important; width: calc(100% + 40px) !important; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -moz-transition: opacity 0.35s, -moz-transform 0.35s; -o-transition: opacity 0.35s, -o-transform 0.35s; -webkit-transform: translate3d(-40px, 0, 0); transform: translate3d(-40px, 0, 0); -ms-transform: translate3d(-40px, 0, 0); } .img:hover img { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -ms-transform: translate3d(-40px, 0, 0); } .designs { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 50px; } /* ========================================================================== Subscribe ========================================================================== */ .subscribe { background: url('../img/keyboard-bg.jpg') no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; padding: 120px 0 140px; } .subscribe h1 { color: #fff; margin-bottom: 40px; } .subscribe h1 span { display: block; font-size: 15px; text-transform: uppercase; font-weight: bold; margin-top: 20px; letter-spacing: 1px; } .subscribe input[type=text] { background-color: rgba(255, 255, 255, 0.1); border: solid 1px #fff; padding: 20px; width: 30%; color: #fff; } .subscribe input[type=submit] { background: rgba(61, 201, 179, 0.5); border: solid 1px rgba(61, 201, 179, 0.5); padding: 20px; color: #fff; text-transform: uppercase; letter-spacing: 1px; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .subscribe input[type=submit]:hover { background: rgba(61, 201, 179, 1); border: solid 1px rgba(61, 201, 179, 1); color: #fff; } /* ========================================================================== CTA ========================================================================== */ .ignite-cta { background-color: #242830; padding: 70px 0; } .ignite-btn { display: inline-block; padding: 25px 40px; color: #fff; border: solid 1px #fff; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; } .ignite-btn:hover, .ignite-btn:focus { color: #04ddd5; border: solid 1px #04ddd5; } /* ========================================================================== Team ========================================================================== */ .team img { margin-bottom: 5px; max-width: 100%; } .team h3:after { display: none; } .team h3 { margin: 15px 0px 6px 0px; } .team h5 { margin: 0px 0px; } .team h5:after { content: " "; display: block; width: 50px; height: 2px; background: #333; position: absolute; margin: 10px 0px 0px -25px; left: 50%;} ul.social-buttons { list-style: none; margin: 0; padding: 0; } ul.social-buttons li { display: inline-block; margin-right: 10px; } ul.social-buttons li:last-child { margin-right: 0; } .social-btn { width: 40px; height: 40px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; background: #242830; display: inline-block; color: #fff; font-size: 17px; line-height: 40px; text-align: center; } .social-btn:hover, .social-btn:focus { background: #04ddd5; color: #fff; } .social { margin-top: 25px } /* ========================================================================== Contact ========================================================================== */ .up-btn { width: 40px; height: 40px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: block; margin: 0 auto; color: #222222; font-size: 17px; line-height: 39px; text-align: center; position: absolute; top: -6px; left: 0; right: 0; margin-left: auto; margin-right: auto; } .up-btn:hover, up-btn:focus { color: #222222; background: #04ddd5; } .contact-details { } .contact-details .col-md-6 { margin: 0px -15px; } .contact-details .contact-box { width: 105%; padding: 140px 10% 80px 10%; height:600px; background: rgba(0,0,0,0); text-align: left; position: relative; } .contact-details .contact-box a { text-transform: uppercase; font-size: 41px; margin-bottom: 120px; display: block; color: #FFF; font-weight: 900; line-height: 42px; } .contact-details .contact-box a:hover { color: #04ddd5; } .contact-details .contact-box p { text-transform:uppercase; font-size: 41px; color: #FFF; margin: 0px 0px 50px 0px; font-weight: 900; line-height: 42px; } .contact-details h2 { font-size: 20px; } .contact-details h2 span { display: block; color: #04ddd5; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; margin-top: 15px; } .contact-wrap { position: relative; height: 575px; overflow: hidden; } .contact-details .contact-box ul.social-buttons { margin-top: 220px; position: absolute; bottom: 5%;} .contact-details .contact-box .social-btn { width: 70px; height: 70px; color: #fff; border: 3px solid #fff; background: none; font-size: 28px; line-height: 67px; text-align: center; margin-bottom: 0px; } .contact-details .contact-box .social-btn:hover { background: #04ddd5; border: 3px solid #04ddd5; color: #000; } #map { position: absolute; height: 600px; width: 100%; top: 0px; } .gmnoprint a, .gmnoprint span { display:none; } .gmnoprint div { background:none !important; } /* ========================================================================== Footer ========================================================================== */ footer li { color: #666; } footer { background-color: #222222; padding: 20px 0 0px; font-size: 11px; text-transform: uppercase; } footer p { color: #666; font-size: 11px; } ul.legals { list-style: none; color: #666; line-height: 25px; padding: 0px 0px 0px 5px; } ul.legals li { display: inline-block; } ul.legals li::after { content: " |"; } ul.legals li:last-child::after { content: ""; } .legals { text-align: left; } .credit { text-align: right; } .credit img, .credit p { display: inline-block; } .credit img { position: relative; margin-right: 45px; top: -7px; } footer.white li { color: #909090; } footer.white { background-color: #fff; border-top: 1px solid #909090; padding: 20px 0 0px; font-size: 11px; text-transform: uppercase; } footer.white p { color: #909090; font-size: 11px; } ul.legals { list-style: none; color: #909090; line-height: 25px; padding: 0px 0px 0px 5px; } .work-descrip { } .work-descrip .inner { padding-top: 120px; } .work-descrip .inner h1 { padding-left: 0; font-size: 24px; letter-spacing: 3px; font-weight: 900; margin-bottom: 50px; margin-left: 20px; text-transform: uppercase; } .work-descrip .inner h1 span { font-weight: 400; } .work-descrip .inner h1::after { content: " "; border: solid 1px #555; display: block; width: 65px; position: absolute; margin: 8px 0px 0px 0px; left: 0; } .work-descrip .inner p { padding-left: 0; font-size: 15px; line-height: 20px; margin-bottom: 50px; margin-right: 20px; } .work-descrip .inner p strong { color: #333; font-weight: normal; } .work-descrip .inner p span { color: #dbdbdb; } .work-descrip.negativo .inner h1, .work-descrip.negativo .inner p { color: #ffffff; } .work-descrip.negativo .inner p strong { color: #ffffff; } .work-descrip.negativo .inner h1::after { border: solid 1px #fff; } .work-brand-comp { text-align: center; } .work-brand { text-align: center; height: 390px; position: relative; padding: 135px 0px; } .work-points-comp { margin: 160px 0px; text-align: center; } .work-points-comp .points-item { display: inline-block; height: 190px; width: 192px; text-align: center; } .work-points-comp .points-item.icon-one { background-position: 0px 0px; } .work-points-comp .points-item.icon-two { background-position: -209px 0px; } .work-points-comp .points-item.icon-three { background-position: 197px 0px; } .work-points-comp .points-item.dyp { background-image: url(../img/works/deli_and_pipes/deli_and_pipes-trama.jpg) ; } .work-points-comp .points-item.rb { background-image: url(../img/works/roberta_basics/roberta_basics-trama.jpg) ; } .work-site { margin: 80px 0px; text-align: center; position: relative; z-index: 999; } .work-site img { box-shadow: 0px 2px 8px rgba(0,0,0,0.4); width: 100%; max-width: 1049px; } .work-slogan { margin: 160px 0px; text-align: center; padding: 120px 0px; box-shadow: 0px 1px 6px 1px rgba(0,0,0,0.6); } .work-slogan.dyp { background:url(../img/works/deli_and_pipes/deli_and_pipes-background-slogan.jpg) center center no-repeat; background-size: cover;} .work-slogan.rb { background: url(../img/works/roberta_basics/roberta_basics-textura_back.jpg) center center no-repeat; background-size: cover; position: relative; margin: 0px; height: 380px; box-shadow: none; z-index: 999; } .work-slogan.rb .work-site-half { position: absolute; top: -150px; } .work-slogan.rb .work-site-half img { box-shadow: 0px 2px 8px rgba(0,0,0,0.4); } .work-slogan.rb .rb-slogan { padding-top: 60px; } .work-papeleria.rb { background: url(../img/works/roberta_basics/roberta_basics-tarjetas_back.jpg) center center no-repeat; background-size: cover; position: relative; margin: 0px; height: 760px; box-shadow: none;} .work-separator.rb { background:url(../img/works/roberta_basics/roberta_basics-separator.jpg) center center no-repeat; background-size: cover; position: relative; top: -150px; height: 520px; margin-bottom: -150px; } .work-mockup { text-align:center; margin: 160px 0px 0px 0px; } .work-mockup .col-sm-12 { float: none; } .work-mockup .work-mockup-img { height: 650px; width: auto; } .work-mockup .work-foot-logo { margin: 115px 0px 45px 0px; height: auto; width: auto; } .work-mockup.dyp { background: url(../img/works/deli_and_pipes/deli_and_pipes-background-foot.jpg) center 274px no-repeat; background-size: cover; } .work-mockup.rb { background: url(../img/works/roberta_basics/roberta_basics-background-foot.jpg) center 274px no-repeat; background-size: cover; top: -440px; position: relative; margin-bottom: -440px; } .work-navigation { padding: 40px 20px 120px 20px; background: #fff; } .work-navigation a{ font-size: 15px; text-transform: uppercase; letter-spacing: 3px; background-repeat: no-repeat; padding-top: 35px; display: inline-block;} .work-navigation a.arrow-prev { background-image:url(../img/arrow-p.png); background-position: 8px 37px; padding-left: 35px; } .work-navigation a:hover.arrow-prev { background-position: 2px 37px; } .work-navigation a.up-btn-w { background-image:url(../img/arrow.png); background-position: 28px 8px; } .work-navigation a:hover.up-btn-w { background-position: 28px 2px; } .work-navigation a.arrow-next { background-image:url(../img/arrow-n.png); background-position: 108px 37px; padding-right: 35px; } .work-navigation a:hover.arrow-next { background-position: 112px 37px; padding-right: 35px; } .work-brand.mr { background:url(../img/works/maria_rivolta/maria_rivolta-brand_back.jpg) no-repeat center; background-size: cover; } .work-site.mr { margin: -45px 0px 80px 0px; text-align: center; position: relative; z-index: 999; } .work-separator.mr { background:url(../img/works/maria_rivolta/maria_rivolta-separator_mockup.jpg) center center no-repeat; background-size: cover; position: relative; top: -150px; height: 520px; margin-bottom: -150px; } .work-site.in.mr { margin: 0px 0px -40px 0px; top: -40px; text-align: center; position: relative; z-index: 999; } .work-local.mr { background: url(../img/works/maria_rivolta/maria_rivolta-separator_local.jpg) center center no-repeat; background-size: cover; position: relative; margin: 0px; height: 560px; position: relative; z-index: 999; box-shadow: 0px -2px 8px rgba(0,0,0,0.4);} .work-mockup.mr { background: url(../img/works/maria_rivolta/maria_rivolta-background-foot.jpg) center 274px no-repeat; background-size: cover; top: -440px; position: relative; margin-bottom: -440px; z-index: 999; } .work-mockup.mr .work-foot-logo { margin: 115px 0px 45px 0px; height: auto; width: 225px; } .work-brand.ci { background:url(../img/works/carteras_italianas/carteras_italianas-brand_back.jpg) no-repeat center; background-size: cover; margin-bottom: 60px; } .work-points-comp.ci { margin: 100px 0px; text-align: center; padding: 0px 60px; } .work-points-comp.ci .points-item { display: inline-block; height: 208px; width: 208px; text-align: center; background-repeat: no-repeat; background-image: url(../img/works/carteras_italianas/carteras_italianas-trama.jpg) ; } .work-points-comp.ci .points-item.icon-one { background-position: 0px 0px; } .work-points-comp.ci .points-item.icon-two { background-position: -209px 0px; } .work-points-comp.ci .points-item.icon-three { background-position: -422px 0px; } .work-site.ci { margin: 40px 0px 80px 0px; text-align: center; position: relative; z-index: 999; background: url(../img/works/carteras_italianas/carteras_italianas-tienda_online_back.jpg) center; background-size: cover; } .work-site.ci img { top: -50px; margin-bottom: -100px; position: relative; } .work-separator.ci { background:url(../img/works/carteras_italianas/carteras_italianas-separator.jpg) center center no-repeat; background-size: cover; position: relative; top: -80px; height: 620px; margin-bottom: -80px; } .work-site-zoom.ci { margin: 60px 0px; } .work-site-zoom h3 { font-size: 15px; letter-spacing: 3px; color: #353535; text-transform: uppercase; font-weight: 700; margin: 50px 0px; } .work-site-zoom h3::after { display: none; } .work-site-zoom p { width: 65%;} .work-mockup.ci { background: url(../img/works/carteras_italianas/carteras_italianas-background-foot.jpg) center 274px no-repeat; background-size: cover; } .work-points-comp.tr { margin: 100px 0px 0px 0px; text-align: center; padding: 150px 60px; background: #ff4574; } .work-points-comp.tr .points-item { display: inline-block; height: 208px; width: 208px; text-align: center; background-repeat: no-repeat; background-image: url(../img/works/trapitos/trapitos-trama.png) ; } .work-points-comp.tr .points-item.icon-one { background-position: 7px -6px; } .work-points-comp.tr .points-item.icon-two { background-position: -209px -4px; width: 289px; } .work-points-comp.tr .points-item.icon-three { background-position: -511px -4px; } .work-site.tr { padding: 120px 0px 260px 0px; margin: 0px; text-align: center; position: relative; z-index: 999; background: #fee801 url(../img/works/trapitos/trapitos-tienda_online_back.jpg) bottom center no-repeat; background-size: contain; } .work-site-zoom.tr { background: #fee801; position: relative; z-index: 999; padding-bottom: 60px; } .work-mockup.tr { background: url(../img/works/trapitos/trapitos-background-foot.jpg) center top no-repeat; background-size: cover; margin: 0px; } .work-descrip.asl { position: relative; z-index: 99; } .work-brand-comp.asl { background: url(../img/works/a_sala_llena/a_sala_llena-brand_back.jpg) top center no-repeat; background-size: cover; position: relative; padding: 250px 0 100px 0; top: -250px; margin-bottom: -250px; z-index: 1;} .work-brand-comp.asl .col-sm-12 { float: none; } .work-points-comp.asl { margin: 0px; } .work-points-comp.asl .col-sm-4 { padding: 0; margin: 0px 0px -6px 0px; } .work-points-comp.asl .points-item { display: inline-block; height: 320px; width: 100%; text-align: center; background-repeat: no-repeat; } .work-points-comp.asl .points-item.icon-one { background:url(../img/works/a_sala_llena/a_sala_llena-trama-cine.jpg) center center no-repeat; background-size: cover; } .work-points-comp.asl .points-item.icon-two { background:url(../img/works/a_sala_llena/a_sala_llena-trama-teatro.jpg) center center no-repeat; background-size: cover; } .work-points-comp.asl .points-item.icon-three { background:url(../img/works/a_sala_llena/a_sala_llena-trama-musica.jpg) center center no-repeat; background-size: cover; } .work-site.asl { background: #f3f4e6; margin: 0px; position:relative; } .work-site.asl img { position: relative; top: -30px; margin-bottom: -60px; } .work-mockup.asl { margin: 0px; padding-top: 180px; background: #000 url(../img/works/a_sala_llena/a_sala_llena-background-foot.jpg) top center no-repeat; background-size: contain; } .work-points-comp.tl .points-item { display: inline-block; height: 208px; width: 208px; text-align: center; background-repeat: no-repeat; background-image: url(../img/works/tu_lenceria/tu_lenceria-trama.jpg) ; } .work-points-comp.tl .points-item.icon-one { background-position: 4px 8px; } .work-points-comp.tl .points-item.icon-two { background-position: -211x 4px; width: 289px; } .work-points-comp.tl .points-item.icon-three { background-position: -511px 8px; } .work-site.tl { background: #ffdde2; margin: 0px; } .work-site.tl img { position: relative; top: -30px; margin-bottom: -60px; } .work-site-zoom.tl { background: #ffdde2 url(../img/works/tu_lenceria/tu_lenceria-zoom_back.jpg) 80% 100% no-repeat; padding:100px 0px 360px 0px; } .work-site-zoom.tl h3 { font-size: 15px; letter-spacing: 3px; color: #ff969d; text-transform: uppercase; font-weight: 700; margin: 50px 0px;} .work-site-zoom.tl p { color: #ff969d; } .work-mockup.tl { background: #ff969d url(../img/works/tu_lenceria/tu_lenceria-background-foot.jpg) center top no-repeat; background-size: contain; margin: 0px; } .work-mockup.tl .work-mockup-img { position: relative; top: -250px; margin-bottom: -250px; } .work-mockup.tl .work-foot-logo { margin-top: 75px;} body.ip { background: #FEE101 url(../img/works/iplego/iplego-back.jpg) no-repeat top 70px center; background-size: 100% auto; } .work-site.ip { margin: 160px 0px 120px 0px; } .work-site.ip h3 { font-size: 15px; letter-spacing: 3px; color: #000; text-transform: uppercase; font-weight: 700; margin: 80px 0px; } .work-site.ip h3:after { display: none; } .work-mochup.ip { background: url(../img/works/iplego/iplego-tarjetas.jpg) no-repeat right 0px top 80px; background-size: 50% auto; padding-bottom: 350px; } .work-mochup.ip h3 { font-size: 15px; letter-spacing: 3px; color: #000; text-transform: uppercase; font-weight: 700; margin: 0px 0px 30px 0px; } .work-mochup.ip h3:after { display: none; } .work-mockup.ip .work-mockup-img { position: relative; top: -440px; left: -195px; margin-bottom: -500px; height: auto;} .work-brand.ac { background:url(../img/works/activity/activity-brand_back.jpg) no-repeat center; background-size: cover; margin-bottom: 0px; height: 430px; } .work-brand.ac img { width: 100%; height: auto;} .work-site.ac { margin: 0px; } .work-site.ac img { position: relative; top: -30px; margin-bottom: -60px; } .work-separator.ac { background:url(../img/works/activity/activity-separator.jpg) center center no-repeat; background-size: cover; position: relative; top: -20px; height: 450px; margin-bottom: -20px; } .work-mockup.ac { background: #000000 ; margin: 0px; } .work-mockup.ac .work-mockup-img { position: relative; top: -50px; margin-bottom: -80px; } .work-brand.rs { background:url(../img/works/red_sport/red_sport-brand_back.jpg) no-repeat center; background-size: cover; margin-bottom: 0px; height: 430px; } .work-site.rs { margin: 0px; background:url(../img/works/red_sport/red_sport-site_back.jpg) no-repeat center; background-size: cover; } .work-site.rs img { position: relative; top: -30px; margin-bottom: -60px; } .work-separator.rs { background:url(../img/works/red_sport/red_sport-separator.jpg) center center no-repeat; background-size: cover; position: relative; top: 0px; height: 400px; margin-bottom: 0px; } .work-slogan.rs { background: #404040; margin: 0px; text-align: left; padding: 90px 0px 39px 0px; } .work-slogan.rs .work-site-half { position: absolute; top: -150px; } .work-slogan.rs .work-site-half img { box-shadow: 0px 2px 8px rgba(0,0,0,0.4); } .work-slogan.rs h3 { font-size: 15px; letter-spacing: 3px; color: #787777; text-transform: uppercase; font-weight: 700; margin: 40px 0px 30px 0px; } .work-slogan.rs h3:after { display: none; } .work-separator-responsive.rs { background:url(../img/works/red_sport/red_sport-separator_mockup.jpg) center center no-repeat; background-size: cover; position: relative; top: 0px; height: 430px; margin-bottom: 0px; } .work-mockup.rs { background: #000; background-size: cover; margin: 0; position: relative; } .work-mockup.rs .work-mockup-img { position: relative; top: -30px; margin-bottom:-30px; } .work-brand.ri { background:url(../img/works/rimmel/rimmel-brand_back.jpg) no-repeat center; background-size: cover; padding: 250px 0px; } .work-site.ri { margin: 0px; background:url(../img/works/rimmel/rimmel-back_tienda_online.jpg); } .work-site.ri img { position: relative; top: -30px; margin-bottom: -60px; } .work-detail.ri { padding-top: 210px; padding-bottom: 250px; background:url(../img/works/rimmel/rimmel-back_rimmel.jpg) no-repeat center; background-size: cover; } .work-detail.ri h3 { color: #fff; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin: 30px 0px 0px 0px; display: block; font-weight: 600; } .work-detail.ri h3::after { display: none; } .work-detail-up.ri {position: relative; top: -1110px; margin-bottom: -534px; z-index: 999; } .work-detail-up.ri .col-sm-12 { float: none; } .work-detail-up.ri .flores_1 { position: absolute; top: -70px; right: 0px; } .work-detail-up.ri .flores_2 { position: relative; bottom: -760px; left: -20px } .work-mockup.ri { background: url(../img/works/rimmel/rimmel-bak_mockup-site.jpg) center top repeat; margin: 0px; box-shadow: 1px -3px 7px 1px rgba(0,0,0,0.4);} .work-mockup.ri .work-mockup-img { position: relative; top: -125px; margin-bottom: -125px; } .work-mockup.ri .work-foot-logo { margin-top: 75px;} .work-brand.ho { background:url(../img/works/homero/homero-brand_back.jpg) no-repeat center; background-size: cover; padding: 250px 0px; } .work-site.ho { background:url(../img/works/homero/homero-back_slider.png) no-repeat center 65px; padding: 80px 8px 80px 5px; position: relative; top: -417px; margin-bottom: -250px; } .work-site.ho img { box-shadow: none; } .swiper-homero { width: 548px; height: 343px; margin: 20px auto; position: relative; overflow: hidden; z-index: 1; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; width: 100%; height: 100%; position: relative; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .swiper-pagination { position: absolute; text-align: center; -webkit-transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; transition: 300ms; -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); z-index: 10; margin: 10px 0px 10px -31px; left: 50%; bottom: -150px; } .swiper-pagination-bullet { width: 9px; height: 9px; display: inline-block; border-radius: 100%; background: #666; opacity: .2; margin: 0px 6px; cursor: pointer; } .swiper-pagination-bullet-active { opacity: .8; } .work-detail.ho { padding: 60px 0px 80px 0px; background: #565656; } .work-detail.ho h3 { color: #fff; padding: 10px 0px; } .work-detail.ho h3::after { display:none; } .work-separator.ho { background:url(../img/works/homero/homero-separator.jpg) no-repeat center; background-size: cover; height: 680px; } .work-mockup.ho { background: #565656 url(../img/works/homero/homero-back_mockup.png) repeat-x top center; margin: 0px; } .work-mockup.ho .work-mockup-img { height: auto; position: relative; top: -580px; margin-bottom: -580px; } .work-brand.va { background-color: #5ebe67; background-image: url(../img/works/vadex/diag-b-top.png), url(../img/works/vadex/diag-b-bot.png); background-repeat: no-repeat; background-position: center bottom, center top; height: 550px; margin-bottom: 100px; background-size: 100% 110px; } .work-brand-comp.va { margin: 0px auto 30px 0px; padding-bottom: 160px; background:url(../img/works/vadex/diag-b-bot.png) center bottom no-repeat; position: relative; z-index: 999;background-size: 100% 110px; } .work-brand-comp.va h3:after { display: none; } .work-brand-comp.va p { text-align: left; padding: 0px 20px; } .work-brand-comp.va .points-item.va { display: block; width: 122px; height: 122px; margin: 0px auto 20px auto; background: url(../img/works/vadex/vadex_icons_verde.png); } .work-brand-comp.va .points-item.va.icon-one { background-position: 0px 0px; } .work-brand-comp.va .points-item.va.icon-two { background-position: -131px 0px; } .work-brand-comp.va .points-item.va.icon-three { background-position: -263px 0px; } .work-brand-comp.va .points-item.va.icon-four { background-position: 121px 0px; } .work-editorial.va { background-color: #5ebe67; position: relative; padding: 0px; top: 0px; height: 680px; z-index: 99;} .work-editorial.va:before { content: " "; display: block; width: 100%; height: 115px; top: 0px; position: absolute; background: url(../img/works/vadex/diag-b-bot.png) center top no-repeat; z-index: 999; background-size: 100% 110px; } .work-editorial.va:after { content: " "; display: block; width: 100%; height: 115px; bottom: -115px; position: absolute; background: url(../img/works/vadex/diag-v-bot.png) center top no-repeat; z-index: 999; background-size: 100% 110px; } .work-editorial.va .col-sm-12 { padding: 0px; } .swiper-vadex-editorial { width: 100%; height: 680px; position: relative; overflow: hidden; z-index: 1; background-color: #5ebe67; } .swiper-vadex-editorial .swiper-slide { background-color: #5ebe67; } .swiper-vadex-editorial .swiper-slide img { width: 100%; } .swiper-vadex-editorial-pagination { position: absolute; text-align: center; -webkit-transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; transition: 300ms; -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); z-index: 10; margin: 10px 0px 10px 0px; left: 50%; bottom: 70px; } .work-in-descrip { position: absolute; z-index: 10; margin: 10px 0px 10px 8%; top: 210px; width: 190px;} .work-in-descrip h3 { color: #fff; } .work-in-descrip p { color: #fff; line-height: 18px; text-align: left; } .work-in-descrip h3:after { display: none; } .work-in-descrip .work-item-in { display: block; width: 122px; height: 122px; margin: 0px auto 20px auto; background: url(../img/works/vadex/vadex_icons_line.png) no-repeat; } .work-in-descrip .work-item-in.icon-editorial { background-position: -5px -5px; } .work-folder.va { background-color: #747577; position: relative; padding: 0px; top: 0px; height: 670px; margin-bottom: 0px; z-index: 9; } .work-folder.va .swiper-vadex-folder img { width: 100%; } .work-folder.va .col-sm-12 { padding: 0px; } .swiper-vadex-folder { width: 100%; position: relative; overflow: hidden; z-index: 1; height: 670px; } .swiper-vadex-folder-pagination { position: absolute; text-align: center; -webkit-transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; transition: 300ms; -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); z-index: 10; margin: 10px 0px 10px 0px; left: 50%; bottom: 100px; } .work-in-descrip .work-item-in.icon-folder { background-position: -145px -5px; } .work-mailing.va { background-color: #5ebe67; position: relative; padding: 0px; top: 0px; height: 610px; z-index: 99; } .swiper-vadex-mailing .swiper-slide { background-color: #5ebe67; } .work-mailing.va:before { content: " "; display: block; width: 100%; height: 115px; top: -115px; position: absolute; background: url(../img/works/vadex/diag-v-top.png) center bottom no-repeat; z-index: 999; background-size: 100% 110px; } .work-mailing.va:after { content: " "; display: block; width: 100%; height: 115px; bottom: -115px; position: absolute; background: url(../img/works/vadex/diag-v-bot.png) center top no-repeat; z-index: 999; background-size: 100% 110px; } .work-mailing.va .col-sm-12 { position: absolute; margin: 80px 0px 20px 0px; padding: 0px; } .swiper-vadex-mailing { width: 100%; position: relative; overflow: hidden; z-index: 1; } .swiper-vadex-mailing-pagination { position: absolute; text-align: center; -webkit-transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; transition: 300ms; -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); z-index: 10; margin: 10px 0px 10px 0px; left: 50%; bottom: 10px; } .work-mailing.va .work-in-descrip { top: 70px; } .work-in-descrip .work-item-in.icon-mailing { background-position: -284px -5px; } .work-signage.va { background-color: #747577; position: relative; height: 675px; z-index: 9; } .swiper-vadex-signage .swiper-slide { background-color: #747577; } .work-signage.va:after { content: " "; display: block; width: 100%; height: 115px; bottom: 110px; position: relative; background: url(../img/works/vadex/diag-b-top.png) center top no-repeat; margin-bottom: -115px; z-index: 999; background-size: 100% 110px; } .work-signage.va .col-sm-12 { padding: 0px; } .swiper-vadex-signage { width: 100%; position: relative; overflow: hidden; z-index: 1; } .swiper-vadex-signage-pagination { position: absolute; text-align: center; -webkit-transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; transition: 300ms; -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); z-index: 10; margin: 10px 0px 10px 0px; left: 50%; bottom: 115px; } .work-in-descrip .work-item-in.icon-signage { background-position: -422px -5px; } .work-mockup.va { text-align: center; margin: 0px 0px 0px 0px;} .work-mockup.va .work-foot-logo { margin: 0px 0px 45px 0px; height: auto; width: auto; } .va .swiper-pagination-bullet { width: 9px; height: 9px; display: inline-block; border-radius: 100%; background: #fff; opacity: 0.6; margin: 0px 6px; cursor: pointer; } .va .swiper-pagination-bullet-active { opacity: 1; } /* ========================================================================== MercadoShops ========================================================================== */ #wrapper-ms #head-menu { padding-top: 10px; } #wrapper-ms #head-menu #logo { height: 60px; } #wrapper-ms nav.top-big ul { margin: 0; } #wrapper-ms nav.top-big ul li a { color: #000; font-size: 15px; } #wrapper-ms #head-menu-slim-home nav.top-big ul li a { color: #fff; } #mercadoshops { height: 610px; background: url(../mercadoshops/img/back.jpg) #ebebeb no-repeat center left; background-size: contain; } #mercadoshops .inner { padding-top: 105px; } #mercadoshops img { max-width: 100%; } #mercadoshops img.ms { margin-top: 35px; } #mercadoshops h1 { font-weight: 700; font-size: 45px; line-height: 50px; } #mercadoshops h1 strong { font-weight: 400; font-size: 40px; line-height: 45px; } #mercadoshops p { font-weight: 400; font-size: 15px; line-height: 20px; color: #7d7d7d; } #map.mercadoshops { height: 525px; left:0; } .map-ms .contact-details .contact-box { width: 100%; padding: 80px 40px 60px 40px; height: auto; } .map-ms .contact-details .contact-box > a { margin-bottom: 110px; } .map-ms .contact-details .contact-box p { font-size: 31px; line-height: 32px; } .map-ms .contact-details .contact-box ul.social-buttons { margin-top: 90px; position: relative; bottom: initial; } .no-pad { padding:0; } .no-mar { margin:0; } .form-ms { background: #04ddd5; height: 525px; padding: 80px 40px 60px 40px; } .form-ms h1 { font-weight: 700; font-size: 41px; line-height: 42px; color: #454545; margin: 0 0 50px 0; } .form-ms p { font-weight: 400; font-size: 17px; line-height: 22px; color: #fff; margin: 0 0 50px 0; } .form-ms form input, .form-ms form textarea { font-size:16px; color: #fff; height: 45px; padding: 0 10px; border: 2px solid #9ef3f0; display: block; background: none; width: 100%; margin-bottom: 20px;} .form-ms form input:focus, .form-ms form textarea:focus { border: 2px solid #fff; -webkit-box-shadow:none;box-shadow:none;} .form-ms form textarea { height: 140px; padding: 10px; max-width:100%; max-height:140px; } .form-ms form .btn {display: block;width: auto;height: 45px;padding: 0 60px;border: 0;border-radius: 0;background: #fff;color: #04ddd5;font-size: 14px;font-weight: 800;text-align: center;cursor: pointer;-webkit-transition: all 0.3s ease-in 0s;-moz-transition: all 0.3s ease-in 0s;-ms-transition: all 0.3s ease-in 0s;-o-transition: all 0.3s ease-in 0s;transition: all 0.3s ease-in 0s;} .form-ms .btn:hover { opacity: 0.9; -webkit-transition: all 0.3s ease-out 0s;-moz-transition: all 0.3s ease-out 0s;-ms-transition: all 0.3s ease-out 0s;-o-transition: all 0.3s ease-out 0s;transition: all 0.3s ease-out 0s;} .form-ms input::-webkit-input-placeholder, .form-ms form textarea::-webkit-input-placeholder { color: #fff; } .form-ms form input:-moz-placeholder, .form-ms form textarea:-moz-placeholder { color: #fff; } .form-ms form input::-moz-placeholder, .form-ms form textarea::-moz-placeholder { color: #fff; } .form-ms form input:-ms-input-placeholder, .form-ms form textarea:-ms-input-placeholder { color: #fff; } /* ========================================================================== FlexSlider Custom CSS ========================================================================== */ #servicesSlider { margin-top: 70px; } ul.slides li { margin-bottom: 20px; } /* ========================================================================== Waypoints ========================================================================== */ .wp1, .wfx, .wp2, .wp3, .wp4, .wp5, .wp6 { visibility: hidden; } .work-1, .work-2, .work-2, .work-3, .work-4, .work-5, .work-6, .work-7, .work-8, .work-9 { visibility: hidden; } .bounceInLeft, .bounceInRight, .fadeInUp, .fadeInUpDelay, .fadeInDown, .fadeInUpD, .fadeInLeft, .fadeInRight { visibility: visible; } .delay-05s { animation-delay: 0.5s; -webkit-animation-delay: 0.5s; } .delay-06s { animation-delay: 0.6s; -webkit-animation-delay: 0.6s; } .delay-07s { animation-delay: 0.7s; -webkit-animation-delay: 0.7s; } .delay-08s { animation-delay: 0.8s; -webkit-animation-delay: 0.8s; } .delay-09s { animation-delay: 0.9s; -webkit-animation-delay: 0.9s; } .delay-1s { animation-delay: 1s; -webkit-animation-delay: 1s; } .delay-11s { animation-delay: 1.1s; -webkit-animation-delay: 1.1s; } .wp3 { background: url('../img/iphone-bg.png') no-repeat center center; background-position: 200px 10px; height: 100%; } /* ========================================================================== Responsive ========================================================================== */ @media (min-width: 992px) and (max-width: 1199px) { .section-padding { padding: 70px 0 80px; } .work-mockup .work-mockup-img { height: auto; max-width: 100%; } .contact-details .contact-box p, .contact-details .contact-box a { font-size: 28px; line-height: 34px; margin: 0 0 50px; } .form-ms h1 { font-size: 28px; line-height: 34px; } .contact-details .contact-box ul.social-buttons { margin: 0; } /* Trapitos */ .work-site-zoom.tr img { max-width: 100%; } /* Vadex */ .work-brand.va { height: 500px; } .work-brand.va img, .swiper-vadex-editorial .swiper-slide img, .swiper-vadex-folder .swiper-slide img, .swiper-vadex-mailing .swiper-slide img, .swiper-vadex-signage .swiper-slide img { max-width: 100%; } .work-brand-comp.va { padding-bottom: 0px; } .work-brand-comp.va h3 { height: 32px; } .work-brand-comp.va p { padding: 0; } .work-editorial.va, .swiper-vadex-editorial { height: 520px; } .work-folder.va, .swiper-vadex-folder { height: 545px; } .work-mailing.va .col-sm-12 { margin: 0px 0px 20px 0px; } .work-mailing.va, .swiper-vadex-mailing { height: 435px; } .work-signage.va, .swiper-vadex-signage { height: 540px; } .work-brand.va, .work-editorial.va:before, .work-editorial.va:after, .work-mailing.va:before, .work-mailing.va:after, .work-signage.va:before, .work-signage.va:after { background-size: auto; } /* Red Sport */ .work-slogan.rs .work-site-half img { max-width: 100%; } } @media (min-width: 768px) and (max-width: 991px) { .section-padding { padding: 50px 0 80px; } .confian, .confian in, .confian ul { text-align: center; } .confian { height: auto; } .confian ul { padding: 1px 0; } .confian img { max-height: 35px; margin: 5px 12px; } .grid figure { width: 48%; } .work-mockup .work-mockup-img { height: auto; max-width: 100%; } .work-points-comp { margin: 50px 0px; } .work-brand-comp img { max-width: 100%; } .contact-details .contact-box p, .contact-details .contact-box a { font-size: 28px; line-height: 34px; margin: 0 0 50px; } .contact-details .contact-box ul.social-buttons { margin: 0; } .legals { text-align: left !important; } .credit { text-align: right !important; } /* Rimmel */ .work-detail.ri { padding-top: 150px; padding-bottom: 360px; } .work-detail-up.ri .flores_1, .work-detail-up.ri .flores_2 { max-height: 350px; } /* A Sala Llena */ .work-brand-comp.asl { top: -340px; margin-bottom: -340px; padding: 290px 0 100px 0; } .work-points-comp.asl .points-item { height: 280px; } /* Maria Rivolta */ .work-separator.mr { height: 370px; } /* Trapitos */ .work-points-comp.tr { padding: 150px 0; } .work-points-comp.tr .points-item { background-size: 630px; width: 188px; } .work-points-comp.tr .points-item.icon-two { background-position: -192px -4px; width: 250px; } .work-points-comp.tr .points-item.icon-three { background-position: -451px -4px; } .work-site-zoom.tr img { max-width: 100%; } .work-site-zoom p { width: 100%; } /* iPlego */ .work-site-half img { max-width: 100%; } .work-mockup.ip .work-mockup-img { left: -95px; } /* Carteras Italianas */ .work-brand.ci { margin-bottom: 10px; } .work-site-zoom.ci img { max-width: 100%; } /* Activity */ .work-separator.ac { height: 350px; } /* Vadex */ .work-brand.va { height: 450px; } .work-brand.va img, .swiper-vadex-editorial .swiper-slide img, .swiper-vadex-folder .swiper-slide img, .swiper-vadex-mailing .swiper-slide img, .swiper-vadex-signage .swiper-slide img { max-width: 100%; } .work-brand-comp.va { padding-bottom: 50px; } .work-brand-comp.va h3 { height: 32px; } .work-brand-comp.va p { padding: 0; } .work-editorial.va, .swiper-vadex-editorial { height: 400px; } .work-folder.va, .swiper-vadex-folder { height: 450px; } .work-mailing.va .col-sm-12 { margin: 0px 0px 20px 0px; } .work-mailing.va, .swiper-vadex-mailing { height: 345px; } .work-signage.va, .swiper-vadex-signage { height: 470px; } .swiper-vadex-folder-pagination { bottom: 100px; } .work-brand.va, .work-editorial.va:before, .work-editorial.va:after, .work-mailing.va:before, .work-mailing.va:after, .work-signage.va:before, .work-signage.va:after { background-size: auto; } .work-in-descrip { top: 140px; } /* Red Sport */ .work-slogan.rs .work-site-half { top: -110px; } .work-slogan.rs { padding: 50px 0px 39px 0px; } /* MS */ #mercadoshops { height: 550px; background-size: cover; } #mercadoshops img { margin-top: 60px; } #mercadoshops h1 { font-size: 40px; line-height: 45px; } #mercadoshops h1 strong { font-size: 35px; line-height: 40px; } } @media only screen and (max-width: 767px) { nav.top-big ul li { display: block; } .section-padding { padding: 40px 0; } #landtit .arrow-land { display: block; position: absolute; bottom: 40px; left: 50%; margin-left: -25px; height: 20px; width: 50px; background: url(../img/arrow-land.png) no-repeat center; } .confian, .confian in, .confian ul { text-align: center; } .confian { height: auto; } .confian ul { padding: 1px 0; } .confian ul:after { display: none } .confian img { max-height: 30px; margin: 5px 7px; } .grid { padding: 10px 15px 0 15px; width: 100%; margin: 0; } .grid figure { width: 100%; max-width: 640px; margin: 5px 0; } .swag { margin: 0; } .team-wrapper { margin: 30px 0 0; } .contact-wrap { height: 465px; } #map { height: 490px; } .contact-details .contact-box { padding: 60px 15px; } .contact-details .contact-box p, .contact-details .contact-box a { font-size: 16px; line-height: 22px; margin: 0 0 20px; } .contact-details .contact-box .social-btn { width: 50px; height: 50px; font-size: 24px; line-height: 47px; } .up-btn { width: 30px; height: 30px; line-height: 30px; position: relative; top: 5px; } .work-descrip .inner:last-child { padding-top: 0px; } .work-descrip .inner h1 { margin-left: 0; } .work-mockup .work-mockup-img { height: auto; max-width: 100%; } .work-brand { height: 260px; } .work-brand img { max-width: 100%; } .work-points-comp { margin: 50px 0px; } .work-brand-comp img, .work-site-zoom img { max-width: 100%; } .work-mockup { margin: -90px 0 0; padding-top: 150px; } .work-navigation { padding: 40px 20px; } .work-navigation a { width: 20px; height: 20px; background-position: center !important; overflow: hidden; } /* Rimmel */ .work-brand.ri { padding: 0; } .work-detail.ri { padding-top: 100px; padding-bottom: 200px; } .work-detail-up.ri { top: -1000px; margin-bottom: -205px; } .work-detail-up.ri .flores_1, .work-detail-up.ri .flores_2 { max-height: 200px; } .work-mockup.ri { padding: 0; } .work-mockup.ri .work-mockup-img { top: -75px; margin-bottom: -75px; } .work-mockup.ri .work-foot-logo { margin-top: 45px; } /* Roberta */ .work-points-comp .points-item.rb { margin-bottom: 40px; } .work-slogan.rb .work-site-half { position: relative; } .work-slogan.rb .work-site-half img { max-width: 100%; } .work-papeleria.rb { height: 650px; } .work-mockup.rb { top: -320px; margin: -90px 0 -320px 0; } .work-mockup .work-foot-logo { margin: 45px 0px 45px 0px; } /* D&P */ .work-points-comp .points-item.dyp { margin-bottom: 40px; } .work-slogan.dyp { margin: 70px 0px; padding: 90px 0 } /*.work-mockup.dyp { margin: 80px 0 0; }*/ /* A Sala Llena */ .work-brand-comp.asl { padding: 430px 0 100px 0; top: -430px; margin-bottom: -430px; } .work-points-comp.asl .points-item { height: 210px; } .work-points-comp.asl .col-xs-4 { padding: 0; margin: 0px 0px -6px 0px; } .work-separator.rb { top: -120px; height: 280px; margin-bottom: -140px; } .work-mockup.asl { padding-top: 110px; } /* Maria Rivolta */ .work-brand.mr { padding: 90px 0; } .work-site.mr { margin: -45px 0px 110px 0px; } .work-separator.mr { height: 260px; } .work-local.mr { height: 370px; } .work-mockup.mr { top: -310px; margin-bottom: -310px; } .work-mockup.mr .work-foot-logo { margin: 45px 0px; } /* Trapitos */ .work-site-zoom.tr img { max-width: 100%; } .work-site-zoom p { width: 100%; } .work-points-comp.tr { padding: 100px 0px; margin: 30px 0 0; } .work-points-comp .points-item.tr { margin-bottom: 40px; } .work-site.tr { padding: 80px 0px; } .work-mockup.tr { padding: 0; } /* iPlego */ .work-site-half img { max-width: 100%; } .work-site.ip { margin: 0px 0px 80px 0px; } .work-mochup.ip { padding-bottom: 0px; padding-top: 150px; background-position: top right; } .work-mochup.ip h3 { margin: 25px 0px 30px 0px; } .work-mockup.ip .work-mockup-img { left: 0px; margin: 0; top: 0;} /* Carteras Italianas */ .work-brand.ci { padding: 90px 0; margin-bottom: 10px; } .work-points-comp.ci { margin: 20px 0px; } .work-points-comp .points-item.ci { margin-bottom: 40px; } .work-separator.ci { height: 300px } .work-site-zoom.ci { margin: 60px 0px 20px 0px; } /* Homero */ .work-brand.ho { padding: 70px 0px; } .work-site.ho { background-size: 470px; top: -320px; } .work-site.ho .swiper-pagination { bottom: -120px; } .swiper-homero { width: 307px; height: 183px; margin: 10px auto; } .work-detail.ho img { max-width: 100%; } .work-separator.ho { height: 280px; } .work-mockup.ho .work-mockup-img { height: 360px; top: -320px; margin-bottom: -360px; } /* Activity */ .work-brand.ac { height: 260px; padding: 90px 40px; } .work-separator.ac { height: 350px; } .work-mockup.ac { padding: 0; } /* Vadex */ .work-brand.va { height: 360px; background-size: inherit; padding: 120px 0 0; } .work-brand.va img, .swiper-vadex-editorial .swiper-slide img, .swiper-vadex-folder .swiper-slide img, .swiper-vadex-mailing .swiper-slide img, .swiper-vadex-signage .swiper-slide img { max-width: 100%; } .work-brand-comp.va { padding-bottom: 50px; } .work-brand-comp.va p { padding: 0; text-align: center; margin: 1em 0 30px 0; } .work-editorial.va, .swiper-vadex-editorial { height: 300px; } .work-folder.va, .swiper-vadex-folder { height: 350px; } .work-mailing.va .col-sm-12 { margin: 0; position: relative; } .work-mailing.va, .swiper-vadex-mailing { height: 270px; } .work-signage.va, .swiper-vadex-signage { height: 350px; } .work-editorial.va:before, .work-editorial.va:after, .work-mailing.va:before, .work-mailing.va:after, .work-signage.va:before, .work-signage.va:after { background-size: auto; } .work-in-descrip { top: 90px; width: 120px; margin: 20px 0 0; } .work-mailing.va .work-in-descrip { top: 0px; } .work-in-descrip .work-item-in { width: 80px; height: 80px; background-size: 365px; margin: 0px auto 10px auto; } .work-in-descrip .work-item-in.icon-editorial { background-position: -4px -4px; } .work-in-descrip .work-item-in.icon-folder { background-position: -97px -4px; } .work-in-descrip .work-item-in.icon-mailing { background-position: -188px -4px; } .work-in-descrip .work-item-in.icon-signage { background-position: -281px -4px; } .work-in-descrip h3 { font-size: 13px; } .work-mockup.va { padding: 0; } /* Red Sport */ .work-brand.rs { height: 260px; } .work-slogan.rs .work-site-half { position: relative; margin-bottom: -100px; text-align: center; } .work-slogan.rs { padding: 90px 0px 80px 0px; } .rs-slogan { text-align: center; } .rs-slogan img { max-width: 100%; } .work-separator.rs { height: 260px; } .work-separator-responsive.rs { height: 260px; } .work-mockup.rs { padding: 0; } .work-mockup.rs .work-mockup-img { top: -20px; margin-bottom: -20px; } /* MS */ #mercadoshops { height: auto; background-position: center top; } #mercadoshops .inner.animated { padding-top: 0; padding-bottom: 50px; } #mercadoshops img { max-height: 300px; } #mercadoshops h1 { font-size: 40px; line-height: 45px; } #mercadoshops h1 strong { font-size: 35px; line-height: 40px; } .map-ms .contact-details .contact-box p { font-size: 26px; line-height: 30px; } .form-ms { padding: 60px 40px 60px 40px; } .form-ms h1 { font-size: 30px; line-height: 32px; margin: 0 0 38px 0; } .form-ms form .btn { width: 100%; } } @media only screen and (max-width: 545px) { /* Vadex */ .work-brand.va { height: 240px; padding: 100px 0 0; } .work-brand-comp.va { padding-bottom: 0px; } .work-editorial.va, .swiper-vadex-editorial { height: 230px; } .work-folder.va, .swiper-vadex-folder { height: 235px; margin-top: -13px; } .work-mailing.va .col-sm-12 { top: -40px; z-index: 9999; } .work-mailing.va, .swiper-vadex-mailing { height: 150px; } .work-signage.va, .swiper-vadex-signage { height: 285px; top: -20px; } .work-editorial.va:after, .work-mailing.va:after { height: 75px; bottom: -75px; position: absolute; background-position: center bottom; } .work-in-descrip { top: 50px; z-index: 99999; } .work-folder .work-in-descrip { top: 30px; } .swiper-vadex-editorial-pagination, .swiper-vadex-mailing-pagination { bottom: 20px; } .swiper-vadex-folder-pagination, .swiper-vadex-signage-pagination { bottom: 70px; } }