/* Start:/css/fonts/fonts.css?169321081520030*/ @font-face { font-family: "Myriad Pro"; src: url("/css/fonts/MyriadPro-Regular.eot"); src: local("MyriadPro-Regular"), local("MyriadPro-Regular"), url("/css/fonts/MyriadPro-Regular.eot?#iefix") format("embedded-opentype"), url("/css/fonts/MyriadPro-Regular.ttf") format("truetype"), url("/css/fonts/MyriadPro-Regular.woff") format("woff"), url("/css/fonts/MyriadPro-Regular.svg") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "Myriad Pro"; src: url("/css/fonts/MyriadPro-Bold.eot"); src: local("MyriadPro-Bold"), local("MyriadPro-Bold"), url("/css/fonts/MyriadPro-Bold.eot?#iefix") format("embedded-opentype"), url("/css/fonts/MyriadPro-Bold.ttf") format("truetype"), url("/css/fonts/MyriadPro-Bold.woff") format("woff"), url("/css/fonts/MyriadPro-Bold.svg") format("svg"); font-weight: bold; font-style: normal; } @font-face { font-family: "Myriad Pro"; src: url("/css/fonts/MyriadPro-It.eot"); src: local("MyriadPro-It"), local("MyriadPro-It"), url("/css/fonts/MyriadPro-It.eot?#iefix") format("embedded-opentype"), url("/css/fonts/MyriadPro-It.ttf") format("truetype"), url("/css/fonts/MyriadPro-It.woff") format("woff"), url("/css/fonts/MyriadPro-It.svg") format("svg"); font-weight: normal; font-style: italic; } @font-face { font-family: "HelveticaNeueCyr"; src: url("/css/fonts/HelveticaNeueCyr-Roman.eot"); src: local("HelveticaNeueCyr-Roman"), local("HelveticaNeueCyr-Roman"), url("/css/fonts/HelveticaNeueCyr-Roman.eot?#iefix") format("embedded-opentype"), url("/css/fonts/HelveticaNeueCyr-Roman.ttf") format("truetype"), url("/css/fonts/HelveticaNeueCyr-Roman.woff") format("woff"), url("/css/fonts/HelveticaNeueCyr-Roman.svg") format("svg"); font-weight: 400; font-style: normal; } @font-face { font-family: "HelveticaNeueCyr"; src: url("/css/fonts/HelveticaNeueCyr-Light.eot"); src: local("HelveticaNeueCyr-Light"), local("HelveticaNeueCyr-Light"), url("/css/fonts/HelveticaNeueCyr-Light.eot?#iefix") format("embedded-opentype"), url("/css/fonts/HelveticaNeueCyr-Light.ttf") format("truetype"), url("/css/fonts/HelveticaNeueCyr-Light.woff") format("woff"), url("/css/fonts/HelveticaNeueCyr-Light.svg") format("svg"); font-weight: 300; font-style: normal; } @font-face { font-family: "HelveticaNeueCyr"; src: url("/css/fonts/HelveticaNeueCyr-Thin.eot"); src: local("HelveticaNeueCyr-Thin"), local("HelveticaNeueCyr-Thin"), url("/css/fonts/HelveticaNeueCyr-Thin.eot?#iefix") format("embedded-opentype"), url("/css/fonts/HelveticaNeueCyr-Thin.ttf") format("truetype"), url("/css/fonts/HelveticaNeueCyr-Thin.woff") format("woff"), url("/css/fonts/HelveticaNeueCyr-Thin.svg") format("svg"); font-weight: 100; font-style: normal; } @font-face { font-family: "HelveticaNeueCyr"; src: url("/css/fonts/HelveticaNeueCyr-Bold.eot"); src: local("HelveticaNeueCyr-Bold"), local("HelveticaNeueCyr-Bold"), url("/css/fonts/HelveticaNeueCyr-Bold.eot?#iefix") format("embedded-opentype"), url("/css/fonts/HelveticaNeueCyr-Bold.ttf") format("truetype"), url("/css/fonts/HelveticaNeueCyr-Bold.woff") format("woff"), url("/css/fonts/HelveticaNeueCyr-Bold.svg") format("svg"); font-weight: 700; font-style: normal; } @font-face { font-family: 'Proxima Nova Cn Lt'; src: url('/css/fonts/ProximaNovaCond-LightIt.eot'); src: local('Proxima Nova Condensed Light Italic'), local('ProximaNovaCond-LightIt'), url('/css/fonts/ProximaNovaCond-LightIt.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaCond-LightIt.woff') format('woff'), url('/css/fonts/ProximaNovaCond-LightIt.ttf') format('truetype'); font-weight: 300; font-style: italic; } @font-face { font-family: 'Proxima Nova Lt'; src: url('/css/fonts/ProximaNova-LightIt.eot'); src: local('Proxima Nova Light Italic'), local('ProximaNova-LightIt'), url('/css/fonts/ProximaNova-LightIt.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNova-LightIt.woff') format('woff'), url('/css/fonts/ProximaNova-LightIt.ttf') format('truetype'); font-weight: 300; font-style: italic; } @font-face { font-family: 'Proxima Nova Cn Rg'; src: url('/css/fonts/ProximaNovaCond-Regular.eot'); src: local('Proxima Nova Condensed Regular'), local('ProximaNovaCond-Regular'), url('/css/fonts/ProximaNovaCond-Regular.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaCond-Regular.woff') format('woff'), url('/css/fonts/ProximaNovaCond-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Proxima Nova Th'; src: url('/css/fonts/ProximaNova-Extrabld.eot'); src: local('Proxima Nova Extrabold'), local('ProximaNova-Extrabld'), url('/css/fonts/ProximaNova-Extrabld.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNova-Extrabld.woff') format('woff'), url('/css/fonts/ProximaNova-Extrabld.ttf') format('truetype'); font-weight: 800; font-style: normal; } @font-face { font-family: 'Proxima Nova Cn Bl'; src: url('/css/fonts/ProximaNovaCond-Black.eot'); src: local('Proxima Nova Condensed Black'), local('ProximaNovaCond-Black'), url('/css/fonts/ProximaNovaCond-Black.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaCond-Black.woff') format('woff'), url('/css/fonts/ProximaNovaCond-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; } @font-face { font-family: 'Proxima Nova Cn Th'; src: url('/css/fonts/ProximaNovaCond-ExtrabldIt.eot'); src: local('Proxima Nova Condensed Extrabold Italic'), local('ProximaNovaCond-ExtrabldIt'), url('/css/fonts/ProximaNovaCond-ExtrabldIt.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaCond-ExtrabldIt.woff') format('woff'), url('/css/fonts/ProximaNovaCond-ExtrabldIt.ttf') format('truetype'); font-weight: 800; font-style: italic; } @font-face { font-family: 'Proxima Nova Rg'; src: url('/css/fonts/ProximaNova-Regular.eot'); src: local('Proxima Nova Regular'), local('ProximaNova-Regular'), url('/css/fonts/ProximaNova-Regular.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNova-Regular.woff') format('woff'), url('/css/fonts/ProximaNova-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Proxima Nova Lt'; src: url('/css/fonts/ProximaNova-Semibold.eot'); src: local('Proxima Nova Semibold'), local('ProximaNova-Semibold'), url('/css/fonts/ProximaNova-Semibold.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNova-Semibold.woff') format('woff'), url('/css/fonts/ProximaNova-Semibold.ttf') format('truetype'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Proxima Nova ExCn Th'; src: url('/css/fonts/ProximaNovaExCn-Thin.eot'); src: local('Proxima Nova Extra Condensed Thin'), local('ProximaNovaExCn-Thin'), url('/css/fonts/ProximaNovaExCn-Thin.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaExCn-Thin.woff') format('woff'), url('/css/fonts/ProximaNovaExCn-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; } @font-face { font-family: 'Proxima Nova Cn Lt'; src: url('/css/fonts/ProximaNovaCond-Semibold.eot'); src: local('Proxima Nova Condensed Semibold'), local('ProximaNovaCond-Semibold'), url('/css/fonts/ProximaNovaCond-Semibold.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaCond-Semibold.woff') format('woff'), url('/css/fonts/ProximaNovaCond-Semibold.ttf') format('truetype'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Proxima Nova ExCn Lt'; src: url('/css/fonts/ProximaNovaExCn-SemiboldIt.eot'); src: local('Proxima Nova Extra Condensed Semibold Italic'), local('ProximaNovaExCn-SemiboldIt'), url('/css/fonts/ProximaNovaExCn-SemiboldIt.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaExCn-SemiboldIt.woff') format('woff'), url('/css/fonts/ProximaNovaExCn-SemiboldIt.ttf') format('truetype'); font-weight: 600; font-style: italic; } @font-face { font-family: 'Proxima Nova ExCn Lt'; src: url('/css/fonts/ProximaNovaExCn-Semibold.eot'); src: local('Proxima Nova Extra Condensed Semibold'), local('ProximaNovaExCn-Semibold'), url('/css/fonts/ProximaNovaExCn-Semibold.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaExCn-Semibold.woff') format('woff'), url('/css/fonts/ProximaNovaExCn-Semibold.ttf') format('truetype'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Proxima Nova Th'; src: url('/css/fonts/ProximaNova-ThinIt.eot'); src: local('Proxima Nova Thin Italic'), local('ProximaNova-ThinIt'), url('/css/fonts/ProximaNova-ThinIt.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNova-ThinIt.woff') format('woff'), url('/css/fonts/ProximaNova-ThinIt.ttf') format('truetype'); font-weight: 100; font-style: italic; } @font-face { font-family: 'Proxima Nova Cn Th'; src: url('/css/fonts/ProximaNovaCond-Thin.eot'); src: local('Proxima Nova Condensed Thin'), local('ProximaNovaCond-Thin'), url('/css/fonts/ProximaNovaCond-Thin.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaCond-Thin.woff') format('woff'), url('/css/fonts/ProximaNovaCond-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; } @font-face { font-family: 'Proxima Nova Cn Rg'; src: url('/css/fonts/ProximaNovaCond-RegularIt.eot'); src: local('Proxima Nova Condensed Regular Italic'), local('ProximaNovaCond-RegularIt'), url('/css/fonts/ProximaNovaCond-RegularIt.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaCond-RegularIt.woff') format('woff'), url('/css/fonts/ProximaNovaCond-RegularIt.ttf') format('truetype'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Proxima Nova ExCn Th'; src: url('/css/fonts/ProximaNovaExCn-ThinIt.eot'); src: local('Proxima Nova Extra Condensed Thin Italic'), local('ProximaNovaExCn-ThinIt'), url('/css/fonts/ProximaNovaExCn-ThinIt.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaExCn-ThinIt.woff') format('woff'), url('/css/fonts/ProximaNovaExCn-ThinIt.ttf') format('truetype'); font-weight: 100; font-style: italic; } @font-face { font-family: 'Proxima Nova Lt'; src: url('/css/fonts/ProximaNova-SemiboldIt.eot'); src: local('Proxima Nova Semibold Italic'), local('ProximaNova-SemiboldIt'), url('/css/fonts/ProximaNova-SemiboldIt.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNova-SemiboldIt.woff') format('woff'), url('/css/fonts/ProximaNova-SemiboldIt.ttf') format('truetype'); font-weight: 600; font-style: italic; } @font-face { font-family: 'Proxima Nova Rg'; src: url('/css/fonts/ProximaNova-RegularIt.eot'); src: local('Proxima Nova Regular Italic'), local('ProximaNova-RegularIt'), url('/css/fonts/ProximaNova-RegularIt.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNova-RegularIt.woff') format('woff'), url('/css/fonts/ProximaNova-RegularIt.ttf') format('truetype'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Proxima Nova Cn Th'; src: url('/css/fonts/ProximaNovaCond-Extrabld.eot'); src: local('Proxima Nova Condensed Extrabold'), local('ProximaNovaCond-Extrabld'), url('/css/fonts/ProximaNovaCond-Extrabld.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaCond-Extrabld.woff') format('woff'), url('/css/fonts/ProximaNovaCond-Extrabld.ttf') format('truetype'); font-weight: 800; font-style: normal; } @font-face { font-family: 'Proxima Nova ExCn Th'; src: url('/css/fonts/ProximaNovaExCn-ExtrabldIt.eot'); src: local('Proxima Nova Extra Condensed Extrabold Italic'), local('ProximaNovaExCn-ExtrabldIt'), url('/css/fonts/ProximaNovaExCn-ExtrabldIt.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaExCn-ExtrabldIt.woff') format('woff'), url('/css/fonts/ProximaNovaExCn-ExtrabldIt.ttf') format('truetype'); font-weight: 800; font-style: italic; } @font-face { font-family: 'Proxima Nova ExCn Bl'; src: url('/css/fonts/ProximaNovaExCn-BlackIt.eot'); src: local('Proxima Nova Extra Condensed Black Italic'), local('ProximaNovaExCn-BlackIt'), url('/css/fonts/ProximaNovaExCn-BlackIt.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaExCn-BlackIt.woff') format('woff'), url('/css/fonts/ProximaNovaExCn-BlackIt.ttf') format('truetype'); font-weight: 900; font-style: italic; } @font-face { font-family: 'Proxima Nova ExCn Lt'; src: url('/css/fonts/ProximaNovaExCn-LightIt.eot'); src: local('Proxima Nova Extra Condensed Light Italic'), local('ProximaNovaExCn-LightIt'), url('/css/fonts/ProximaNovaExCn-LightIt.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaExCn-LightIt.woff') format('woff'), url('/css/fonts/ProximaNovaExCn-LightIt.ttf') format('truetype'); font-weight: 300; font-style: italic; } @font-face { font-family: 'Proxima Nova Cn Th'; src: url('/css/fonts/ProximaNovaCond-ThinIt.eot'); src: local('Proxima Nova Condensed Thin Italic'), local('ProximaNovaCond-ThinIt'), url('/css/fonts/ProximaNovaCond-ThinIt.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaCond-ThinIt.woff') format('woff'), url('/css/fonts/ProximaNovaCond-ThinIt.ttf') format('truetype'); font-weight: 100; font-style: italic; } @font-face { font-family: 'Proxima Nova ExCn Lt'; src: url('/css/fonts/ProximaNovaExCn-Light.eot'); src: local('Proxima Nova Extra Condensed Light'), local('ProximaNovaExCn-Light'), url('/css/fonts/ProximaNovaExCn-Light.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaExCn-Light.woff') format('woff'), url('/css/fonts/ProximaNovaExCn-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Proxima Nova Cn Rg'; src: url('/css/fonts/ProximaNovaCond-BoldIt.eot'); src: local('Proxima Nova Condensed Bold Italic'), local('ProximaNovaCond-BoldIt'), url('/css/fonts/ProximaNovaCond-BoldIt.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaCond-BoldIt.woff') format('woff'), url('/css/fonts/ProximaNovaCond-BoldIt.ttf') format('truetype'); font-weight: bold; font-style: italic; } @font-face { font-family: 'Proxima Nova ExCn Th'; src: url('/css/fonts/ProximaNovaExCn-Extrabld.eot'); src: local('Proxima Nova Extra Condensed Extrabold'), local('ProximaNovaExCn-Extrabld'), url('/css/fonts/ProximaNovaExCn-Extrabld.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaExCn-Extrabld.woff') format('woff'), url('/css/fonts/ProximaNovaExCn-Extrabld.ttf') format('truetype'); font-weight: 800; font-style: normal; } @font-face { font-family: 'Proxima Nova ExCn Rg'; src: url('/css/fonts/ProximaNovaExCn-BoldIt.eot'); src: local('Proxima Nova Extra Condensed Bold Italic'), local('ProximaNovaExCn-BoldIt'), url('/css/fonts/ProximaNovaExCn-BoldIt.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaExCn-BoldIt.woff') format('woff'), url('/css/fonts/ProximaNovaExCn-BoldIt.ttf') format('truetype'); font-weight: bold; font-style: italic; } @font-face { font-family: 'Proxima Nova Bl'; src: url('/css/fonts/ProximaNova-Black.eot'); src: local('Proxima Nova Black'), local('ProximaNova-Black'), url('/css/fonts/ProximaNova-Black.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNova-Black.woff') format('woff'), url('/css/fonts/ProximaNova-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; } @font-face { font-family: 'Proxima Nova Rg'; src: url('/css/fonts/ProximaNova-Bold.eot'); src: local('Proxima Nova Bold'), local('ProximaNova-Bold'), url('/css/fonts/ProximaNova-Bold.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNova-Bold.woff') format('woff'), url('/css/fonts/ProximaNova-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Proxima Nova ExCn Rg'; src: url('/css/fonts/ProximaNovaExCn-Bold.eot'); src: local('Proxima Nova Extra Condensed Bold'), local('ProximaNovaExCn-Bold'), url('/css/fonts/ProximaNovaExCn-Bold.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaExCn-Bold.woff') format('woff'), url('/css/fonts/ProximaNovaExCn-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Proxima Nova Th'; src: url('/css/fonts/ProximaNovaT-Thin.eot'); src: local('Proxima Nova Thin'), local('ProximaNovaT-Thin'), url('/css/fonts/ProximaNovaT-Thin.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaT-Thin.woff') format('woff'), url('/css/fonts/ProximaNovaT-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; } @font-face { font-family: 'Proxima Nova Rg'; src: url('/css/fonts/ProximaNova-BoldIt.eot'); src: local('Proxima Nova Bold Italic'), local('ProximaNova-BoldIt'), url('/css/fonts/ProximaNova-BoldIt.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNova-BoldIt.woff') format('woff'), url('/css/fonts/ProximaNova-BoldIt.ttf') format('truetype'); font-weight: bold; font-style: italic; } @font-face { font-family: 'Proxima Nova Cn Rg'; src: url('/css/fonts/ProximaNovaCond-Bold.eot'); src: local('Proxima Nova Condensed Bold'), local('ProximaNovaCond-Bold'), url('/css/fonts/ProximaNovaCond-Bold.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaCond-Bold.woff') format('woff'), url('/css/fonts/ProximaNovaCond-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Proxima Nova ExCn Bl'; src: url('/css/fonts/ProximaNovaExCn-Black.eot'); src: local('Proxima Nova Extra Condensed Black'), local('ProximaNovaExCn-Black'), url('/css/fonts/ProximaNovaExCn-Black.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaExCn-Black.woff') format('woff'), url('/css/fonts/ProximaNovaExCn-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; } @font-face { font-family: 'Proxima Nova ExCn Rg'; src: url('/css/fonts/ProximaNovaExCn-RegularIt.eot'); src: local('Proxima Nova Extra Condensed Regular Italic'), local('ProximaNovaExCn-RegularIt'), url('/css/fonts/ProximaNovaExCn-RegularIt.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaExCn-RegularIt.woff') format('woff'), url('/css/fonts/ProximaNovaExCn-RegularIt.ttf') format('truetype'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Proxima Nova Cn Lt'; src: url('/css/fonts/ProximaNovaCond-Light.eot'); src: local('Proxima Nova Condensed Light'), local('ProximaNovaCond-Light'), url('/css/fonts/ProximaNovaCond-Light.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaCond-Light.woff') format('woff'), url('/css/fonts/ProximaNovaCond-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Proxima Nova Th'; src: url('/css/fonts/ProximaNova-ExtrabldIt.eot'); src: local('Proxima Nova Extrabold Italic'), local('ProximaNova-ExtrabldIt'), url('/css/fonts/ProximaNova-ExtrabldIt.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNova-ExtrabldIt.woff') format('woff'), url('/css/fonts/ProximaNova-ExtrabldIt.ttf') format('truetype'); font-weight: 800; font-style: italic; } @font-face { font-family: 'Proxima Nova Cn Bl'; src: url('/css/fonts/ProximaNovaCond-BlackIt.eot'); src: local('Proxima Nova Condensed Black Italic'), local('ProximaNovaCond-BlackIt'), url('/css/fonts/ProximaNovaCond-BlackIt.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaCond-BlackIt.woff') format('woff'), url('/css/fonts/ProximaNovaCond-BlackIt.ttf') format('truetype'); font-weight: 900; font-style: italic; } @font-face { font-family: 'Proxima Nova ExCn Rg'; src: url('/css/fonts/ProximaNovaExCn-Regular.eot'); src: local('Proxima Nova Extra Condensed Regular'), local('ProximaNovaExCn-Regular'), url('/css/fonts/ProximaNovaExCn-Regular.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaExCn-Regular.woff') format('woff'), url('/css/fonts/ProximaNovaExCn-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Proxima Nova Lt'; src: url('/css/fonts/ProximaNova-Light.eot'); src: local('Proxima Nova Light'), local('ProximaNova-Light'), url('/css/fonts/ProximaNova-Light.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNova-Light.woff') format('woff'), url('/css/fonts/ProximaNova-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Proxima Nova Cn Lt'; src: url('/css/fonts/ProximaNovaCond-SemiboldIt.eot'); src: local('Proxima Nova Condensed Semibold Italic'), local('ProximaNovaCond-SemiboldIt'), url('/css/fonts/ProximaNovaCond-SemiboldIt.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNovaCond-SemiboldIt.woff') format('woff'), url('/css/fonts/ProximaNovaCond-SemiboldIt.ttf') format('truetype'); font-weight: 600; font-style: italic; } @font-face { font-family: 'Proxima Nova Bl'; src: url('/css/fonts/ProximaNova-BlackIt.eot'); src: local('Proxima Nova Black Italic'), local('ProximaNova-BlackIt'), url('/css/fonts/ProximaNova-BlackIt.eot?#iefix') format('embedded-opentype'), url('/css/fonts/ProximaNova-BlackIt.woff') format('woff'), url('/css/fonts/ProximaNova-BlackIt.ttf') format('truetype'); font-weight: 900; font-style: italic; } @font-face { font-family: 'Frutiger Neue LT W1G Light'; src: url('/css/fonts/FrutigerNeueLTW1G-Light.eot'); src: local('FrutigerNeueLTW1G-Light'), local('FrutigerNeueLTW1G-Light'), url('/css/fonts/FrutigerNeueLTW1G-Light.eot?#iefix') format('embedded-opentype'), url('/css/fonts/FrutigerNeueLTW1G-Light.woff') format('woff'), url('/css/fonts/FrutigerNeueLTW1G-Light.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Halvar'; src: url('/css/fonts/HalvarBreit-Blk.woff') format('woff'); font-weight: 800; font-style: normal; } @font-face { font-family: 'Halvar'; src: url('/css/fonts/HalvarBreit-Bd.woff') format('woff'); font-weight: 800; font-style: normal; } /* End */ /* Start:/css/owl.carousel.min.css?15664749453351*/ /** * Owl Carousel v2.3.4 * Copyright 2013-2018 David Deutsch * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE */ .owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(/css/owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%} /* End */ /* Start:/css/owl.theme.default.min.css?15664749451013*/ /** * Owl Carousel v2.3.4 * Copyright 2013-2018 David Deutsch * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE */ .owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}.owl-theme .owl-nav{margin-top:10px}.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791} /* End */ /* Start:/css/master.css?175258419659194*/ /*Базовые-стили*/ html, body { width:100%; font-size: 0.9em; box-sizing: border-box; font-family: 'Montserrat', sans-serif; padding:0; margin:0; } img { user-select: none; object-fit: cover; object-position: 100% 50%; max-width: 100%; vertical-align: middle; } a:hover img { opacity: 0.9; } * { box-sizing: border-box; } .preloader { display: none; } body { min-height: 100%; overflow-x: hidden; overflow-y: scroll; } .short-divider { width: 50px; height: 3px; background: #e5e5e5 none repeat; margin-top: 40px; margin-bottom: 40px; } /*Типографика и формы*/ .hero { display: inline-block; text-decoration: none; font-size: 8rem; background-color: transparent; color: #ffffff; } .hero:hover { color: transparent; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #ffffff; } .text-block:hover .digital-hover { visibility:visible; opacity:1; } .text-block:hover .branding-hover { visibility:visible; opacity:1; } .text-block:hover .creative-hover { visibility:visible; opacity:1; } .hover-text { line-height: 1.5; } .hover-text.title-hover { margin-bottom: 30px; font-size: 1.8em; letter-spacing: 0.5px; } .digital-hover { width: 100vw; height: 100vh; position: absolute; top: 0; left: -50px; margin: auto; z-index: -1; background-color: #00000080; visibility:hidden; opacity:0; transition:opacity 0.3s ease-in-out; display: flex; justify-content: center; align-items: flex-end;; flex-direction: column; } .branding-hover { width: 100vw; height: 100vh; position: absolute; top: 0; left: -50px; margin: auto; z-index: -1; background-color: #00000080; visibility:hidden; opacity:0; transition:opacity 0.3s ease-in-out; display: flex; justify-content: center; align-items: flex-end; flex-direction: column; } .creative-hover { width: 100vw; height: 100vh; position: absolute; top: 0; left: -50px; margin: auto; z-index: -1; background-color: #00000080; visibility:hidden; opacity:0; transition:opacity 0.3s ease-in-out; display: flex; justify-content: center; align-items: flex-end; flex-direction: column; } .hover-content { margin-left: 300px; width: 550px; height: 500px; color: #ffffff; opacity: 1; display: inline-block; justify-content: center; align-items: center; align-self: center; position: absolute; } h1 { font-weight: 700; letter-spacing: 3px; line-height: 1.2; } h2 { font-weight: 700; letter-spacing: 1px; } h3 { line-height: 1; font-weight: 600; font-size: 2.8em; } h4 { line-height: 1.2; font-weight: 600; font-size:1.5em; margin: 0; } p { line-height: 1.4; font-weight: 300; letter-spacing: 1px; } a { text-decoration:none; outline:none; color:#000000; background-color: transparent; } b, strong { font-weight: bolder; } button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } button, input { /* 1 */ overflow: visible; } button, select { /* 1 */ text-transform: none; } textarea { overflow: auto; } li { display: block; text-decoration: none; } ul { padding: 0; } .white-title:hover { text-decoration: underline; } .client-title { font-size: 4.5em; color: #aeaeae; letter-spacing: 0.5px; margin-top: 0px; margin-bottom: 0px; line-height: 1; cursor: pointer; transition-delay: .08s; float: left; } .client-title:hover, .client-title:hover a { color: #000; text-decoration: none; } .client-title a {color: #aeaeae} /*Header*/ .b-header { font-family: 'Montserrat', sans-serif; position: absolute; left: 0; right: 0; top: 0; display: flex; width: 100%; margin: 0 auto; padding-top: 30px; padding-left: 50px; padding-bottom: 50px; flex-direction: row; justify-content: center; flex-wrap: nowrap; align-items: center; align-content: center; z-index: 9999; } .b-main-menu { display: flex; width: 50%; margin-left: auto; margin-right: auto; justify-content: center; align-items: center; flex: 0 0 auto; color: #ffffff; background-color: transparent; } .e-logo { flex: 0 auto; margin-left: 50px; display: inline-block; max-width: 100%; } .e-phone { font-weight: 600; text-decoration: none; text-transform: none; font-size: 1em; } .e-phone_inner { font-weight: 600; text-decoration: none; text-transform: none; color: #000; font-size: 1em; background-color: transparent; } .b-phone { display: inline-block; max-width: 100%; margin-right: 50px; flex: 0 auto; text-decoration: none; color: #ffffff; } .b-phone.inner { color: #000; } .e-menuitem { position: relative; display: flex; margin-right: 40px; flex-direction: column; justify-content: center; flex-wrap: nowrap; text-decoration: none; font-size: 1rem; } .e-menuitem:hover { } .hero-slide { width: 100%; height: 100vh; min-height: 540px; background-color: #000000; background-size: auto; box-sizing: border-box; overflow: hidden; color: transparent; position: relative; } .hero-bg { width: 100%; height: 100%; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; opacity: 0.7; position: relative; } .menu-link { flex: 0 auto; text-decoration: none; text-transform: none; color: #ffffff; background-color: transparent; } .e-menuitem { border-bottom: solid 1px transparent; } .e-menuitem:hover { border-bottom: solid 1px #aeaeae; } .menu-link_inner { flex: 0 auto; text-decoration: none; text-transform: none; color: #000; background-color: transparent } .brief-link { flex: 0 auto; text-decoration: none; text-transform: none; color: #ffffff; background-color: transparent; } /*Первый слайд*/ .b-left { position: absolute; left: 50px; top: auto; bottom: auto; z-index: 10; display: flex; width: 200px; height: 100%; flex-wrap: wrap; align-items: center; align-content: center; } .e-herotxt { display: flex; width: 100%; height: 40%; flex-direction: column; justify-content: space-around; align-items: flex-start; } .text-block { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; flex: 0 0 auto; color: #ffffff; background-color: transparent; } .b-right { position: absolute; top: 0; bottom: 0; right: 50px; z-index: 10; display: none; width: 200px; height: 100%; justify-content: flex-end; align-items: center; } .showreel { position: relative; display: flex; width: 100px; height: 100px; justify-content: center; align-items: center; background-color: #000; color: transparent; } .e-brief { position: absolute; left: 0; right: 0; bottom: 50px; display: flex; width: 100%; align-items: center; z-index: 100; } .brief { display: flex; align-items: center; color: #ffffff; background-color: transparent; font-family: 'Montserrat', sans-serif; text-decoration: none; } .brief-icon { display: flex; width: 25px; height: 25px; margin-right: 20px; justify-content: center; box-sizing: border-box; background-image: url("/css/../images/w_brief.svg"); background-position: center; background-size: cover; } .b-social { display: flex; position: absolute; left: 0; right: 0; bottom: 50px; width: 100%; align-items: center; z-index: 100; flex: 1; justify-content: flex-end; margin-right: 50px; } .social { margin-right: 20px; text-decoration: none; font-size: 0.8em; color: #ffffff; } /*Контент*/ .c-content { display: block; width: 100%; height: 100%; align-self: flex-end; min-height: 900px; min-height: calc(100vh - 265px); } .case-slide { position: relative; display: block; width: 100%; margin-right: auto; margin-left: auto; flex-direction: row; justify-content: space-between; flex-wrap: wrap; align-items: baseline; align-content: space-around; box-sizing: border-box; } .container { display: block; width: 100%; max-width: 1600px; margin: auto; flex: 0 auto; box-sizing: border-box; } .container.inner { display: block; width: 100%; flex: 0 auto; box-sizing: border-box; margin-left: auto; margin-right: auto; padding-left: 50px; padding-right: 50px; } .container.inner-service { display: block; width: 100%; flex: 0 auto; box-sizing: border-box; margin-left: auto; margin-right: auto; padding-left: 50px; padding-right: 50px; } .case-grid { display: grid; width: 95%; height: auto; max-width: 1600px; min-width: 890px; margin-top: 100px; margin-bottom: 50px; margin-left: auto; margin-right: auto; flex-direction: row; justify-content: center; justify-items: stretch; flex-wrap: nowrap; align-items: stretch; align-content: space-around; flex: 0 auto; grid-auto-columns: 1fr; grid-column-gap: 50px; grid-row-gap: 50px; grid-template-columns: minmax(250px, 375px) minmax(250px, 375px) minmax(250px, 650px); grid-template-rows: minmax(250px, 650px) minmax(250px, 375px) minmax(250px, 375px); box-sizing: border-box; } .case-grid.cases { display: grid; width: 95%; height: auto; max-width: 1600px; min-width: 890px; margin: 50px auto; flex-direction: row; justify-content: center; justify-items: stretch; flex-wrap: nowrap; align-items: stretch; align-content: space-around; flex: 0 auto; grid-auto-columns: 1fr; grid-column-gap: 50px; grid-row-gap: 50px; grid-template-columns: minmax(250px, 650px) minmax(250px, 375px) minmax(250px, 375px); grid-template-rows: minmax(250px, 650px) minmax(250px, 375px); box-sizing: border-box; } #case-8 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; align-self: stretch; justify-self: stretch; } #case-9 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } #case-10 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } #case-11 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3; } #case-12 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; } #case-13 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; align-self: end; } #case-1 { align-self: auto; justify-self: auto; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; } .case-4 { display: flex; height: 100%; max-height: 100%; max-width: 100%; min-height: 270px; min-width: 270px; padding: 30px; flex-direction: column; align-self: auto; background-color: #ebebeb; cursor: pointer; } .case-1 { position: relative; display: flex; max-height: 650px; max-width: 375px; min-height: 270px; min-width: 270px; justify-content: space-between; align-items: stretch; background-color: #ECECEC; color: transparent; padding: 30px; box-sizing: border-box; transform-style: preserve-3d; } .case-1:hover { box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2); } .case-1.full { height: 100%; align-self: end; } .case-2.full { align-self: auto; } #case-2 { justify-self: auto; align-self: auto; grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; } .case-2 { position: relative; display: flex; max-height: 375px; max-width: 375px; min-height: 270px; min-width: 270px; justify-content: space-between; align-items: stretch; background-color: #ECECEC; color: transparent; padding: 30px; box-sizing: border-box; transform-style: preserve-3d; } .case-2:hover { box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2); } #case-3 { align-self: auto; justify-self: auto; grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } .case-3 { position: relative; display: flex; max-height: 650px; max-width: 650px; min-height: 250px; min-width: 250px; justify-content: space-between; align-items: stretch; background-color: #ECECEC; color: transparent; padding: 30px; box-sizing: border-box; transform-style: preserve-3d; } .case-3:hover { box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2); } .case-4:hover { box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2); } #case-4 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3; align-self: auto; justify-self: auto; } #case-12 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; } #case-5 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; justify-self: auto; align-self: end; } #case-6 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 4; align-self: auto; justify-self: auto; } .case-6 { position: relative; display: flex; height: 100%; max-height: 100%; max-width: 100%; min-height: 270px; min-width: 270px; flex-direction: column; background-color: #ECECEC; color: transparent; padding: 30px; box-sizing: border-box; transform-style: preserve-3d; } .case-6:hover { box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2); } .case-6.full { position: relative; max-width: 100%; min-width: 270px; align-self: auto; justify-self: auto; transform-style: preserve-3d; } .case-6.full:hover { box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2); } #case-7 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; justify-self: auto; align-self: auto; } .ghost-button { width: 300px; height: 50px; align-items: center; text-align: center; margin-left: auto; margin-right: auto; margin-top: 50px; margin-bottom: 100px; cursor: pointer; } .text-button:hover { color: #000000; z-index: 1000; } .text-button { text-decoration: none; font-size: 1.2em; color: #bababa; background-color: transparent; text-transform: uppercase; text-align: center; } .clients-slide { display: block; box-sizing: border-box; } .clients { margin-left: 50px; margin-right: 50px; box-sizing: border-box; } .e-title { display: flex; flex-direction: column; align-items: flex-start; z-index: 100; } .title { text-decoration: none; color: #000000; background-color: transparent; top: 0px; } .title-white { text-decoration: none; color: #ffffff; } .e-clients { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; text-align: right; } .e-client { position: relative; display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; font-weight: 800; text-align: left; width: 100%; } .b-description { position: relative; display: flex; width: 100%; margin-bottom: 8px; flex-direction: row; justify-content: flex-end; align-items: flex-start; flex: 0 auto; } .clients-slide .b-description {justify-content: flex-start} .description { margin-bottom: 10px; margin-top: 3px; margin-left: 20px; float: left; text-align: left; font-weight: 300; align-items: flex-start; } .title-outline { -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #000000; color: #ffffff; font-size: 4em; line-height: 0.6; } .digital-showreel { margin-top: 30px; position: relative; display: flex; width: 100%; align-items: center; z-index: 100; font-weight: 600; } .d-showreel { text-decoration: none; display: flex; } .showreel-icon { display: flex; width: 25px; height: 25px; margin-right: 20px; justify-content: center; box-sizing: border-box; background-image: url("/css/../images/play.svg"); background-position: center; background-size: cover; cursor: pointer; animation: tremor 1s infinite ease-in-out; margin-top: -10px; } .showreel-icon.white-icon { display: flex; width: 34px; height: 30px; background-image: url("/css/../images/play_w.svg"); background-position: left; cursor: pointer; } .brief-link.services { color: #00000060; cursor: pointer; } .footer { margin-left: 30px; margin-right: 30px; } .service-blocks { display: grid; align-items: flex-start; grid-template-columns: 25% 25% 25% 25%; width: 100%; margin-top: 50px; margin-bottom: 50px; } .arrow-icon { width: 24px; height: 24px; margin-top: 30px; } .service-link { text-decoration: none; color: #000000; } .service-once { width: 100%; padding-right: 25px; cursor: pointer; } .service-once:hover .arrow-icon { opacity: 0.5; cursor: pointer; } .service-blocks .service-link:last-child .service-once {padding-right: 0} .contacts { z-index: 100; } .case-inner { position: relative; display: block; flex-direction: column; align-items: flex-start; flex: auto; } .case-pic_1 { margin-top: 10px; height: 90%; background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; overflow: hidden; transform: translateZ(20px); } .case-pic_2 { margin-top: 50px; height: 80%; background-position: 50% 100%; background-size: contain; background-repeat: no-repeat; overflow: hidden; transform: translateZ(20px); } .case-pic_3 { margin-top: 10px; height: 90%; background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; overflow: hidden; transform: translateZ(20px); } .case-pic_4 { height: 90%; background-position: 50% 100%; background-size: contain; background-repeat: no-repeat; overflow: hidden; transform: translateZ(20px); } .case-pic_5 { height: 90%; background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; overflow: hidden; transform: translateZ(20px); } .case-pic_6 { margin-top: 50px; position: relative; height: 100%; min-height: 650px; background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; z-index: 10; overflow: hidden; box-sizing: border-box; transform: translateZ(20px); } .case-pic_7 { position: relative; margin-top: -40px; right: 0; margin-left: 50px; height: 100%; min-height: 380px; background-position: 100% 50%; background-repeat: no-repeat; background-size: contain; z-index: 1000; overflow: hidden; box-sizing: border-box; transform: translateZ(20px); } .case-pic_8 { position: absolute; left: 0px; right: 0px; bottom: 0px; height: 90%; min-height: 380px; background-position: 50% 50% ; background-repeat: no-repeat; background-size: contain; z-index: 1000; overflow: hidden; box-sizing: border-box; transform: translateZ(20px); } .case-pic_9 { position: absolute; left: 0px; right: 0px; bottom: 0px; height: 90%; min-height: 380px; background-position: 50% 50% ; background-repeat: no-repeat; background-size: contain; z-index: 1000; overflow: hidden; box-sizing: border-box; transform: translateZ(20px); } .case-pic_10 { position: absolute; left: 0px; right: 0px; bottom: 0px; height: 90%; min-height: 380px; background-position: 50% 70% ; background-repeat: no-repeat; background-size: contain; z-index: 1000; overflow: hidden; box-sizing: border-box; transform: translateZ(20px); } .case-pic_11 { height: 80%; background-repeat: no-repeat; background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; margin-top: 30px; box-sizing: border-box; transform: translateZ(20px); } .case-pic_12 { height: 80%; background-repeat: no-repeat; background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; margin-top: 30px; box-sizing: border-box; transform: translateZ(20px); } .case-pic_13 { height: 80%; background-repeat: no-repeat; background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; box-sizing: border-box; transform: translateZ(20px); margin-top: 30px; } .case-link { text-decoration: none; } .divider { width: 100%; height: 1px; background-color: #00000030; margin-bottom: 30px; } .footer { } .footer.contacts { bottom: 0; } .e-footer { display: flex; justify-content: flex-start; align-items: flex-start; margin-bottom: 30px; } .footer-l { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; flex: 1; box-sizing: border-box; } .footer-cl { display: flex; flex-direction: column; align-items: flex-start; flex: 1; box-sizing: border-box; } .footer-cr { display: flex; align-items: flex-start; flex: 1; box-sizing: border-box; } .footer-r { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; box-sizing: border-box; } .footer-logo { display: flex; align-items: flex-start; flex: 1; box-sizing: border-box; } .footer-text { font-size: 0.9em; margin-left: 20px; align-items: flex-start; margin-top: 0px; line-height: 1; float: left; } .social-footer { color: #00000060; margin-right: 20px; text-decoration: none; } .mail { font-size: 1em; margin-top: 0; } .phone { font-size: 1em; margin-top: 0; } .adress { font-size: 1em; margin-top: 0; } .footer-button { margin-top: 120px; margin-bottom: 50px; text-decoration: none; font-size: 1.5em; color: #00000060; background-color: transparent; cursor: pointer; } .footer-button:hover { color: #000000; } .mobile-logo { display: none; z-index: 2; } .mobile-header { display: none; } .m-logo { } .call-back { display: none; } .agency-header { position: relative; padding-top: 140px; } .agency-content { max-width: 1600px; margin-left: auto; margin-right: auto; } .agency-title { font-size: 5em; font-weight: 600; line-height: 1; margin-bottom: 30px; letter-spacing: 1px; } .service-title { font-size: 5em; font-weight: 600; line-height: 1; margin-bottom: 30px; letter-spacing: 1px; } .short-divider { width: 50px; height: 3px; background: #e5e5e5 none repeat; margin-top: 40px; margin-bottom: 40px; } .agency-description { width: 50%; line-height: 1.5; } .sub-description { margin-top: 20px; margin-bottom: 50px; color: #00000060; } .service-link { display: contents; } .agency-pic { margin-top: 50px; margin-bottom: 80px; display: block; margin-left: auto; margin-right: auto; width: 100%; } .pic-full { margin-left: auto; margin-right: auto; width: 100%; } .animated-banner { margin-left: auto; margin-right: auto; width: 100%; height: 100%; max-height: 900px; } .header-auchan { position: absolute; width: 100%; min-height: 300px; } .banner-el { padding-top: 100px; } .reveal-logo { margin-left: 5%; width: 50%; position: absolute; max-width: 280px; float: left; bottom: 200px; min-width: 180px; padding-bottom: 30px; } .reveal-imac { position: relative; right: 0; bottom: 0; min-width: 287px; float: right; width: 100%; max-width: 730px; } .agency-about { margin-bottom: 50px; } .about-agency { font-size: 1.2em; font-weight: 400; line-height: 1.6; text-decoration: none; letter-spacing: 0.5px; } .about-product { font-size: 1.1em; font-weight: 600; line-height: 1.6; text-align: center; } .inner-fullwidth.white{ background-color: #ffffff; } .inner-fullwidth { width: 100%; padding-top: 100px; padding-bottom: 100px; background-color: #15141a; } .white-title { color: #ffffff; line-height: 1.4; } .agency-form { width: 100%; margin-top: 50px; } .submit-button { width: 200px; background-color: transparent; line-height: 2; font-weight: 600; font-size: 1.5em; margin: 0; cursor: pointer; } .mail-form { margin-bottom: 30px; max-width: 600px; display: block; } #detail-case-footer .agency-form { display: flex; justify-content: center; } #detail-case-footer .mail-form { max-width: 250px; margin-bottom: 0; } #detail-case-footer .mail-button { margin-left: 50px; } #detail-case-footer { padding-bottom: 0; } #case-next { display: flex; flex-wrap: wrap; align-items: center; margin: 100px auto 0; width: 95%; max-width: 900px; background: #fff; border-radius: 5px 5px 0 0; color: #000; padding: 30px; font-size: 1rem; } #case-next > div {width: 50%} #case-next > .left {text-align: left} #case-next > .right {text-align: right} #case-next p { font-weight: 400; letter-spacing: 0; margin: 0; } #case-next h4 { font-size: 1.875rem; font-weight: 700; letter-spacing: 0; margin: 5px 0 0; } :focus{outline: none;} input { -webkit-appearance: email; background-color: transparent; -webkit-rtl-ordering: logical; cursor: text; border: 0; padding: 7px 0; border-bottom: 2px solid #ffffff40; box-sizing: border-box; background-color: transparent !important; width: 40%; color: #ffffff; font-size: 1.2em; } input:hover { border-bottom: 2px solid #ffffff90; transition: all 0.4s; } .agency-showreel { width: 100%; padding-top: 50px; padding-bottom: 150px; } .play-video { } .play-icon { width: 50px; height: 50px; opacity: 0.7; } .play-icon:hover { opacity: 1; transition: all 0.2s; } .mail-button { line-height: 1; font-weight: 600; font-size:1.5em; background-color: transparent; color: #ffffff; left: 0; bottom: 0; height: 50px; border: 0; font-size: 1.2em; box-sizing: border-box; display: block; border-bottom: 3px solid #ffffff60; padding: 0; cursor: pointer; } .mail-button:hover { border-bottom: 3px solid #ffffff; transition: all 0.2s; } .cases-filter { position: relative; right: 0; top: 0; float: right; height: 150px; margin-top: -160px; box-sizing: border-box; text-align: right; display: flex; } .filter-link { color: #00000060; margin-left: 15px; text-decoration: none; font-size: 1em; } .filter-link.active { color: #000; text-decoration: none; font-weight: 500; } .filter { width: 100%; display: flex; } .team-pic { margin-bottom: 30px; -webkit-filter: grayscale(100%); filter: grayscale(100%); } .about-agency { margin-bottom: 50px; } .about-agency.half { width: 50%; } .b-team { display: grid; grid-template-columns: repeat( auto-fill, minmax(200px, auto)); grid-gap: 20px } .b-team :after { content: ""; } .team-item { position: relative; object-fit: cover; margin-left: 20px; } #team-item-1 { } .contacts { z-index: 100; width: 100%; margin: 0; bottom: 0; } .contacts-inner { box-sizing: border-box; display: block; height: 100%; } .contacts-l { width: 50%; float: left; min-width: 290px; margin-bottom: 20px; } .contacts-c { width: 50%; float: left; min-width: 290px; } .video-bg { /* Span the full grid */ width: 120%; min-height: 100%; object-fit: cover; opacity: 0.8; background-position: 50% 0%; z-index: -1; } .e-agencygrid { position: relative; display: inline-block; width: 100%; vertical-align: middle; } .agency-grid { position: relative; height: 820px; opacity: 1; margin-bottom: 80px; } .agency-pics_1 { width: 33.33333%; position: absolute; right: 0px; top: 410px; height: 380px; padding-left: 15px; box-sizing: border-box; background-position: 50% 50%; } .agency-pics_2 { width: 33.33333%; position: absolute; right: 0px; top: 0px; height: 380px; padding-left: 15px; box-sizing: border-box; background-position: 50% 50%; } .agency-pics_4 { width: 66.66667%; position: absolute; left: 0px; top: 0px; height: 790px; padding-right: 15px; box-sizing: border-box; background-position: 50% 50%; } .pic-digital { margin-left: auto; margin-right: auto; width: 100%; } .digital-info { margin-top: 30px; margin-bottom: 30px; display: flex; } .digital-l { margin-top: 30px; width: 50%; padding-right: 50px; } .digital-c { margin-top: 30px; width: 33.3333333333%; padding-right: 25px; } .digital-r { margin-top: 30px; width: 50%; padding-left: 25px; } .digital-l.white { color: #ffffff; text-align: center; padding: 0; } .digital-c.white { color: #ffffff; text-align: center; padding: 0; } .digital-r.white { color: #ffffff; text-align: center; padding: 0; } .service-icon { height: 50px; box-sizing: border-box; margin-left: auto; margin-right: auto; margin-bottom: 30px; } .service-txt { width: 70%; margin-left: auto; margin-right: auto; } .project-info { margin: 26px 0 0 0; display: inline-block; color: #000000; } .client-info { float: left; margin-right: 80px; margin-left: 50px; } .client-service { float: left; margin-right: 80px; } .client-site { float: left; margin-right: 80px; } .p-title { line-height: 0.8; font-weight: 500; font-size:1em; } .p-content { margin-top: 10px; line-height: 0.8; font-weight: 700; font-size:1em; color: #000000; } .case-content { margin: 50px 50px; } .inner-fullwidth.garant { background-color: #e8e8e8; position: relative; height: 100%; max-height: 900px; box-sizing: border-box; } .inner-fullwidth.brils { background-color: #DAF4FF; position: relative; height: 100%; max-height: 900px; box-sizing: border-box; } .case-header{ } .garant-fullpic { margin-left: auto; margin-right: auto; margin-bottom: 30px; width: 100%; box-sizing: border-box; } .footer-contacts{ width: 100%; text-align: center; } .case-form { width: 100%; margin-top: 50px; text-align: -webkit-center; } .g-typo { width: 100%; display: flex; } .typo-l { margin-top: 50px; width: 50%; border-left: 2px solid #ff7151; border-right: 2px solid #ff7151; margin-bottom: 50px; } .typo-r { margin-top: 50px; width: 50%; border-right: 2px solid #ff7151; margin-bottom: 50px; } .g-typo-title { width: 100%; text-align: right; margin-bottom: 10px; padding-right: 30px; } .g-typo-subtitle { width: 100%; text-align: right; padding-right: 30px; } .g-typo-title.bold { font-weight: 700; } .g-typo-subtitle.bold { font-weight: 700; } .g-typo-alphabet.bold { font-weight: 700; } .g-typo-letters { font-size: 6em; margin-top: 40px; margin-bottom: 40px; text-align: center; } .g-colors { width: 100%; display: flex; height: 400px; } .colors-l { width: 50%; margin-bottom: 50px; display: flex; } .colors-r { width: 50%; margin-bottom: 50px; background-color: #f1f0f0; border-radius: 10px; padding: 10px; height: 100%; } .g-typo-colors { margin-bottom: 30px; width: 100%; margin-left: auto; margin-right: auto; } .color-l { width: 50%; height: 50%; } .color-r { width: 50%; height: 50%; } .g-color-1 { width: 90%; height: 100%; margin-bottom: 40px; border-radius: 10px; padding: 10px; background-color: #ff7151; } .g-color-1:hover { width: 90%; height: 100%; } .g-color-3 { width: 90%; height: 100%; margin-bottom: 30px; border-radius: 10px; padding: 10px; background-color: #ffffff; border: 1px solid #00000020; } .g-color-2 { width: 90%; height: 100%; margin-bottom: 40px; border-radius: 10px; padding: 10px; background-color: #666666; } .g-color-4 { width: 90%; height: 100%; margin-bottom: 30px; border-radius: 10px; padding: 10px; background-color: #000000; } .case-l { width: 50%; padding-right: 50px; } .case-r { width: 50%; padding-left: 25px; } .case-half { width: 50%; } .case-txt { display: flex; flex-wrap: wrap; } .clients-list { display: flex; justify-content: space-between; } .clients-l { width: 100%; margin-bottom: 100px; } .clients-c { width: 100%; } .clients-r { width: 100%; } .client-t { font-size: 1.2em; line-height: 2; font-weight: 400; } .client-t:hover { font-weight: 600; } .about-txt { display: flex; } .about-l { width: 50%; padding-right: 50px; } .about-r { width: 50%; padding-left: 25px; } .e-client-image { display: none; position: absolute; width: 50vw; right: -30vw; top: 50%; transform: translateY(-50%); z-index: 100; } .client-title:hover .e-client-image { display: block; } .e-client-image img { max-height: 400px; } .p-messe { z-index: 100; } div.bx-component-opener, .bx-core-popup-menu {z-index: 100000!important;} #panel, #bx-panel {z-index: 99999!important;} .bx-core-dialog-overlay {z-index: 100001!important;} .bx-core-adm-dialog {z-index: 100002!important;} .bv-controls .bv-sound {display: none} .hover-reveal { position: fixed; width: 200px; height: 150px; top: 0; left: 0; pointer-events: none; opacity: 0; } .hover-reveal__inner, .hover-reveal__img { width: 100%; height: 100%; position: relative; } .hover-reveal__deco { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #181314; } .hover-reveal__img { background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; } .case-h2 { font-size: 30px; font-weight: 700; line-height: 35px; margin: 30px 0 18px; } .case-h2.blue {color: #00afed} .case-p { font-size: 20px; font-weight: 400; line-height: 29px; text-decoration: none; letter-spacing: 0; margin: 0 auto 30px; } .ff-myriadpro { font-family: "Myriad Pro"; } .ff-helvetica { font-family: "HelveticaNeueCyr"; } .ff-frutiger { font-family: "Frutiger Neue LT W1G Light"; } .agency-header.orange, .agency-header.blue, .agency-header.sika { text-align: center; } .agency-header.orange:before, .agency-header.blue:before, .agency-header.sika:before { content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; height: 590px; z-index: -1; background: #ffaa23; } .agency-header.blue:before { height: 490px; background: #00afed; } .agency-header.sika:before { height: 490px; background: linear-gradient(to bottom, #d19c30, #e3a935); } #case-ceta-slider { margin: auto; } #case-ceta-slider .owl-carousel { width: 100%; margin: auto; } #case-mac-slider { margin: 50px 0; background: url('/css/../images/mcbook.png') no-repeat center center; padding: 1px 0 72px; } #case-mac-slider .owl-carousel { max-width: 810px; max-height: 507px; width: 100%; margin: 70px auto; } #case-j7-slider1 { margin: -7px auto 112px; background: url('/css/../upload/cases/j7/case-j7-slider1-bg.png') no-repeat center center; } #case-j7-slider1 .owl-carousel { max-width: 845px; width: 100%; margin: auto; } #j7-real-pics { margin: -8px auto 44px; } #j7-real-pics .case-half {padding: 5px} #j7-imac { text-align: center; padding-bottom: 56px; } #j7-imac > div { display: inline-block; position: relative; } #j7-imac-screen { position: absolute; left: 24.1%; right: 23.9%; top: 4%; bottom: 35.8%; background-image: url('/css/../upload/cases/j7/imac-screen.jpg'); background-repeat: no-repeat; background-position: 0 0; background-size: cover; animation: j7ImacScroll 16s infinite linear; } #j7-case-video {margin: 130px auto 160px} .text-left {text-align: left} .text-right {text-align: right} .text-center {text-align: center} .text-justify {text-align: justify} #messe-title { font-family: "Proxima Nova Rg"; font-size: 110px; font-weight: bold; line-height: 1.2; margin: 0 0 130px; } #messe-title span { display: block; font-family: "Proxima Nova Rg"; font-size: 40px; font-weight: normal; } .messe-h2 { font-family: "Proxima Nova Lt"; font-size: 32px; font-weight: 600; line-height: 28px; } .messe-p { font-family: "HelveticaNeueCyr"; font-size: 24px; font-weight: 400; line-height: 28px; } .grid-messe-1 { display: grid; width: 100%; padding: 25px; margin: auto; height: auto; flex-direction: row; justify-content: center; justify-items: stretch; flex-wrap: nowrap; align-items: stretch; align-content: space-around; flex: 0 auto; grid-auto-columns: 1fr; grid-column-gap: 50px; grid-row-gap: 50px; grid-template-columns: 50% 50%; grid-template-rows: minmax(100px, 200px) minmax(100px, 200px) minmax(100px, 200px) minmax(100px, 200px); box-sizing: border-box; } .grid-messe-1-item-1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; background: url('/css/../upload/cases/messe/1.jpg') no-repeat center center; background-size: cover; } .grid-messe-1-item-2 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4; background: #ff7e7e url('/css/../upload/cases/messe/2.jpg') no-repeat center center; background-size: contain; } .grid-messe-1-item-3 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 5; background: url('/css/../upload/cases/messe/3.jpg') no-repeat center center; background-size: cover; } .grid-messe-1-item-4 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 4; grid-row-end: 5; background: #657ca3 url('/css/../upload/cases/messe/4.jpg') no-repeat center center; background-size: contain; } .grid-messe-2 { display: grid; width: 100%; padding: 25px; margin: auto; height: auto; flex-direction: row; justify-content: center; justify-items: stretch; flex-wrap: nowrap; align-items: stretch; align-content: space-around; flex: 0 auto; grid-auto-columns: 1fr; grid-column-gap: 50px; grid-row-gap: 50px; grid-template-columns: 50% 50%; grid-template-rows: minmax(100px, 200px) minmax(100px, 200px); box-sizing: border-box; } .grid-messe-2-item-1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; background: url('/css/../upload/cases/messe/5.jpg') no-repeat center center; background-size: cover; } .grid-messe-2-item-2 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3; background: #ff7e7e url('/css/../upload/cases/messe/6.jpg') no-repeat center center; background-size: contain; } .grid-messe-2-item-3 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; background: #ff7e7e url('/css/../upload/cases/messe/7.jpg') no-repeat center center; background-size: contain; } #sika-before-after { margin: 100px 0; position: relative; padding: 50px 0; } #sika-before-after:after { content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 25%; background: #f6ab23; z-index: -1; } #sika-before-after img { padding-left: 25%; position: relative; } #sika-before-after .case-half { position: relative; padding: 50px 0 0; } #sika-before-after .case-half:before { content: 'Before'; display: block; position: absolute; left: 25%; top: 0; font-family: "Frutiger Neue LT W1G Light"; font-size: 20px; color: black; } #sika-before-after .case-half:last-child:before { content: 'After'; } #sika-before-after .case-half:first-child { border-right: 1px solid #7a7a79; } /*video { display: block; max-width: 100%; margin: auto; }*/ #sika-slider { margin: 100px 0; position: relative; padding: 50px 0 20px; } #sika-slider:after { content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 80%; background: #e4e4e4; z-index: -1; } #sika-slider .item .case-half:last-child p:first-child { margin-top: 30%; } #sika-slider .owl-dot span { width: 14px; height: 14px; background: #fff; margin: 5px 2px; border: 2px solid #fff; } #sika-slider .owl-dot.active span { background: #e4e4e4; } #sika-slider2 { margin: 50px 0; position: relative; padding: 10px 0 100px; } #sika-slider2:after { content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 70%; background: #eea300; z-index: -1; } #sika-slider2 .item .case-half:last-child p:first-child { margin-top: 10%; } #sika-slider2 .owl-dot span { width: 14px; height: 14px; background: #fff; margin: 5px 2px; border: 2px solid #fff; } #sika-slider2 .owl-dot.active span { background: #eea300; } #sika-concept img {width: 100%} .mt0 {margin-top: 0} .mt60 {margin-top: 60px} .mt100 {margin-top: 100px} .mt50 {margin-top: 50px} .mb50 {margin-bottom: 50px} .mb45 {margin-bottom: 45px} .mb60 {margin-bottom: 60px} .mb100 {margin-bottom: 100px} .pl25 {padding-left: 25px} .pr25 {padding-right: 25px} .mw600 {max-width: 600px; margin-left: auto; margin-right: auto} .mw80 {max-width: 80%; margin-left: auto; margin-right: auto} #leroy-tile { margin: 0; position: relative; padding: 0; } #leroy-tile:after { content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 15%; height: 70%; background: #7ac973; z-index: -1; } #showreel-modal { position: fixed; left: 0; top: 100vh; width: 100vw; height: 100vh; z-index: 10001; background: black; } #showreel-modal video { min-width: 100%; min-height: 100%; } .showreel-modal-close { display: block; position: absolute; right: 25px; top: 25px; width: 50px; height: 50px; border-radius: 50%; z-index: 10002; transition: all 0.3s ease-out; opacity: .61; } .showreel-modal-close:hover { opacity: 1; transform: rotate(180deg); } .showreel-modal-close i { position: absolute; background: #fff; border-radius: 4px; left: 0; top: 50%; margin-top: -3px; height: 6px; width: 50px; transition: all 0.3s ease-out; transform: rotate(45deg); } .showreel-modal-close i:first-child { transform: rotate(-45deg); } .hidden {display: none} /* animation */ @keyframes j7ImacScroll { from, 88%, to {background-position: 0 0} 38%, 50% {background-position: 0 100%} } @keyframes tremor { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } /* grids by dobrocode */ .case-grid-7, .case-grid-6, .case-grid-5, .case-grid-4, .case-grid-3, .case-grid-2, .case-grid-1 { display: grid; width: 95%; height: auto; max-width: 1600px; min-width: 890px; margin: 50px auto; flex-direction: row; justify-content: center; justify-items: stretch; flex-wrap: nowrap; align-items: stretch; align-content: space-around; flex: 0 auto; grid-auto-columns: 1fr; grid-column-gap: 50px; grid-row-gap: 50px; grid-template-columns: minmax(250px, 375px) minmax(250px, 375px) minmax(250px, 375px); box-sizing: border-box; } .case-grid-7 { grid-template-rows: minmax(250px, 375px) minmax(250px, 375px) minmax(250px, 375px) minmax(250px, 375px); grid-template-areas: "case1 case2 case3" "case1 case5 case3" "case4 case5 case6" "case7 case7 case6"; } .case-grid-7 > .case-item:nth-child(1) {grid-area: case1} .case-grid-7 > .case-item:nth-child(2) {grid-area: case2} .case-grid-7 > .case-item:nth-child(3) {grid-area: case3} .case-grid-7 > .case-item:nth-child(4) {grid-area: case4} .case-grid-7 > .case-item:nth-child(5) {grid-area: case5} .case-grid-7 > .case-item:nth-child(6) {grid-area: case6} .case-grid-7 > .case-item:nth-child(7) {grid-area: case7} .container > div[class^="case-grid"]:first-child {margin-top: 100px} .case-grid-6 { grid-template-rows: minmax(250px, 375px) minmax(250px, 375px) minmax(250px, 375px); grid-template-areas: "case1 case2 case3" "case1 case2 case6" "case4 case5 case6"; } .case-grid-6 > .case-item:nth-child(1) {grid-area: case1} .case-grid-6 > .case-item:nth-child(2) {grid-area: case2} .case-grid-6 > .case-item:nth-child(3) {grid-area: case3} .case-grid-6 > .case-item:nth-child(4) {grid-area: case4} .case-grid-6 > .case-item:nth-child(5) {grid-area: case5} .case-grid-6 > .case-item:nth-child(6) {grid-area: case6} .case-grid-5 { grid-template-rows: minmax(250px, 375px) minmax(250px, 375px) minmax(250px, 375px); grid-template-areas: "case1 case2 case2" "case1 case3 case4" "case5 case5 case4"; } .case-grid-5 > .case-item:nth-child(1) {grid-area: case1} .case-grid-5 > .case-item:nth-child(2) {grid-area: case2} .case-grid-5 > .case-item:nth-child(3) {grid-area: case3} .case-grid-5 > .case-item:nth-child(4) {grid-area: case4} .case-grid-5 > .case-item:nth-child(5) {grid-area: case5} .case-grid-4 { grid-template-rows: minmax(250px, 375px) minmax(250px, 375px); grid-template-areas: "case1 case1 case2" "case3 case4 case4"; } .case-grid-4 > .case-item:nth-child(1) {grid-area: case1} .case-grid-4 > .case-item:nth-child(2) {grid-area: case2} .case-grid-4 > .case-item:nth-child(3) {grid-area: case3} .case-grid-4 > .case-item:nth-child(4) {grid-area: case4} .case-grid-3 { grid-template-rows: minmax(250px, 375px); grid-template-areas: "case1 case2 case3"; } .case-grid-3 > .case-item:nth-child(1) {grid-area: case1} .case-grid-3 > .case-item:nth-child(2) {grid-area: case2} .case-grid-3 > .case-item:nth-child(3) {grid-area: case3} .case-grid-2 { grid-template-rows: minmax(250px, 375px); grid-template-areas: "case1 case2 case2"; } .case-grid-2 > .case-item:nth-child(1) {grid-area: case1} .case-grid-2 > .case-item:nth-child(2) {grid-area: case2} .case-grid-1 { grid-template-rows: minmax(250px, 375px); grid-template-areas: "case1 case1 case1"; } .case-grid-1 > .case-item:nth-child(1) {grid-area: case1} .case-item { position: relative; display: flex; max-height: 100%; max-width: 100%; justify-content: space-between; align-items: stretch; background-color: #ECECEC; color: transparent; padding: 30px; box-sizing: border-box; transform-style: preserve-3d; } .case-item:hover { box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2); } #call-mobile-menu { display: block; position: relative; cursor: pointer; width: 30px; height: 22px; z-index: 2; } #call-mobile-menu i { display: block; background: #ffffff; height: 2px; position: absolute; top: 0; left: 0; right: 0; border-radius: 2px; -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; } .mobile-header.white #call-mobile-menu i, .mobile-header.menud #call-mobile-menu i {background: #000} #call-mobile-menu i:nth-child(2) { top: 10px; } #call-mobile-menu i:nth-child(3) { top: 20px; } #call-mobile-menu i.collapse { top: 11px; background: #000; -webkit-transition: all 70ms ease-out; -moz-transition: all 70ms ease-out; -ms-transition: all 70ms ease-out; -o-transition: all 70ms ease-out; transition: all 70ms ease-out; } .rotate30 { -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg); -webkit-transition: all 50ms ease-out; -moz-transition: all 50ms ease-out; -ms-transition: all 50ms ease-out; -o-transition: all 50ms ease-out; transition: all 50ms ease-out; } .rotate150 { -ms-transform: rotate(150deg); -webkit-transform: rotate(150deg); transform: rotate(150deg); -webkit-transition: all 50ms ease-out; -moz-transition: all 50ms ease-out; -ms-transition: all 50ms ease-out; -o-transition: all 50ms ease-out; transition: all 50ms ease-out; } .rotate45 { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 100ms ease-out; -moz-transition: all 100ms ease-out; -ms-transition: all 100ms ease-out; -o-transition: all 100ms ease-out; transition: all 100ms ease-out; } .rotate135 { -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); -webkit-transition: all 100ms ease-out; -moz-transition: all 100ms ease-out; -ms-transition: all 100ms ease-out; -o-transition: all 100ms ease-out; transition: all 100ms ease-out; } .circle { /* border-radius: 50%; width: 0px; height: 0px; position:absolute; top: 35px; right: 40px; background: #fff; opacity: 1; -webkit-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -moz-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -ms-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -o-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); z-index: -1; /* } .circle.expand{ /* width: 2400px; height: 2400px; top: -560px; right: -565px; -webkit-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -moz-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -ms-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -o-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); */ } #mobile-menu::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #fff; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); -webkit-transition: -webkit-transform 1s ease-in-out; transition: -webkit-transform 1s ease-in-out; transition: transform 1s ease-in-out; transition: transform 1s ease-in-out,-webkit-transform 1s ease-in-out } .menud #mobile-menu::before{ transform: none; } #mobile-menu { /* display: block; position: fixed; left: 0; right: 0; top: 0; bottom: 100vh; z-index: 1; background: transparent; */ position: fixed; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); pointer-events: none; -webkit-transition: -webkit-transform 1s ease-in-out; transition: -webkit-transform 1s ease-in-out; transition: transform 1s ease-in-out; transition: transform 1s ease-in-out,-webkit-transform 1s ease-in-out; } .menud #mobile-menu{ pointer-events: all; -webkit-transform: none; transform: none } #mobile-menu.visible {bottom: 0;} #mobile-menu .b-main-menu { display: block; position: relative; width: 100%; height: 100%; margin: 0; } #mobile-menu .e-menuitem { list-style: none; position: absolute; top: 50px; left: 0; opacity: 0; width: 100%; text-align: center; font-size: 0px; -webkit-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -moz-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -ms-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000); -o-transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000); transition: all 70ms cubic-bezier(0.000, 0.995, 0.990, 1.000); border-bottom: none!important; } #mobile-menu .menu-link, #mobile-menu .menu-link-inner { color: #000; text-transform: uppercase; text-decoration: none; letter-spacing: 3px; } #mobile-menu .e-menuitem.animate{ font-size: 21px; will-change: opacity; opacity: 1; -webkit-transition: opacity .9s cubic-bezier(.165,.84,.44,1); transition: opacity .9s cubic-bezier(.165,.84,.44,1) } #mobile-menu .e-menuitem.animate:nth-of-type(1){ top: 120px; -webkit-transition-delay: .45s; transition-delay: .45s } #mobile-menu .e-menuitem.animate:nth-of-type(2){ top: 190px; -webkit-transition-delay: .55s; transition-delay: .55s } #mobile-menu .e-menuitem.animate:nth-of-type(3){ top: 260px; -webkit-transition-delay: .65s; transition-delay: .65s } #mobile-menu .e-menuitem.animate:nth-of-type(4){ top: 330px; -webkit-transition-delay: .75s; transition-delay: .75s } #mobile-menu .e-menuitem.animate:nth-of-type(5){ top: 400px; -webkit-transition-delay: .85s; transition-delay: .85s } #mobile-menu .e-menuitem.animate:nth-of-type(6){ top: 470px; -webkit-transition-delay: .95s; transition-delay: .95s } #navigation { display: block; position: absolute; left: 0; top: 105px; margin: 0; z-index: 9999; } #navigation ul { display: -ms-flexbox; display: flex; margin: 0; } #navigation ul li { display: block; position: relative; padding: 0 15px; border-left: 1px solid #8a8a8a; } #navigation ul li:first-child {border: none; padding-left: 0;} #navigation ul li.active {border-color: #000; color: #000;} #navigation ul li a {color: #8a8a8a;} #navigation ul li.active a, #navigation ul li a:hover {color: #000;} video#mobile-video { min-width: 100%; max-width: auto!important; min-height: 100%; } .footer-brief { display: none; } @font-face { font-family: 'Halvar'; src: url('/css/fonts/HalvarBreit-Blk.woff') format('woff'); font-weight: 800; font-style: normal; } @font-face { font-family: 'Halvar'; src: url('/css/fonts/HalvarBreit-Bd.woff') format('woff'); font-weight: 800; font-style: normal; } .b-main-menu__logo{ display: none; } .b-main-menu__links{ display: none; } @media (max-width:767.8px){ h1{ letter-spacing: 0; line-height: 0; font-weight: 800; } h1 .hero{ font-family: 'Halvar'; font-size: 52px; font-weight: 800; text-transform: uppercase; color:#000; } #hero-2 h1 .hero{ color: transparent; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #ffffff; } .case-title{ display: flex; justify-content: space-between; } .cases .case-title .title a.case-inner{ color: #000!important; font-size: 12px; font-style: normal; font-weight: 500; line-height: normal; text-transform: capitalize; } .cases .case-title a{ color: #000!important; font-size: 10px; font-style: italic; font-weight: 300; line-height: normal; text-transform: capitalize; } .cases .case-title{ padding: 6.5px 0; } .brief, .brief-link { color: #000; font-size: 14px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; position: relative; display: flex; gap: 10px; } .brief-icon{ display: none; } .brief::after{ content:''; border: solid black; border-width: 0 2px 2px 0; display: inline-block; padding: 3px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .circle { background: #000; } #mobile-menu .menu-link, #mobile-menu .menu-link-inner { color: #fff; text-transform: uppercase; text-decoration: none; letter-spacing: 0px; font-size: 28px; font-style: normal; font-weight: 600; line-height: normal; text-transform: uppercase; display: block; padding-left: 23px; } #call-mobile-menu i { background: #fff; } .open i { background: #fff!important; } .open#call-mobile-menu i { background: #fff!important; } #mobile-menu .e-menuitem { text-align: start; } .text-button { text-align: start; color: #000; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 10px; } .text-button::after{ content:''; border: solid black; border-width: 0 2px 2px 0; display: inline-block; padding: 3px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .ghost-button{ margin-left: 20px!important; margin-bottom: 0!important; } .divider{ display: none; } h3 .title, h3{ font-size: 12px!important; font-style: normal; font-weight: 300; line-height: normal; text-transform: capitalize; } h3{ margin-top: 0!important; margin-bottom: 0!important; } .client-title { color: #000!important; font-family: 'Halvar'; font-size: 26px!important; font-style: normal; font-weight: 700; line-height: normal; text-transform: capitalize; } .client-title a{ color:#000; } .clients{ margin-left: 20px!important; margin-right: 20px!important; } .b-description, .e-client{ flex-wrap:wrap; } .e-title{ margin-bottom: 20px; } .footer-brief { display: block; margin-top: 80px; background: #000; padding: 0 20px; padding-top: 65px; padding-bottom: 105px; color: #FFF; font-size: 20px; font-style: normal; font-weight: 400; line-height: normal; text-transform: uppercase; } .footer-brief__links{ margin-bottom: 40px; display: flex; flex-direction: column; } .footer-brief__link{ color: #FFF; font-family: Montserrat; font-size: 20px; font-style: normal; font-weight: 400; line-height: normal; text-transform: uppercase; } .footer-brief__text{ color: #FFF; font-family: Montserrat; font-size: 20px; font-style: normal; font-weight: 400; line-height: normal; text-transform: uppercase; } .footer-brief .footer-button::after{ content:''; border: solid #fff; border-width: 0 2px 2px 0; display: inline-block; padding: 15px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .footer-brief .footer-button{ display: flex; align-items: center; gap: 10px; color:#fff; font-size: 25px; font-style: normal; font-weight: 700; line-height: normal; text-transform: uppercase; margin-bottom: 60px; } .white #call-mobile-menu i, .white #call-mobile-menu i { background: #000; } .footer{ display: none; } video#mobile-video { width: 100%; height: 100%; object-fit: cover; } .mobile-header.menud .visible .b-main-menu__logo{ display: block; position: relative; top: 24px; left: 24px; } .mobile-header.menud .visible .b-main-menu__links{ display: flex; flex-direction: column; gap: 10px; padding-left: 24px; } .b-main-menu__links{ opacity: 0; visibility: hidden; } .b-main-menu__links { will-change: opacity; transition: opacity .9s cubic-bezier(.165,.84,.44,1); /* -webkit-transition: opacity 0.9s ease-in-out 1.05s; transition: opacity 0.9s ease-in-out 1.05s; */ } .b-main-menu__links { transition-delay:1.05s; } .menud .b-main-menu__links { will-change: opacity; opacity: 1; visibility: visible; transition: opacity .9s cubic-bezier(.165,.84,.44,1); position: relative; top: -70px; /* -webkit-transition: opacity 0.9s ease-in-out 1.05s; transition: opacity 0.9s ease-in-out 1.05s; */ } .menud .b-main-menu__links { transition-delay:1.05s; } .b-main-menu__link{ color: #FFF; font-size: 15px; font-style: normal; font-weight: 500; line-height: normal; text-transform: uppercase; } #mobile-menu .b-main-menu { display: block; position: relative; width: 100%; height: calc(100% - 100px); margin: 0; } #mobile-menu::before { background: #000; } .menud .m-logo{ display: none; } } @media (max-width: 1024px){ .mobile-header.white, .mobile-header.menud { background-color: transparent!important; border-color: transparent!important; }} @media (max-width: 767.8px){ #mobile-menu{ display: flex; flex-direction: column; justify-content: space-between; } } /* End */ /* Start:/css/media.css?171636353032615*/ @media all and (max-width: 1440px){ .hero { display: inline-block; text-decoration: none; font-size: 5rem; } .hover-content { margin-left: 200px; width: 400px; height: 350px; color: #ffffff; opacity: 1; display: inline-block; justify-content: center; align-items: center; align-self: center; position: absolute; } .container { max-width: 1280px; } .b-team { grid-template-columns: repeat( auto-fill, minmax(170px, auto)); grid-gap: 10px; } .hover-content { width: 500px; margin-left: 10%; } .about-agency { margin-bottom: 10px; } .b-right {display: none} .hero-slide .b-right {display: -ms-flexbox;display: flex} .cases .case-inner .case-pic_1{ background-size: contain; } } @media all and (max-width: 1367px){ .cases .case-inner .case-pic_1{ background-size: contain; } } /*1200px*/ @media all and (max-width: 1200px){ .hero { display: inline-block; text-decoration: none; font-size: 4rem; } .agency-title { font-size: 4em; font-weight: 600; line-height: 1; margin-left: 0; } .service-title { font-size: 4em; font-weight: 600; line-height: 1; margin-left: 0; } .service-blocks { display: grid; align-items: flex-start; grid-template-columns: 50% 50% ; width: 100%; margin-top: 50px; margin-bottom: 50px; } .service-once { margin-bottom: 50px; } .container.inner { display: block; width: 100%; flex: 0 auto; box-sizing: border-box; margin-left: auto; margin-right: auto; padding-left: 30px; padding-right: 30px; max-width: 1000px; } .hover-content { margin-left: 200px; width: 500px; color: #ffffff; opacity: 1; display: inline-block; justify-content: center; align-items: center; align-self: center; position: absolute; } .about-agency { margin-bottom: 10px; } .client-info { float: left; margin-right: 100px; margin-left: 0px; } .client-title { font-size: 3.5em; } .ghost-button{ margin-bottom: 50px; } .b-team { grid-template-columns: repeat( auto-fill, minmax(140px, auto)); grid-gap: 10px; } .mw80 {max-width: 100%} #navigation { left: 18px; } } /*1024px*/ @media all and (max-width: 1024px){ .b-team { grid-template-columns: repeat( auto-fill, minmax(140px, auto)); grid-gap: 0px; } .hero-slide { margin-bottom: 50px; } h4 { line-height: 1.2; font-weight: 600; font-size: 1.3em; margin: 0; } .client-grid { margin-bottom: 30px; grid-template-columns: 250px 250px 250px; grid-template-rows: 250px 250px 250px 250px 250px 250px 250px } .case-txt { display: block; } #sika-before-after .case-txt {display: flex} .case-l { width: 100%; padding-right: 0px; } .case-r { width: 100%; padding-left: 0px; } .case-half { width: 100%; } #sika-before-after .case-half {width: 50%} #sika-slider .item .case-half:last-child {display: none} .md-mb30 {margin-bottom: 30px} .case-half.text-right {text-align: left} .case-half.pr25, .case-half.pl25 {padding-left: 0; padding-right: 0} .agency-header.orange:before {height: 520px} .agency-header.blue:before {height: 420px} .agency-header.sika:before {height: 320px} #j7-real-pics .case-half {padding: 0} #j7-case-video {margin: 30px auto 60px} .case-content { margin: 50px 0px; } .digital-hover { display: none; } .inner-fullwidth { padding-top: 20px; padding-bottom: 20px; } .service-title { font-size: 3em; line-height: 1; } .branding-hover { display: none; } .creative-hover { display: none; } .agency-pics_1 { width: 100%; right: 0px; top: 0px; height: 380px; padding-left: 0px; position: relative; margin-bottom: 30px; } .agency-pics_2 { width: 100%; right: 0px; height: 380px; margin-top: 0px; position: relative; padding-left: 0px; margin-bottom: 30px; } .agency-pics_4 { width: 100%; left: 0px; top: 0px; height: 380px; padding-right: 0px; position: relative; padding-left: 0px; margin-bottom: 30px; } .agency-grid { position: relative; height: auto; opacity: 1; margin-bottom: 0px; } .cases-filter { display: none; } .filter-link { color: #00000060; margin-left: 15px; text-decoration: none; } .b-header { display: none; } .contacts { z-index: 100; } .showreel { display: none; } .agency-header { position: relative; padding-top: 70px; } .container.inner { display: block; width: 100%; flex: 0 auto; box-sizing: border-box; margin-left: auto; margin-right: auto; padding-left: 30px; padding-right: 30px; } .service-title { font-size: 3.5em; font-weight:600; line-height:1; } .b-right { position: fixed; top: 0; bottom: 0; right: 50px; z-index: 10; display: flex; width: 50px; height: 100%; justify-content: flex-end; align-items: center; } .call-back { position: relative; display: flex; width: 100px; height: 100px; justify-content: flex-end; align-items: flex-end; background-color: #9ACA3C; color: transparent; border-radius: 100px; margin-bottom: 50px; margin-top: auto; } .mobile-header { position: fixed; top: 0px; display: flex; width: 100%; height: 70px; justify-content: flex-start; align-items: center; background-color: transparent; z-index: 99999; border-bottom: 1px solid transparent; transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1); } .mobile-header.white, .mobile-header.menud { background-color: #ffffff; border-color: #00000015; } .mobile-logo { display: block; margin-left: 0px; } .mobile-logo svg path { transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1); fill: #ffffff; } .mobile-header.white .mobile-logo svg path, .mobile-header.menud .mobile-logo svg path { fill: #4b133e; } .m-logo { display: block; margin-left: 30px; float: left; z-index: 2; } .m-menu { display: flex; width: 100%; height: 70px; justify-content: flex-end; align-items: center; margin-right: 30px; } .menu-icon { display: flex; justify-content: center; align-items: center; } .nav-up { top: -70px; } .hero { display: inline-block; text-decoration: none; font-size: 4rem; } .case-grid { max-width: 1000px; margin-top: 30px; margin-bottom: 30px; padding-right: 25px; padding-left: 25px; justify-content: space-between; align-items: stretch; align-content: center; grid-column-gap: 25px; grid-row-gap: 25px; grid-template-columns: 50% 50%; grid-template-rows: minmax(325px, 500px) minmax(250px, 375px) 650px 375px; } .case-grid.cases { max-width: 1000px; margin-top: 30px; margin-bottom: 30px; padding-right: 25px; padding-left: 25px; justify-content: space-between; align-items: stretch; align-content: center; grid-column-gap: 25px; grid-row-gap: 25px; grid-template-columns: 50% 50%; grid-template-rows: minmax(325px, 600px) minmax(250px, 375px) 375px 375px; } #case-1 { justify-self: stretch; align-self: stretch; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; } .case-1 { position: relative; display: flex; max-height: 500px; max-width: 100%; min-height: 270px; min-width: 270px; justify-content: space-between; align-items: stretch; align-self: stretch; background-color: #ECECEC; color: transparent; padding: 30px; box-sizing: border-box; } #case-3 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 3; grid-row-end: 5; justify-self: stretch; align-self: stretch; } .case-2 { position: relative; display: flex; max-height: 375px; max-width: 100%; min-height: 270px; min-width: 220px; justify-content: space-between; align-items: stretch; align-self: stretch; background-color: #ECECEC; color: transparent; padding: 30px; box-sizing: border-box; } .case-3 { position: static; display: flex; width: 100%; height: 100%; max-width: 100%; min-height: 300px; padding: 30px; box-sizing: border-box; align-self: stretch; justify-self: stretch; } .case-1.full { max-height: 500px; min-height: 270px; } #case-6 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 4; grid-row-end: 5; align-self: stretch; justify-self: stretch; } .case-6 { min-height: 375px; padding: 30px; box-sizing: border-box; } #case-7 { grid-column-start: 2; grid-column-end: 3; grid-row-start: 4; grid-row-end: 5; } #case-8{ grid-column-end: 3; align-self: stretch; justify-self: stretch; grid-column-start: 1; grid-row-start: 1; grid-row-end: 2; } #case-9{ grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3; } #case-10{ grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 5; } #case-11{ grid-column-start: 1; grid-row-start: 4; grid-row-end: 5; grid-column-end: 3; } #case-12{ grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; } #case-13{ grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; align-self: start; } .b-social { display: none; } .client-title { font-size: 3em; color: #aeaeae; letter-spacing: 0.5px; margin-top: 0px; line-height: 1; } .client-title:hover .e-client-image { display: none; } .description { display: none; } .b-left { left: 50px; } .case-pic_6 { margin-top: 10px; position: relative; height: 100%; min-height: 0px; background-image: url(/css/../images/case-6.png); background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; z-index: 10; overflow: hidden; box-sizing: border-box; } .case-pic_3 { position: relative; margin-top: 50px; height: 70%; width: 100%; background-image: url(/css/../images/case-3.png); background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; overflow: hidden; box-sizing: border-box; } .case-pic_8 { position: relative; left: 0px; right: 0px; bottom: 0px; height: 90%; min-height: 0px; background-image: url(/css/../images/case-8.png); background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; z-index: 1000; overflow: hidden; box-sizing: border-box; transform: translateZ(20px); } .case-pic_9 { position: relative; left: 0px; right: 0px; bottom: 0px; height: 90%; min-height: 0px; background-image: url(/css/../images/case-9.png); background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; z-index: 1000; overflow: hidden; box-sizing: border-box; transform: translateZ(20px); } .case-pic_10 { position: relative; left: 0px; right: 0px; bottom: 0px; height: 90%; min-height: 0px; background-image: url(/css/../images/case-10.png); background-position: 50% 70%; background-repeat: no-repeat; background-size: contain; z-index: 1000; overflow: hidden; box-sizing: border-box; transform: translateZ(20px); } .back-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #9ACA3C; opacity: 0; border-radius: 100%; animation: back 2s infinite; animation-delay: 0.3s; } .button { position: absolute; height: 100px; width: 100px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 75px; background-color: #A5DE37; animation: ring 2s infinite; } .phone { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 55px; color: #ffffff; animation: call 2s infinite; } .front-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; opacity: 0.2; border-radius: 100%; width: 0px; height: 0px; animation: breath 2s infinite; } @keyframes back { 0%{ height: 0px; width: 0px; } 50%{ height: 50px; width: 50px; opacity: 0.4; } 70%{ height: 150px; width: 150px; opacity: 0.1; } 100%{ height: 155px; width: 155px; opacity: 0; } } @keyframes ring { 0%{} 50%{ height: 115px; width: 115px; } } @keyframes call { 0%{} 2.5%{ transform: translate(-30%, -50%); } 5%{ transform: translate(-70%, -50%); } 7.5%{ transform: translate(-30%, -50%); } 10%{ transform: translate(-70%, -50%); } 15%{ transform: translate(-20%, -50%); } 20%{ transform: translate(-50%, -50%); } 100%{} } @keyframes breath { 0%{} 50%{ width: 100px; height: 100px; } 100%{} } .fa { display: inline-block; font-family: FontAwesome; font-size: 2.5em !important; } #sika-before-after:after { bottom: 5%; height: 25%; } .case-grid-7, .case-grid-6, .case-grid-5, .case-grid-4, .case-grid-3, .case-grid-2, .case-grid-1 { max-width: 1000px; margin: 30px auto; padding-right: 25px; padding-left: 25px; justify-content: space-between; align-items: stretch; align-content: center; grid-gap: 25px; grid-template-columns: 50% 50%; } .case-grid-7 { grid-template-rows: minmax(250px, 375px) minmax(250px, 375px) minmax(250px, 375px) minmax(250px, 375px); grid-template-areas: "case1 case2" "case3 case4" "case5 case5" "case6 case7"; } .case-grid-6 { grid-template-rows: minmax(250px, 375px) minmax(250px, 375px) minmax(250px, 375px) minmax(250px, 375px); grid-template-areas: "case1 case2" "case1 case3" "case4 case5" "case6 case5"; } .case-grid-5 { grid-template-rows: minmax(250px, 375px) minmax(250px, 375px) minmax(250px, 375px); grid-template-areas: "case1 case2" "case3 case4" "case5 case4"; } .case-grid-4 { grid-template-rows: minmax(250px, 375px) minmax(250px, 375px) minmax(250px, 375px); grid-template-areas: "case1 case1" "case2 case3" "case4 case4"; } .case-grid-3 { grid-template-rows: minmax(250px, 375px) minmax(250px, 375px); grid-template-areas: "case1 case2" "case1 case3"; } .case-grid-2 { grid-template-rows: minmax(250px, 375px); grid-template-areas: "case1 case2"; } .case-grid-1 { grid-template-rows: minmax(250px, 375px); grid-template-areas: "case1 case1"; } .container > div[class^="case-grid"]:first-child {margin-top: 0} #navigation { display: none; left: 0; top: 80px; } .mobile-mb-50 {margin-bottom: -50px} } /*736px*/ @media all and (max-width: 740px) { .about-agency.half { margin-bottom: 50px; width: 100%; } .about-l { width: 100%; padding: 0; } .about-r { width: 100%; padding: 0; } .about-txt{ display: block; margin: 0 auto; } .clients-list { display: block; justify-content: space-between; } .clients-l, .clients-c, .clients-r { width: 100%; margin-bottom: 0; } .clients-list ul { margin: 0; } .client-t { font-size: 1.5rem; } .client-grid { grid-template-columns: 250px 250px; grid-template-rows: 250px 250px 250px 250px 250px 250px 250px 250px 250px 250px; } .case-txt { display: block; } #sika-before-after .case-txt {display: flex} .case-l { width: 100%; padding-right: 0px; } .case-r { width: 100%; padding-left: 0px; } .case-half { width: 100%; } #sika-before-after .case-half {width: 50%} .case-half.text-right {text-align: left} .case-half.pr25, .case-half.pl25 {padding-left: 0; padding-right: 0} .agency-header.orange:before {height: 470px} .agency-header.blue:before {height: 350px} .agency-header.sika:before {height: 250px} #j7-real-pics .case-half {padding: 0} .typo { display: block; } .typo-l { width: 100%; } .typo-r { width: 100%; border-left: 2px solid #ff7151; } .colors { display: block; } .colors-l { width: 100%; margin-bottom: 10px; } .colors-r { width: 100%; height: 30%; margin: 0 auto; } .color-1 { width: 95%; min-height: 120px; margin-bottom: 10px; } .color-2 { width: 95%; min-height: 120px; margin-bottom: 10px; float: right; } .color-3 { width: 95%; min-height: 120px; margin-bottom: 10px; } .color-4 { min-height: 120px; margin-bottom: 10px; float: right; width: 95%; } .digital-info { margin-top: 30px; margin-bottom: 30px; display: block; } .digital-l { margin-top: 30px; width: 100%; padding-right:0px; } .digital-c { margin-top: 30px; width: 100%; padding-right:0px; } .digital-r { margin-top: 30px; width: 100%; padding-left: 0px; } .mail-form { margin-bottom: 30px; max-width: 280px; display: block; } .container.inner-service { display: block; width: 100%; flex: 0 auto; box-sizing: border-box; margin-left: auto; margin-right: auto; padding-left: 30px; padding-right: 30px; } .service-item { margin-bottom: 10px; font-size: 0.8em; max-width: 280px; } .service-l { display: none; } .service-r { display: none; } .b-team { text-align: center; } .service-content { padding: 10%; width: 100%; z-index: 55; color: #000000; } .service-content.left { padding: 10%; width: 100%; z-index: 55; color: #000000; } .service.digital { justify-content: stretch; } .service.branding { justify-content: stretch; flex-flow: row; } .service.creative { justify-content: stretch; } input { -webkit-appearance: email; background-color: transparent; -webkit-rtl-ordering: logical; cursor: text; border: 0; padding: 7px 0; border-bottom: 2px solid #ffffff40; box-sizing: border-box; background-color: transparent !important; width: 100%; color: #ffffff; font-size: 1.2em; } .service-title { font-size: 2em; font-weight:600; line-height: 1; } .agency-description { width: 100%; line-height: 1.5; } .call-back { position: relative; display: flex; width: 100px; height: 100px; justify-content: flex-end; align-items: flex-end; background-color: #9ACA3C; color: transparent; border-radius: 100px; margin-bottom: 50px; margin-top: auto; z-index: 10000; } .footer-button { margin-top: 30px; margin-bottom: 30px; text-decoration: none; font-size: 1em; color: #00000060; background-color: transparent; } .e-title { display: flex; flex-direction: column; align-items: flex-start; z-index: 100; margin-bottom: 30px; } h3 { line-height: 1; font-weight: 700; font-size: 1.8em; } .call-back { position: relative; display: flex; width: 70px; height: 70px; justify-content: flex-end; align-items: flex-end; background-color: #9ACA3C; color: transparent; border-radius: 100px; margin-bottom: 50px; margin-top: auto; } .b-right { right: 20px; ; } .container { display: block; width: 100%; max-width: 100%; margin-top: 20px; margin-bottom: 20px; margin-left: auto; margin-right: auto; flex: 0 auto; } .case-slide { position: relative; display: block; width: 100%; margin-right: auto; margin-left: auto; flex-direction: row; justify-content: space-around; flex-wrap: wrap; align-items: baseline; align-content: space-around; } .hero { display: inline-block; text-decoration: none; font-size: 4rem; } .b-social { display: none; } .showreel { display: none; } .clients { margin-left: 30px; margin-right: 30px; box-sizing: border-box; } .case-grid { grid-template-columns: 100%; max-width: 100%; min-width: 320px; margin-top: 20px; margin-bottom: 20px; align-content: center; justify-items: stretch; align-items: stretch; grid-column-gap: 30px; grid-row-gap:30px; grid-template-columns: 100%; grid-template-rows: 300px 300px 300px 300px 300px 300px 300px; box-sizing: border-box; } .case-grid.cases { grid-template-columns: 100%; max-width: 100%; min-width: 320px; margin-top: 20px; margin-bottom: 20px; align-content: center; justify-items: stretch; align-items: stretch; grid-column-gap: 30px; grid-row-gap:30px; grid-template-columns: 100%; grid-template-rows: 300px 300px 300px 300px 300px 300px ; box-sizing: border-box; } #case-1 { justify-self: center; align-self: auto; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; } .case-1 { width: 100%; max-height: 300px; max-width: 300px; min-width: 100%; min-height: 300px; align-self: stretch; } #case-2 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; justify-self: center; } .case-2 { width: 100%; max-height: 300px; max-width: 300px; min-width: 100%; min-height: 300px; align-self: stretch; } #case-3{ grid-column-end: 2; grid-row-start: 3; grid-row-end: 4; justify-self: center; align-self: stretch; grid-column-start: 1; } .case-3 { width: 100%; max-height: 300px; max-width: 300px; min-width: 100%; min-height: 300px; align-self: stretch; } #case-4{ grid-column-start: 1; grid-column-end: 2; grid-row-start: 4; grid-row-end: 5; align-self: center; justify-self: center; } .case-2.full { width: 100%; max-height: 300px; max-width: 300px; min-width: 100%; min-height: 300px; align-self: stretch; } #case-5{ grid-column-start: 1; grid-column-end: 2; grid-row-start: 5; grid-row-end: 6; justify-self: center; } .case-1.full { width: 100%; max-height: 300px; max-width: 300px; min-width: 100%; min-height: 300px; align-self: stretch; } #case-6{ grid-row-start: 6; grid-row-end: 7; grid-column-end: 2; justify-self: center; } .case-6 { width: 100%; max-height: 300px; max-width: 300px; min-width: 100%; min-height: 300px; align-self: stretch; } .case-6.full { width: 100%; max-height: 300px; max-width: 300px; min-width: 100%; min-height: 300px; align-self: stretch; } #case-7{ grid-row-start: 7; grid-row-end: 8; justify-self: center; align-self: stretch; grid-column-end: 2; grid-column-start: 1; } .client-title { font-size: 2.25em; color: #aeaeae; letter-spacing: 0.5px; margin-top: 0px; line-height: 1; } #case-8{ grid-column-end: 2; justify-self: stretch; align-self: start; } #case-9{ grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3; justify-self: stretch; align-self: start; } #case-10{ grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4; justify-self: stretch; align-self: start; } #case-11{ grid-column-start: 1; grid-column-end: 2; grid-row-start: 4; grid-row-end: 5; justify-self: stretch; align-self: start; } #case-12{ grid-column-start: 1; grid-column-end: 2; grid-row-start: 5; grid-row-end: 6; } #case-13{ grid-column-start: 1; grid-column-end: 2; grid-row-start: 6; grid-row-end: 7; } #messe-title { font-size: 48px; margin-bottom: 45px; } #messe-title span { font-size: 24px; } .grid-messe-1 { width: 100%; padding: 25px 0; grid-template-columns: 100%; grid-template-rows: 200px 200px 200px 200px; } .grid-messe-1-item-1 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; } .grid-messe-1-item-2 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3; } .grid-messe-1-item-3 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4; } .grid-messe-1-item-4 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 4; grid-row-end: 5; } .grid-messe-2 { width: 100%; padding: 25px 0; grid-template-columns: 100%; grid-template-rows: 200px 200px 200px; } .grid-messe-2-item-1 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; background: url('/css/../upload/cases/messe/5.jpg') no-repeat center center; background-size: cover; } .grid-messe-2-item-2 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3; background: #ff7e7e url('/css/../upload/cases/messe/6.jpg') no-repeat center center; background-size: contain; } .grid-messe-2-item-3 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4; background: #ff7e7e url('/css/../upload/cases/messe/7.jpg') no-repeat center center; background-size: contain; } .description { display: none; } .e-footer { display: block; width: 100%; margin-right: auto; margin-left: auto; flex-direction: row; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; } .footer-logo { margin-bottom: 20px; } .footer-cl { margin-bottom: 10px; } .footer-cr { margin-bottom: 20px; } .b-left { left: 20px; } .case-pic_6 { margin-top: 10px; position: relative; height: 100%; min-height: 0px; background-image: url(/css/../images/case-6.png); background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; z-index: 10; overflow: hidden; box-sizing: border-box; } .case-pic_7 { position: relative; right: 0; height: 100%; min-height: 300px; background-image: url(/css/../images/case-7.png); background-position: 100% 50%; background-repeat: no-repeat; background-size: contain; z-index: 10; overflow: hidden; box-sizing: border-box; } .back-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #9ACA3C; opacity: 0; border-radius: 100%; animation: back 2s infinite; animation-delay: 0.3s; } .button { position: absolute; height: 70px; width: 70px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 75px; background-color: #A5DE37; animation: ring 2s infinite; } .phone { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 80px; color: #ffffff; animation: call 2s infinite; } .front-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; opacity: 0.2; border-radius: 100%; width: 0px; height: 0px; animation: breath 2s infinite; } @keyframes back { 0%{ height: 0px; width: 0px; } 50%{ height: 50px; width: 50px; opacity: 0.4; } 70%{ height: 70px; width: 70px; opacity: 0.1; } 100%{ height: 80px; width: 80px; opacity: 0; } } @keyframes ring { 0%{} 50%{ height: 80px; width: 80px; } } @keyframes call { 0%{} 2.5%{ transform: translate(-30%, -50%); } 5%{ transform: translate(-70%, -50%); } 7.5%{ transform: translate(-30%, -50%); } 10%{ transform: translate(-70%, -50%); } 15%{ transform: translate(-20%, -50%); } 20%{ transform: translate(-50%, -50%); } 100%{} } @keyframes breath { 0%{} 50%{ width: 80px; height: 80px; } 100%{} } .fa { display: inline-block; font-family: FontAwesome; font-size: 1.5em !important; } .ghost-button { width: 300px; height: 50px; align-items: center; text-align: center; margin-left: auto; margin-right: auto; margin-top: 30px; margin-bottom: 50px; transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1); cursor: pointer; user-select: none; } #sika-before-after:after { bottom: 10%; height: 25%; } .case-grid-7, .case-grid-6, .case-grid-5, .case-grid-4, .case-grid-3, .case-grid-2, .case-grid-1 { max-width: 100%; min-width: 320px; margin: 20px auto; align-content: center; justify-items: stretch; align-items: stretch; grid-gap: 30px; grid-template-columns: 100%; box-sizing: border-box; } .case-grid-7 { grid-template-rows: 300px 300px 300px 300px 300px 300px 300px; grid-template-areas: "case1" "case2" "case3" "case4" "case5" "case6" "case7"; } .case-grid-6 { grid-template-rows: 300px 300px 300px 300px 300px 300px; grid-template-areas: "case1" "case2" "case3" "case4" "case5" "case6"; } .case-grid-5 { grid-template-rows: 300px 300px 300px 300px 300px; grid-template-areas: "case1" "case2" "case3" "case4" "case5"; } .case-grid-4 { grid-template-rows: 300px 300px 300px 300px; grid-template-areas: "case1" "case2" "case3" "case4"; } .case-grid-3 { grid-template-rows: 300px 300px 300px; grid-template-areas: "case1" "case2" "case3"; } .case-grid-2 { grid-template-rows: 300px 300px; grid-template-areas: "case1" "case2"; } .case-grid-1 { grid-template-rows: 300px; grid-template-areas: "case1"; } } /*320px*/ @media all and (max-width: 520px) { .service-blocks { display: grid; align-items: flex-start; grid-template-columns: 100% ; width: 100%; margin-top: 50px; margin-bottom: 50px; } .service-once { margin-bottom: 20px; } .container { max-width: 100%; margin-top: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; -webkit-box-flex: 0; -webkit-flex: 0 auto; -ms-flex: 0 auto; flex: 0 auto; } .contacts-c { margin-bottom: 30px; } .client-grid { justify-content: space-between; align-content: center; grid-column-gap: 0px; grid-row-gap: 0px; grid-template-columns: 50% 50%; grid-template-rows: 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px; } .agency-header.orange:before {height: 320px} .agency-header.blue:before {height: 240px} .agency-header.sika:before {height: 170px} #sika-before-after:after { bottom: 20%; height: 20%; } .hero { font-size: 4rem; } #detail-case-footer .mail-form { max-width: 200px; } #detail-case-footer .mail-button { margin-left: 20px; } #case-next > div {width: 100%} #case-next > .right {margin-top: 30px; text-align: left} #case-next h4 {font-size: 1.5rem} .client-title {font-size: 1.25em;} .arka-description div{ flex-direction: column; } } /* End */ /* /css/fonts/fonts.css?169321081520030 */ /* /css/owl.carousel.min.css?15664749453351 */ /* /css/owl.theme.default.min.css?15664749451013 */ /* /css/master.css?175258419659194 */ /* /css/media.css?171636353032615 */