​html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline } html { line-height: 1 } ol,ul { list-style: none } table { border-collapse: collapse; border-spacing: 0 } caption,th,td { text-align: left; font-weight: normal; vertical-align: middle } q,blockquote { quotes: none } q:before,q:after,blockquote:before,blockquote:after { content: ""; content: none } a img { border: none } article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary { display: block } #outerFrame4 { background: #fff; z-index: 0; height: 100%; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; -moz-perspective: 1200px; -webkit-perspective: 1200px; perspective: 1200px; position: relative; top: 110px } .innerWrapper4 { height: 100%; overflow-y: hidden; overflow-x: hidden; position: absolute; width: 100% } main { position: relative; -moz-transition: top,1s,ease-in-out,0s 1s; -o-transition: top,1s,ease-in-out,0s 1s; -webkit-transition: top,1s,ease-in-out,0s 1s; transition: top 1s ease-in-out 0s 1s; top: 0 } main section { overflow: hidden } .contentContainer { position: absolute; left: 0; overflow: hidden; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; width: 100%; height: 100% } .contentContainer.current { z-index: 1 } .fullScreenModal { display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: transparent; opacity: 0; z-index: 100; -moz-transition: all 0.8s ease-in-out 0.1s; -o-transition: all 0.8s ease-in-out 0.1s; -webkit-transition: all 0.8s ease-in-out; -webkit-transition-delay: 0.1s; transition: all 0.8s ease-in-out 0.1s } * { pointer-events: fill } .works4 .works-slider-image,.works .works-slider-video { width: 100%; max-width: 960px; margin: 0 auto } .works4 .works-separator { height: 100px } .works4 .royalSlider__left { position: absolute; width: 56px; height: 56px; top: 50%; left: 50%; margin-top: -28px; margin-left: -28px } .works4 .royalSlider__right { position: absolute; width: 56px; height: 56px; top: 50%; right: 50%; margin-top: -28px; margin-right: -28px } #awards main { background-color: #fff } #awards .rsArrow .royalSlider__right { width: 56px; height: 56px; top: 32%; right: 110%; margin-top: -28px; margin-left: -28px } #awards .rsArrow .royalSlider__left { width: 56px; height: 56px; top: 32%; left: 110%; margin-top: -28px; margin-left: -28px } #awards .rsArrow .royalSlider__right>*,#awards .rsArrow .royalSlider__left>* { -moz-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out; -webkit-transition-delay: 0s; transition: all 0.3s ease-in-out 0s } #awards .rsArrow .royalSlider__right .outer,#awards .rsArrow .royalSlider__left .outer { stroke: #fff; fill: #9fb5a8; fill-opacity: 0 } #awards .rsArrow .royalSlider__right .inner,#awards .rsArrow .royalSlider__left .inner { fill: #9fb5a8 } #awards .rsArrow .royalSlider__right .arrow,#awards .rsArrow .royalSlider__left .arrow { stroke: #fff } #awards .royalSlider:before { position: absolute; content: ""; bottom: -25px; left: -36px; width: 168px; height: 74px; background: url("img/awards-flash.png") no-repeat } #awards .works-slider-image.overlap { margin-top: 100px } *::-webkit-scrollbar { width: 0 !important } html { max-width: 100%; height: 100%; overflow: hidden; background: #fff } body { background: #fff; color: #000; font-size: 12px; font-family: helveticaneue,helvetica,arial; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; position: absolute; overflow: hidden; top: 0; bottom: 0; width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 25px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease-out; transition: all 0.4s ease } p>code,li>code,dd>code,td>code { background: #6ad1e8d6; padding: 4px 2px; border-radius: 4px; position: relative; top: -1px; margin: 0 3px 0 1px; font-size: 100%; overflow-wrap: break-word; word-wrap: break-word; } small { font-size: 75% } p>code1,li>code1,dd>code1,td>code1 { background: #d6e0e2a1; padding: 4px 2px; border-radius: 4px; position: relative; top: -1px; margin: 0 3px 0 1px; font-size: 100%; overflow-wrap: break-word; word-wrap: break-word; } small { font-size: 75% } @font-face { font-family: 'Montserrat-ExtraBold'; font-style: normal; font-weight: 500; src: url('../fonts/montserrat-extrabold.eot'); /* IE9 Compat Modes */ src: local('montserrat-extrabold.'), local('montserrat-extrabold.'), url('../fonts/montserrat-extrabold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/montserrat-extrabold.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/montserrat-extrabold.woff') format('woff'), /* Modern Browsers */ url('../fonts/montserrat-extrabold.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/montserrat-extrabold.svg#Montserrat') format('svg'); /* Legacy iOS */ } @font-face { font-family: 'Montserrat-extra'; font-style: normal; font-weight: 500; src: url('../fonts/montserrat-extrabold.eot'); /* IE9 Compat Modes */ src: local('montserrat-extrabold.'), local('montserrat-extrabold.'), url('../fonts/montserrat-extrabold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/montserrat-extrabold.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/montserrat-extrabold.woff') format('woff'), /* Modern Browsers */ url('../fonts/montserrat-extrabold.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/montserrat-extrabold.svg#Montserrat') format('svg'); /* Legacy iOS */ } @font-face { font-family: 'Montserrat-SemiBold'; font-style: normal; font-weight: 500; src: url('../fonts/Montserrat-SemiBold.eot'); /* IE9 Compat Modes */ src: local('Montserrat-SemiBold.'), local('Montserrat-SemiBold.'), url('../fonts/Montserrat-SemiBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/Montserrat-SemiBold.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/Montserrat-SemiBold.woff') format('woff'), /* Modern Browsers */ url('../fonts/Montserrat-SemiBold.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/Montserrat-SemiBold.svg#Montserrat') format('svg'); /* Legacy iOS */ } @font-face { font-family: 'Montserrat-Bold'; font-style: normal; font-weight: 500; src: url('../fonts/Montserrat-Bold.eot'); /* IE9 Compat Modes */ src: local('Montserrat-Bold.'), local('Montserrat-Bold.'), url('../fonts/Montserrat-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/Montserrat-Bold.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/Montserrat-Bold.woff') format('woff'), /* Modern Browsers */ url('../fonts/Montserrat-Bold.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/Montserrat-Bold.svg#Montserrat') format('svg'); /* Legacy iOS */ } @font-face { font-family: 'Montserrat-ExtraBold'; font-style: normal; font-weight: 500; src: url('../fonts/Montserrat-ExtraBold.eot'); /* IE9 Compat Modes */ src: local('Montserrat-ExtraBold.'), local('Montserrat-ExstraBold.'), url('../fonts/Montserrat-ExtraBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/Montserrat-ExstraBold.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/Montserrat-ExtraBold.woff') format('woff'), /* Modern Browsers */ url('../fonts/Montserrat-ExtraBold.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/Montserrat-ExtraBold.svg#Montserrat') format('svg'); /* Legacy iOS */ } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('../fonts/montserrat-v12-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Montserrat Regular'), local('Montserrat-Regular'), url('../fonts/montserrat-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/montserrat-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/montserrat-v12-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/montserrat-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/montserrat-v12-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */ } @font-face { font-family: 'montserratsemibold'; font-style: normal; font-weight: 400; src: url('../fonts/montserrat-v12-latin-regular.eot'); /* IE9 Compat Modes */ src: local('montserrat-semibold-webfont.'), local('montserrat-semibold-webfont.'), url('../fonts/montserrat-semibold-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/montserrat-semibold-webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/montserrat-semibold-webfont.woff') format('woff'), /* Modern Browsers */ url('../fonts/montserrat-semibold-webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/montserrat-semibold-webfont.svg#Montserrat') format('svg'); /* Legacy iOS */ } @font-face { font-family: 'SackersGothicStd-Medium'; src: url('../fonts/SackersGothicStd-Medium.eot'); src: url('../fonts/SackersGothicStd-Medium.eot') format('embedded-opentype'), url('../fonts/SackersGothicStd-Medium.woff') format('woff'), url('../fonts/SackersGothicStd-Medium-webfont.ttf') format('truetype'), url('../fonts/SackersGothicStd-Medium.svg') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'HelveticaCondensed'; src: url('../fonts/hvc___-webfont.eot'); src: url('../fonts/hvc___-webfont.eot@#iefix') format('embedded-opentype'), url('../fonts/hvc___-webfont.woff') format('woff'), url('../fonts/hvc___-webfont.ttf') format('truetype'), url('../fonts/hvc___-webfont.svg#HelveticaCondensed') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'FuturaCondensedLight'; src: url('../fonts/fucl___0-webfont.eot'); src: url('../fonts/fucl___0-webfont.eot@#iefix') format('embedded-opentype'), url('../fonts/fucl___0-webfont.woff') format('woff'), url('../fonts/fucl___0-webfont.ttf') format('truetype'), url('../fonts/fucl___0-webfont.svg#FuturaCondensedLight') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'FuturaCondensedLightOblique'; src: url('../fonts/fuclo__0-webfont.eot'); src: url('../fonts/fuclo__0-webfont.eot@#iefix') format('embedded-opentype'), url('../fonts/fuclo__0-webfont.woff') format('woff'), url('../fonts/fuclo__0-webfont.ttf') format('truetype'), url('../fonts/fuclo__0-webfont.svg#FuturaCondensedLightOblique') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'HelveticaNeueLTS27UltraLtCnOb'; src: url('../fonts/helveticaneueltstd-ultltcno_0-webfont.eot'); src: url('../fonts/helveticaneueltstd-ultltcno_0-webfont.eot@#iefix') format('embedded-opentype'), url('../fonts/helveticaneueltstd-ultltcno_0-webfont.woff') format('woff'), url('../fonts/helveticaneueltstd-ultltcno_0-webfont.ttf') format('truetype'), url('../fonts/helveticaneueltstd-ultltcno_0-webfont.svg#HelveticaNeueLTS27UltraLtCnOb') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'MinionProRegular'; src: url('../fonts/minionpro-regular-webfont.eot'); src: url('../fonts/minionpro-regular-webfont.eot@#iefix') format('embedded-opentype'), url('../fonts/minionpro-regular-webfont.woff') format('woff'), url('../fonts/minionpro-regular-webfont.ttf') format('truetype'), url('../fonts/minionpro-regular-webfont.svg#MinionProRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'SveningssonRegular'; src: url('../fonts/svenings-webfont.eot'); src: url('../fonts/svenings-webfont.eot@#iefix') format('embedded-opentype'), url('../fonts/svenings-webfont.woff') format('woff'), url('../fonts/svenings-webfont.ttf') format('truetype'), url('../fonts/svenings-webfont.svg#SveningssonRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'HelveticaLight'; src: url('../fonts/hvl___-webfont.eot'); src: url('../fonts/hvl___-webfont.eot@#iefix') format('embedded-opentype'), url('../fonts/hvl___-webfont.woff') format('woff'), url('../fonts/hvl___-webfont.ttf') format('truetype'), url('../fonts/hvl___-webfont.svg#HelveticaLight') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'HelveticaNeueThinExt'; src: url('../fonts/hltv__-webfont.eot'); src: url('../fonts/hltv__-webfont.eot@#iefix') format('embedded-opentype'), url('../fonts/hltv__-webfont.woff') format('woff'), url('../fonts/hltv__-webfont.ttf') format('truetype'), url('../fonts/hltv__-webfont.svg#HelveticaNeueThinExt') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'futur2'; src: url('../fonts/futur2-webfont.eot'); src: url('../fonts/futur2-webfont.eot@#iefix') format('embedded-opentype'), url('../fonts/futur2-webfont.woff') format('woff'), url('../fonts/futur2-webfont.ttf') format('truetype'), url('../fonts/futur2-webfont.svg#HelveticaLight') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Celine'; src: url('../fonts/CelineWeb-Medium_06hf.eot'); src: url('../fonts/CelineWeb-Medium_06hf.eot@#iefix') format('embedded-opentype'), url('../fonts/CelineWeb-Medium_06hf.woff') format('woff'), url('../fonts/CelineWeb-Medium_06hf.ttf') format('truetype'), url('../fonts/CelineWeb-Medium_06hf.svg#SveningssonRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: "compactabt"; src: url("../fonts/essence_sans-webfont.eot"); src: url("../fonts/compactabt-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/compactabt-webfont.woff") format("woff"), url("../fonts/compactabt-webfont.ttf") format("truetype"), url("../fonts/compactabt-webfont.svg#essence_sansregular") format("svg"); font-weight: normal; font-style: normal } @font-face { font-family: "essence_regular"; src: url("../fonts/essence_sans-webfont.eot"); src: url("../fonts/essence_sans-webfont.eot?#iefix") format("embedded-opentype"),url("../fonts/essence_sans-webfont.woff") format("woff"),url("../fonts/essence_sans-webfont.ttf") format("truetype"),url("../fonts/essence_sans-webfont.svg#essence_sansregular") format("svg"); font-weight: normal; font-style: normal } @font-face { font-family: "essence_bold"; src: url("../fonts/essence_sans_bold-webfont.eot"); src: url("../fonts/essence_sans_bold-webfont.eot?#iefix") format("embedded-opentype"),url("../fonts/essence_sans_bold-webfont.woff") format("woff"),url("../fonts/essence_sans_bold-webfont.ttf") format("truetype"),url("../fonts/essence_sans_bold-webfont.svg#essence_sansbold") format("svg"); font-weight: normal; font-style: normal } @font-face { font-family: "essence_bold_italic"; src: url("../fonts/essence_sans_bold_italic-webfont.eot"); src: url("../fonts/essence_sans_bold_italic-webfont.eot?#iefix") format("embedded-opentype"),url("../fonts/essence_sans_bold_italic-webfont.woff") format("woff"),url("../fonts/essence_sans_bold_italic-webfont.ttf") format("truetype"),url("../fonts/essence_sans_bold_italic-webfont.svg#essence_sansbold_italic") format("svg"); font-weight: normal; font-style: normal } @font-face { font-family: "essence_italic"; src: url("../fonts/essence_sans_italic-webfont.eot"); src: url("../fonts/essence_sans_italic-webfont.eot?#iefix") format("embedded-opentype"),url("../fonts/essence_sans_italic-webfont.woff") format("woff"),url("../fonts/essence_sans_italic-webfont.ttf") format("truetype"),url("../fonts/essence_sans_italic-webfont.svg#essence_sansitalic") format("svg"); font-weight: normal; font-style: normal } @font-face { font-family: "dia"; src: url("../fonts/dia-webfont.eot"); src: url("../fonts/dia-webfont.eot?#iefix") format("embedded-opentype"),url("../fonts/dia-webfont.woff") format("woff"),url("../fonts/dia-webfont.ttf") format("truetype"),url("../fonts/dia-webfont.svg#diaregular") format("svg"); font-weight: normal; font-style: normal } #mainHeader { position: absolute; top: 0; left: 0; background: #c7343400; width: 100%; height: 110px; z-index: 2; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box } h1.mainLogo { cursor: pointer; position: absolute; top: 26px; left: 50%; margin-left: -164px; cursor: pointer } h1.mainLogo a { overflow: hidden; display: block } h1.mainLogo span { text-indent: -9999px; position: absolute; z-index: 0; font-size: 1px; color: #fff } h1.mainLogo1 { cursor: pointer; position: absolute; top: 18px; left: 49.9%; margin-left: -90px; cursor: pointer; } h1.mainLogo1 a { overflow: hidden; display: block } h1.mainLogo1 span { text-indent: -9999px; position: absolute; z-index: 0; font-size: 1px; color: #fff } .navPanel,.navPanel--left,.navPanel--right { position: absolute; top: 30px } .navPanel--left { left: 20px } .navPanel--right { right: 20px } @media screen and (max-width: 640px) { #mainHeader { height:70px; position: fixed } h1.mainLogo { top: 20px; margin-left: -91px; } h1.mainLogo1 { top: -14px; margin-left: -90px; } #awards .works-slider-image.overlap { margin-top: 10px } h1.mainLogo img { width: 180px } .navPanel--left { left: 0; top: 10px } .navPanel--right { top: 10px; right: 0 } } .navPanel__toggleBtn,.navPanel__toggleBtn--left,.navPanel__toggleBtn--right { font-family: "Montserrat-Bold","Montserrat-Bold"; font-weight: 300; font-style: normal; letter-spacing: 1px; height: 50px; background: transparent; border: 0; text-transform: uppercase; font-size: 15px; font-weight: 300; cursor: pointer; line-height: 50px; padding: 0 } .navPanel__toggleBtn:focus,.navPanel__toggleBtn--left:focus,.navPanel__toggleBtn--right:focus { outline: none; border: none } .navPanel__toggleBtn--left { position: relative; color: #35445e; line-height: 54px } .navPanel__toggleBtn--left span { margin-left: 35px; position: relative } .navPanel__toggleBtn--left span:after { -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; position: absolute; content: ""; display: block; background-color: #4f5661; width: 0; left: 50%; margin-left: 0%; bottom: -2px; height: 1px } .navPanel__toggleBtn--left:before { width: 50px; height: 50px; content: ""; display: block; border-right: 1px solid #ccc; float: left; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMSAyNSI+PGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNUQ1RDVEIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSIwLjUiIHkxPSIwIiB4Mj0iMC41IiB5Mj0iMjUiLz48bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiM1RDVENUQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjUuNSIgeTE9IjAiIHgyPSI1LjUiIHkyPSIyNSIvPjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzVENUQ1RCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iMTAuNSIgeTE9IjAiIHgyPSIxMC41IiB5Mj0iMjUiLz48L3N2Zz4=) center center no-repeat; background-size: 11px 25px; width: 90px } .navPanel__toggleBtn--left:after { width: 50px; height: 50px; content: ""; display: block; /* background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MyA2MyI+PHJlY3QgeD0iOS4yIiB5PSI5LjIiIHRyYW5zZm9ybT0ibWF0cml4KC0wLjcwNzEgLTAuNzA3MSAwLjcwNzEgLTAuNzA3MSAzMS41IDc2LjA0NzcpIiBmaWxsPSJub25lIiBzdHJva2U9IiNGNEY0RjQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgd2lkdGg9IjQ0LjUiIGhlaWdodD0iNDQuNSIvPjwvc3ZnPg==) center center no-repeat; */ background-size: 63px 63px; width: 90px; height: 63px; position: absolute; top: -7px; left: 0; opacity: 0; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out } .navPanel__toggleBtn--left.active:after { opacity: 1 } .navPanel__toggleBtn--left.active span:after { width: 94%; margin-left: -47% } .navPanel__toggleBtn--left.open:after { display: none } .navPanel__toggleBtn--left.open:before { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNyAxOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTcgMTgiPjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzRGNEY0RiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iMCIgeTE9IjAiIHgyPSIxNyIgeTI9IjE4Ii8+PGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNEY0RjRGIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSIwIiB5MT0iMTgiIHgyPSIxNyIgeTI9IjAiLz48L3N2Zz4=) center center no-repeat; background-size: 17px 18px } @media screen and (max-width: 930px) { .navPanel__toggleBtn--left span { display:none } } .navPanel__toggleBtn--right { position: relative; color: #35445e; line-height: 54px } .navPanel__toggleBtn--right span { margin-right: 35px; position: relative } .navPanel__toggleBtn--right span:after { -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; position: absolute; content: ""; display: block; background-color: #4f5661; width: 0; left: 50%; margin-left: 0%; bottom: -2px; height: 1px } .navPanel__toggleBtn--right:before { width: 50px; height: 50px; content: ""; display: block; border-left: 1px solid #00000036; float: right; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNSAxMSI+PGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNUQ1RDVEIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSIwIiB5MT0iMC41IiB4Mj0iMjUiIHkyPSIwLjUiLz48bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiM1RDVENUQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgeDE9IjAiIHkxPSIxMC41IiB4Mj0iMjUiIHkyPSIxMC41Ii8+PGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNUQ1RDVEIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSIwIiB5MT0iNS41IiB4Mj0iMjUiIHkyPSI1LjUiLz48L3N2Zz4=) center center no-repeat; background-size: 25px 11px; width: 90px } .navPanel__toggleBtn--right:after { width: 50px; height: 50px; content: ""; display: block; /* background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MyA2MyI+PHJlY3QgeD0iOS4yIiB5PSI5LjIiIHRyYW5zZm9ybT0ibWF0cml4KC0wLjcwNzEgLTAuNzA3MSAwLjcwNzEgLTAuNzA3MSAzMS41IDc2LjA0NzcpIiBmaWxsPSJub25lIiBzdHJva2U9IiNGNEY0RjQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgd2lkdGg9IjQ0LjUiIGhlaWdodD0iNDQuNSIvPjwvc3ZnPg==) center center no-repeat; */ background-size: 63px 63px; width: 90px; height: 63px; position: absolute; top: -7px; right: 0; opacity: 0; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out } .navPanel__toggleBtn--right.active:after { opacity: 1 } .navPanel__toggleBtn--right.active span:after { width: 94%; margin-left: -47% } .navPanel__toggleBtn--right.open:after { display: none } .navPanel__toggleBtn--right.open:before { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNyAxOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTcgMTgiPjxsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzRGNEY0RiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iMCIgeTE9IjAiIHgyPSIxNyIgeTI9IjE4Ii8+PGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNEY0RjRGIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSIwIiB5MT0iMTgiIHgyPSIxNyIgeTI9IjAiLz48L3N2Zz4=) center center no-repeat; background-size: 17px 18px } @media screen and (max-width: 930px) { .navPanel__toggleBtn--right span { display:none } } .no-touch .navPanel__toggleBtn--right:hover:after { opacity: 1 } .no-touch .navPanel__toggleBtn--right:hover span:after { width: 94%; margin-left: -47% } .no-touch .navPanel__toggleBtn--left:hover:after { opacity: 1 } .no-touch .navPanel__toggleBtn--left:hover span:after { width: 94%; margin-left: -47% } .nav__wrapper { background: #eee; position: fixed; top: 0; left: 0; width: 100%; height: 0; overflow: hidden; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease-out; transition: all 0.4s ease } .nav__wrapper.open { height: 80px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease-out; transition: all 0.4s ease } .nav__wrapper .navPanel__navigation { z-index: 100; font-family: "Montserrat-extrabold","Montserratsemibold"; font-weight: 300; font-style: normal; color: #b9b9b9; text-transform: uppercase; font-size: 15px; height: 80px; margin: 0 } @media screen and (max-width: 640px) { .nav__wrapper .navPanel__navigation { height:auto; margin: 40px 0 0 } } .nav__wrapper .navPanel__navigation li { display: inline-block; text-align: left; line-height: 80px; height: 80px; width: auto !important; text-align: center; overflow: hidden; background-repeat: no-repeat; background-position: right center; background-size: 10px 10px } @media screen and (max-width: 640px) { .nav__wrapper .navPanel__navigation li { background-image:none; background: none; background-size: 0; height: 50px; line-height: 50px } } .nav__wrapper .navPanel__navigation li a { color: #b9b9b9; display: block; padding: 0 40px; font-size: 15px; background-repeat: no-repeat; background-position: center top; background-size: 0 0; position: relative; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out } @media screen and (max-width: 640px) { .nav__wrapper .navPanel__navigation li a { background-image:none; background: none; background-size: 0 } } .nav__wrapper .navPanel__navigation li a:after { content: ""; position: absolute; width: 0%; left: 50%; top: 55px; height: 1px; display: block; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out } .nav__wrapper .navPanel__navigation li a:hover,.nav__wrapper .navPanel__navigation li a:focus,.nav__wrapper .navPanel__navigation li a:active,.nav__wrapper .navPanel__navigation li a.active { color: #9c9c9c; background-size: 20px 10px } @media screen and (max-width: 640px) { .nav__wrapper .navPanel__navigation li a:hover,.nav__wrapper .navPanel__navigation li a:focus,.nav__wrapper .navPanel__navigation li a:active,.nav__wrapper .navPanel__navigation li a.active { background-image:none; background: none; background-size: 0 } } .nav__wrapper .navPanel__navigation li a:hover:after,.nav__wrapper .navPanel__navigation li a:focus:after,.nav__wrapper .navPanel__navigation li a:active:after,.nav__wrapper .navPanel__navigation li a.active:after { width: 60px; left: 50%; margin-left: -30px } @media screen and (max-width: 640px) { .nav__wrapper .navPanel__navigation li a:hover:after,.nav__wrapper .navPanel__navigation li a:focus:after,.nav__wrapper .navPanel__navigation li a:active:after,.nav__wrapper .navPanel__navigation li a.active:after { background-image:none; background: none; background-size: 0 } } .nav__wrapper .navPanel__navigation li.btn_about { } .nav__wrapper .navPanel__navigation li.btn_about a:after { border-top: 1px solid #1b1f22 } .nav__wrapper .navPanel__navigation li.btn_about a:hover,.nav__wrapper .navPanel__navigation li.btn_about a:focus,.nav__wrapper .navPanel__navigation li.btn_about a:active,.nav__wrapper .navPanel__navigation li.btn_about a.active { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxyZWN0IGlkPSJzdmdfMSIgaGVpZ2h0PSIyMC4wMjEiIHdpZHRoPSIyMC4wMTkiIGZpbGw9IiM2MzYxNmYiIHRyYW5zZm9ybT0ibWF0cml4KDAuNzA3MSwwLjcwNzEsLTAuNzA3MSwwLjcwNzEsLTAuMDEzMSwtOC4yODA4KSAiIHk9Ii0xNC4xNjciIHg9Ii0wLjAyIi8+CiA8L2c+Cjwvc3ZnPg==); } .nav__wrapper .navPanel__navigation li.btn_think { } .nav__wrapper .navPanel__navigation li.btn_think a:after { border-top: 1px solid #1b1f22 } .nav__wrapper .navPanel__navigation li.btn_think a:hover,.nav__wrapper .navPanel__navigation li.btn_think a:focus,.nav__wrapper .navPanel__navigation li.btn_think a:active,.nav__wrapper .navPanel__navigation li.btn_think a.active { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxyZWN0IGlkPSJzdmdfMSIgaGVpZ2h0PSIyMC4wMjEiIHdpZHRoPSIyMC4wMTkiIGZpbGw9IiM2MzYxNmYiIHRyYW5zZm9ybT0ibWF0cml4KDAuNzA3MSwwLjcwNzEsLTAuNzA3MSwwLjcwNzEsLTAuMDEzMSwtOC4yODA4KSAiIHk9Ii0xNC4xNjciIHg9Ii0wLjAyIi8+CiA8L2c+Cjwvc3ZnPg==); } .nav__wrapper .navPanel__navigation li.btn_client { } .nav__wrapper .navPanel__navigation li.btn_client a:after { border-top: 1px solid #1b1f22 } .nav__wrapper .navPanel__navigation li.btn_client a:hover,.nav__wrapper .navPanel__navigation li.btn_client a:focus,.nav__wrapper .navPanel__navigation li.btn_client a:active,.nav__wrapper .navPanel__navigation li.btn_client a.active { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxyZWN0IGlkPSJzdmdfMSIgaGVpZ2h0PSIyMC4wMjEiIHdpZHRoPSIyMC4wMTkiIGZpbGw9IiM2MzYxNmYiIHRyYW5zZm9ybT0ibWF0cml4KDAuNzA3MSwwLjcwNzEsLTAuNzA3MSwwLjcwNzEsLTAuMDEzMSwtOC4yODA4KSAiIHk9Ii0xNC4xNjciIHg9Ii0wLjAyIi8+CiA8L2c+Cjwvc3ZnPg==); } .nav__wrapper .navPanel__navigation li.btn_awards { } .nav__wrapper .navPanel__navigation li.btn_awards a:after { border-top: 1px solid #1b1f22 } .nav__wrapper .navPanel__navigation li.btn_awards a:hover,.nav__wrapper .navPanel__navigation li.btn_awards a:focus,.nav__wrapper .navPanel__navigation li.btn_awards a:active,.nav__wrapper .navPanel__navigation li.btn_awards a.active { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxyZWN0IGlkPSJzdmdfMSIgaGVpZ2h0PSIyMC4wMjEiIHdpZHRoPSIyMC4wMTkiIGZpbGw9IiM2MzYxNmYiIHRyYW5zZm9ybT0ibWF0cml4KDAuNzA3MSwwLjcwNzEsLTAuNzA3MSwwLjcwNzEsLTAuMDEzMSwtOC4yODA4KSAiIHk9Ii0xNC4xNjciIHg9Ii0wLjAyIi8+CiA8L2c+Cjwvc3ZnPg==); } .nav__wrapper .navPanel__navigation li.btn_love { } .nav__wrapper .navPanel__navigation li.btn_love a:after { border-top: 1px solid #1b1f22 } .nav__wrapper .navPanel__navigation li.btn_love a:hover,.nav__wrapper .navPanel__navigation li.btn_love a:focus,.nav__wrapper .navPanel__navigation li.btn_love a:active,.nav__wrapper .navPanel__navigation li.btn_love a.active { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxyZWN0IGlkPSJzdmdfMSIgaGVpZ2h0PSIyMC4wMjEiIHdpZHRoPSIyMC4wMTkiIGZpbGw9IiM2MzYxNmYiIHRyYW5zZm9ybT0ibWF0cml4KDAuNzA3MSwwLjcwNzEsLTAuNzA3MSwwLjcwNzEsLTAuMDEzMSwtOC4yODA4KSAiIHk9Ii0xNC4xNjciIHg9Ii0wLjAyIi8+CiA8L2c+Cjwvc3ZnPg==); } .nav__wrapper .navPanel__navigation li.btn_news { } .nav__wrapper .navPanel__navigation li.btn_news a:after { border-top: 1px solid #1b1f22 } .nav__wrapper .navPanel__navigation li.btn_news a:hover,.nav__wrapper .navPanel__navigation li.btn_news a:focus,.nav__wrapper .navPanel__navigation li.btn_news a:active,.nav__wrapper .navPanel__navigation li.btn_news a.active { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxyZWN0IGlkPSJzdmdfMSIgaGVpZ2h0PSIyMC4wMjEiIHdpZHRoPSIyMC4wMTkiIGZpbGw9IiM2MzYxNmYiIHRyYW5zZm9ybT0ibWF0cml4KDAuNzA3MSwwLjcwNzEsLTAuNzA3MSwwLjcwNzEsLTAuMDEzMSwtOC4yODA4KSAiIHk9Ii0xNC4xNjciIHg9Ii0wLjAyIi8+CiA8L2c+Cjwvc3ZnPg==); } .nav__wrapper .navPanel__navigation li.btn_join { } .nav__wrapper .navPanel__navigation li.btn_join a:after { border-top: 1px solid #1b1f22 } .nav__wrapper .navPanel__navigation li.btn_join a:hover,.nav__wrapper .navPanel__navigation li.btn_join a:focus,.nav__wrapper .navPanel__navigation li.btn_join a:active,.nav__wrapper .navPanel__navigation li.btn_join a.active { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxyZWN0IGlkPSJzdmdfMSIgaGVpZ2h0PSIyMC4wMjEiIHdpZHRoPSIyMC4wMTkiIGZpbGw9IiM2MzYxNmYiIHRyYW5zZm9ybT0ibWF0cml4KDAuNzA3MSwwLjcwNzEsLTAuNzA3MSwwLjcwNzEsLTAuMDEzMSwtOC4yODA4KSAiIHk9Ii0xNC4xNjciIHg9Ii0wLjAyIi8+CiA8L2c+Cjwvc3ZnPg==); } .nav__wrapper .navPanel__navigation li.btn_maserati { } .nav__wrapper .navPanel__navigation li.btn_maserati a:after { border-top: 1px solid #1b1f22 } .nav__wrapper .navPanel__navigation li.btn_maserati a:hover,.nav__wrapper .navPanel__navigation li.btn_maserati a:focus,.nav__wrapper .navPanel__navigation li.btn_maserati a:active,.nav__wrapper .navPanel__navigation li.btn_maserati a.active { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxyZWN0IGlkPSJzdmdfMSIgaGVpZ2h0PSIyMC4wMjEiIHdpZHRoPSIyMC4wMTkiIGZpbGw9IiM2MzYxNmYiIHRyYW5zZm9ybT0ibWF0cml4KDAuNzA3MSwwLjcwNzEsLTAuNzA3MSwwLjcwNzEsLTAuMDEzMSwtOC4yODA4KSAiIHk9Ii0xNC4xNjciIHg9Ii0wLjAyIi8+CiA8L2c+Cjwvc3ZnPg==); } .nav__wrapper .navPanel__navigation li.btn_marangoni { } .nav__wrapper .navPanel__navigation li.btn_marangoni a:after { border-top: 1px solid #1b1f22 } .nav__wrapper .navPanel__navigation li.btn_marangoni a:hover,.nav__wrapper .navPanel__navigation li.btn_marangoni a:focus,.nav__wrapper .navPanel__navigation li.btn_marangoni a:active,.nav__wrapper .navPanel__navigation li.btn_marangoni a.active { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxyZWN0IGlkPSJzdmdfMSIgaGVpZ2h0PSIyMC4wMjEiIHdpZHRoPSIyMC4wMTkiIGZpbGw9IiM2MzYxNmYiIHRyYW5zZm9ybT0ibWF0cml4KDAuNzA3MSwwLjcwNzEsLTAuNzA3MSwwLjcwNzEsLTAuMDEzMSwtOC4yODA4KSAiIHk9Ii0xNC4xNjciIHg9Ii0wLjAyIi8+CiA8L2c+Cjwvc3ZnPg==); } .nav__wrapper .navPanel__navigation li.btn_adidas { } .nav__wrapper .navPanel__navigation li.btn_adidas a:after { border-top: 1px solid #1b1f22 } .nav__wrapper .navPanel__navigation li.btn_adidas a:hover,.nav__wrapper .navPanel__navigation li.btn_adidas a:focus,.nav__wrapper .navPanel__navigation li.btn_adidas a:active,.nav__wrapper .navPanel__navigation li.btn_adidas a.active { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxyZWN0IGlkPSJzdmdfMSIgaGVpZ2h0PSIyMC4wMjEiIHdpZHRoPSIyMC4wMTkiIGZpbGw9IiM2MzYxNmYiIHRyYW5zZm9ybT0ibWF0cml4KDAuNzA3MSwwLjcwNzEsLTAuNzA3MSwwLjcwNzEsLTAuMDEzMSwtOC4yODA4KSAiIHk9Ii0xNC4xNjciIHg9Ii0wLjAyIi8+CiA8L2c+Cjwvc3ZnPg==); } .nav__wrapper .navPanel__navigation li.btn_awards { } .nav__wrapper .navPanel__navigation li.btn_awards a:after { border-top: 1px solid #1b1f22 } .nav__wrapper .navPanel__navigation li.btn_awards a:hover,.nav__wrapper .navPanel__navigation li.btn_awards a:focus,.nav__wrapper .navPanel__navigation li.btn_awards a:active,.nav__wrapper .navPanel__navigation li.btn_awards a.active { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxyZWN0IGlkPSJzdmdfMSIgaGVpZ2h0PSIyMC4wMjEiIHdpZHRoPSIyMC4wMTkiIGZpbGw9IiM2MzYxNmYiIHRyYW5zZm9ybT0ibWF0cml4KDAuNzA3MSwwLjcwNzEsLTAuNzA3MSwwLjcwNzEsLTAuMDEzMSwtOC4yODA4KSAiIHk9Ii0xNC4xNjciIHg9Ii0wLjAyIi8+CiA8L2c+Cjwvc3ZnPg==); } .nav__wrapper .navPanel__navigation li.btn_ebay { } .nav__wrapper .navPanel__navigation li.btn_ebay a:after { border-top: 1px solid #1b1f22 } .nav__wrapper .navPanel__navigation li.btn_ebay a:hover,.nav__wrapper .navPanel__navigation li.btn_ebay a:focus,.nav__wrapper .navPanel__navigation li.btn_ebay a:active,.nav__wrapper .navPanel__navigation li.btn_ebay a.active { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxyZWN0IGlkPSJzdmdfMSIgaGVpZ2h0PSIyMC4wMjEiIHdpZHRoPSIyMC4wMTkiIGZpbGw9IiM2MzYxNmYiIHRyYW5zZm9ybT0ibWF0cml4KDAuNzA3MSwwLjcwNzEsLTAuNzA3MSwwLjcwNzEsLTAuMDEzMSwtOC4yODA4KSAiIHk9Ii0xNC4xNjciIHg9Ii0wLjAyIi8+CiA8L2c+Cjwvc3ZnPg==); } .nav__wrapper .navPanel__navigation li.btn_kijiji { } .nav__wrapper .navPanel__navigation li.btn_kijiji a:after { border-top: 1px solid #1b1f22 } .nav__wrapper .navPanel__navigation li.btn_kijiji a:hover,.nav__wrapper .navPanel__navigation li.btn_kijiji a:focus,.nav__wrapper .navPanel__navigation li.btn_kijiji a:active,.nav__wrapper .navPanel__navigation li.btn_kijiji a.active { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxyZWN0IGlkPSJzdmdfMSIgaGVpZ2h0PSIyMC4wMjEiIHdpZHRoPSIyMC4wMTkiIGZpbGw9IiM2MzYxNmYiIHRyYW5zZm9ybT0ibWF0cml4KDAuNzA3MSwwLjcwNzEsLTAuNzA3MSwwLjcwNzEsLTAuMDEzMSwtOC4yODA4KSAiIHk9Ii0xNC4xNjciIHg9Ii0wLjAyIi8+CiA8L2c+Cjwvc3ZnPg==); } .nav__wrapper .navPanel__navigation li.btn_geomag { } .nav__wrapper .navPanel__navigation li.btn_geomag a:after { border-top: 1px solid #1b1f22 } .nav__wrapper .navPanel__navigation li.btn_geomag a:hover,.nav__wrapper .navPanel__navigation li.btn_geomag a:focus,.nav__wrapper .navPanel__navigation li.btn_geomag a:active,.nav__wrapper .navPanel__navigation li.btn_geomag a.active { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxyZWN0IGlkPSJzdmdfMSIgaGVpZ2h0PSIyMC4wMjEiIHdpZHRoPSIyMC4wMTkiIGZpbGw9IiM2MzYxNmYiIHRyYW5zZm9ybT0ibWF0cml4KDAuNzA3MSwwLjcwNzEsLTAuNzA3MSwwLjcwNzEsLTAuMDEzMSwtOC4yODA4KSAiIHk9Ii0xNC4xNjciIHg9Ii0wLjAyIi8+CiA8L2c+Cjwvc3ZnPg==); } .nav__wrapper .navPanel__navigation li:last-child { background: none } .nav__wrapper .navPanel__toggleBtn--left,.nav__wrapper .navPanel__toggleBtn--right { display: none } @media screen and (max-width: 640px) { .nav__wrapper { overflow:auto; display: inline-block } .nav__wrapper.open { min-height: 100% !important } .nav__wrapper.open ul { height: auto; width: 100% !important } .nav__wrapper.open ul li { width: 100% !important } .nav__wrapper .navPanel__toggleBtn--left,.nav__wrapper .navPanel__toggleBtn--right { display: block } } ul.social { position: absolute; right: 3px; top: 45%; width: 18px } ul.social li { width: 18px; height: 25px; border-top: 1px solid #ccc; padding: 2px 0 } ul.social li:first-child { border-top: none } ul.social li a { width: 18px; height: 25px; color: transparent; text-indent: 100%; white-space: nowrap; overflow: hidden; display: block; background: url(img/social-icons.png) 0 0 no-repeat; background-size: 40px 40px } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { ul.social li a { background:url(img/social-icons.png) 0 0 no-repeat; background-size: 40px 40px } } ul.social li a.face { background-position: 0px 2px } ul.social li a.face:hover,ul.social li a.face:focus,ul.social li a.face:active { background-position: 0px -18px } ul.social li a.twit { background-position: -20px 2px } ul.social li a.twit:hover,ul.social li a.twit:focus,ul.social li a.twit:active { background-position: -20px -18px } @media screen and (max-width: 640px) { ul.social { display:none } } .elastislide-list { list-style-type: none; display: none } .no-js .elastislide-list { display: block } .elastislide-wrapper { position: relative; background-color: #eee; margin: 0 auto; height: auto; max-height: 80px; width: 80%; overflow: hidden; padding: 0 50px } .elastislide-wrapper.elastislide-loading { background-image: url(img/loading.gif); background-repeat: no-repeat; background-position: center center } .elastislide-carousel { overflow: hidden; position: relative; height: 80px; max-height: 80px; padding-right: 100px; width: auto } .elastislide-carousel ul { text-align: center; width: 100%; position: absolute; display: block; list-style-type: none; margin: 0; -webkit-backface-visibility: hidden; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px) } .elastislide-horizontal ul { white-space: nowrap } .elastislide-carousel ul li { margin: 0; -webkit-backface-visibility: hidden } .elastislide-wrapper nav span { position: absolute; background: #ddd url(img/nav.png) no-repeat 4px 3px; width: 23px; height: 23px; border-radius: 50%; text-indent: -9000px; cursor: pointer; opacity: 0.8 } .elastislide-wrapper nav span:hover { opacity: 1 } .elastislide-horizontal nav span { top: 50%; left: 10px; margin-top: -11px } .elastislide-vertical nav span { top: 10px; left: 50%; margin-left: -11px; background-position: -17px 5px } .elastislide-horizontal nav span.elastislide-next { right: 10px; left: auto; background-position: 4px -17px } .elastislide-vertical nav span.elastislide-next { bottom: 10px; top: auto; background-position: -17px -18px } #outerFrame { background: #fff; z-index: 0; height: 100%; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; -moz-perspective: 1200px; -webkit-perspective: 1200px; perspective: 1200px; position: relative; top: 110px } @media screen and (max-width: 640px) { #outerFrame { top:70px } } .outerCover { position: relative } .touch #outerFrame>* { overflow-y: scroll !important; overflow-y: scroll !important; left: 0 !important; -webkit-overflow-scrolling: touch } .innerWrapper { height: 100%; overflow-y: hidden; overflow-x: hidden; position: absolute; width: 100% } main { position: relative; -moz-transition: top,1s,ease-in-out,0s 1s; -o-transition: top,1s,ease-in-out,0s 1s; -webkit-transition: top,1s,ease-in-out,0s 1s; transition: top 1s ease-in-out 0s 1s; top: 0 } main section { overflow: hidden } .contentContainer { position: absolute; left: 0; overflow: hidden; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; width: 100%; height: 100% } .contentContainer.current { z-index: 1 } .ratio16_9 { width: 100%; height: 100%; position: static; background-color: #d3d3d3 } .ratio16_9:before { content: ""; display: block; width: 100% } .subSectionSeparator { height: 50px } .cover { position: relative } .cover .coverClaim { position: absolute; top: 50%; width: 100%; text-align: center; margin: -60px auto 0; text-transform: uppercase; color: #fff } .cover .coverClaim .coverClaim__mainText { font-size: 3.75em; font-family: "Verlag A","Verlag B"; font-weight: 300; font-style: normal } @media screen and (max-width: 768px) { .cover .coverClaim .coverClaim__mainText { font-size:3em } } @media screen and (max-width: 640px) { .cover .coverClaim .coverClaim__mainText { font-size:2.2em } } .cover .coverClaim .coverClaim__mainText .coverClaim__mainText--word { font-family: "Verlag A","Verlag B"; font-weight: 700; font-style: italic } .cover .coverClaim .coverClaim__mainText .firstLetter { position: relative; display: inline-block; color: transparent !important } .cover .coverClaim .coverClaim__mainText .firstLetter:after { display: block; background-color: #fff; content: ""; height: 2px; width: 100% } .cover .coverClaim .coverClaim__subText { margin-top: 2.5em; font-size: 1.167em; font-family: "Verlag A","Verlag B"; font-weight: 700; font-style: italic } @media screen and (max-width: 768px) { .cover .coverClaim .coverClaim__subText { margin-top:1.4em; font-size: 1.1em } } @media screen and (max-width: 640px) { .cover .coverClaim .coverClaim__subText { margin-top:0.7em; font-size: 1em } } .cover h1 { font-size: 0.9em; font-family: "Montserrat-semibold","Montserrat"; font-weight: 700; font-style: normal; text-transform: uppercase; color: #8db4c1; margin: 0 auto; position: absolute; width: 100%; text-align: center; bottom: 10% } .cover h1:after { display: block; background-color: #fff; content: ""; height: 1px; width: 12px; position: absolute; left: 50%; margin-left: -6px; bottom: 25px } @media screen and (max-width: 1024px) { .cover h1 { font-size:1em; bottom: 5% } } @media screen and (max-width: 640px) { .cover h1 { font-size:0.7em } } .coverLogo { width: 8.54545%; padding-bottom: 9.07092%; margin: 0 auto; background-position: center center; background-repeat: no-repeat; position: relative; top: 11% } .coverLogo:before { content: ""; display: block; width: 100% } .coverScrollDown { display: block; width: 125px; height: 125px; left: 50%; margin-left: -64px; position: absolute; bottom: 10%; margin-bottom: 40px } .coverScrollDown a { display: block; position: absolute; width: 100%; height: 100% } @media screen and (max-width: 1024px) { .coverScrollDown { width:60px; height: 60px; margin-left: -30px; margin-bottom: 20px } } @media screen and (max-width: 640px) { .coverScrollDown { width:50px; height: 50px; margin-left: -25px; margin-bottom: 20px } } .visualBreadcrumb { position: relative; margin: 55px 0 0; z-index: 2; font-size: 1.167em; font-family: "Verlag A","Verlag B"; font-weight: 300; font-style: normal; letter-spacing: 0.35em; color: #000 } .visualBreadcrumb span { padding: 0 0.5em; display: none } .visualBreadcrumb .visualBreadcrumb__main { display: inline-block; position: relative } .visualBreadcrumb .visualBreadcrumb__main:before { content: attr(data-label); display: block; position: relative; color: #000; text-transform: uppercase } .visualBreadcrumb .visualBreadcrumb__main:after { margin-left: -23%; content: ""; display: block; width: 140%; height: 1px; bottom: 8px; position: absolute; background-color: #000 } @media screen and (max-width: 1280px) { .visualBreadcrumb { margin:20px 0 0 } } @media screen and (max-width: 1024px) { .visualBreadcrumb { font-size:0.8em } .visualBreadcrumb .visualBreadcrumb__main:after { bottom: 6px } } @media screen and (max-width: 640px) { .visualBreadcrumb { font-size:0.8em; letter-spacing: 0.16em } .visualBreadcrumb .visualBreadcrumb__sub:after,.visualBreadcrumb .visualBreadcrumb__main:after { bottom: 6px } } .horizontalNav { width: 58px; height: 58px; display: block; position: absolute; top: 50%; margin-top: -29px } .horizontalNav.prev { left: 2% } .horizontalNav.next { right: 2% } .horizontalNav a { position: absolute; width: 100%; height: 100% } @media screen and (max-width: 1024px) { .horizontalNav { width:38px; height: 38px; margin-top: -19px } } @media screen and (max-width: 640px) { .horizontalNav { width:30px; height: 30px; margin-top: 45px } } .goToFirstBlock { width: 125px; height: 125px; display: block; position: absolute; left: 50%; margin-left: -63px; bottom: 10px; background-color: pink } .col1 { position: relative; height: 100%; width: 100% } .col2 { position: relative } .col2.left { float: left; min-height: 100%; height: 100%; width: 50% } .col2.right { float: right; min-height: 100%; height: 100%; width: 50% } .col3 { position: relative } .col3.left { float: left; width: 25.5%; height: 100% } .col3.center { position: absolute; height: 100%; width: 100%; left: 0%; z-index: 2 } .col3.right { float: right; width: 25.5%; height: 100% } .col4 { position: relative } .col4.left { float: left; width: 25.5%; height: 100% } .col4.center { position: absolute; height: 100%; width: 100%; left: 0%; z-index: 2 } .col4.right { float: right; width: 35.5%; height: 100% } .col5 { position: relative } .col5.left { float: left; width: 25.5%; height: 100% } .col5.center { position: absolute; height: 100%; width: 100%; left: 0%; z-index: 2 } .col5.right { float: right; width: 55.5%; height: 100% } @media screen and (max-width: 640px) { .ratio8_9 { width:100% } .col2.left { float: none; min-height: initial; height: auto; width: 100% } .col2.right { float: none; min-height: initial; height: auto; width: 100% } .col2 .max480 { width: 100%; max-width: 480px; margin: 0 auto } .col2 .max240 { width: 100%; max-width: 240px; margin: 0 auto } .col3.center { float: none; min-height: initial; height: auto; width: 100%; position: relative; left: 0 } .col3.right, .col3.left { width: 50%; min-height: initial; height: auto } } h2 { font-size: 3.75em; font-family: "Verlag A","Verlag B"; font-weight: 300; font-style: normal; text-transform: uppercase; text-align: center } @media screen and (max-width: 1024px) { h2 { font-size:2.5em } } p.text { font-size: 1em; font-family: "Verlag A","Verlag B"; font-weight: 300; font-style: normal; text-transform: uppercase; line-height: 1.5em; letter-spacing: 0.12em } @media screen and (max-width: 1024px) { p.text { font-size:0.75em } } @media screen and (max-width: 640px) { p.text { font-size:1em } } .boxText { height: 100%; width: 100%; max-width: 400px; overflow: hidden; display: block; position: relative } .boxText__top { width: 100%; height: 50%; display: table; position: relative; background-repeat: no-repeat; background-position: center center } @media screen and (max-width: 640px) { .boxText__top { width: 118%; height: 50%; display: table; position: relative; background-repeat: no-repeat; background-position: center center } } .boxText__top>div { display: table-cell; vertical-align: bottom; text-align: center } .boxText__top img { padding-bottom: 0px; max-width: 100% } .boxText__bottom { width: 100%; height: 50%; display: table; position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box } @media screen and (max-width: 640px) { .boxText__bottom { min-height:250px } } .boxText__bottom>div { position: absolute; width: 100%; text-align: center; display: table-cell; vertical-align: top } .boxText__bottom h2 { margin-top: 0.5em; line-height: 0.8em; padding-left: 0.2em; padding-right: 0.2em } .boxText__bottom p { padding: 0 10%; text-align: center; margin-top: 1em } .fullScreenModal { display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: transparent; opacity: 0; z-index: 100; -moz-transition: all 0.8s ease-in-out 0.1s; -o-transition: all 0.8s ease-in-out 0.1s; -webkit-transition: all 0.8s ease-in-out; -webkit-transition-delay: 0.1s; transition: all 0.8s ease-in-out 0.1s } footer { height: 45px; position: absolute; bottom: 0; left: 0; width: 100%; background: #fff; z-index: 1; padding: 12px 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box } footer p.iva { float: left; color: #a9a5a5; font-size: 11px; font-family: "Montserrat-SemiBold","Montserrat-Bold"; font-weight: 300; font-style: normal; margin: 4px 0 0 90px } footer ul.langs { position: absolute; left: 0; top: 0; left: 20px; top: 13px } footer ul.langs li { float: left; padding: 0 10px; border-left: 1px solid #ccc } footer ul.langs li:first-child { border: none } footer ul.langs li a { width: 19px; height: 15px; color: transparent; text-indent: 100%; white-space: nowrap; overflow: hidden; display: block; background: url(img/language-menu.png) 0 0 no-repeat; background-size: 60px 60px } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { footer ul.langs li a { background:url(img/language-menu.png) 0 0 no-repeat; background-size: 60px 60px } } footer ul.langs li a.en { background-position: -6px -36px } footer ul.langs li a.en:hover,footer ul.langs li a.en:focus,footer ul.langs li a.en:active,footer ul.langs li a.en.active { background-position: -6px -6px } footer ul.langs li a.it { background-position: -36px -36px } footer ul.langs li a.it:hover,footer ul.langs li a.it:focus,footer ul.langs li a.it:active,footer ul.langs li a.it.active { background-position: -36px -6px } footer ul.scroll { width: 161px; margin: 0 auto; position: relative; height: 37px } footer ul.scroll li { float: left; width: 23px; display: block; text-align: center; position: absolute; top: 0 } footer ul.scroll li.li_1 { left: 0 } footer ul.scroll li.li_2 { left: 20px } footer ul.scroll li.li_3 { left: 43px } footer ul.scroll li.li_4 { left: 66px } footer ul.scroll li.li_5 { left: 89px } footer ul.scroll li.li_6 { left: 112px } footer ul.scroll li.li_7 { left: 135px } footer ul.scroll li a { padding-top: 24px; display: block; color: #b9b9b9; font-size: 13px; font-family: "Verlag A","Verlag B"; font-weight: 300; font-style: normal; background: url(img/vangogh-menu.png) 0 -50px no-repeat; background-size: 161px 70px; overflow: hidden; margin-top: -10px } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { footer ul.scroll li a { background:url(img/vangogh-menu@2x.png) 0 -50px no-repeat; background-size: 161px 70px } } footer ul.scroll li a:hover,footer ul.scroll li a:focus,footer ul.scroll li a:active,footer ul.scroll li a.active { color: transparent; text-indent: 100%; white-space: nowrap; overflow: hidden; padding-top: 35px; margin-top: -24px } footer ul.scroll li a:hover.item_1,footer ul.scroll li a:focus.item_1,footer ul.scroll li a:active.item_1,footer ul.scroll li a.active.item_1 { background-position: 0 0 } footer ul.scroll li a:hover.item_2,footer ul.scroll li a:focus.item_2,footer ul.scroll li a:active.item_2,footer ul.scroll li a.active.item_2 { background-position: -23px 0 } footer ul.scroll li a:hover.item_3,footer ul.scroll li a:focus.item_3,footer ul.scroll li a:active.item_3,footer ul.scroll li a.active.item_3 { background-position: -46px 0 } footer ul.scroll li a:hover.item_4,footer ul.scroll li a:focus.item_4,footer ul.scroll li a:active.item_4,footer ul.scroll li a.active.item_4 { background-position: -69px 0 } footer ul.scroll li a:hover.item_5,footer ul.scroll li a:focus.item_5,footer ul.scroll li a:active.item_5,footer ul.scroll li a.active.item_5 { background-position: -92px 0 } footer ul.scroll li a:hover.item_6,footer ul.scroll li a:focus.item_6,footer ul.scroll li a:active.item_6,footer ul.scroll li a.active.item_6 { background-position: -115px 0 } footer ul.scroll li a:hover.item_7,footer ul.scroll li a:focus.item_7,footer ul.scroll li a:active.item_7,footer ul.scroll li a.active.item_7 { background-position: -138px 0 } @media screen and (max-width: 640px) { footer ul.scroll { display:none } } footer ul.links { position: absolute; right: 20px; top: 13px } footer ul.links>li:first-child { z-index: 3; position: relative; border: none } footer ul.links li { float: left; padding: 0 14px; border-left: 1px solid #ccc } footer ul.links li a,footer ul.links li span.st_sharethis_custom { cursor: pointer; font-size: 12px; color: #5b5b5b; text-transform: uppercase; font-family: "Montserrat-SemiBold","Montserrat-Bold"; font-weight: 700; font-style: normal; letter-spacing: 1px; display: inline-block; position: relative; -webkit-transition: color 0.3s ease-in-out; -moz-transition: color 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out } footer ul.links li a:after,footer ul.links li span.st_sharethis_custom:after { padding-top: 3px; border-bottom: 1px solid #af7aea; display: block; color: transparent; content: ""; width: 0%; margin-left: 50%; opacity: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; display: block } footer ul.links li a:hover,footer ul.links li span.st_sharethis_custom:hover { color: #af7aea; -webkit-transition: color 0.3s ease-in-out; -moz-transition: color 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out } footer ul.links li a:hover:after,footer ul.links li span.st_sharethis_custom:hover:after { border-bottom: 1px solid #af7aea; margin-left: 0; opacity: 1; width: 100% } footer ul.links .share-toggle { z-index: 9999 } footer ul.links .share-menu { -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -moz-transform: translateY(100%); -ms-transform: translateY(100%); -webkit-transform: translateY(100%); transform: translateY(100%); bottom: 24px; overflow: hidden; left: 44px; background-color: #fff; position: absolute; padding: 0; margin: 0; margin-right: 5px; list-style-type: none; font-size: 13px; height: 42px; opacity: 0; color: #717171; z-index: -1 } footer ul.links .share-menu li { width: 100%; padding: 0; height: 31px; border-left: 1px solid #eee; border-bottom: 1px solid #eee } footer ul.links .share-menu li:first-child { border-top: 1px solid #eee } footer ul.links .share-menu li a { padding: 7px 14px; display: inline-block } footer ul.links .share-menu li:hover { color: #fff; background-color: #fc0 } footer ul.links .share-menu li:link { color: #717171; text-decoration: none; display: block; padding: 7px 10px } footer ul.links .share-menu li.share-close { text-align: center } footer ul.links .share-menu.show { height: auto; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; opacity: 1; -moz-transform: translateY(0%); -ms-transform: translateY(0%); -webkit-transform: translateY(0%); transform: translateY(0%) } @media screen and (max-width: 640px) { footer { height:20px !important; padding: 0 } footer ul.langs { top: 0; left: 0 } footer ul.links { display: none } footer p.iva { margin: 0 auto; float: none; line-height: 20px; text-align: center; width: 100% } } @-moz-keyframes rotateCubeLeftOut { 50% { animation-timing-function: ease-out; -moz-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); transform: translateX(-50%) translateZ(-200px) rotateY(-45deg) } 100% { opacity: 0.3; -moz-transform: translateX(-100%) rotateY(-90deg); transform: translateX(-100%) rotateY(-90deg) } } @-webkit-keyframes rotateCubeLeftOut { 50% { animation-timing-function: ease-out; -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); transform: translateX(-50%) translateZ(-200px) rotateY(-45deg) } 100% { opacity: 0.3; -webkit-transform: translateX(-100%) rotateY(-90deg); transform: translateX(-100%) rotateY(-90deg) } } @keyframes rotateCubeLeftOut { 50% { animation-timing-function: ease-out; -moz-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); -ms-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); transform: translateX(-50%) translateZ(-200px) rotateY(-45deg) } 100% { opacity: 0.3; -moz-transform: translateX(-100%) rotateY(-90deg); -ms-transform: translateX(-100%) rotateY(-90deg); -webkit-transform: translateX(-100%) rotateY(-90deg); transform: translateX(-100%) rotateY(-90deg) } } @-moz-keyframes rotateCubeLeftIn { 0% { opacity: 0.3; -moz-transform: translateX(100%) rotateY(90deg); transform: translateX(100%) rotateY(90deg) } 50% { animation-timing-function: ease-out; -moz-transform: translateX(50%) translateZ(-200px) rotateY(45deg); transform: translateX(50%) translateZ(-200px) rotateY(45deg) } } @-webkit-keyframes rotateCubeLeftIn { 0% { opacity: 0.3; -webkit-transform: translateX(100%) rotateY(90deg); transform: translateX(100%) rotateY(90deg) } 50% { animation-timing-function: ease-out; -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg); transform: translateX(50%) translateZ(-200px) rotateY(45deg) } } @keyframes rotateCubeLeftIn { 0% { opacity: 0.3; -moz-transform: translateX(100%) rotateY(90deg); -ms-transform: translateX(100%) rotateY(90deg); -webkit-transform: translateX(100%) rotateY(90deg); transform: translateX(100%) rotateY(90deg) } 50% { animation-timing-function: ease-out; -moz-transform: translateX(50%) translateZ(-200px) rotateY(45deg); -ms-transform: translateX(50%) translateZ(-200px) rotateY(45deg); -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg); transform: translateX(50%) translateZ(-200px) rotateY(45deg) } } @-moz-keyframes rotateCubeRightOut { 50% { animation-timing-function: ease-out; -moz-transform: translateX(50%) translateZ(-200px) rotateY(45deg); transform: translateX(50%) translateZ(-200px) rotateY(45deg) } 100% { opacity: 0.3; -moz-transform: translateX(100%) rotateY(90deg); transform: translateX(100%) rotateY(90deg) } } @-webkit-keyframes rotateCubeRightOut { 50% { animation-timing-function: ease-out; -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg); transform: translateX(50%) translateZ(-200px) rotateY(45deg) } 100% { opacity: 0.3; -webkit-transform: translateX(100%) rotateY(90deg); transform: translateX(100%) rotateY(90deg) } } @keyframes rotateCubeRightOut { 50% { animation-timing-function: ease-out; -moz-transform: translateX(50%) translateZ(-200px) rotateY(45deg); -ms-transform: translateX(50%) translateZ(-200px) rotateY(45deg); -webkit-transform: translateX(50%) translateZ(-200px) rotateY(45deg); transform: translateX(50%) translateZ(-200px) rotateY(45deg) } 100% { opacity: 0.3; -moz-transform: translateX(100%) rotateY(90deg); -ms-transform: translateX(100%) rotateY(90deg); -webkit-transform: translateX(100%) rotateY(90deg); transform: translateX(100%) rotateY(90deg) } } @-moz-keyframes rotateCubeRightIn { 0% { opacity: 0.3; -moz-transform: translateX(-100%) rotateY(-90deg); transform: translateX(-100%) rotateY(-90deg) } 50% { animation-timing-function: ease-out; -moz-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); transform: translateX(-50%) translateZ(-200px) rotateY(-45deg) } } @-webkit-keyframes rotateCubeRightIn { 0% { opacity: 0.3; -webkit-transform: translateX(-100%) rotateY(-90deg); transform: translateX(-100%) rotateY(-90deg) } 50% { animation-timing-function: ease-out; -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); transform: translateX(-50%) translateZ(-200px) rotateY(-45deg) } } @keyframes rotateCubeRightIn { 0% { opacity: 0.3; -moz-transform: translateX(-100%) rotateY(-90deg); -ms-transform: translateX(-100%) rotateY(-90deg); -webkit-transform: translateX(-100%) rotateY(-90deg); transform: translateX(-100%) rotateY(-90deg) } 50% { animation-timing-function: ease-out; -moz-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); -ms-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); -webkit-transform: translateX(-50%) translateZ(-200px) rotateY(-45deg); transform: translateX(-50%) translateZ(-200px) rotateY(-45deg) } } @-moz-keyframes rotateCubeTopOut { 50% { animation-timing-function: ease-out; -moz-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); transform: translateY(-50%) translateZ(-200px) rotateX(45deg) } 100% { opacity: 0.3; -moz-transform: translateY(-100%) rotateX(90deg); transform: translateY(-100%) rotateX(90deg) } } @-webkit-keyframes rotateCubeTopOut { 50% { animation-timing-function: ease-out; -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); transform: translateY(-50%) translateZ(-200px) rotateX(45deg) } 100% { opacity: 0.3; -webkit-transform: translateY(-100%) rotateX(90deg); transform: translateY(-100%) rotateX(90deg) } } @keyframes rotateCubeTopOut { 50% { animation-timing-function: ease-out; -moz-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); -ms-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); transform: translateY(-50%) translateZ(-200px) rotateX(45deg) } 100% { opacity: 0.3; -moz-transform: translateY(-100%) rotateX(90deg); -ms-transform: translateY(-100%) rotateX(90deg); -webkit-transform: translateY(-100%) rotateX(90deg); transform: translateY(-100%) rotateX(90deg) } } @-moz-keyframes rotateCubeTopIn { 0% { opacity: 0.3; -moz-transform: translateY(100%) rotateX(-90deg); transform: translateY(100%) rotateX(-90deg) } 50% { animation-timing-function: ease-out; -moz-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); transform: translateY(50%) translateZ(-200px) rotateX(-45deg) } } @-webkit-keyframes rotateCubeTopIn { 0% { opacity: 0.3; -webkit-transform: translateY(100%) rotateX(-90deg); transform: translateY(100%) rotateX(-90deg) } 50% { animation-timing-function: ease-out; -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); transform: translateY(50%) translateZ(-200px) rotateX(-45deg) } } @keyframes rotateCubeTopIn { 0% { opacity: 0.3; -moz-transform: translateY(100%) rotateX(-90deg); -ms-transform: translateY(100%) rotateX(-90deg); -webkit-transform: translateY(100%) rotateX(-90deg); transform: translateY(100%) rotateX(-90deg) } 50% { animation-timing-function: ease-out; -moz-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); -ms-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); transform: translateY(50%) translateZ(-200px) rotateX(-45deg) } } @-moz-keyframes rotateCubeBottomOut { 50% { animation-timing-function: ease-out; -moz-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); transform: translateY(50%) translateZ(-200px) rotateX(-45deg) } 100% { opacity: 0.3; -moz-transform: translateY(100%) rotateX(-90deg); transform: translateY(100%) rotateX(-90deg) } } @-webkit-keyframes rotateCubeBottomOut { 50% { animation-timing-function: ease-out; -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); transform: translateY(50%) translateZ(-200px) rotateX(-45deg) } 100% { opacity: 0.3; -webkit-transform: translateY(100%) rotateX(-90deg); transform: translateY(100%) rotateX(-90deg) } } @keyframes rotateCubeBottomOut { 50% { animation-timing-function: ease-out; -moz-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); -ms-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); -webkit-transform: translateY(50%) translateZ(-200px) rotateX(-45deg); transform: translateY(50%) translateZ(-200px) rotateX(-45deg) } 100% { opacity: 0.3; -moz-transform: translateY(100%) rotateX(-90deg); -ms-transform: translateY(100%) rotateX(-90deg); -webkit-transform: translateY(100%) rotateX(-90deg); transform: translateY(100%) rotateX(-90deg) } } @-moz-keyframes rotateCubeBottomIn { 0% { opacity: 0.3; -moz-transform: translateY(-100%) rotateX(90deg); transform: translateY(-100%) rotateX(90deg) } 50% { animation-timing-function: ease-out; -moz-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); transform: translateY(-50%) translateZ(-200px) rotateX(45deg) } } @-webkit-keyframes rotateCubeBottomIn { 0% { opacity: 0.3; -webkit-transform: translateY(-100%) rotateX(90deg); transform: translateY(-100%) rotateX(90deg) } 50% { animation-timing-function: ease-out; -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); transform: translateY(-50%) translateZ(-200px) rotateX(45deg) } } @keyframes rotateCubeBottomIn { 0% { opacity: 0.3; -moz-transform: translateY(-100%) rotateX(90deg); -ms-transform: translateY(-100%) rotateX(90deg); -webkit-transform: translateY(-100%) rotateX(90deg); transform: translateY(-100%) rotateX(90deg) } 50% { animation-timing-function: ease-out; -moz-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); -ms-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); -webkit-transform: translateY(-50%) translateZ(-200px) rotateX(45deg); transform: translateY(-50%) translateZ(-200px) rotateX(45deg) } } .pt-page-ontop { z-index: 999 } .pt-page-rotateCubeLeftOut { -webkit-transform-origin: 100% 50%; -webkit-animation: rotateCubeLeftOut 0.6s both ease-in; -moz-transform-origin: 100% 50%; -moz-animation: rotateCubeLeftOut 0.6s both ease-in; transform-origin: 100% 50%; animation: rotateCubeLeftOut 0.6s both ease-in } .pt-page-rotateCubeLeftIn { -webkit-transform-origin: 0% 50%; -webkit-animation: rotateCubeLeftIn 0.6s both ease-in; -moz-transform-origin: 0% 50%; -moz-animation: rotateCubeLeftIn 0.6s both ease-in; transform-origin: 0% 50%; animation: rotateCubeLeftIn 0.6s both ease-in } .pt-page-rotateCubeRightOut { -webkit-transform-origin: 0% 50%; -webkit-animation: rotateCubeRightOut 0.6s both ease-in; -moz-transform-origin: 0% 50%; -moz-animation: rotateCubeRightOut 0.6s both ease-in; transform-origin: 0% 50%; animation: rotateCubeRightOut 0.6s both ease-in } .pt-page-rotateCubeRightIn { -webkit-transform-origin: 100% 50%; -webkit-animation: rotateCubeRightIn 0.6s both ease-in; -moz-transform-origin: 100% 50%; -moz-animation: rotateCubeRightIn 0.6s both ease-in; transform-origin: 100% 50%; animation: rotateCubeRightIn 0.6s both ease-in } .pt-page-rotateCubeTopOut { -webkit-transform-origin: 50% 100%; -webkit-animation: rotateCubeTopOut 0.6s both ease-in; -moz-transform-origin: 50% 100%; -moz-animation: rotateCubeTopOut 0.6s both ease-in; transform-origin: 50% 100%; animation: rotateCubeTopOut 0.6s both ease-in } .pt-page-rotateCubeTopIn { -webkit-transform-origin: 50% 0%; -webkit-animation: rotateCubeTopIn 0.6s both ease-in; -moz-transform-origin: 50% 0%; -moz-animation: rotateCubeTopIn 0.6s both ease-in; transform-origin: 50% 0%; animation: rotateCubeTopIn 0.6s both ease-in } .pt-page-rotateCubeBottomOut { -webkit-transform-origin: 50% 0%; -webkit-animation: rotateCubeBottomOut 0.6s both ease-in; -moz-transform-origin: 50% 0%; -moz-animation: rotateCubeBottomOut 0.6s both ease-in; transform-origin: 50% 0%; animation: rotateCubeBottomOut 0.6s both ease-in } .pt-page-rotateCubeBottomIn { -webkit-transform-origin: 50% 100%; -webkit-animation: rotateCubeBottomIn 0.6s both ease-in; -moz-transform-origin: 50% 100%; -moz-animation: rotateCubeBottomIn 0.6s both ease-in; transform-origin: 50% 100%; animation: rotateCubeBottomIn 0.6s both ease-in } #home { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box } #home .cover { background: url("img/cover_home_1625x1625.jpg") no-repeat; background-position: center center; background-size: 100% } @media screen and (max-width: 1380px) { #home .cover { background:url("img/cover_home_1380x1380.jpg") no-repeat; background-position: center center; background-size: 100% } } @media screen and (max-width: 1024px) { #home .cover { background:url("img/cover_home_1024x1024.jpg") no-repeat; background-position: center center; background-size: 100% } } @media screen and (max-width: 768px) { #home .cover { background:url("img/cover_home_768x768.jpg") no-repeat; background-position: center center; background-size: 100% } } #home h1 { position: relative; top: 91%; bottom: initial } #home .btn { position: absolute; bottom: 27px; left: 50%; margin-left: -44px; height: 134px; width: 88px } #home .btn svg { position: absolute; left: 0; top: 0; height: 88px; width: 88px } #home .btn:hover svg>* { -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out } #home .btn:hover svg .outer { fill-opacity: 1; stroke: #fff } #home .btn:hover svg .inner { fill: #fbde66 } #home .btn:hover svg .arrow { stroke: #fff } #home .btn a { color: #bf2424; font-size: 1em; font-family: "Verlag A","Verlag B"; font-weight: 300; font-style: italic; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; } #home .btn a span { display: block; position: absolute; bottom: 0; width: 100%; text-align: center; text-transform: uppercase; letter-spacing: 0.1em } #home .btn a span:after { content: ""; position: absolute; top: -10px; background-color: #b0ffdb; height: 1px; width: 10px; left: 50%; margin-left: -5px } @media screen and (max-width: 640px) { #home .btn { bottom:20px } } .animationOuter { position: absolute; display: table; width: 100%; height: 100% } .animationInner { display: table-cell; width: 100%; vertical-align: middle; font-size: 1.333em; height: 1.333em; color: #fff } #home .btn2 { position: absolute; bottom: 5px; left: 50%; margin-left: -44px; height: 88px; width: 88px } #home .btn2 svg { position: absolute; left: 0; top: 0; height: 88px; width: 88px } #home .btn2:hover svg>* { -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out } #home .btn2:hover svg .outer { fill-opacity: 1; stroke: #fff } #home .btn2:hover svg .inner { fill: #009edb } #home .btn2:hover svg .arrow { stroke: #fff } #home .btn2 a { color: #fff; font-size: 1em; font-family: "Verlag A","Verlag B"; font-weight: 300; font-style: italic; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100% } #home .btn2 a span { display: block; position: absolute; bottom: 0; width: 100%; text-align: center; text-transform: uppercase; letter-spacing: 0.1em } #home .btn2 a span:after { content: ""; position: absolute; top: -10px; background-color: #b0ffdb; height: 1px; width: 10px; left: 50%; margin-left: -5px } @media screen and (max-width: 640px) { #home .btn2 { bottom:20px } } .animationOuter { position: absolute; display: table; width: 100%; height: 100% } .animationInner { display: table-cell; width: 100%; vertical-align: middle; font-size: 1.333em; height: 1.333em; color: #fff } #home .btn3 { position: absolute; bottom: -88px; left: 50%; margin-left: -44px; height: 88px; width: 88px; } #home .btn3 svg { position: absolute; left: 0; top: 0; height: 88px; width: 88px } #home .btn3:hover svg>* { -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out } #home .btn3:hover svg .outer { fill-opacity: 1; stroke: #fff } #home .btn3:hover svg .inner { fill: #91dbc4 } #home .btn3:hover svg .arrow { stroke: #fff } #home .btn3 a { color: #fff; font-size: 1em; font-family: "Verlag A","Verlag B"; font-weight: 300; font-style: italic; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100% } #home .btn3 a span { display: block; position: absolute; bottom: 0; width: 100%; text-align: center; text-transform: uppercase; letter-spacing: 0.1em } #home .btn3 a span:after { content: ""; position: absolute; top: -10px; background-color: #b0ffdb; height: 1px; width: 10px; left: 50%; margin-left: -5px } @media screen and (max-width: 640px) { #home .btn3 { bottom: -70px; } } .animationOuter { position: absolute; display: table; width: 100%; height: 100% } .animationInner { display: table-cell; width: 100%; vertical-align: middle; font-size: 1.333em; height: 1.333em; color: #fff } #home .btn4 { position: absolute; bottom: -36px; left: 50%; margin-left: -44px; height: 88px; width: 88px } #home .btn4 svg { position: absolute; left: 0; top: 0; height: 88px; width: 88px } #home .btn4:hover svg>* { -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out } #home .btn4:hover svg .outer { fill-opacity: 1; stroke: #fff } #home .btn4:hover svg .inner { fill: #91dbc4 } #home .btn4:hover svg .arrow { stroke: #fff } #home .btn4 a { color: #fff; font-size: 1em; font-family: "Verlag A","Verlag B"; font-weight: 300; font-style: italic; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100% } #home .btn4 a span { display: block; position: absolute; bottom: 0; width: 100%; text-align: center; text-transform: uppercase; letter-spacing: 0.1em } #home .btn4 a span:after { content: ""; position: absolute; top: -10px; background-color: #b0ffdb; height: 1px; width: 10px; left: 50%; margin-left: -5px } @media screen and (max-width: 640px) { #home .btn4 { bottom:20px } } .animationOuter { position: absolute; display: table; width: 100%; height: 100% } .animationInner { display: table-cell; width: 100%; vertical-align: middle; font-size: 1.333em; height: 1.333em; color: #fff } #home .btn5 { position: absolute; bottom: 6px; left: 50%; margin-left: -44px; height: 88px; width: 88px } #home .btn5 svg { position: absolute; left: 0; top: 0; height: 88px; width: 88px } #home .btn5:hover svg>* { -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out } #home .btn5:hover svg .outer { fill-opacity: 1; stroke: #fff } #home .btn5:hover svg .inner { fill: #91dbc4 } #home .btn5:hover svg .arrow { stroke: #fff } #home .btn5 a { color: #fff; font-size: 1em; font-family: "Verlag A","Verlag B"; font-weight: 300; font-style: italic; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100% } #home .btn5 a span { display: block; position: absolute; bottom: 0; width: 100%; text-align: center; text-transform: uppercase; letter-spacing: 0.1em } #home .btn5 a span:after { content: ""; position: absolute; top: -10px; background-color: #b0ffdb; height: 1px; width: 10px; left: 50%; margin-left: -5px } @media screen and (max-width: 640px) { #home .btn5 { bottom:20px } } .animationOuter { position: absolute; display: table; width: 100%; height: 100% } .animationInner { display: table-cell; width: 100%; vertical-align: middle; font-size: 1.333em; height: 1.333em; color: #fff } #home .btn6 { position: absolute; bottom: -10px; left: 50%; margin-left: -44px; height: 88px; width: 88px; } #home .btn6 svg { position: absolute; left: 0; top: 0; height: 88px; width: 88px } #home .btn6:hover svg>* { -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out } #home .btn6:hover svg .outer { fill-opacity: 1; stroke: #fff } #home .btn6:hover svg .inner { fill: #91dbc4 } #home .btn6:hover svg .arrow { stroke: #fff } #home .btn6 a { color: #fff; font-size: 1em; font-family: "Verlag A","Verlag B"; font-weight: 300; font-style: italic; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100% } #home .btn6 a span { display: block; position: absolute; bottom: 0; width: 100%; text-align: center; text-transform: uppercase; letter-spacing: 0.1em } #home .btn6 a span:after { content: ""; position: absolute; top: -10px; background-color: #b0ffdb; height: 1px; width: 10px; left: 50%; margin-left: -5px } @media screen and (max-width: 640px) { #home .btn6 { bottom: -60px; } } .animationOuter { position: absolute; display: table; width: 100%; height: 100%; } .animationInner { display: table-cell; width: 100%; vertical-align: middle; font-size: 1.333em; height: 1.333em; color: #fff; } /* @group Shop By */ div.breadcrumbs { margin-left: 25px; text-transform: uppercase; color: #707070; font-size: 0.7em; } .catalog-category-view div.breadcrumbs { margin-left: 190px; } .col2-left-layout div.breadcrumbs { margin-left: 180px; } div.breadcrumbs ul { padding: 0; } div.breadcrumbs ul li { list-style-type: none; display: inline; } div.breadcrumbs ul li a { color: #707070; } div.breadcrumbs ul li strong { font-weight: normal; font-style: normal; } div.toolbar { text-transform: uppercase; font-size: 0.9em; line-height: 18px; } div.toolbar .grid, div.toolbar .list { display: inline-block; text-indent: -999em; width: 27px; height: 17px; } div.toolbar .sorter label { color: #898989; } div.toolbar a:hover { border: 0; } div.toolbar strong.grid { background: url('http://www.knock-design.com/skin/frontend/kl/default/images/sprite.png') no-repeat left -230px; } div.toolbar a.grid { background: url('http://www.knock-design.com/skin/frontend/kl/default/images/sprite.png') no-repeat left -214px; } div.toolbar strong.list { background: url('http://www.knock-design.com/skin/frontend/kl/default/images/sprite.png') no-repeat left -265px; margin-right: 15px; } div.toolbar a.list { background: url('http://www.knock-design.com/skin/frontend/kl/default/images/sprite.png') no-repeat left -248px; margin-right: 15px; } .count-products { display: inline-block; position: absolute; right: 10px; color: #898989; text-transform: uppercase; } .category-title h1, .block-account .block-title h1 { font-size: 1.5em; font-weight: 100; } .col-left.sidebar { position: absolute; top: 106px; height: 100%; left: 0; width: 170px; background: rgba(255,255,255,0.85); font-size: 0.9em; text-transform: uppercase; padding-top: 25px; } .no-rgba .col-left.sidebar { background-color: #FFF; } .main-category .col-left.sidebar { /*background: rgba(0, 0, 0, 0.9); border-right: 1px solid #000; color: white;*/ background: rgba(255,255,255, 0.9); color: black; border-right: 1px solid #fff; } .no-rgba .main-category .col-left.sidebar { /*background: #000;*/ background: #fff; } .overflow div.col-left.sidebar { height: auto; } div.col-left.sidebar dt { font-weight: 700; margin-top: 20px; height: 1em; } .block-layered-nav { margin: 15px 0 0 25px; } .lt-ie8 div.col-left.sidebar .page-title.category-title h1, .lt-ie8 div.col-left.sidebar .block-account .block-title h1 { margin-top: 0.67em; } div.col-left.sidebar dt:first-child { margin-top: 0; } div.col-left.sidebar dt span { cursor: pointer; } div.col-left.sidebar .arrow { border: 0; display: inline-block; margin-left: 5px; overflow: hidden; width: 8px; height: 8px; } div.col-left.sidebar .arrow.open { background: transparent url("http://www.knock-design.com/skin/frontend/kl/default/images/sprite.png") 0 -390px no-repeat; } body.main-category div.col-left.sidebar .arrow { display: none; } body.main-category div.col-left.sidebar dt span { cursor: default; } body.main-category div.col-left.sidebar dd a span, body.main-category div.col-left.sidebar dd li a { /*color: #FFF;*/ color: #000; } body.main-category div.col-left.sidebar dd.even li { display: inline-block; margin: 0 15px 10px 0; } body.main-category div.col-left.sidebar dd.even li a { border: 1px solid #CCC; display: block; position: relative; width: 12px; height: 12px; } body.main-category div.col-left.sidebar dd.even li a span { display: none; } div.col-left.sidebar dt a span h2 { border: medium none; margin: 0 0 5px; } div.col-left.sidebar #narrow-by-list dd { display: none; margin: 0; } div.col-left.sidebar dd { margin: 0; } .main-category div.col-left.sidebar #narrow-by-list dd { display: block; } .lt-ie8 div.col-left.sidebar dd.color { overflow: hidden; } div.col-left.sidebar dd ol { margin: 1em 0 0; padding: 0; } div.col-left.sidebar dd ol li { font-weight: 100; list-style-type: none; margin-top: 7px; } div.col-left.sidebar dd ol li:first-child { margin-top: 0; } div.col-left.sidebar dd ol li a { list-style-type: none; } div.col-left.sidebar dd.color ol li { display: inline-block; margin: 0 7px 4px 0; height: 18px; width: 18px; } div.col-left.sidebar dd.color ol li#item_0 { margin-left: 0; } .lt-ie8 div.col-left.sidebar dd.color ol li { float: left; } div.col-left.sidebar dd.color ol li a { border: 1px solid #CCC; display: block; position: relative; width: 12px; height: 12px; } div.col-left.sidebar dd ol li.selected a { background: url('http://www.knock-design.com/skin/frontend/kl/default/images/sprite.png') no-repeat -7px -197px; } div.col-left.sidebar dd.size li { display: inline-block; width: 42px; } .lt-ie8 div.col-left.sidebar dd.size li { float: left; } div.col-left.sidebar dd.size ol li .size { border: medium none; line-height: 8px; text-decoration: none; background-color: #FFF; border: 1px solid #898989; display: inline-block; padding: 1px; margin: 0 3px 0 0; width: 8px; height: 8px; text-align: center; } .lt-ie8 div.col-left.sidebar dd.size ol li:first-child { margin-top: 10px; } .main-category .col-left.sidebar dt a:hover { color: #FFF; } .main-category .col-left.sidebar dd ol li { display: block; margin-top: 5px; } .lt-ie8 .main-category .col-left.sidebar dd.size ol li { width: 100%; } p.note-msg { margin-left: 180px; } div.col-left.sidebar dd.pants_size ol li, div.col-left.sidebar dd.tops_size ol li, div.col-left.sidebar dd.shoes_size ol li, div.col-left.sidebar dd.clothes_size ol li { display: inline-block; margin-top: 0; } div.col-left.sidebar dd.pants_size ol li a, div.col-left.sidebar dd.tops_size ol li a, div.col-left.sidebar dd.shoes_size ol li a, div.col-left.sidebar dd.clothes_size ol li a { border: 1px solid #898989; display: inline-block; margin: 0 7px 7px 0; text-align: center; width: 25px; padding-top: 1px; font-size: .9em; } div.col-left.sidebar dd.pants_size ol li a:hover, div.col-left.sidebar dd.tops_size ol li a:hover, div.col-left.sidebar dd.shoes_size ol li a:hover, div.col-left.sidebar dd.clothes_size ol li a:hover { background: #000; color: #fff; } div.col-left.sidebar dd.pants_size ol li.selected a:hover, div.col-left.sidebar dd.tops_size ol li.selected a:hover, div.col-left.sidebar dd.shoes_size ol li.selected a:hover, div.col-left.sidebar dd.clothes_size ol li.selected a:hover { color: #444; } div.col-left.sidebar dd.pants_size ol li.selected a, div.col-left.sidebar dd.tops_size ol li.selected a, div.col-left.sidebar dd.shoes_size ol li.selected a, div.col-left.sidebar dd.clothes_size ol li.selected a { background: url("http://www.knock-design.com/skin/frontend/kl/default/images/sprite.png") no-repeat left -623px; } div.col-left.sidebar dd.color ol li a span { visibility: hidden; display: none; } div.col-left.sidebar dd.color ol li .color_selected { display: none; visibility: hidden; } div.col-left.sidebar dd.color ol li.selected .color_selected { display: block; visibility: visible; background: url("http://www.knock-design.com/skin/frontend/kl/default/images/sprite.png") no-repeat -3px -193px; width: 20px; height: 20px; position: relative; top: -17px; left: -3px; border: 0 none; } div.col-left.sidebar dd.brand ol li.selected a { background: none; border-bottom: 1px solid #444; } div.col-left.sidebar #block_feature { margin: 20px 0 0 0; } #top-link { position: fixed; bottom: 120px; font-size: .9em; display: none; } #top-link .arrow { background: url("http://www.knock-design.com/skin/frontend/kl/default/images/sprite.png") no-repeat left -675px; width: 12px; height: 5px; margin-left: 3px; } /* @end */ /* @group Catalog List */ div.category-products { /*min-height: 430px;*/ } .products-wrapper { position: absolute; width: 99%; overflow: auto; height: 100%; top: 50%; margin-top: -175px; } .products-wrapper #leftArrow { left: 0; } .products-list { width: 10000px; /* Prevent display bug, width ajusted in JavaScript */ padding: 0 0 0 200px; position: absolute; } .products-list li { display: inline-block; margin: 0; padding: 0 25px 0 0; position: relative; vertical-align: top; width: 250px; } .products-list li.last { padding: 0; margin: 0; } .products-list a.product-image { border: 0; color: transparent; font-size: 0; height: 320px; overflow: hidden; display: block; } .products-list a.product-image:hover { border: 0; } div.col-wrapper { margin-left: 150px; } div.toolbar { margin-left: 180px ; display: inline-block; } div.product-shop { padding: 10px; text-transform: uppercase; } div.product-shop span.brand { display: block; color: #898989; font-size: .8em; } .no-rgba div#fullscreen-container { background-color: #FFF; } a.product-quick-view { position: absolute; display: none; top: 0; left: 0; text-transform: uppercase; background: #000; z-index: 10; color: #FFF; font-size: 0.9em; font-weight: 100; padding: 3px; } .lt-ie8 .category-products .products-wrapper ol.products-list { list-style: none; } .lt-ie8 .category-products .products-wrapper ol.products-list li { float: left; } /* @end */ /* @group Catalog Grid */ .products-grid { margin-left: 180px; padding: 0; } .products-grid li { display: inline-block; margin-right: 18px; position: relative; vertical-align: top; width: 220px; } .lt-ie8 .products-grid li { display: inline; } .products-grid a.product-image { height: 250px; overflow: hidden; display: block; } .products-grid a.product-image:hover { border: 0; } .products-grid .product-shop, .products-list .product-shop { font-size: 1.1em; } /* @end */ /* Look */ .look .products-list { padding: 0; padding-left: 65%; margin-left: -215px; margin-top: 50px; background: url('http://www.knock-design.com/skin/frontend/kl/default/images/bg_look.jpg') repeat-x 0 160px; } .look .products-list li { width: auto; padding: 0; font-size: 0; } .look .products-list li.item p { font-size: 11px; } .standard { width: 290; height: 590; display: block; position: relative; top: 0; } .look .product-block { display: none; position: absolute; left: 240px; width: 200px; z-index: 100; top: 0; } .look .product-block a:hover { border: 0; text-decoration: underline; } .look .products-wrapper { margin-top: -280px; overflow: visible; z-index: -100; } .oversize { width: 450px; height: 900px; position: relative; top: -0px; } .look .products-wrapper h2 { font-weight: 100; text-transform: uppercase; font-size: 12px; } .look .products-wrapper h2 span.big-number { font-weight: 700; font-size: 38px; letter-spacing: -2px; text-shadow: 0 0 1px #000000; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.6)), to(rgba(0,0,0,1))); } -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.4)), to(rgba(0,0,0,1))); } } /* @group Login */ .col2-set { color: #898989; } #popin-container h1 , #popin-container h3 { font-weight: 100; font-size: 1.2em; color: #000; text-transform: uppercase; } #popin-container a { color: #636363; } .col2-set .col-1 { width: 50%; float: left; } .col2-set .col-2 { float: left; width: 50%; } #popin-container label { text-transform: uppercase; color: #444; margin-bottom: 3px; display: block; font-size: 0.9em; } #popin-container input, .step.a-item input { background: #FFF; color: #444444; border: 1px solid #AAA; } #popin-container .input-box { margin-bottom: 10px; } button { background: #000; color: #FFF; border: 0; padding: 5px 15px; font-weight: 100; } button:hover { background-color: #fff0; } div.account-login { margin: 50px; } div.account-login #opc-login { list-style-type: none; } div.account-login .col2-set .col-1 { margin-left: 10%; width: 22%; } div.account-login .col2-set .col-2 { margin-left: 10%; width: 47%; } div.account-login .col2-set .fieldset { float: left; margin-right: 5%; width: 45%; } div.account-login .col-2 .buttons-set button { margin-top: 11px; } form#create-form { padding-top: 3px; } div.account-login .col2-set .fieldset ul { margin: 0; } div.account-login .col2-set input { width: 100%; } div.account-login .col2-set li { padding-bottom: 5px; } div.account-login .col2-set .col-2 form p { clear: both; } div.account-reset { margin: 50px; text-align: center; } div.account-login .guestCheckout { position: absolute; right: 20px; } /* @end */ #leftArrowLook,#rightArrowLook { margin: 0 15px; color: #FFF; text-transform: uppercase; padding: 3px 8px; cursor: pointer; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#000000'); } /******************* PRODUCT VIEW *******************/ /*** Global ****/ .catalog-product-view #product_addtocart_form { margin: 0 auto; width: 960px; } .catalog-product-view .product-img-box, .catalog-product-view .product-shop { float: right; } .catalog-product-view div.breadcrumbs ul { margin-bottom: 0; } /*** Colonne gauche ***********************/ .catalog-product-view .product-img-box { margin-right: 36px; width: 600px; } .catalog-product-view .product-img-box .enlarged_img { border: medium none; } .more-views ul, .crosssell ul { margin-top: 0; margin-right: auto; margin-left: auto; width: 460px; } .more-views li, .crosssell li { display: inline-block; margin-top: 30px; margin-right: 30px; width: 90px; } .lt-ie8 .more-views li, .lt-ie8 .crosssell li { display: inline; } .more-views li.last_pict { margin-right: 0; } .more-views li img { opacity: 0.5; } .more-views li img:hover { opacity: 1; } .catalog-product-view .product-image { text-align: center; } .catalog-product-view div.overlay_enlarged_img { background-color: #FFF; cursor: pointer; display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4000; } .catalog-product-view div.overlay_enlarged_img img { display: block; margin: 0 auto; } .catalog-product-view div.overlay_enlarged_img .zoom-close { float: right; margin: 15px 15px 0 0; background: url("http://www.knock-design.com/skin/frontend/kl/default/images/sprite.png") no-repeat -3px -194px; width: 20px; height: 20px; } .catalog-product-view div.overlay_enlarged_img .zoom-close:hover { border: 0 none; } /*** Colonne droite ***********************/ .catalog-product-view .product-name { border-bottom: 1px solid #D6D6D6; margin-bottom: 20px; padding-bottom: 10px; text-transform: uppercase; } .catalog-product-view .product-name h1, .catalog-product-view .product-name .price { font-size: 1.8em; font-weight: 100; line-height: 26px; margin: 0; } .catalog-product-view .product-name h1 span { color: #898989; display: block; font-size: 0.7em; } .catalog-product-view .product-shop { width: 294px; } .catalog-product-view .product-shop div h2 { color: #898989; font-weight: 100; text-transform: uppercase; font-size: 1em; } .catalog-product-view .add-to-box { border-bottom: 1px solid #CFCFCF; margin-bottom: 20px; } .catalog-product-view .add-to-box.out-of-stock { border-bottom: 0 none; } .catalog-product-view .out-of-stock + .add-to-links { margin-bottom: 15px; } /* Début | Blocs factices !!! ******/ /*.catalog-product-view div.product-shop {*/ /*font-size: 1em;*/ /*} */ .catalog-product-view .add-to-box .product-color { margin: 0; } .catalog-product-view .add-to-box .product-color span { color: #898989; font-size: 1.1em; text-transform: lowercase; } .add-to-box .product-size p { vertical-align: text-top; } .add-to-box .product-size p a { border: none; display: inline-block; margin-left: 15px; overflow: hidden; color: #707070; vertical-align: text-top; text-decoration: underline; } .add-to-box .product-size p a:hover { color: #000; } .product-size div span { border: 1px solid #898989; display: inline-block; font-size: 0.85em; margin: 0 7px 5px 0; /*padding: 1px;*/ text-align: center; width: 25px; } .product-size div span.disabled { border: 1px solid #d1d1d1; color: #d1d1d1; } .product-size div span:hover { cursor: pointer; } .product-size div span.selected { background: transparent url("http://www.knock-design.com/skin/frontend/kl/default/images/sprite.png") left -622px no-repeat; } .catalog-product-view .add-to-cart { margin-top: 15px; } /* Fin | Blocs factices !!! ******/ .catalog-product-view .add-to-cart label, .catalog-product-view .add-to-cart select, .catalog-product-view .add-to-cart button { display: block; margin-bottom: 10px; } .catalog-product-view .add-to-cart label { text-transform: uppercase; margin-bottom: 6px; } .catalog-product-view .add-to-cart button { margin-bottom: 20px; } .catalog-product-view .add-to-cart, .catalog-product-view .add-to-links { float: left; } .catalog-product-view .add-to-links { padding: 0; margin: 0; width: 130px; } .catalog-product-view .add-to-cart + .add-to-links { padding-top: 80px; padding-left: 10px; } .catalog-product-view .btn-addto { margin-bottom: 15px; } .catalog-product-view .add-to-links a { color: #707070; font-size: .9em; } .catalog-product-view select.qty { min-width: 60px; margin-bottom: 18px; } .catalog-product-view .availability.out-of-stock { margin: 15px 0; } .btn_social, .fb-like { display: inline-block; margin-bottom: 20px; vertical-align: top; } .lt-ie8 .btn_social, .lt-ie8 .fb-like { display: inline; } a.email-friend, a.twitter-share-button, a.btn_facebook_share { background-color: transparent; background-image: url("http://www.knock-design.com/skin/frontend/kl/default/images/sprite.png"); background-repeat: no-repeat; border: 1px solid #C8C7C7; color: transparent; display: inline-block; margin-right: 5px; overflow: hidden; width: 18px; height: 18px; } a.email-friend { background-position: left -282px; } a.email-friend:hover { background-position: left -300px; } a.twitter-share-button { background-position: left -318px; } a.twitter-share-button:hover { background-position: left -336px; } a.btn_facebook_share { background-position: left -354px; } a.btn_facebook_share:hover { background-position: left -372px; } .catalog-product-view .box-slide a, .catalog-product-view .box-seen_in a, .catalog-product-view .box-shipping a, .my-account .change-pwd-opt a { margin: 0; padding: 0; } .catalog-product-view .box-slide a span, .catalog-product-view .box-seen_in a span, .catalog-product-view .box-shipping a span, .my-account .change-pwd-opt a span { background: transparent url("http://www.knock-design.com/skin/frontend/kl/default/images/sprite.png") -8px -390px no-repeat; border: 0; display: inline-block; margin-left: 5px; overflow: hidden; width: 8px; height: 8px; } .lt-ie8 .catalog-product-view .box-slide a span, .lt-ie8 .catalog-product-view .box-seen_in a span, .lt-ie8 .catalog-product-view .box-shipping a span, .lt-ie8 .my-account .change-pwd-opt a span { margin-bottom: 3px; } .catalog-product-view .box-slide h2, .catalog-product-view .box-seen_in.box-collateral h2, .catalog-product-view .box-shipping.box-collateral h2 { border: medium none; margin: 0 0 5px; font-size: 1em; } .catalog-product-view .box-slide .std, .catalog-product-view .box-seen_in.box-collateral .std, .catalog-product-view .box-shipping.box-collateral .std { color: #000; display: none; font-size: 1em; font-weight: 100; line-height: 1.5em; text-transform: none; } .catalog-product-view .box-collateral { margin-top: 20px; } .catalog-product-view .box-shipping, .catalog-product-view .box-seen_in { margin-top: 10px; } .catalog-product-view div.box-up-sell { margin-top: 40px; } .catalog-product-view .box-collateral h2 { border-bottom: 1px solid #CFCFCF; margin-bottom: 10px; } .catalog-product-view .box-slide h2 { border: 0; } .catalog-product-view .box-collateral a.pict_products { color: transparent; } .catalog-product-view .box-collateral li { display: inline-block; margin-right: 9px; width: 90px; } .lt-ie8 .catalog-product-view .box-collateral li { display: block; float: left; margin-right: 12px; } .catalog-product-view .box-collateral li.last { margin-right: 0; } /* ==|== media queries ====================================================== PLACEHOLDER Media Queries for Responsive Design. These override the primary ('mobile first') styles Modify as content requires. ========================================================================== */ @media screen and (min-width: 160px) { /* Style adjustments for viewports 480px and over go here */ html { overflow: visible; } .standard { width: 300px; height: 600px; margin-left: -10px; } .look .products-list { padding: 0; padding-left: 65%; margin-left: -215px; margin-top: -50px; } li.level0 { width: 30px; padding: 0; } #nav ul.level0 { width: 280px; margin-left: -160px; } #popin-container { width: 320px; margin-left: -160px; } .col2-set .col-1 { width: 100%; float: left; } .col2-set .col-2 { width: 100%; float: left; } } @media screen and (min-width: 640px) { /* Style adjustments for viewports 480px and over go here */ html { overflow: visible; } .standard { width: 350px; height: 700px; margin-left: -30px; } .look .products-list { padding: 0; padding-left: 65%; margin-left: -215px; margin-top: -50px; } li.level0 { width: 30px; padding: 0; } #nav ul.level0 { width: 280px; margin-left: -160px; } #popin-container { width: 320px; margin-left: -160px; } .col2-set .col-1 { width: 100%; float: left; } .col2-set .col-2 { width: 100%; float: left; } } @media screen and (min-width: 768px) { .standard { width: 350px; height: 700px; margin-left: -30px; } li.level0 { width: 30px; padding: 0; } #nav ul.level0 { width: 280px; margin-left: -160px; } #popin-container { width: 320px; margin-left: -160px; } .col2-set .col-1 { width: 100%; float: left; } .col2-set .col-2 { width: 100%; float: left; } } @media screen and (min-width: 1024px) { /* Style adjustments for viewports 480px and over go here */ html { overflow: visible; } .standard { width: 350px; height: 700px; margin-left: -10px; } li.level0 { width: 30px; padding: 0; } #nav ul.level0 { width: 280px; margin-left: -160px; } #popin-container { width: 320px; margin-left: -160px; } .col2-set .col-1 { width: 100%; float: left; } .col2-set .col-2 { width: 100%; float: left; } } @media screen and (min-width: 1280px) { /* Style adjustments for viewports 480px and over go here */ html { overflow: visible; } .standard { width: 450px; height: 900px; margin-left: -30px; } li.level0 { width: 30px; padding: 0; } #nav ul.level0 { width: 280px; margin-left: -160px; } #popin-container { width: 320px; margin-left: -160px; } .col2-set .col-1 { width: 100%; float: left; } .col2-set .col-2 { width: 100%; float: left; } } @media screen and (min-width: 1380px) { /* Style adjustments for viewports 480px and over go here */ html { overflow: visible; } .standard { width: 450px; height: 900px; margin-left: -30px; } li.level0 { width: 30px; padding: 0; } #nav ul.level0 { width: 280px; margin-left: -160px; } #popin-container { width: 320px; margin-left: -160px; } .col2-set .col-1 { width: 100%; float: left; } .col2-set .col-2 { width: 100%; float: left; } } @media screen and (max-width: 640px) { .animationInner { vertical-align:top } } .animationInner .block__left { position: relative; height: 154px; float: left; width: 50%; width: -moz-calc(50% - 25px); width: -webkit-calc(50% - 25px); width: -o-calc(50% - 25px); width: calc(50% - 25px); text-align: right; overflow: hidden } .animationInner .block__center { height: 154px; float: left; width: 50px; position: relative } .animationInner .block__center:after { position: absolute; content: ""; left: 24px; top: 0; width: 1px; height: 53px; top: 50px; background-color: #fff } .animationInner .block__right { position: relative; overflow: hidden; height: 154px; text-align: left; float: right; width: 50%; width: -moz-calc(50% - 25px); width: -webkit-calc(50% - 25px); width: -o-calc(50% - 25px); width: calc(50% - 25px); -moz-perspective: 8000px; -webkit-perspective: 8000px; perspective: 8000px; -webkit-perspective-origin: 50% 27px; -moz-perspective-origin: 50% 27px; -ms-perspective-origin: 50% 27px; perspective-origin: 50% 27px } .animationInner .block__right .inner { -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 0 27px; -moz-transform-origin: 0 27px; -ms-transform-origin: 0 27px; transform-origin: 0 27px; display: block; position: relative; left: 0; width: 100%; height: 100%; top: 50px } #text_3,#text_4,#text_5,#text_6,#text_7,#text_8,#text_9,#text_10,#text_11 { display: none; font-size: 2.81em; font-family: "montserratsemibold","Verlag B"; font-weight: 300; font-style: normal; line-height: 54px; text-transform: uppercase; opacity: 1; position: absolute } #text_3,#text_9 { right: 0; -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); top: 48px } #text_3 { padding-top: 0.1em } #text_4 { left: 0; -moz-transform: translateX(-100%) translateZ(27px); -ms-transform: translateX(-100%) translateZ(27px); -webkit-transform: translateX(-100%) translateZ(27px); transform: translateX(-100%) translateZ(27px) } #text_4,#text_5,#text_6,#text_7,#text_8,#text_9,#text_10,#text_11 { font-family: "montserratsemibold","montserrat"; font-weight: 700; font-style: italic; color: #f3e998 } #text_4,#text_5,#text_6,#text_7,#text_8 { padding-right: 10px } #text_3,#text_4 { display: inline-block } #text_5,#text_11 { display: inline-block; -moz-transform: rotateX(-90deg) translateY(27px); -ms-transform: rotateX(-90deg) translateY(27px); -webkit-transform: rotateX(-90deg) translateY(27px); transform: rotateX(-90deg) translateY(27px); -webkit-transform-origin: bottom center; -moz-transform-origin: bottom center; -ms-transform-origin: bottom center; transform-origin: bottom center } #text_6 { display: inline-block; visibility: hidden; -moz-transform: translateZ(-27px) rotateX(180deg); -ms-transform: translateZ(-27px) rotateX(180deg); -webkit-transform: translateZ(-27px) rotateX(180deg); transform: translateZ(-27px) rotateX(180deg) } #text_8 { display: inline-block; visibility: hidden; -moz-transform: rotateX(-270deg) translateY(-27px); -ms-transform: rotateX(-270deg) translateY(-27px); -webkit-transform: rotateX(-270deg) translateY(-27px); transform: rotateX(-270deg) translateY(-27px); -webkit-transform-origin: top center; -moz-transform-origin: top center } #text_9 { display: inline-block; padding-right: 10px } #text_10 { display: inline-block; padding-right: 10px; -moz-transform: translateX(-100%) translateZ(27px); -ms-transform: translateX(-100%) translateZ(27px); -webkit-transform: translateX(-100%) translateZ(27px); transform: translateX(-100%) translateZ(27px) } #text_11 { visibility: hidden } #text_4:after,#text_5:after,#text_6:after,#text_7:after,#text_8:after,#text_9:after { opacity: 0; content: ""; position: absolute; right: -52px; bottom: -35px; display: block; z-index: -1; -moz-transition: all 0.1s ease-in-out 0.75s; -o-transition: all 0.1s ease-in-out 0.75s; -webkit-transition: all 0.1s ease-in-out; -webkit-transition-delay: 0.75s; transition: all 0.1s ease-in-out 0.75s; background-image: url("img/smears.png"); background-repeat: no-repeat; width: 206px; height: 90px } #text_4 { color: #f3e998 } #text_4:after { background-position: 0px 0px; right: -71px } #text_4.anim_4:after { opacity: 1 } #text_5 { color: #88d4bf; } #text_5:after { background-position: 0px -90px; right: -52px } .anim_5 #text_5:after { opacity: 1 } #text_6 { color: #5b7ab1; } #text_6:after { right: -22px; background-position: 0px -180px } .anim_6 #text_6:after { opacity: 1 } #text_8 { color: #fff } #text_8:after { right: -69px; background-position: 0px -360px } .anim_7 #text_8:after { opacity: 1 } #text_9 { color: #fff } #text_9:after { background-position: 0px -450px; left: -52px; right: auto } .anim_11#text_9:after { opacity: 0 } #text_10 p,#text_11 p { font-family: "Montserratsemibold","Montserrat"; font-weight: 700; font-style: italic; font-size: 13px; margin: 0; line-height: 19px; color: #fff; padding-left: 2px; letter-spacing: 0.07em } @media screen and (max-width: 800px) { #text_10 p,#text_11 p { font-size:11px } } @-moz-keyframes anim_3 { 0% { -moz-transform: translateX(100%); transform: translateX(100%) } 100% { -moz-transform: translateX(0%); transform: translateX(0%) } } @-webkit-keyframes anim_3 { 0% { -webkit-transform: translateX(100%); transform: translateX(100%) } 100% { -webkit-transform: translateX(0%); transform: translateX(0%) } } @keyframes anim_3 { 0% { -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%) } 100% { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } } @-moz-keyframes anim_4 { 0% { -moz-transform: translateX(-100%) translateZ(27px); transform: translateX(-100%) translateZ(27px) } 100% { -moz-transform: translateX(0%) translateZ(27px); transform: translateX(0%) translateZ(27px) } } @-webkit-keyframes anim_4 { 0% { -webkit-transform: translateX(-100%) translateZ(27px); transform: translateX(-100%) translateZ(27px) } 100% { -webkit-transform: translateX(0%) translateZ(27px); transform: translateX(0%) translateZ(27px) } } @keyframes anim_4 { 0% { -moz-transform: translateX(-100%) translateZ(27px); -ms-transform: translateX(-100%) translateZ(27px); -webkit-transform: translateX(-100%) translateZ(27px); transform: translateX(-100%) translateZ(27px) } 100% { -moz-transform: translateX(0%) translateZ(27px); -ms-transform: translateX(0%) translateZ(27px); -webkit-transform: translateX(0%) translateZ(27px); transform: translateX(0%) translateZ(27px) } } @-moz-keyframes anim_5 { 0% { -moz-transform: rotateX(0deg); transform: rotateX(0deg) } 100% { -moz-transform: rotateX(90deg); transform: rotateX(90deg) } } @-webkit-keyframes anim_5 { 0% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg) } 100% { -webkit-transform: rotateX(90deg); transform: rotateX(90deg) } } @keyframes anim_5 { 0% { -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); transform: rotateX(0deg) } 100% { -moz-transform: rotateX(90deg); -webkit-transform: rotateX(90deg); transform: rotateX(90deg) } } @-moz-keyframes anim_6 { 0% { -moz-transform: rotateX(90deg); transform: rotateX(90deg) } 100% { -moz-transform: rotateX(180deg); transform: rotateX(180deg) } } @-webkit-keyframes anim_6 { 0% { -webkit-transform: rotateX(90deg); transform: rotateX(90deg) } 100% { -webkit-transform: rotateX(180deg); transform: rotateX(180deg) } } @keyframes anim_6 { 0% { -moz-transform: rotateX(90deg); -webkit-transform: rotateX(90deg); transform: rotateX(90deg) } 100% { -moz-transform: rotateX(180deg); -webkit-transform: rotateX(180deg); transform: rotateX(180deg) } } @-moz-keyframes anim_7 { 0% { -moz-transform: rotateX(180deg); transform: rotateX(180deg) } 100% { -moz-transform: rotateX(270deg); transform: rotateX(270deg) } } @-webkit-keyframes anim_7 { 0% { -webkit-transform: rotateX(180deg); transform: rotateX(180deg) } 100% { -webkit-transform: rotateX(270deg); transform: rotateX(270deg) } } @keyframes anim_7 { 0% { -moz-transform: rotateX(180deg); -webkit-transform: rotateX(180deg); transform: rotateX(180deg) } 100% { -moz-transform: rotateX(270deg); -webkit-transform: rotateX(270deg); transform: rotateX(270deg) } } @-moz-keyframes anim_8 { 0% { -moz-transform: rotateX(270deg); transform: rotateX(270deg) } 100% { -moz-transform: rotateX(360deg); transform: rotateX(360deg) } } @-webkit-keyframes anim_8 { 0% { -webkit-transform: rotateX(270deg); transform: rotateX(270deg) } 100% { -webkit-transform: rotateX(360deg); transform: rotateX(360deg) } } @keyframes anim_8 { 0% { -moz-transform: rotateX(270deg); -webkit-transform: rotateX(270deg); transform: rotateX(270deg) } 100% { -moz-transform: rotateX(360deg); -webkit-transform: rotateX(360deg); transform: rotateX(360deg) } } @-moz-keyframes anim_9 { 0% { -moz-transform: translateX(0%) translateZ(-27px) rotateX(-270deg); transform: translateX(0%) translateZ(-27px) rotateX(-270deg) } 100% { -moz-transform: translateX(-100%) translateZ(-27px) rotateX(-270deg); transform: translateX(-100%) translateZ(-27px) rotateX(-270deg) } } @-webkit-keyframes anim_9 { 0% { -webkit-transform: translateX(0%) translateZ(-27px) rotateX(-270deg); transform: translateX(0%) translateZ(-27px) rotateX(-270deg) } 100% { -webkit-transform: translateX(-100%) translateZ(-27px) rotateX(-270deg); transform: translateX(-100%) translateZ(-27px) rotateX(-270deg) } } @keyframes anim_9 { 0% { -moz-transform: translateX(0%) translateZ(-27px) rotateX(-270deg); -ms-transform: translateX(0%) translateZ(-27px) rotateX(-270deg); -webkit-transform: translateX(0%) translateZ(-27px) rotateX(-270deg); transform: translateX(0%) translateZ(-27px) rotateX(-270deg) } 100% { -moz-transform: translateX(-100%) translateZ(-27px) rotateX(-270deg); -ms-transform: translateX(-100%) translateZ(-27px) rotateX(-270deg); -webkit-transform: translateX(-100%) translateZ(-27px) rotateX(-270deg); transform: translateX(-100%) translateZ(-27px) rotateX(-270deg) } } @-moz-keyframes anim_10 { 0% { -moz-transform: translateX(0%); transform: translateX(0%) } 100% { -moz-transform: translateX(100%); transform: translateX(100%) } } @-webkit-keyframes anim_10 { 0% { -webkit-transform: translateX(0%); transform: translateX(0%) } 100% { -webkit-transform: translateX(100%); transform: translateX(100%) } } @keyframes anim_10 { 0% { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } 100% { -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%) } } @-moz-keyframes anim_11 { 0% { -moz-transform: translateX(100%); transform: translateX(100%) } 100% { -moz-transform: translateX(0%); transform: translateX(0%) } } @-webkit-keyframes anim_11 { 0% { -webkit-transform: translateX(100%); transform: translateX(100%) } 100% { -webkit-transform: translateX(0%); transform: translateX(0%) } } @keyframes anim_11 { 0% { -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%) } 100% { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } } @-moz-keyframes anim_12 { 0% { -moz-transform: translateX(-100%) translateZ(27px); transform: translateX(-100%) translateZ(27px) } 100% { -moz-transform: translateX(0%) translateZ(27px); transform: translateX(0%) translateZ(27px) } } @-webkit-keyframes anim_12 { 0% { -webkit-transform: translateX(-100%) translateZ(27px); transform: translateX(-100%) translateZ(27px) } 100% { -webkit-transform: translateX(0%) translateZ(27px); transform: translateX(0%) translateZ(27px) } } @keyframes anim_12 { 0% { -moz-transform: translateX(-100%) translateZ(27px); -ms-transform: translateX(-100%) translateZ(27px); -webkit-transform: translateX(-100%) translateZ(27px); transform: translateX(-100%) translateZ(27px) } 100% { -moz-transform: translateX(0%) translateZ(27px); -ms-transform: translateX(0%) translateZ(27px); -webkit-transform: translateX(0%) translateZ(27px); transform: translateX(0%) translateZ(27px) } } @-moz-keyframes anim_13 { 0% { -moz-transform: rotateX(360deg); transform: rotateX(360deg) } 100% { -moz-transform: rotateX(450deg); transform: rotateX(450deg) } } @-webkit-keyframes anim_13 { 0% { -webkit-transform: rotateX(360deg); transform: rotateX(360deg) } 100% { -webkit-transform: rotateX(450deg); transform: rotateX(450deg) } } @keyframes anim_13 { 0% { -moz-transform: rotateX(360deg); -webkit-transform: rotateX(360deg); transform: rotateX(360deg) } 100% { -moz-transform: rotateX(450deg); -webkit-transform: rotateX(450deg); transform: rotateX(450deg) } } .csstransforms3d .anim_1 { -webkit-animation: anim_1 1.5s both ease-in; -moz-animation: anim_1 1.5s both ease-in; -ms-animation: anim_1 1.5s both ease-in; animation: anim_1 1.5s both ease-in } .csstransforms3d .anim_2 { -webkit-animation: anim_2 0.75s both ease-in; -moz-animation: anim_2 0.75s both ease-in; -ms-animation: anim_2 0.75s both ease-in; animation: anim_2 0.75s both ease-in } .csstransforms3d .anim_3 { -webkit-animation: anim_3 0.75s both ease-out; -moz-animation: anim_3 0.75s both ease-out; -ms-animation: anim_3 0.75s both ease-out; animation: anim_3 0.75s both ease-out } .csstransforms3d .anim_4 { -webkit-animation: anim_4 0.75s both ease-out; -moz-animation: anim_4 0.75s both ease-out; -ms-animation: anim_4 0.75s both ease-out; animation: anim_4 0.75s both ease-out } .csstransforms3d .anim_5 { -webkit-animation: anim_5 0.3s both ease-in; -moz-animation: anim_5 0.3s both ease-in; -ms-animation: anim_5 0.3s both ease-in; animation: anim_5 0.3s both ease-in } .csstransforms3d .anim_6 { -webkit-animation: anim_6 0.3s both ease-in; -moz-animation: anim_6 0.3s both ease-in; -ms-animation: anim_6 0.3s both ease-in; animation: anim_6 0.3s both ease-in } .csstransforms3d .anim_7 { -webkit-animation: anim_7 0.3s both ease-in; -moz-animation: anim_7 0.3s both ease-in; -ms-animation: anim_7 0.3s both ease-in; animation: anim_7 0.3s both ease-in } .csstransforms3d .anim_8 { -webkit-animation: anim_8 0s both ease-in; -moz-animation: anim_8 0s both ease-in; -ms-animation: anim_8 0s both ease-in; animation: anim_8 0s both ease-in } .csstransforms3d .anim_9 { -webkit-animation: anim_9 0.75s both ease-in; -moz-animation: anim_9 0.75s both ease-in; -ms-animation: anim_9 0.75s both ease-in; animation: anim_9 0.75s both ease-in } .csstransforms3d .anim_10 { -webkit-animation: anim_10 0.75s both ease-in; -moz-animation: anim_10 0.75s both ease-in; -ms-animation: anim_10 0.75s both ease-in; animation: anim_10 0.75s both ease-in } .csstransforms3d .anim_11 { -webkit-animation: anim_11 0.75s both ease-out; -moz-animation: anim_11 0.75s both ease-out; -ms-animation: anim_11 0.75s both ease-out; animation: anim_11 0.75s both ease-out } .csstransforms3d .anim_12 { -webkit-animation: anim_12 0.75s both ease-out; -moz-animation: anim_12 0.75s both ease-out; -ms-animation: anim_12 0.75s both ease-out; animation: anim_12 0.75s both ease-out } .csstransforms3d .anim_13 { -webkit-animation: anim_13 0.5s both ease-in; -moz-animation: anim_13 0.5s both ease-in; -ms-animation: anim_13 0.5s both ease-in; animation: anim_13 0.5s both ease-in } .no-csstransforms3d #text_1 { display: none } .no-csstransforms3d #text_2 { display: none } .no-csstransforms3d #text_3 { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); display: inline-block; opacity: 0 } .no-csstransforms3d #text_4 { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); -moz-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); display: inline-block; opacity: 0 } .no-csstransforms3d #text_5 { -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); -moz-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); display: inline-block; opacity: 0 } .no-csstransforms3d #text_6 { visibility: visible; -moz-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); -moz-transform: rotateX(0); -webkit-transform: rotateX(0); transform: rotateX(0); opacity: 0 } .no-csstransforms3d #text_7 { visibility: visible; -moz-transform: rotateX(0); -webkit-transform: rotateX(0); transform: rotateX(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); opacity: 0 } .no-csstransforms3d #text_8 { visibility: visible; opacity: 0 } .no-csstransforms3d #text_9,.no-csstransforms3d #text_10,.no-csstransforms3d #text_11 { display: inline-block; visibility: visible; opacity: 0; -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); -moz-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0) } @media screen and (max-width: 800px) { #text_3,#text_4,#text_5,#text_6,#text_7,#text_8,#text_9 { font-size:3em } } @media screen and (max-width: 640px) { .block__left,.block__center { display:none !important } #text_3,#text_4,#text_5,#text_6,#text_7,#text_8,#text_9,#text_10 { display: none !important } .block__right { width: 100% !important; text-align: center } } * { pointer-events: fill } .coverScrollDown svg>* { -moz-transition: fill 0.2s ease-in-out 0s,fill-opacity 0.2s ease-in-out 0.2s,stroke 0.2s ease-in-out 0.1s; -o-transition: fill 0.2s ease-in-out 0s,fill-opacity 0.2s ease-in-out 0.2s,stroke 0.2s ease-in-out 0.1s; -webkit-transition: fill 0.2s ease-in-out,fill-opacity 0.2s ease-in-out,stroke 0.2s ease-in-out; -webkit-transition-delay: 0s,0.2s,0.1s; transition: fill 0.2s ease-in-out 0s,fill-opacity 0.2s ease-in-out 0.2s,stroke 0.2s ease-in-out 0.1s } .horizontalNav svg>* { -moz-transition: fill-opacity 0.3s ease-in-out 0s,stroke 0.3s ease-in-out 0s,stroke-opacity 0s linear 0s; -o-transition: fill-opacity 0.3s ease-in-out 0s,stroke 0.3s ease-in-out 0s,stroke-opacity 0s linear 0s; -webkit-transition: fill-opacity 0.3s ease-in-out,stroke 0.3s ease-in-out,stroke-opacity 0s linear; -webkit-transition-delay: 0s,0s,0s; transition: fill-opacity 0.3s ease-in-out 0s,stroke 0.3s ease-in-out 0s,stroke-opacity 0s linear 0s } #about .outerCover { background-color: #78af97 } #about .cover { background: url("img/cover_about_1625x1625.jpg") no-repeat; background-position: center center; background-size: 100% } @media screen and (max-width: 1380px) { #about .cover { background:url("img/cover_about_1380x1380.jpg") no-repeat; background-position: center center; background-size: 100% } } @media screen and (max-width: 1024px) { #about .cover { background:url("img/cover_about_1024x1024.jpg") no-repeat; background-position: center center; background-size: 100% } } @media screen and (max-width: 768px) { #about .cover { background:url("img/cover_about_768x768.jpg") no-repeat; background-position: center center; background-size: 100% } } #about .cover .coverClaim { color: #fff } #about .cover .coverClaim .coverClaim__mainText .coverClaim__mainText--word { color: #afffdb; position: relative; z-index: 0 } #about .cover .coverClaim .coverClaim__mainText .coverClaim__mainText--word:before { content: ""; position: absolute; right: -85px; bottom: -35px; background: url(img/smear-cover-about.png) 0 0 no-repeat; background-size: 100%; width: 206px; height: 90px; z-index: -1 } @media screen and (max-width: 768px) { #about .cover .coverClaim .coverClaim__mainText .coverClaim__mainText--word:before { width:140px; height: 60px; right: -53px; bottom: -17px } } @media screen and (max-width: 640px) { #about .cover .coverClaim .coverClaim__mainText .coverClaim__mainText--word:before { width:100px; height: 43px; right: -37px; bottom: -11px } } #about .cover .coverClaim .coverClaim__mainText .firstLetter:after { background-color: #afffdb } #about .cover .coverClaim .coverClaim__subText { color: #afffdb } #about .cover .coverClaim h1 { color: #fff } #about .cover .coverClaim h1:after { background-color: #fff } #about .cover .coverScrollDown #obj_1 { fill: #82B09C } #about .cover .coverScrollDown #obj_2 { stroke: #C1D8CE } #about .cover .coverScrollDown #obj_3 { fill: #fff } #about .cover .coverScrollDown #obj_3:hover { fill: #a4d8c1 } #about .cover .coverScrollDown #obj_4 { stroke: #515151 } #about .cover .coverScrollDown:hover #obj_1 { fill: #fff; fill-opacity: 0.8 } #about .cover .coverScrollDown:hover #obj_2 { stroke: #b7dccb } #about .cover .coverScrollDown:hover #obj_3 { fill: #a4d8c1 } #about .cover .coverScrollDown:hover #obj_4 { stroke: #fff } #about .cover .horizontalNav #vgg-next-out { fill: #000 } #about .cover .horizontalNav:hover #vgg-next-out { fill-opacity: 1 } #about .cover .horizontalNav:hover #vgg-next-in { fill-opacity: 1 } #about .cover .horizontalNav:hover #vgg-next-stroke { stroke-width: 0 } #about .cover .horizontalNav:hover #vgg-next-arrow { stroke: #000 } #about .cover .horizontalNav #vgg-prev-out { fill: #fb5564 } #about .cover .horizontalNav:hover #vgg-prev-out { fill-opacity: 1 } #about .cover .horizontalNav:hover #vgg-prev-in { fill-opacity: 1 } #about .cover .horizontalNav:hover #vgg-prev-stroke { stroke-width: 0 } #about .cover .horizontalNav:hover #vgg-prev-arrow { stroke: #fb5564 } #innovative-thinkers .outerCover { background-color: #fff; } #innovative-thinkers .cover { background: url("img/cover_philosophy_1625x1625.jpg") no-repeat; background-position: center center; background-size: 100% } @media screen and (max-width: 2380px) { #innovative-thinkers .cover { background:url("img/cover_philosophy_1380x1380.jpg") no-repeat; background-position: center center; background-size: 100%; } .subSectionNav { position: absolute; bottom: 0; right: 0; width: 116px; height: 200px; z-index: 111; -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 0; -moz-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; -webkit-transition: all 0.3s ease-out; -webkit-transition-delay: 0s; transition: all 0.3s ease-out 0s } @media screen and (max-width: 640px) { .subSectionNav { display:none !important } } .subSectionNav.show { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%); opacity: 1 } .subSectionNav ul { position: absolute; bottom: 21%; right: 26% } .subSectionNav li { display: block; width: 22px; height: 22px; position: relative; cursor: pointer } .subSectionNav li:after { -moz-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; -webkit-transition: all 0.3s ease-out; -webkit-transition-delay: 0s; transition: all 0.3s ease-out 0s; display: block; opacity: 0.5; border: solid #fff 1px; border-radius: 50%; content: ""; position: absolute; top: 50%; left: 50%; margin-left: -5px; margin-top: -5px; width: 8px; height: 8px; opacity: 0 } .subSectionNav li:hover:after,.subSectionNav li.active:after { width: 20px; height: 20px; margin-left: -11px; margin-top: -11px; opacity: 1 } .subSectionNav li span { position: absolute; width: 8px; height: 8px; left: 50%; top: 50%; margin-left: -4px; margin-top: -4px; display: block; background: #fff; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; -webkit-transition: all 0.3s ease-out; -webkit-transition-delay: 0s; transition: all 0.3s ease-out 0s } .subSectionNav li span:after { display: none; width: 10px; height: 10px; background-color: #ff0; opacity: 0.5; content: "" } .subSectionNav .toTop { position: absolute; bottom: 0; right: 12px; width: 60px; height: 30px; cursor: pointer } #about .subSectionNav { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMTYgMjAwIj48cG9seWdvbiBmaWxsPSIjRkM4OTgzIiBwb2ludHM9IjAsMTE0IDExNiwwIDExNiwyMDAgODUsMjAwICIvPjwvc3ZnPg==) no-repeat } #about .subSectionNav li span { background: #fff } #about .subSectionNav li.active span,#about .subSectionNav li:hover span { background: #585858 } #about .subSectionNav li.active:after,#about .subSectionNav li:hover:after { border: solid #585858 1px } #about .subSectionNav .toTop { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MCAzMCI+PHBvbHlnb24gZmlsbD0iI0EwRUFDQyIgcG9pbnRzPSIwLDMwIDMwLDAgNjAsMzAgIi8+PHBvbHlsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjI1LDIyIDMwLDE2IDM1LDIyICIvPjwvc3ZnPg==) no-repeat } #innovative-thinkers .subSectionNav { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTE2IiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCiA8Zz4KICA8dGl0bGU+YmFja2dyb3VuZDwvdGl0bGU+CiAgPHJlY3QgZmlsbD0ibm9uZSIgaWQ9ImNhbnZhc19iYWNrZ3JvdW5kIiBoZWlnaHQ9IjQwMiIgd2lkdGg9IjU4MiIgeT0iLTEiIHg9Ii0xIi8+CiA8L2c+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPHBvbHlnb24gaWQ9InN2Z18xIiBwb2ludHM9IjAsMTE0IDExNiwwIDExNiwyMDAgODUsMjAwICIgZmlsbD0iI2QyYzdiYSIvPgogPC9nPgo8L3N2Zz4=) no-repeat } #innovative-thinkers .subSectionNav li span { background: #fff } #innovative-thinkers .subSectionNav li.active span,#innovative-thinkers .subSectionNav li:hover span { background: #585858 } #innovative-thinkers .subSectionNav li.active:after,#innovative-thinkers .subSectionNav li:hover:after { border: solid #585858 1px } #innovative-thinkers .subSectionNav .toTop { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8Zz4KICA8dGl0bGU+YmFja2dyb3VuZDwvdGl0bGU+CiAgPHJlY3QgeD0iLTEiIHk9Ii0xIiB3aWR0aD0iNjIiIGhlaWdodD0iMzIiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgZmlsbD0ibm9uZSIvPgogPC9nPgoKIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8cG9seWdvbiBmaWxsPSIjNjM2MTZmIiBwb2ludHM9IjAsMzAgMzAsMCA2MCwzMCAiIGlkPSJzdmdfMSIvPgogIDxwb2x5bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgcG9pbnRzPSIyNSwyMiAzMCwxNiAzNSwyMiAiIGlkPSJzdmdfMiIvPgogPC9nPgo8L3N2Zz4=) no-repeat; } #join-us .subSectionNav { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMTYgMjAwIj48cG9seWdvbiBmaWxsPSIjRkM4OTgzIiBwb2ludHM9IjAsMTE0IDExNiwwIDExNiwyMDAgODUsMjAwICIvPjwvc3ZnPg==) no-repeat } #join-us .subSectionNav li span { background: #fff } #join-us .subSectionNav li.active span,#join-us .subSectionNav li:hover span { background: #a8f5d4 } #join-us .subSectionNav li.active:after,#join-us .subSectionNav li:hover:after { border: solid #a8f5d4 1px } #join-us .subSectionNav .toTop { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MCAzMCI+PHBvbHlnb24gZmlsbD0iI0EwRUFDQyIgcG9pbnRzPSIwLDMwIDMwLDAgNjAsMzAgIi8+PHBvbHlsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBwb2ludHM9IjI1LDIyIDMwLDE2IDM1LDIyICIvPjwvc3ZnPg==) no-repeat } #about #intro { background-color: #f1f1ef } #about #intro .boxText .boxText__bottom h2 { margin-top: 0.5em } @media only screen and (max-width: 700px) { #innovative-thinkers .cover { background:url("img/cover_philosophy_1380x1380.jpg") no-repeat; background-position: center center; background-size: 100%; margin-top: 202px; } #innovative-thinkers .outerCover { background-color: #fff; margin-top: -392px; } #about #intro .boxText { margin:0 auto 0 auto } } @media only screen and (min-width: 1024px) { #innovative-thinkers .cover { background:url("img/cover_philosophy_1380x1380.jpg") no-repeat; background-position: center center; background-size: 100%; margin-top: 25px; } #innovative-thinkers .outerCover { background-color: #fff; margin-top: -2px; } #about #intro .boxText { margin:0 auto 0 auto } } @media screen and (max-width: 400px) { #innovative-thinkers .cover { background:url("img/cover_philosophy_1380x1380.jpg") no-repeat; background-position: center center; background-size: 100%; margin-top: 102px; } #innovative-thinkers .outerCover { background-color: #fff; margin-top: -192px; } #about #intro { background:none } #about #intro .boxText { margin: 0 auto; background: #f1f1ef } } #about #about-intro-1 { position: absolute; top: 10%; left: 15%; width: 60%; -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out } #about #about-intro-1.end { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } @media screen and (max-width: 640px) { #about #about-intro-1 { position:static; display: block; margin: 50px auto 0; width: 50% } } #about #services { background: url(img/about-services-background.jpg) no-repeat; background-size: cover } @media screen and (max-width: 800px) { #about #services .col3.center { width:44%; left: 28% } #about #services .boxText__bottom { height: 55% } #about #services .boxText__bottom br { display: none !important } #about #services .boxText__top { height: 45% } } @media screen and (max-width: 640px) { #about #services { background:none } #about #services .col3.center { width: 100%; left: 0% } #about #services .col3.left,#about #services .col3.right { display: none } } #about #services .boxText { margin: 0 auto } #about #services .boxText .boxText__bottom h2 { margin-top: 0.5em } @media screen and (max-width: 1024px) { #about #services .boxText { margin:0 auto 0 auto } } @media screen and (max-width: 640px) { #about #services .boxText { background:#f1f1ef } } #about #about-services-1 { position: absolute; width: 110%; top: 0; left: 10%; -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out } #about #about-services-1.end { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } #about #about-services-2 { position: absolute; width: 80%; top: 10%; right: 10%; -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out } #about #about-services-2.end { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } #about #contact { background: url(img/about-contact-background.jpg) no-repeat; background-size: cover } #about #contact .visualBreadcrumb .visualBreadcrumb__main:before { color: #f1f1ef } #about #contact .visualBreadcrumb .visualBreadcrumb__main:after { background-color: #f1f1ef } #about #contact .col2 { z-index: 1 } #about #contact .col2.left { float: left } #about #contact .col2.right { float: right; display: table } #about #contact .col2.right>div { display: table-cell; vertical-align: bottom } @media screen and (max-width: 1024px) { #about #contact .col2.right>div { vertical-align:middle } } #about #contact .bg_image_1 { position: absolute; top: 5%; left: 40%; width: 35% } #about #contact .bg_image_1 #about-contact-1 { position: absolute; top: 0; left: 0; width: 100% } #about #contact .bg_image_2 { position: absolute; bottom: 5%; left: 40%; width: 30%; z-index: 0 } #about #contact .bg_image_2 #about-contact-2 { position: absolute; bottom: 0; left: 0; width: 100% } #about #contact .bg_content { position: absolute; width: auto; left: 45%; top: 50%; margin-top: -60px } #about #contact .bg_content p { margin: 0 auto; text-align: center; padding-bottom: 61px; display: block; background: url(img/flash-grey.png) center bottom no-repeat; background-size: 117px 51px; font-family: "Verlag A","Verlag B"; font-weight: 700; font-style: italic; font-size: 14px; color: #595959; text-transform: uppercase; position: relative } #about #contact .bg_content p:after { margin-left: -10%; content: ""; display: block; width: 130%; height: 1px; top: 6px; position: absolute; background-color: #595959 } #about #contact .boxText { background: #84eebe; height: 80%; top: 10%; max-width: 400px; margin: 0 auto } #about #contact .boxText .boxText__bottom h2 { margin-top: 0.5em } @media screen and (max-width: 1550px) { #about #contact .boxText { height:90%; top: 5% } } @media screen and (max-width: 1366px) { #about #contact .boxText { height:100%; top: 0% } } @media screen and (max-width: 1024px) { #about #contact .boxText { margin:0 auto 0 auto } } #about #contact .form { background: url(img/flash-green.png) right top no-repeat; background-size: 184px 156px; padding: 80px 80px 0 0; height: auto; overflow: hidden; max-width: 370px; margin: 0 auto 8%; position: relative } #about #contact .form ul { max-width: 290px; height: auto; background: #84eebe; padding: 40px; float: right } #about #contact .form ul li { height: auto; width: 100%; float: left; margin: 0 0 3px 0 } #about #contact .form ul li label { color: transparent; text-indent: 100%; white-space: nowrap; overflow: hidden; display: block; width: 100% } #about #contact .form ul li input[type="text"],#about #contact .form ul li input[type="email"] { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px 20px; float: left; width: 100%; font-family: "Verlag A","Verlag B"; font-weight: 700; font-style: normal; background: #84eebe; font-size: 20px; color: #666; border: 2px solid #666; height: 59px; outline: none; display: block; float: left; text-transform: uppercase } #about #contact .form ul li input[type="text"]:focus,#about #contact .form ul li input[type="text"]:active,#about #contact .form ul li input[type="email"]:focus,#about #contact .form ul li input[type="email"]:active { background: #9bf5cc; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-in-out } #about #contact .form ul li textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: "Verlag A","Verlag B"; font-weight: 700; font-style: normal; padding: 10px 20px; height: 154px; width: 100%; float: left; font-size: 20px; line-height: 24px; max-width: 290px; background: #84eebe; color: #666; border: 2px solid #666; outline: none; display: block; float: left; text-transform: uppercase } #about #contact .form ul li textarea:focus,#about #contact .form ul li textarea:active { background: #9bf5cc; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out } @media screen and (max-width: 800px) { #about #contact .form ul li textarea { height:100px } } #about #contact .form ul li p.check { display: block; height: auto; width: 100%; position: relative; float: left; margin: 20px 0 10px 0 } #about #contact .form ul li p.check>input { float: left; padding: 0; margin: 0; height: 32px; width: 32px; position: absolute; opacity: 0; display: block; cursor: pointer } #about #contact .form ul li p.check>label { float: left; line-height: 13px; font-size: 10px; text-transform: uppercase; color: #57b98d; font-family: Arial,"Helvetica Neue",Helvetica,sans-serif; padding: 0 0 0 42px; text-indent: 0; white-space: pre-wrap; display: block; margin: 0; width: auto } #about #contact .form ul li p.check:not(#foo)>input ~ label { background: url(img/form_checkbox_about.png) 0 0 no-repeat; height: 40px; background-size: 32px 102px; display: block } #about #contact .form ul li p.check:not(#foo)>input[type="checkbox"] ~ label,#about #contact .form ul li p.check:not(#foo)>input[type="checkbox"]:focus ~ label { background-position: 0 2px } #about #contact .form ul li p.check:not(#foo)>input[type="checkbox"]:checked ~ label,#about #contact .form ul li p.check:not(#foo)>input[type="checkbox"]:focus:checked ~ label { background-position: 0 -68px } #about #contact .form ul li p.check:not(#foo)>input[type="checkbox"]:active ~ label,#about #contact .form ul li p.check:not(#foo)>input[type="checkbox"]:active:checked ~ label { background-position: 0 -68px } #about #contact .form ul li p.check .formError { left: -5px !important; margin-top: -34px !important } #about #contact .form ul li button { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #fc8983; padding: 10px 20px; color: #f1f1ef; height: 59px; margin-top: 12px; cursor: pointer; font-size: 20px; text-align: left; width: 100%; border: 2px solid #fc8983; float: left; display: block; border: none; outline: none; text-transform: uppercase; position: relative } #about #contact .form ul li button:after { content: ">"; position: absolute; right: 20px } #about #contact .form ul li button:hover { color: #fc8983; background: #fff } #about #contact .form ul.feedback { padding-top: 60px; font-size: 2em; font-family: "Verlag A","Verlag B"; font-weight: 300; font-style: normal; text-transform: uppercase; line-height: 2.5em; letter-spacing: 0.15em } @media screen and (max-width: 1024px) { #about #contact .form { position:relative; right: 0; background: none; padding: 0; margin: 0 auto } #about #contact .form ul { padding: 10px 20px } #about #contact .form ul li input[type="text"],#about #contact .form ul li input[type="email"] { height: 40px; font-size: 16px } #about #contact .form ul li textarea { font-size: 16px } } @media screen and (max-width: 800px) { #about #contact .form ul { float:none; overflow: hidden; margin: 0 auto; padding: 20px } } @media screen and (max-width: 640px) { #about #contact .form { background:none; position: relative; bottom: auto; right: auto; margin: 50px auto 0; padding: 0; max-width: 354px } } @media screen and (max-width: 800px) { #about #contact .boxText__top>div img { max-width:150px } } @media screen and (max-width: 1024px) { #about #contact .bg_image_1,#about #contact .bg_image_2,#about #contact .bg_content { display:none } } @media screen and (max-width: 640px) { #about #contact { background:none } } #about .visualBreadcrumb .visualBreadcrumb__main:before { color: #84eebe } #about .visualBreadcrumb .visualBreadcrumb__main:after { background-color: #84eebe } #about *::-webkit-input-placeholder { font-size: 20px; color: #666; text-transform: uppercase } @media screen and (max-width: 1024px) { #about *::-webkit-input-placeholder { font-size:16px } } #about *:-moz-placeholder { font-size: 20px; color: #666; text-transform: uppercase } @media screen and (max-width: 1024px) { #about *:-moz-placeholder { font-size:16px } } #about *::-moz-placeholder { font-size: 20px; color: #666; text-transform: uppercase } @media screen and (max-width: 1024px) { #about *::-moz-placeholder { font-size:16px } } #about *:-ms-input-placeholder { font-size: 20px; color: #666; text-transform: uppercase } @media screen and (max-width: 1024px) { #about *:-ms-input-placeholder { font-size:16px } } .goToNext { height: auto; overflow: hidden; width: 100% } .goToNext a.button { border: 2px solid #fff; display: block; color: #fff; text-decoration: none; text-transform: uppercase; width: auto; display: table; padding: 18px 56px; margin: 80px auto; position: relative; overflow: hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-in-out; font-family: "Verlag A","Verlag B"; font-weight: 700; font-style: normal; font-size: 16px; letter-spacing: 5px } .goToNext a.button span span.firstLetter { position: relative; font-family: "dia"; padding: 0 0 20px 0 } .goToNext a.button span span.firstLetter:before { content: ""; height: 1px; position: absolute; bottom: 14px; left: 0; width: 12px } .goToNext a.button span span.firstLetter:after { content: "◆"; position: absolute; bottom: -8px; left: -2px; font-size: 22px } .goToNext a.button:hover { background: #fff; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5 } #about .goToNext { background: #fe9c9c } #about .goToNext a.button span span.firstLetter { color: #de7670 } #about .goToNext a.button span span.firstLetter:before { border-top: 2px solid #de7670 } #about .goToNext a.button:hover { border: 2px solid #de7670; color: #de7670 } #innovative-thinkers .goToNext { background: #ede084 } #innovative-thinkers .goToNext a.button span span.firstLetter { color: #d4c460 } #innovative-thinkers .goToNext a.button span span.firstLetter:before { border-top: 2px solid #d4c460 } #innovative-thinkers .goToNext a.button:hover { border: 2px solid #d4c460; color: #d4c460 } #clients .goToNext { background: #f0c1ff } #clients .goToNext a.button span span.firstLetter { color: #bd75b5 } #clients .goToNext a.button span span.firstLetter:before { border-top: 2px solid #bd75b5 } #clients .goToNext a.button:hover { border: 2px solid #bd75b5; color: #bd75b5 } #awards .goToNext { background: #ffac62 } #awards .goToNext a.button span span.firstLetter { color: #d5731b } #awards .goToNext a.button span span.firstLetter:before { border-top: 2px solid #d5731b } #awards .goToNext a.button:hover { border: 2px solid #d5731b; color: #d5731b } #we-love .goToNext { background: #a2efff } #we-love .goToNext a.button span span.firstLetter { color: #7ba393 } #we-love .goToNext a.button span span.firstLetter:before { border-top: 2px solid #7ba393 } #we-love .goToNext a.button:hover { border: 2px solid #7ba393; color: #7ba393 } #news .goToNext { background: #fd6b76 } #news .goToNext a.button span span.firstLetter { color: #cf3f49 } #news .goToNext a.button span span.firstLetter:before { border-top: 2px solid #cf3f49 } #news .goToNext a.button:hover { border: 2px solid #cf3f49; color: #cf3f49 } #join-us .goToNext { background: #84eebe } #join-us .goToNext a.button span span.firstLetter { color: #80a999 } #join-us .goToNext a.button span span.firstLetter:before { border-top: 2px solid #80a999 } #join-us .goToNext a.button:hover { border: 2px solid #80a999; color: #80a999 } #awards #awards-list ul.awards { width: 100%; max-width: 100%; overflow: hidden; margin: 0 auto } #awards #awards-list ul.awards li.item { position: relative; margin: 0.5%; width: 15.6%; background: #0c0c0c; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; float: left } @media screen and (max-width: 1024px) { #awards #awards-list ul.awards li.item { width:32% } } @media screen and (max-width: 640px) { #awards #awards-list ul.awards li.item { width:49% } } #awards #awards-list ul.awards li.item img { max-width: 100%; width: 100%; margin-bottom: -8px; } #awards #awards-list ul.awards li.item .content { overflow: hidden; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; top: 0px; left: 0px; width: 100%; height: 100% } #awards #awards-list ul.awards li.item .content:before { -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; position: absolute; content: ""; top: 0; right: 0; height: 0%; width: 100%; z-index: 1; display: block; background: #63616f url(img/news-item-hover.jpg) 0 0 no-repeat; background-size: 100% } #awards #awards-list ul.awards li.item .content:after { -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; position: absolute; content: ""; bottom: 0; right: 0; display: block; height: 0%; width: 100%; z-index: 0; background: #63616f url(img/news-item-hover.jpg) 0 bottom no-repeat; background-size: 100% } #awards #awards-list ul.awards li.item .content .vertWrap { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: table; z-index: 2 } #awards #awards-list ul.awards li.item .content .vertWrap ul { -moz-transition: all 0.4s ease-out 0.2s; -o-transition: all 0.4s ease-out 0.2s; -webkit-transition: all 0.4s ease-out; -webkit-transition-delay: 0.2s; transition: all 0.4s ease-out 0.2s; position: relative; display: table-cell; vertical-align: middle; margin: 0 auto; opacity: 0 } #awards #awards-list ul.awards li.item .content .vertWrap ul:before,#awards #awards-list ul.awards li.item .content .vertWrap ul:after { content: ""; height: 1px; display: block; width: 126px; margin: 0 auto } #awards #awards-list ul.awards li.item .content .vertWrap ul:before { border-top: 1px solid #fff; padding-bottom: 37px } #awards #awards-list ul.awards li.item .content .vertWrap ul:after { border-bottom: 1px solid #fff; padding-top: 37px } #awards #awards-list ul.awards li.item .content .vertWrap ul li { color: #fff; font-size: 13px; margin: 8px 0 0; text-transform: uppercase; font-family: Montserrat-extrabold; font-weight: 700; font-style: normal; letter-spacing: 1px; text-align: center } #awards #awards-list ul.awards li.item .content .vertWrap ul li:first-child { margin: 0 } @media screen and (max-width: 1024px) { #awards #awards-list ul.awards li.item .content .vertWrap ul:before { padding-bottom:25px } #awards #awards-list ul.awards li.item .content .vertWrap ul:after { padding-top: 25px } #awards #awards-list ul.awards li.item .content .vertWrap ul li { font-size: 13px; margin: 4px 0 0 } } #awards #awards-list ul.awards li.item .content:hover:before { height: 100% } #awards #awards-list ul.awards li.item .content:hover:after { height: 100% } #awards #awards-list ul.awards li.item .content:hover .vertWrap ul { opacity: 1 } #innovative-thinkers #intro { background-color: #f1f1ef } #innovative-thinkers #intro .boxText { margin: 0 auto; background-color: #676363; max-width: 440px; top: 2%; height: 96% } #innovative-thinkers #intro .boxText .boxText__top { height: 40% } #innovative-thinkers #intro .boxText .boxText__top img { max-width: 70%; padding-top: 10px } #innovative-thinkers #intro .boxText .boxText__bottom { height: 60% } @media screen and (max-width: 1400px) { #innovative-thinkers #intro .boxText .boxText__top img { padding-bottom:25px } #innovative-thinkers #intro .visualBreadcrumb { margin-top: 25px } } @media screen and (max-width: 1100px) { #innovative-thinkers #intro .boxText__bottom p br { display:none } } @media screen and (max-width: 800px) { #innovative-thinkers #intro .boxText { top:0; height: 100% } #innovative-thinkers #intro .boxText__top { height: 35% } #innovative-thinkers #intro .boxText__bottom { height: 65% } } @media screen and (max-width: 640px) { #innovative-thinkers #intro { background-color:#f1f1ef } #innovative-thinkers #intro .col3.right,#innovative-thinkers #intro .col3.left { display: none !important } #innovative-thinkers #intro .boxText { max-width: 300px } } #innovative-thinkers #philosphy-intro-1 { position: absolute; width: 70%; bottom: -40px; -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-200%); -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out } #innovative-thinkers #philosphy-intro-1.end { -moz-transform: translateX(90%); -ms-transform: translateX(0%); -webkit-transform: translateX(222%); transform: translateX(125%) } #innovative-thinkers #philosphy-intro-2 { position: absolute; width: 100%; bottom: 10%; left: -1%; -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(170%); -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out } #innovative-thinkers #philosphy-intro-2.end { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } #innovative-thinkers #philosphy-intro-2x { position: absolute; width: 75%; bottom: 110px; left: -291%; -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(550%); -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out } #innovative-thinkers #philosphy-intro-2x.end { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } #innovative-thinkers #philosphy-intro-3x { position: absolute; width: 75%; bottom: 110px; left: -210%; -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(550%); -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.6s ease-in-out } #innovative-thinkers #philosphy-intro-3x.end { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } #innovative-thinkers #philosphy-intro-4x { position: absolute; width: 75%; bottom: 110px; left: -130%; -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(550%); -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.7s ease-in-out } #innovative-thinkers #philosphy-intro-4x.end { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } #innovative-thinkers #philosphy-intro-5x { position: absolute; width: 75%; bottom: 110px; left: -50%; -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(550%); -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.8s ease-in-out } #innovative-thinkers #philosphy-intro-5x.end { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } #innovative-thinkers #philosphy-intro-6x { position: absolute; width: 75%; bottom: 110px; left: 30%; -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(550%); -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.9s ease-in-out } #innovative-thinkers #philosphy-intro-6x.end { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } #innovative-thinkers #philosphy-intro-7x { position: absolute; width: 75%; bottom: -160px; left: -50%; -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(550%); -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.8s ease-in-out } #innovative-thinkers #philosphy-intro-7x.end { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } #innovative-thinkers #philosphy-intro-8x { position: absolute; width: 75%; bottom: -160px; left: 30%; -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(550%); -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.9s ease-in-out } #innovative-thinkers #philosphy-intro-8x.end { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } #innovative-thinkers #philosphy-intro-2.end { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } #philosphy-intro-3 { position: absolute; width: 145%; bottom: 32%; right: -40%; -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out } #innovative-thinkers #philosphy-intro-3.end { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } #innovative-thinkers #philosphy-intro-4 { position: absolute; width: 145%; bottom: 15%; left: -32%; -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.7s ease-in-out } #innovative-thinkers #philosphy-intro-4.end { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } #philosphy-intro-5 { position: absolute; width: 192%; bottom: -10px; right: -70%; -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out } #innovative-thinkers #philosphy-intro-5.end { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } #innovative-thinkers #philosphy-intro-6 { position: absolute; width: 157%; bottom: -57px; left: -55%; -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out } #innovative-thinkers #philosphy-intro-6.end { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } #philosphy-intro-7 { position: absolute; width: 127%; bottom: 0px; right: -25%; -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out } #innovative-thinkers #philosphy-intro-7.end { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } #innovative-thinkers #philosphy-intro-8 { position: absolute; width: 127%; bottom: 0px; left: -15%; -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out } #innovative-thinkers #philosphy-intro-8.end { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } #philosphy-intro-9 { position: absolute; width: 192%; bottom: -10px; right: -70%; -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out } #innovative-thinkers #philosphy-intro-9.end { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } #innovative-thinkers #philosphy-intro-10 { position: absolute; width: 157%; bottom: 117px; left: -85%; -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out } #innovative-thinkers #philosphy-intro-10.end { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } #philosphy-intro-12 { position: absolute; width: 100%; bottom: 40px; left: 10%; -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(170%); -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out } #innovative-thinkers #philosphy-intro-12.end { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } #philosphy-intro-22 { position: absolute; width: 100%; bottom: 140px; left: 38%; -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(170%); -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out } #innovative-thinkers #philosphy-intro-22.end { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } #philosphy-intro-14 { position: absolute; width: 145%; bottom: 32%; right: -40%; -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out } #innovative-thinkers #philosphy-intro-14.end { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } #innovative-thinkers #philosphy-intro-15 { position: absolute; width: 145%; bottom: 15%; left: -32%; -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.7s ease-in-out } #innovative-thinkers #philosphy-intro-15.end { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } #innovative-thinkers #philosphy-intro-16 { position: absolute; width: 70%; bottom: 510px; left: 48%; -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(170%); -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out } #innovative-thinkers #philosphy-intro-16.end { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translate(0%,-100%); transform: translate(0%,100%) } #philosphy-intro-18 { position: absolute; width: 130%; bottom: 90px; right: -30%; -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out } #innovative-thinkers #philosphy-intro-18.end { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } #innovative-thinkers #philosphy-intro-2.end { -moz-transform: translateX(0%); -ms-transform: translateX(0%); -webkit-transform: translateX(0%); transform: translateX(0%) } #innovative-thinkers #video { background: url(img/philosophy-video-background.jpg) no-repeat } @media screen and (max-width: 640px) { #innovative-thinkers #video { background:none } #innovative-thinkers #video .boxText__bottom { min-height: 150px } } #innovative-thinkers #video .boxText { margin: 0 auto; max-width: 440px; top: 5%; height: 90% } @media screen and (max-width: 640px) { #innovative-thinkers #video .boxText { max-width:300px } } #innovative-thinkers #video .boxText__bottom>div>img { margin-top: 2em } @media screen and (max-width: 800px) { #innovative-thinkers #video .boxText__bottom>div>img { margin-top:1em; max-width: 30px } } #innovative-thinkers #video .col3.right,#innovative-thinkers #video .col3.left { width: 50% } #innovative-thinkers .videoButton { position: absolute; width: 70px; height: 70px; z-index: 115; cursor: pointer #innovative-thinkers .videoButton { width:40px; height: 40px; position: absolute; top: 50%; right: -74px; } } #innovative-thinkers-menu { -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; display: block; width: 100%; position: absolute; left: 50%; margin-left: -239px; bottom: 0; width: 488px; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0ODggNTEiPjxnPjxyZWN0IHg9IjEyLjUiIHk9IjIxLjkxNyIgZmlsbD0iI0UzNjgzQSIgd2lkdGg9IjEiIGhlaWdodD0iMTMiLz48cmVjdCB4PSIzOC41IiB5PSIyMS45MTciIGZpbGw9IiM3QkNERDMiIHdpZHRoPSIxIiBoZWlnaHQ9IjEzIi8+PHJlY3QgeD0iNjQuNSIgeT0iMjEuOTE3IiBmaWxsPSIjN0Y4Q0EyIiB3aWR0aD0iMSIgaGVpZ2h0PSIxMyIvPjxyZWN0IHg9IjkwLjUiIHk9IjIxLjkxNyIgZmlsbD0iIzZBNUE1MyIgd2lkdGg9IjEiIGhlaWdodD0iMTMiLz48cmVjdCB4PSIxMTYuNSIgeT0iMjEuOTE3IiBmaWxsPSIjRDA3RjQ1IiB3aWR0aD0iMSIgaGVpZ2h0PSIxMyIvPjxyZWN0IHg9IjE0Mi41IiB5PSIyMS45MTciIGZpbGw9IiNDRUUxOTIiIHdpZHRoPSIxIiBoZWlnaHQ9IjEzIi8+PHJlY3QgeD0iMTY4LjUiIHk9IjIxLjkxNyIgZmlsbD0iI0MzNEIzRiIgd2lkdGg9IjEiIGhlaWdodD0iMTMiLz48cmVjdCB4PSIxOTQuNSIgeT0iMjEuOTE3IiBmaWxsPSIjRTZENEIyIiB3aWR0aD0iMSIgaGVpZ2h0PSIxMyIvPjxyZWN0IHg9IjIyMC41IiB5PSIyMS45MTciIGZpbGw9IiM3NjU0NDAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEzIi8+PHJlY3QgeD0iMjQ2LjUiIHk9IjIxLjkxNyIgZmlsbD0iI0Y5QUE2NSIgd2lkdGg9IjEiIGhlaWdodD0iMTMiLz48cmVjdCB4PSIyOTIuNSIgeT0iMjEuOTE3IiBmaWxsPSIjQjZCNTdDIiB3aWR0aD0iMSIgaGVpZ2h0PSIxMyIvPjxyZWN0IHg9IjMxOC41IiB5PSIyMS45MTciIGZpbGw9IiM1QTgwNEMiIHdpZHRoPSIxIiBoZWlnaHQ9IjEzIi8+PHJlY3QgeD0iMzQ0LjUiIHk9IjIxLjkxNyIgZmlsbD0iI0UwQ0M1QSIgd2lkdGg9IjEiIGhlaWdodD0iMTMiLz48cmVjdCB4PSIzOTYuNSIgeT0iMjEuOTE3IiBmaWxsPSIjN0M5RjVGIiB3aWR0aD0iMSIgaGVpZ2h0PSIxMyIvPjxyZWN0IHg9IjQyMi41IiB5PSIyMS45MTciIGZpbGw9IiNBMDRGMjMiIHdpZHRoPSIxIiBoZWlnaHQ9IjEzIi8+PHJlY3QgeD0iNDQ4LjUiIHk9IjIxLjkxNyIgZmlsbD0iIzU3NEQzRiIgd2lkdGg9IjEiIGhlaWdodD0iMTMiLz48cmVjdCB4PSI0NzQuNSIgeT0iMjEuOTE3IiBmaWxsPSIjQ0ZBQzVEIiB3aWR0aD0iMSIgaGVpZ2h0PSIxMyIvPjxyZWN0IHg9IjM3MC41IiB5PSIyMS45MTciIGZpbGw9IiM0QjU4MzAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEzIi8+PHJlY3QgeD0iMTIuNSIgeT0iMTYuOTE3IiBmaWxsPSIjRTM2ODNBIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMzguNSIgeT0iMTYuOTE3IiBmaWxsPSIjN0JDREQzIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iNjQuNSIgeT0iMTYuOTE3IiBmaWxsPSIjN0Y4Q0EyIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iOTAuNSIgeT0iMTYuOTE3IiBmaWxsPSIjNkE1QTUzIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMTE2LjUiIHk9IjE2LjkxNyIgZmlsbD0iI0QwN0Y0NSIgd2lkdGg9IjEiIGhlaWdodD0iMSIvPjxyZWN0IHg9IjE0Mi41IiB5PSIxNi45MTciIGZpbGw9IiNDRUUxOTIiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48cmVjdCB4PSIxNjguNSIgeT0iMTYuOTE3IiBmaWxsPSIjQzM0QjNGIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMTk0LjUiIHk9IjE2LjkxNyIgZmlsbD0iI0U2RDRCMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIvPjxyZWN0IHg9IjIyMC41IiB5PSIxNi45MTciIGZpbGw9IiM3NjU0NDAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48cmVjdCB4PSIyNDYuNSIgeT0iMTYuOTE3IiBmaWxsPSIjRjlBQTY1IiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMjkyLjUiIHk9IjE2LjkxNyIgZmlsbD0iI0I2QjU3QyIgd2lkdGg9IjEiIGhlaWdodD0iMSIvPjxyZWN0IHg9IjMxOC41IiB5PSIxNi45MTciIGZpbGw9IiM1QTgwNEMiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48cmVjdCB4PSIzNDQuNSIgeT0iMTYuOTE3IiBmaWxsPSIjRTBDQzVBIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMzk2LjUiIHk9IjE2LjkxNyIgZmlsbD0iIzdDOUY1RiIgd2lkdGg9IjEiIGhlaWdodD0iMSIvPjxyZWN0IHg9IjQyMi41IiB5PSIxNi45MTciIGZpbGw9IiNBMDRGMjMiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz48cmVjdCB4PSI0NDguNSIgeT0iMTYuOTE3IiBmaWxsPSIjNTc0RDNGIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iNDc0LjUiIHk9IjE2LjkxNyIgZmlsbD0iI0NGQUM1RCIgd2lkdGg9IjEiIGhlaWdodD0iMSIvPjxyZWN0IHg9IjM3MC41IiB5PSIxNi45MTciIGZpbGw9IiM0QjU4MzAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiLz4KPC9nPjwvc3ZnPg==) } #innovative-thinkers-menu.hideMenu { display: none; opacity: 0 } *::-webkit-scrollbar { width: 0 !important } html { max-width: 100%; height: 100%; overflow: hidden; background: #fff } body { background: #fff; color: #000; font-size: 12px; font-family: helveticaneue,helvetica,arial; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; position: absolute; overflow: hidden; top: 0; bottom: 0; width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 25px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease-out; transition: all 0.4s ease } body.push { top: 110px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease-out; transition: all 0.4s ease } @media screen and (max-width: 640px) { body.push { top:0 } } @media screen and (min-width: 1600px) { body { left:50%; margin-left: -800px } } @media screen and (max-width: 640px) { body { padding:0 } } body a,body a:active,body a:visited { text-decoration: none } body h1,body h2,body h3,body h4,body h5,body h6,body a,body p { zoom:1;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=url(/hIEfix.png), sizingMethod='crop'); font-weight: bold } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px } .visuallyhidden.focusable:active,.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto } .clearfix { clear: both } .hide { -webkit-transition: all 450ms cubic-bezier(0.215, 0.61, 0.355, 1); -moz-transition: all 450ms cubic-bezier(0.215, 0.61, 0.355, 1); -ms-transition: all 450ms cubic-bezier(0.215, 0.61, 0.355, 1); -o-transition: all 450ms cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 450ms cubic-bezier(0.215, 0.61, 0.355, 1); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0 } .hidden { display: none !important } .pageLoading { display: none; opacity: 0; z-index: 9999; background-color: rgba(255,255,255,0.75); position: fixed; top: 0px; left: 0; right: 0; bottom: 0px; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out }