/* font-family: 'Open Sans', sans-serif; */ @font-face { font-family: 'bebasneue_thin'; src: url('bebasneue_thin.eot'); src: url('../fonts/bebasneue_thin.eot?#iefix') format('embedded-opentype'), url('../fonts/bebasneue_thin.woff') format('woff'), url('../fonts/bebasneue_thin.ttf') format('truetype'), url('../fonts/bebasneue_thin.svg#bebasneue_thin') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'hagin_caps_medium'; src: url('../fonts/hagin_caps_medium.eot'); src: url('../fonts/hagin_caps_medium.eot?#iefix') format('embedded-opentype'), url('../fonts/hagin_caps_medium.woff') format('woff'), url('../fonts/hagin_caps_medium.ttf') format('truetype'), url('../fonts/hagin_caps_medium.svg#hagin_caps_medium') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'hagin_caps_thin'; src: url('../fonts/hagin_caps_thin.eot'); src: url('../fonts/hagin_caps_thin.eot?#iefix') format('embedded-opentype'), url('../fonts/hagin_caps_thin.woff') format('woff'), url('../fonts/hagin_caps_thin.ttf') format('truetype'), url('../fonts/hagin_caps_thin.svg#hagin_caps_thin') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'bebasneue_bold'; src: url('../fonts/bebasneue_bold.eot'); src: url('../fonts/bebasneue_bold.eot?#iefix') format('embedded-opentype'), url('../fonts/bebasneue_bold.woff') format('woff'), url('../fonts/bebasneue_bold.ttf') format('truetype'), url('../fonts/bebasneue_bold.svg#bebasneue_bold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'bebasneue_book'; src: url('../fonts/bebasneue_book.eot'); src: url('../fonts/bebasneue_book.eot?#iefix') format('embedded-opentype'), url('../fonts/bebasneue_book.woff') format('woff'), url('../fonts/bebasneue_book.ttf') format('truetype'), url('../fonts/bebasneue_book.svg#bebasneue_book') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'bebasneue_light'; src: url('../fonts/bebasneue_light.eot'); src: url('../fonts/bebasneue_light.eot?#iefix') format('embedded-opentype'), url('../fonts/bebasneue_light.woff') format('woff'), url('../fonts/bebasneue_light.ttf') format('truetype'), url('../fonts/bebasneue_light.svg#bebasneue_light') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'bebasneue_regular'; src: url('../fonts/bebasneue_regular.eot'); src: url('../fonts/bebasneue_regular.eot?#iefix') format('embedded-opentype'), url('../fonts/bebasneue_regular.woff') format('woff'), url('../fonts/bebasneue_regular.ttf') format('truetype'), url('../fonts/bebasneue_regular.svg#bebasneue_regular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'jellyka-estrya-handwriting'; src: url('../fonts/jellyka-estrya-handwriting.eot'); src: url('../fonts/jellyka-estrya-handwriting.eot?#iefix') format('embedded-opentype'), url('../fonts/jellyka-estrya-handwriting.woff') format('woff'), url('../fonts/jellyka-estrya-handwriting.ttf') format('truetype'), url('../fonts/jellyka-estrya-handwriting.svg#jellyka-estrya-handwriting') format('svg'); font-weight: normal; font-style: normal; } /* Reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* End Reset */ /* Style tag */ #content H1, #content H2, #content H3, #content H4, #content H5, #content H6 { font-family: 'bebasneue_bold', Arial, Helvetica, san-serif; font-weight: bold; margin: 0 0 15px; color: #fff; line-height: 100%; } #content H1{ font-size: 30px; } #content H2{ font-size: 28px; } #content H3{ font-size: 26px; } #content H4{ font-size: 24px; } #content H5{ font-size: 22px; } #content H6{ font-size: 20px; } #content P , #content UL, #content PRE, #content OL, #content BLOCKQUOTE, #content FORM, #content INPUT, #content TEXTAREA, #content SELECT, #content BUTTON, #content TABLE, #content TR, #content TD, #content TH { margin: 0 0 10px; font: 16px/100% 'Open Sans', Arial, Helvetica, san-serif; color: #000; } #content TH, #content TD { padding: 10px; } #content A { line-height: 100%; font: 16px/100% 'Open Sans', Arial, Helvetica, san-serif; color: #000; } #content .alignleft { float: left; margin: 0 15px 15px 0 ; } #content .alignright { float: right; margin: 0 0 15px 15px; } #content UL { list-style-type: disc; margin: 0 14px 10px; } #content OL { list-style-type: decimal ; margin: 0 18px 10px; } #content OL LI, #content UL LI { margin: 0 0 10px; } TEXTAREA { resize:none; overflow: auto; } A:focus { outline: 0; } .clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } .clearfix {display: inline-block;} * html .clearfix {height:1%;} .clearfix {display:block;} .clear { clear: both; height: 0; line-height: 0px; font-size: 1px; } A { text-decoration: none; } A:HOVER { text-decoration: underline; } IMG { border: none; display: block;} LABEL { cursor: pointer; } BUTTON SPAN {display: none;} BUTTON { cursor: pointer;} * { -moz-box-sizing: border-box; box-sizing: border-box; } button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { border: none; padding:0; margin:0; } input:focus{ border: none; outline: none; } /* End Style tag */ BODY { background: #fff; margin: 0; padding: 0; text-align: left; font: 16px/100% 'Open Sans', Arial, Helvetica, san-serif; color: #000; min-width: 1130px; } html, body { height: 100%; } .container{ width: 1130px; margin: auto; padding: 0 10px; } /* HEADER */ HEADER { position: relative; } HEADER:before { content: ""; background: url("../images/bg/bg-header-left.png") no-repeat; position: absolute; width: 380px; height: 421px; left: 0; top: 0; z-index: 10; } HEADER:after { content: ""; background: url("../images/bg/bg-header-right.png") no-repeat; position: absolute; width: 307px; height: 411px; right: 0; top: 0; z-index: 10; } .top-header { border-bottom: 1px solid #e4e4e4; padding: 60px 0; margin: 0 0 100px; } .top-header .container{ position: relative; z-index: 30; } NAV >UL { text-align: center; } NAV >UL>LI { display: inline-block; vertical-align: top; font: 30px/100% 'bebasneue_light', Arial, Helvetica, san-serif; color: #818181; margin: 0 40px 0 0; position: relative; } NAV >UL>:last-child { margin-right: 0; } NAV >UL>LI>A { display: block; font: 30px/100% 'bebasneue_light', Arial, Helvetica, san-serif; color: #818181; position: relative; } NAV >UL>LI.active>A, NAV >UL>LI:hover>A { text-decoration: none; color: #272727; /* font-family: 'bebasneue_regular'; */ } NAV >UL>LI:hover >A:after { content: ""; width: 100%; height: 12px; position: absolute; top: 100%; left: 0; } .sub-menu{ margin: 12px 0 0; position: absolute; display: none; width: 165px; top: 100%; left: -20px; background: #e8506c; padding: 8px 5px; z-index: 100; } NAV >UL>LI:hover> .sub-menu { display: block; } .sub-menu LI{ font: 14px/100% 'Open Sans', Arial, Helvetica, san-serif; color: #fff; } .sub-menu LI A{ text-align: left; display: block; font: 14px/100% 'Open Sans', Arial, Helvetica, san-serif; color: #fff; padding: 13px 15px; } .sub-menu LI A:hover{ text-decoration: none; background: #c12e55; } .bottom-header { margin: 0 0 105px; } .bottom-header .container{ position: relative; z-index: 20; } .logo { text-align: center; margin: 0 0 40px; } .logo A{ display: inline-block; vertical-align: top; } .bottom-header P { text-align: center; font: 30px/100% 'Open Sans', Arial, Helvetica, san-serif; font-weight: 300; font-style: italic; color: #b8b8b8; } /* contetnt */ /* Button-hover-effect */ .learn-more:hover{ text-decoration: none; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes pul { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pul { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .learn-more:hover { -webkit-animation-name: pul; animation-name: pul; } #content .row-box-1 { padding: 0 0 115px; } #content .row-box-1 .banner-area { position: relative; text-align: center; width: 765px; margin: 0 auto 25px; padding: 145px 0 203px; } #content .row-box-1 .banner-area:after { content: ""; left: 0; top: 0; width: 100%; height: 100%; position: absolute; background: url("../images/bg/raspberry.png") center top no-repeat; z-index: 10; } #content .row-box-1 .banner-area IMG{ display: inline-block; vertical-align: top; } #content .row-box-1 .text-box{ position: relative; z-index: 30; } #content .row-box-1 .text-box:after{ content: ""; left: 0; top: 0; width: 100%; height: 100%; position: absolute; background: url("../images/bg/raspberry.png") center no-repeat; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); filter: url("blur.svg#blur"); filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5'); z-index: 20; } #content .row-box-1 .box { position: relative; z-index: 100; background: rgba(255,255,255,0.31); width: 100%; padding: 36px 0 0; -webkit-box-shadow: 0px 0px 62px 0px rgba(0, 0, 0, 0.24); -moz-box-shadow: 0px 0px 62px 0px rgba(0, 0, 0, 0.24); box-shadow: 0px 0px 62px 0px rgba(0, 0, 0, 0.24); } #content .row-box-1 .text-box H3{ font: 80px/100% 'bebasneue_light', Arial, Helvetica, san-serif; color: #892849; text-align: center; display: inline-block; vertical-align: middle; margin: 0 0 10px; } #content .row-box-1 .text-box H3 SPAN{ font: 80px/100% 'bebasneue_bold', Arial, Helvetica, san-serif; } #content .row-box-1 .text-box .learn-more { display: inline-block; vertical-align: top; width: 114px; height: 114px; border-radius: 100%; background: #c12e55; margin: 0 0 -57px; text-align: center; font: 24px/114px 'bebasneue_regular', Arial, Helvetica, san-serif; color: #fff; } #content .blockquote-box { width: 920px; margin: auto; } #content .blockquote-box P { text-align: center; font: 16px/180% 'Open Sans', Arial, Helvetica, san-serif; font-weight: 300; font-style: italic; color: #808080; margin: 0 0 38px; } #content .blockquote-box H5 { text-align: center; font: 24px/100% 'Open Sans', Arial, Helvetica, san-serif; font-weight: 300; color: #b8b8b8; margin: 0; } #content .blockquote-box H6 { text-align: center; font: 81px/100% 'jellyka-estrya-handwriting', Arial, Helvetica, san-serif; color: #000; margin: 0; } #content .row-box-2 { background: url("../images/bg/bg-1.jpg") repeat; position: relative; padding: 113px 0 105px; } #content .row-box-2:before { content: ""; position: absolute; width: 100%; height: 100px; top: 10px; left: 0; background: url("../images/bg/bg-shadow-top.png") center top no-repeat; } #content .row-box-2:after { content: ""; position: absolute; width: 100%; height: 100px; left: 0; bottom: 10px; background: url("../images/bg/bg-shadow-bottom.png") center top no-repeat; } #content .row-box-2 .left-box { float: left; width: 320px; } #content .row-box-2 .left-box H3{ font: 90px/80% 'bebasneue_bold', Arial, Helvetica, san-serif; color: #fff; } #content .row-box-2 .right-box{ float: right; width: 730px; } #content .row-box-2 .right-box P{ font: 16px/180% 'Open Sans', Arial, Helvetica, san-serif; color: #000; margin: 0 0 35px; } #content .icon-box { margin: 65px 0 0; list-style: none; } #content .icon-box LI{ margin: 0; display: inline-block; vertical-align: top; margin: 0 12px 0 0; } #content .icon-box A{ display: block; background: rgba(255,255,255,0.46); width: 65px; height: 65px; border-radius: 100%; text-align: center; line-height: 65px; } #content .icon-box A:hover{ text-decoration: none; background: rgba(255,255,255,1); } #content .icon-box IMG{ display: inline-block; vertical-align: middle; } #content .row-box-3 { padding: 108px 0 90px; text-align: center; } #content .row-box-3 H3{ width: 920px; margin: 0 auto 100px; font: 60px/100% 'bebasneue_light', Arial, Helvetica, san-serif; color: #a7a6a6; } #content .large-box { margin: 0; list-style: none; } #content .large-box LI{ display: inline-block; vertical-align: top; width: 33.33%; margin: 0 -5px 15px 0; padding: 0 15px; } #content .large-box A{ display: block; font: 36px/100% 'bebasneue_bold', Arial, Helvetica, san-serif; color: #000; margin: 0 0 23px; } #content .large-box A STRONG{ margin: 0 auto 48px; display: block; width: 128px; height: 128px; border-radius: 100%; text-align: center; line-height: 128px; } #content .large-box A IMG{ display: inline-block; vertical-align: middle; } #content .large-box .box-1 STRONG{ background: #76c2af; } #content .large-box .box-2 STRONG{ background: #e0995e; } #content .large-box .box-3 STRONG{ background: #77b3d4; } #content .large-box A SPAN{ font: 36px/100% 'bebasneue_bold', Arial, Helvetica, san-serif; color: #000; } #content .large-box P{ font: 16px/180% 'Open Sans', Arial, Helvetica, san-serif; font-weight: 300; color: #808080; } #content .row-box-4 { background: url("../images/bg/bg-2.jpg") repeat; padding: 105px 0 85px; } #content .row-box-4 H3 { font: 60px/100% 'bebasneue_bold', Arial, Helvetica, san-serif; color: #fff; margin: 0 auto 77px; text-align: center; width: 920px; } #content .map{ text-align: center; } #content .map IMG{ display: inline-block; vertical-align: top; } #content .row-box-5 { padding: 140px 0 155px; } #content .row-box-5 .top-box{ padding: 0 0 70px; } #content .row-box-5 .left-box{ float: left; width: 315px } #content .row-box-5 .left-box H3{ font: 90px/80% 'bebasneue_bold', Arial, Helvetica, san-serif; color: #000; } #content .row-box-5 .right-box{ float: right; width: 730px } #content .row-box-5 .right-box P{ font: 16px/180% 'Open Sans', Arial, Helvetica, san-serif; font-weight: 300; color: #808080; } #content .photo-box{ list-style: none; margin: 0; } #content .photo-box LI{ display: inline-block; vertical-align: middle; margin: 0 -156px 0 0; position: relative; } #content .photo-box .center-img { z-index: 20; } #content .photo-box A{ display: inline-block; vertical-align: top; width: 442px; height: 442px; background: #e84e65; padding: 20px; border-radius: 100%; overflow: hidden; line-height: 540px; position: relative; } #content .photo-box A SPAN{ display: block; position: relative; } #content .photo-box A:hover { text-decoration: none; } #content .photo-box .left-img A{ background: #ffd36b; } #content .photo-box .right-img A { background: #46b386; } #content .photo-box A B { display: block; position: relative; overflow: hidden; border-radius: 100%; } #content .photo-box .center-img A:hover B:after{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(232,78,101,0.8); overflow: hidden; border-radius: 100%; } #content .photo-box .center-img A:hover SPAN:after{ content: ""; position: absolute; left: 50%; top: 50%; width: 186px; height: 7px; background: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; z-index: 10; margin: -4px 0 0 -93px; } #content .photo-box .center-img A:hover SPAN:before{ content: ""; position: absolute; left: 50%; top: 50%; height: 186px; width: 7px; background: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; z-index: 10; margin: -93px 0 0 -4px; } #content .photo-box .center-img A{ width: 540px; height: 540px; } #content .photo-box LI IMG{ display: block; border-radius: 100%; overflow: hidden; } /* FOOTER */ FOOTER { background: #a02e4d; } FOOTER .container{ padding: 73px 0; } FOOTER .logo-box{ float: left; width: 170px; } FOOTER .logo-box H1 { font: 72px/100% 'bebasneue_bold', Arial, Helvetica, san-serif; color: #fff; } FOOTER .logo-box H1 A { font: 72px/100% 'bebasneue_bold', Arial, Helvetica, san-serif; color: #fff; display: inline-block; vertical-align: top; } FOOTER .logo-box H1 A:hover { text-decoration: none; opacity: 0.7; } FOOTER .logo-box P { font: 14px/100% 'Open Sans', Arial, Helvetica, san-serif; font-weight: 300; color: #fff; } FOOTER .social-box { float: right; } FOOTER .social-box LI{ display: inline-block; vertical-align: top; margin: 0 0 0 8px; } FOOTER .social-box LI A{ display: block; width: 100px; height: 100px; border: 3px solid rgba(255,255,255,0.3); border-radius: 100%; position: relative; } FOOTER .social-box LI A:hover{ text-decoration: none; background: #fff; border: 3px solid rgba(255,255,255,1); } FOOTER .social-box .tw A:after{ content: ""; position: absolute; left: 50%; top: 50%; width: 43px; height: 35px; margin: -18px 0 0 -22px; background: url("../images/icons/tw.png") no-repeat; } FOOTER .social-box .tw A:hover:after{ background-position: 0 -35px; } FOOTER .social-box .fb A:after{ content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 45px; margin: -23px 0 0 -12px; background: url("../images/icons/fb.png") no-repeat; } FOOTER .social-box .fb A:hover:after{ background-position: 0 -45px; } FOOTER .social-box .vm A:after{ content: ""; position: absolute; left: 50%; top: 50%; width: 51px; height: 45px; margin: -23px 0 0 -26px; background: url("../images/icons/vm.png") no-repeat; } FOOTER .social-box .vm A:hover:after{ background-position: 0 -45px; } FOOTER .social-box .sk A:after{ content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 43px; margin: -22px 0 0 -22px; background: url("../images/icons/sk.png") no-repeat; } FOOTER .social-box .sk A:hover:after{ background-position: 0 -43px; } FOOTER .social-box .fl A:after{ content: ""; position: absolute; left: 50%; top: 50%; width: 51px; height: 22px; margin: -11px 0 0 -26px; background: url("../images/icons/fl.png") no-repeat; } FOOTER .social-box .fl A:hover:after{ background-position: 0 -22px; }