8889841chome/clixcotz/island.clix.co.tz/css/layout.css000064400000751717150427640110015440 0ustar00 @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic&subset=latin,greek,greek-ext,vietnamese,latin-ext,cyrillic,cyrillic-ext); @import url(https://fonts.googleapis.com/css?family=Dosis:400,200,300,500,600,700,800&subset=latin,latin-ext); @import url(https://fonts.googleapis.com/css?family=Tangerine:400,700); @import url(http://fonts.googleapis.com/css?family=Inconsolata:400,700&subset=latin,latin-ext); @import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic,900,900italic&subset=latin,latin-ext,cyrillic); @import url("colors/color.css"); /* #Scroll back to top ================================================== */ .scroll-to-top { position: fixed; text-align:center; font-family: 'FontAwesome'; background:#212121; cursor: pointer; bottom: 20px; opacity:.5; border-radius:3px; right: 20px; width:40px; font-size:13px; color:#fff; line-height:40px; height: 40px; display: none; z-index: 9999; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .scroll-to-top:hover { opacity:1; } /* #For All Pages ================================================== */ .section{ position:relative; width:100%; } .margin-center{ margin:0 auto; } .section-menu-fixed{ position:fixed; width:100%; z-index:9999; } .padding-top{ padding-top:120px; } .padding-bottom{ padding-bottom:120px; } .padding-top-bottom{ padding-top:120px; padding-bottom:120px; } .padding-top-bottom-med{ padding-top:80px; padding-bottom:80px; } .padding-top-med{ padding-top:80px; } .padding-bottom-med{ padding-bottom:80px; } .padding-top-bottom-small{ padding-top:60px; padding-bottom:60px; } .padding-top-small{ padding-top:60px; } .padding-bottom-small{ padding-bottom:60px; } .full-height{ height:100vh; } .half-height{ height:50vh; } .white-background{ background-color:rgba(255,255,255,1); } .grey-background{ background-color:#f2f2f2; } .greyish-background{ background-color:#eef2e8; } .dark-background{ background-color:rgba(40,40,40,1); } .darker-background{ background-color:rgba(30,30,30,1); } .black-background{ background-color:rgba(0,0,0,1); } .section-shadow{ box-shadow: 0 0 20px rgba(0,0,0,.1); } .img-wrap{ position:relative; width:100%; } .img-wrap img{ width:100%; display:block; } .menu-section{ padding-top:10px; padding-bottom:10px; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .cbp-af-header { -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .cbp-af-header.cbp-af-header-shrink { -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .cbp-af-header.cbp-af-header-shrink .container .columns { margin-top:0; margin-bottom:0; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .cbp-af-header .container .columns { -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .cbp-af-header.cbp-af-header-shrink .sky-mega-menu li > div:before { border-bottom: 5px solid transparent; } .sky-mega-menu.center-menu { position: relative; z-index: 999; margin:0 auto; text-align: center; } .logo-wrap{ position:absolute; left:10px; top:50%; z-index:100001; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .logo-wrap.top-logo{ position:relative; left:auto; top:auto; z-index:100001; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } .logo-wrap.top-logo img{ margin:0 auto; width: auto; padding-top:20px; text-align:center; } .cbp-af-header.cbp-af-header-shrink .logo-wrap.top-logo img{ width:0; padding-top:0; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .logo-wrap img{ width:auto; display:block; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .cbp-af-header.cbp-af-header-shrink .logo-wrap img{ width:auto; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } /* #Homes ================================================== */ .sign-section-left{ position: relative; width:100%; display:block; } .sign-section-left p{ text-align:left; font-size:17px; line-height:28px; font-style: italic; } .sign-section-left .sign{ text-align:left; margin-top:60px; font-size:30px; font-family: 'Tangerine', cursive; letter-spacing:8px; font-weight:400; } /* #Split layout ================================================== */ .split-left{ position: relative; float:left; width:50%; height:60vh; display:inline-block; background-size:cover; background-position:center center; background-repeat:no-repeat; } .split-background-1{ background-image:url('../images/home4.jpg') } .split-background-3{ background-image:url('../images/home2.jpg') } .split-left.dark-background .split-text-wrap .title-text-center h5{ color:#fff; } .split-left.dark-background .split-text-wrap .title-text-center p{ color:#9a9a9a; } .split-left.dark-background .split-text-wrap p{ color:#fff; } .split-text-wrap .play-video p{ color:#fff; } .split-text-wrap .count-box-1 { padding-bottom:0; padding-top:0; } .split-text-wrap .count-box-1 .icon{ color:#fff; } .split-text-wrap .count-box-1 h3{ font-size: 34px; line-height:40px; font-weight:600; padding-bottom:15px; color:#fff; } .split-text-wrap .count-box-1 p{ color:#fff; font-size:15px; line-height:22px; letter-spacing:3px; } .split-right{ position: relative; float:right; width:50%; height:60vh; display:inline-block; background-size:cover; background-position:center center; background-repeat:no-repeat; } .split-background-2{ background-image:url('../images/home5.jpg') } .split-background-4{ background-image:url('../images/home3.jpg') } .split-background-5{ background-image:url('../images/home6.jpg') } .split-right.dark-background .split-text-wrap .title-text-center h5{ color:#fff; } .split-right.dark-background .split-text-wrap .title-text-center p{ color:#9a9a9a; } .split-right.dark-background .split-text-wrap p{ color:#fff; } .split-text-wrap{ position: absolute; margin-left:20%; width:60%; z-index:4; top:50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .split-text-wrap p{ text-align:center; } .split-mask{ position: absolute; width:calc(100% - 30px); height:calc(100% - 30px); border:15px double rgba(255,255,255,.15); top:0; left:0; z-index:3; } .half-style{ position:relative; width:100%; margin:0 auto; text-align:center; } .half-style p{ text-align:center; margin-bottom:50px; } .half-style .title-text-center p{ margin-bottom:0; } .half-style a.button{ font-family: 'Inconsolata'; font-weight:600; padding:12px 38px; border:2px solid #323232; color:#fff; background-color:#323232; border-radius:2px; text-align:center; margin:0 auto; font-size:13px; line-height:13px; letter-spacing:3px; text-transform:uppercase; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } /* #Home carousel ================================================== */ #owl-top { position:relative; width:100%; margin:0 auto; } #owl-top .item{ position:relative; width:100%; height:100vh; margin:0 auto; background-size:cover; background-position:center center; background-repeat:no-repeat; cursor: url(../images/grab-slider.png) 8 8, move !important; z-index:2; } #owl-top .item.top-image-1{ background-image:url('../images/slider-1.jpg'); } #owl-top .item.top-image-2{ background-image:url('../images/slider-2.jpg'); } #owl-top.owl-theme .owl-controls .owl-buttons .owl-prev{ position:absolute; left:0; cursor: url(../images/grab-left.png) 8 8, move !important; } #owl-top.owl-theme .owl-controls .owl-buttons .owl-next{ position:absolute; right:0; cursor: url(../images/grab-right.png) 8 8, move !important; } #owl-top.owl-theme .owl-controls .owl-buttons .owl-next, #owl-top.owl-theme .owl-controls .owl-buttons .owl-prev{ top:0; width:30%; height:100%; z-index:1; text-indent: 1000%; } a.scroll-down-arrow{ position:absolute; left:0; bottom:0; height:20%; width:100%; z-index:200; cursor: url(../images/grab-down.png) 8 8, move !important; } /* #Intro text ================================================== */ .hero-wrap-2, .hero-wrap-1, .hero-wrap{ position:absolute; left:0; top:50%; width:100%; z-index:10; text-align:center; margin:0 auto; margin-top:50px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .hero-wrap-1{ margin-top:30px; } .hero-wrap p, .hero-wrap-1 h2, .hero-wrap-1 p, .hero-wrap h2{ text-align:center; } .hero-wrap-1 h2{ text-transform:none; font-weight:800; letter-spacing:1px; font-size:160px; line-height:110px; color:#fff; margin-bottom:100px; } .hero-wrap-1 h2 span{ font-weight:600; font-size:60px; line-height:60px; letter-spacing:4px; } .hero-wrap p{ position:relative; font-size:30px; font-family: 'Tangerine', cursive; letter-spacing:8px; margin-bottom:40px; font-weight:700; color:#fff; } .hero-wrap p:after{ position:absolute; content:''; height:4px; background-color:transparent; width:30px; left:50%; margin-left:-15px; bottom:0; z-index:1; } .hero-wrap h2{ font-family: 'Playfair Display', serif; font-style: italic; text-transform:none; font-weight:900; letter-spacing:25px; font-size:80px; line-height:92px; color:#f3f3f3; margin-bottom:80px; } a.hero-link { margin-left:15px; margin-right:15px; padding:12px 40px; margin:0 auto; text-align:center; letter-spacing:3px; border-radius:3px; color:#fff; font-family: 'Inconsolata'; text-transform:uppercase; font-weight:400; font-size: 14px; line-height:18px; border:2px solid #fff; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .hero-wrap-1 a.hero-link { background-color:#fff; font-weight:600; } .hero-wrap-1 a.hero-link:hover { color:#fff; } .hero-wrap-2.left p, .hero-wrap-2.left h2{ text-align:left; } .hero-wrap-2.right p, .hero-wrap-2.right h2{ text-align:right; } .hero-wrap-2.center p, .hero-wrap-2.center h2{ text-align:center; } .hero-wrap-2 h2{ font-family: 'Playfair Display', serif; font-style: italic; text-transform:none; font-weight:900; letter-spacing:2px; font-size:70px; line-height:82px; color:#fff; z-index:2; } .hero-wrap-2 h2 span{ letter-spacing:2px; font-size:150px; line-height:120px; } .hero-wrap-2 p{ font-family: 'Dosis', sans-serif; text-transform:none; font-weight:500; letter-spacing:14px; font-size:20px; line-height:100px; color:#fff; z-index:2; } .hero-wrap-2 .text-back{ position:absolute; left:0; top:-20px; width:100%; z-index:1; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-family: 'Playfair Display', serif; font-size:200px; font-style: italic; text-transform:none; font-weight:900; color:rgba(255,255,255,.2); } .hero-wrap-2.left .text-back{ text-align:left; } .hero-wrap-2.right .text-back{ text-align:right; } .hero-wrap.hero-landing .landing-home-text{ -webkit-transform: translateY(45%); -moz-transform: translateY(45%); -ms-transform: translateY(45%); -o-transform: translateY(45%); transform: translateY(45%); } .hero-wrap.hero-landing p, .hero-wrap.hero-landing h2{ text-align:right; } .hero-wrap.hero-landing p{ position:relative; font-size:14px; font-family: 'Open Sans', sans-serif; text-transform:uppercase; letter-spacing:3px; margin-right:7px; margin-bottom:80px; font-weight:600; color:#424242; } .hero-wrap.hero-landing p:after{ position:absolute; content:''; height:1px; width:60px; left:calc(100% - 48px); top:-18px; z-index:1; } .hero-wrap.hero-landing h2{ font-family: 'Playfair Display', serif; font-style: italic; text-transform:none; font-weight:900; letter-spacing:10px; font-size:60px; line-height:72px; color:#000; margin-bottom:35px; } .hero-wrap.hero-landing a.hero-link { float:right; margin-left:0; margin-right:10px; padding:12px 40px; text-align:center; letter-spacing:3px; border-radius:3px; background-color:#313131; color:#fff; font-family: 'Inconsolata'; text-transform:uppercase; font-weight:400; font-size: 13px; line-height:18px; border-width:0; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } /* #Titles ================================================== */ .title-text-center{ position:relative; width:100%; margin:0 auto; text-align:center; padding-bottom:20px; } .title-text-center:after{ position:absolute; content:''; width:50px; left:50%; margin-left:-25px; bottom:0; height:1px; z-index:2; } .title-text-center h5, .title-text-center h4{ text-align:center; } .title-text-center p{ margin-top:15px; font-size: 16px; font-style: italic; line-height:26px; letter-spacing:5px; font-weight:400; font-family: 'Playfair Display', serif; } .title-text-left{ position:relative; width:100%; margin:0 auto; text-align:left; padding-bottom:20px; } .title-text-left:after{ position:absolute; content:''; width:50px; left:0; bottom:0; height:1px; z-index:2; } .title-text-left h5, .title-text-left h4{ text-align:left; } .title-text-left p{ margin-top:15px; text-align:left; font-style: italic; font-family: 'Playfair Display', serif; font-size: 16px; line-height:26px; letter-spacing:5px; font-weight:400; } .title-text-center.bigger-margin, .title-text-left.bigger-margin{ margin-bottom:45px; } .dark-section-with-title{ position:relative; width:calc(100% - 200px); padding-top:100px; padding-bottom:100px; padding-left:100px; padding-right:100px; } .dark-section-with-title .title-text-left h4{ color:#fff; } .dark-section-with-title .title-text-left p{ color:#f8f8f8; } .dark-section-with-title p{ color:#fff; } /* #Pages ================================================== */ .hero-wrap-pages{ position:absolute; left:0; top:50%; width:100%; z-index:10; text-align:center; margin-top:47px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .hero-wrap-pages p, .hero-wrap-pages h2{ text-align:center; } .hero-wrap-pages h2{ font-style: italic; font-family: 'Playfair Display', serif; font-size: 40px; line-height:48px; letter-spacing:8px; font-weight:900; color:#fff; text-transform:none; } .hero-wrap-pages p{ font-family: 'Open Sans', sans-serif; font-weight:300; font-size: 15px; line-height:23px; letter-spacing:3px; font-weight:600; color:#f8f8f8; margin-top:15px; text-transform:uppercase; } /* #Counter ================================================== */ .countdown-text { position:relative; margin-top:120px; width:100%; display: block; text-align: center; } ul.countdown { position:relative; width:100%; display: block; text-align: center; } ul.countdown li { display: inline-block; } ul.countdown li span { font-size: 80px; line-height: 80px; font-style: italic; font-family: 'Playfair Display', serif; font-weight:900; color:#fff; } ul.countdown li.seperator { font-size: 40px; width: 40px; text-align:center; line-height: 80px; vertical-align: top; padding-left:40px; padding-right:40px; color:#fff; font-style: italic; font-weight:900; font-family: 'Playfair Display', serif; } ul.countdown li p { font-family: 'Open Sans', sans-serif; color: #fff; font-size: 14px; text-transform:uppercase; letter-spacing:3px; margin-top:20px; } /* #Landing Page ================================================== */ .landing-features .title-text-center h4{ color:#fff; } .landing-features .title-text-center p{ color:#f8f8f8; } .landing-features p{ color:#f1f1f1; } .landing-features h6{ color:#fff; } .landing-features .about-box-1 .subtext, .landing-features .about-box-2 .subtext{ color:#d2d2d2; } #owl-app{ position:relative; width:calc(100% - 30px); overflow:hidden; margin:0 auto; text-align:center; margin-bottom:25px; } #owl-app .item{ position:relative; overflow:hidden; text-align:center; margin:0 auto; text-align:center; margin-bottom:15px; } #owl-app .item img{ width:70%; display:block; margin:0 auto; text-align:center; } #owl-app .item .zoom{ position:absolute; display:block; top:50%; left:50%; margin-left:-25px; margin-top:-25px; border-radius:50%; z-index:3; color:#fff; background:#212121; height:50px; width:50px; line-height:50px; font-family: 'Simple-Line-Icons'; font-size: 13px; opacity:0; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } #owl-app .item:hover .zoom{ opacity:1; } #buy{ position:relative; margin:0 auto; text-align:center; } #buy a.button{ position:relative; font-family: 'Open Sans', sans-serif; font-weight:400; margin:0 auto; width:260px; padding:15px 0; color:#fff; margin-left:15px; margin-right:15px; margin-top:15px; margin-bottom:15px; border-radius:2px; text-align:center; font-size:11px; line-height:11px; letter-spacing:2px; display:inline-block; text-transform:uppercase; z-index:2; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } #buy a.button:hover{ background:#222; } #buy a.button:before{ font-family: 'FontAwesome'; position:absolute; height:140px; width:140px; line-height:140px; font-size:140px; text-align:center; left:50%; margin-top:-70px; margin-left:-70px; color:rgba(255,255,255,.1); z-index:1; } #buy a.button:nth-of-type(1):before{ content:'\f17b'; } #buy a.button:nth-of-type(2):before{ content:'\f179'; } #buy .padding-top-bottom{ padding-top:220px; padding-bottom:220px; } #buy .subscribe{ position:relative; width:100%; max-width:400px; overflow:hidden; margin:0 auto; text-align:center; } #buy .subscribe input{ position:relative; width:calc(100% - 52px); outline:none; border-radius:6px; margin:0 auto; display:block; border:1px solid #fff; background:transparent; font-style: italic; font-family: 'Playfair Display', serif; font-size: 13px; line-height:18px; letter-spacing:1px; color:#fff; padding:14px 25px; } #buy .subscribe .button{ position:absolute; top:3px; right:3px; z-index:4; border-radius:4px; display:block; background:#fff; font-family: 'Open Sans', sans-serif; text-transform:uppercase; cursor:pointer; font-weight:600; font-size: 11px; line-height:18px; letter-spacing:2px; color:#212121; padding:12px 25px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } #buy .subscribe .button:hover{ color:#fff; } #buy .subscribe p{ margin-bottom:0; margin-top:10px; padding-bottom:0; font-family: 'Playfair Display', serif; font-style: italic; text-transform:none; font-weight:400; letter-spacing:3px; font-size:13px; line-height:17px; color:#999; z-index:2; } /* #List style ================================================== */ .list-style-1{ position:relative; width:100%; } .list-style-1 li{ position:relative; width:100%; display:block; margin-top:20px; margin-bottom:20px; } .list-style-1 li:first-child{ margin-top:40px; } .list-style-1 li:last-child{ margin-bottom:0; } .list-style-1 li .icon{ position:relative; width:40px; height:40px; text-align:center; font-size:14px; line-height:40px; color:#414141; display:inline-block; margin-right:20px; float:left; border-radius:50%; font-weight:normal; } .list-style-1 li .icon:before { font-family: 'Simple-Line-Icons'; speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .list-style-1 li p{ line-height:40px; text-align:left; display:inline-block; font-style: italic; font-family: 'Playfair Display', serif; font-size: 14px; letter-spacing:3px; font-weight:400; } /* #Call To Action ================================================== */ .call-to-action-1{ position:relative; width:100%; margin:0 auto; text-align:center; } .call-to-action-1 .icon{ position:relative; width:100%; margin:0 auto; text-align:center; margin-bottom:20px; font-size:25px; color:#fff; font-weight:normal; } .call-to-action-1 .icon:before { font-family: 'Simple-Line-Icons'; speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .call-to-action-1 h5{ text-align:center; color:#fff; } .call-to-action-1 p{ text-align:center; margin-top:15px; font-size:28px; font-family: 'Tangerine', cursive; letter-spacing:5px; } .call-to-action-2 { position:relative; margin:0 auto; text-align:center; } .call-to-action-2 a.call-to-action-2-link { padding:12px 40px; margin-left:15px; margin-right:15px; text-align:center; letter-spacing:3px; border-radius:3px; display:inline-block; color:#fff; font-family: 'Inconsolata'; text-transform:uppercase; font-weight:400; font-size: 14px; line-height:18px; border:2px solid #fff; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .call-to-action-3{ position:relative; width:100%; overflow:hidden; } .call-to-action-3 .icon{ position:relative; float:left; display:inline-block; width:45px; height:45px; color:#fff; margin-right:50px; text-align:left; font-size:45px; line-height:45px; font-weight:normal; } .call-to-action-3 .icon:before { font-family: 'Simple-Line-Icons'; speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .call-to-action-3 h5{ text-align:left; padding-bottom:5px; color:#fff; } .call-to-action-3 .subtext{ text-align:left; color:#f1f1f1; font-style: italic; font-family: 'Playfair Display', serif; font-size: 16px; line-height:27px; letter-spacing:3px; font-weight:400; padding-top:5px; } .call-to-action-3 .button{ font-family: 'Inconsolata'; font-weight:400; padding:12px 0; border:2px solid #fff; color:#fff; border-radius:3px; text-align:center; font-size:16px; line-height:16px; letter-spacing:2px; text-transform:uppercase; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } /* #About ================================================== */ .text-about-center{ position:relative; width:100%; margin:0 auto; text-align:center; overflow:hidden; } .text-about-center p{ width:100%; text-align:center; margin:0 auto; max-width:950px; } .about-box-1{ position:relative; width:100%; overflow:hidden; margin-top:53px; } .about-box-2{ position:relative; width:100%; overflow:hidden; margin-top:53px; } .about-box-1 .icon, .about-box-2 .icon{ position:relative; display:inline-block; width:75px; height:75px; border-radius:50%; color:#fff; background:#212121; text-align:center; font-size:17px; line-height:75px; font-weight:normal; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .about-box-1 .icon{ float:left; margin-right:20px; } .about-box-2 .icon{ float:right; margin-left:20px; } .about-box-1 .icon:before, .about-box-2 .icon:before { font-family: 'Simple-Line-Icons'; speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .about-box-1 h6{ text-align:left; padding-top:15px; padding-bottom:5px; } .about-box-2 h6{ text-align:right; padding-top:15px; padding-bottom:5px; } .about-box-2 .subtext, .about-box-1 .subtext{ color:#747474; font-style: italic; font-family: 'Playfair Display', serif; font-size: 13px; line-height:17px; letter-spacing:2px; font-weight:400; } .about-box-1 .subtext{ text-align:left; } .about-box-2 .subtext{ text-align:right; } /* #Team Boxes ================================================== */ .team-box-1{ position:relative; width:100%; margin:0 auto; text-align:center; overflow:hidden; } .team-box-1 img{ width:100%; display:block; } .team-box-1 .mask{ position:absolute; z-index:2; top:0; width:100%; left:0; height:calc(100% - 76px); opacity:0; background:rgba(0,0,0,.7); -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .team-box-1:hover .mask{ opacity:1; } .team-box-1 ul{ position:absolute; z-index:3; top:-30px; margin-top:-48px; width:100%; left:0; text-align:center; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .team-box-1 ul:before{ position:absolute; content:''; bottom:-20px; left:50%; width:0; height:1px; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .team-box-1:hover ul:before{ margin-left:-70px; width:140px; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .team-box-1 ul li{ display:inline-block; text-align:center; } .team-box-1:hover ul{ top:50%; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .team-box-1 ul li:before{ content:'/'; padding-left:5px; margin-right:12px; font-size: 17px; color:#fff; font-style: italic; font-family: 'Playfair Display', serif; } .team-box-1 ul li:first-child:before{ content:none; } .team-box-1 ul li a{ color:#fff; font-style: italic; font-family: 'Playfair Display', serif; font-size: 13px; line-height:17px; letter-spacing:2px; font-weight:400; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .team-box-1 h6{ margin-top:30px; text-align:center; padding-bottom:5px; } .team-box-1 .subtext{ text-align:center; color:#747474; font-style: italic; font-family: 'Playfair Display', serif; font-size: 13px; line-height:17px; letter-spacing:2px; font-weight:400; } .team-box-2{ position:relative; width:100%; margin:0 auto; text-align:center; overflow:hidden; } .team-box-2:after{ content: ''; display: block; clear: both; } .team-box-2 .team-box-in{ position:relative; width:calc(100% / 4); margin:0 auto; text-align:center; float:left; display:inline-block; height:50vh; background-size:cover; background-position: top center; background-repeat:no-repeat; } .team-box-in-image-1{ background-image:url('../images/team-full-1.jpg'); } .team-box-in-image-2{ background-image:url('../images/team-full-2.jpg'); } .team-box-2 .team-box-in.arrow:before { content: ''; position: absolute; right: 100%; top: 50%; margin-top:-10px; border-top: 20px solid transparent; border-right: 20px solid rgba(30,30,30,1); border-bottom: 20px solid transparent; } .team-box-2 .team-box-in .team-info{ position:absolute; width:100%; left:0; top:50%; text-align:center; display:block; z-index:3; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .team-box-2 .team-box-in .team-info h6{ text-align:center; color:#fff; padding-bottom:5px; } .team-box-2 .team-box-in .team-info .subtext{ text-align:center; color:#ccc; font-style: italic; font-family: 'Playfair Display', serif; font-size: 13px; line-height:17px; letter-spacing:2px; font-weight:400; padding-bottom:30px; } .team-box-2 .team-box-in .team-info .subtext:after{ position:absolute; content:''; height:1px; width:40px; left:50%; margin-left:-20px; bottom:48px; z-index:3; } .team-box-2 .team-box-in .team-info ul{ margin-top:30px; z-index:3; width:100%; text-align:center; } .team-box-2 .team-box-in .team-info ul li{ display:inline-block; text-align:center; } .team-box-2 .team-box-in .team-info ul li:before{ content:'/'; padding-left:5px; margin-right:12px; font-size: 17px; color:#fff; font-style: italic; font-family: 'Playfair Display', serif; } .team-box-2 .team-box-in .team-info ul li:first-child:before{ content:none; } .team-box-2 .team-box-in .team-info ul li a{ color:#fff; font-style: italic; font-family: 'Playfair Display', serif; font-size: 13px; line-height:17px; letter-spacing:2px; font-weight:400; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } /* #Pricing boxes ================================================== */ .pricing-box-1{ position:relative; width:100%; margin:0 auto; text-align:center; padding-bottom:50px; } .pricing-box-1 .text-top{ position:relative; width:100%; margin:0 auto; padding-top:50px; padding-bottom:50px; text-align:center; border-bottom:5px solid #fff; } .pricing-box-1 .text-top .upertext{ text-align:center; color:#000; font-style: italic; font-family: 'Playfair Display', serif; font-size: 13px; line-height:17px; letter-spacing:2px; font-weight:400; margin-bottom:5px; } .pricing-box-1 .text-top.dark-background .upertext{ color:#fff; } .pricing-box-1 .text-top .name{ font-family: 'Dosis', sans-serif; text-align:center; color:#000; font-size: 20px; line-height: 26px; text-transform:uppercase; letter-spacing:7px; font-weight:600; margin-bottom:20px; } .pricing-box-1 .text-top.dark-background .name{ color:#fff; } .pricing-box-1 .text-top .price{ font-family: 'Playfair Display', serif; font-style: italic; text-align:center; color:#747474; font-size: 50px; line-height:56px; font-weight:400; } .pricing-box-1 .text-top.dark-background .price{ color:#f8f8f8; } .pricing-box-1 .text-top .price span{ font-style: italic; font-size: 17px; } .pricing-box-1 .text-top .price span:nth-of-type(1){ vertical-align:top; } .pricing-box-1 ul{ position:relative; width:100%; margin:0 auto; text-align:center; padding-top:50px; } .pricing-box-1 ul li{ position:relative; margin-left:20px; margin-right:20px; display:block; padding-top:15px; padding-bottom:15px; } .pricing-box-1 ul li:after{ position:absolute; content:''; bottom:0; left:50%; width:40px; margin-left:-20px; height:1px; background-color:rgba(0,0,0,.1); } .pricing-box-1 ul li:last-child:after{ display:none; } .pricing-box-1 ul li:first-child{ padding-top:0; } .pricing-box-1 ul li:last-child{ padding-bottom:0; } .pricing-box-1 ul li p{ font-size:12px; text-transform:uppercase; } .pricing-box-1 .button{ width:150px; margin:0 auto; text-align:center; margin-top:50px; font-size:12px; text-transform:uppercase; letter-spacing:3px; font-weight:600; color:#fff; background:#323232; padding:10px 0; border-radius:3px; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } /* #Process boxes ================================================== */ .process-box-1{ position:relative; width:100%; margin:0 auto; text-align:center; } .process-box-1:before{ position:absolute; content:''; width:30px; left:-40px; top:76px; height:1px; background-color:rgba(0,0,0,.7); z-index:2; } .no-line .process-box-1:before{ display:none; } .process-box-1 img{ width:140px; height:140px; border:6px double rgba(0,0,0,1); margin:0 auto; text-align:center; display:block; border-radius:50%; margin-bottom:30px; } .process-box-1 h6{ text-align:center; padding-bottom:5px; } .process-box-1 .subtext{ text-align:center; color:#747474; font-style: italic; font-family: 'Playfair Display', serif; font-size: 13px; line-height:17px; letter-spacing:2px; font-weight:400; } .process-box-1 p{ text-align:center; padding-top:20px; } /* #Services Boxes ================================================== */ .services-box-1{ position:relative; width:100%; margin:0 auto; text-align:center; overflow:hidden; } .services-box-1 .icon{ position:relative; width:100%; margin:0 auto; text-align:center; margin-bottom:20px; font-size:35px; color:#ccc; font-weight:normal; } .services-box-1 .icon:before { font-family: 'Simple-Line-Icons'; speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .services-box-1 h6{ text-align:center; color:#fff; padding-bottom:5px; } .services-box-1 .subtext{ text-align:center; color:#ccc; font-style: italic; font-family: 'Playfair Display', serif; font-size: 13px; line-height:17px; letter-spacing:2px; font-weight:400; } .services-box-1.light h6{ color:#414141; } .services-box-1.light .subtext{ color:#525252; } .services-box-1.light p{ text-align:center; padding-top:20px; } .services-box-1 .icon.light-color-icon{ } .services-box-2{ position:relative; width:100%; overflow:hidden; } .services-box-2 .number{ position:relative; font-family: 'Tangerine', cursive; z-index:2; width:100%; text-align:left; font-size:55px; line-height:20px; vertical-align:top; float:left; display:inline:block; height:50px; width:60px; } .services-box-2 img{ width:100%; display:block; margin-bottom:30px; } .services-box-2 .icon{ position:relative; float:left; display:inline-block; width:50px; height:50px; border-radius:50%; color:#fff; margin-right:20px; text-align:center; font-size:17px; line-height:50px; font-weight:normal; } .services-box-2 .icon:before { font-family: 'Simple-Line-Icons'; speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .services-box-2 h6{ text-align:left; padding-bottom:5px; } .services-box-2 .subtext{ text-align:left; color:#747474; font-style: italic; font-family: 'Playfair Display', serif; font-size: 13px; line-height:17px; letter-spacing:2px; font-weight:400; } .services-box-2 p{ text-align:left; padding-top:20px; } .services-box-3{ position:relative; width:100%; overflow:hidden; padding-top:50px; padding-bottom:50px; border-bottom:1px solid rgba(34,34,34,.1); } .services-box-3:after{ content: ''; display: block; clear: both; } .services-box-3 .services-box-in{ position:relative; width:calc(100% / 4); float:left; display:inline-block; padding-top:20px; padding-bottom:20px; } .services-box-3 .services-box-in:before{ position:absolute; content:''; top:0; left:0; height:100%; width:1px; background:rgba(34,34,34,.1); z-index:2; } .services-box-3 .services-box-in:before:nth-of-type(1){ display:none; } .services-box-3 .services-box-in .icon{ position:relative; display:block; text-align:center; font-size:22px; line-height:22px; font-weight:100; padding-bottom:10px; } .services-box-3 .services-box-in .icon:before { font-family: 'Simple-Line-Icons'; speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .services-box-3 .services-box-in h6{ text-align:center; padding-bottom:5px; } .services-box-3 .services-box-in .subtext{ text-align:center; color:#313131; font-style: italic; font-family: 'Playfair Display', serif; font-size: 13px; line-height:17px; letter-spacing:2px; font-weight:400; } .dark-background .services-box-3 .services-box-in .icon{ } .dark-background .services-box-3 .services-box-in h6{ color:#fff; } .dark-background .services-box-3 .services-box-in .subtext{ color:#f8f8f8; } .dark-background .services-box-3 .services-box-in:before{ background:rgba(222,222,222,.2); } .services-box-4{ position:relative; width:100%; overflow:hidden; } .services-box-4:after{ content: ''; display: block; clear: both; } .services-box-4 .services-box-in{ position:relative; width:calc(100% / 3); float:left; display:inline-block; padding-top:80px; padding-bottom:80px; background-size:cover; background-position: center center; background-repeat: no-repeat; } .services-box-4 .services-box-in.services-image-1{ background-image:url('../images/services-1.png') } .services-box-4 .services-box-in.services-image-2{ background-image:url('../images/services-2.png') } .services-box-4 .services-box-in .in-text-box{ position:relative; width:70%; margin-left:15%; display:block; } .services-box-4 .services-box-in .in-text-box h6{ text-align:left; padding-bottom:5px; } .services-box-4 .services-box-in .in-text-box .subtext{ text-align:left; color:#313131; font-style: italic; font-family: 'Playfair Display', serif; font-size: 13px; line-height:17px; letter-spacing:2px; font-weight:400; } .services-box-4 .services-box-in .in-text-box p{ text-align:left; padding-top:25px; } .services-box-4 .services-box-in.dark-background .in-text-box h6{ color:#fff; } .services-box-4 .services-box-in.dark-background .in-text-box .subtext{ color:#ccc; } .services-box-4 .services-box-in.dark-background .in-text-box p{ color:#fff; } .services-box-4 .services-box-in .in-text-box a.button{ position:relative; display:block; width:160px; margin-top:40px; font-family: 'Inconsolata'; font-weight:600; padding:14px 0; color:#fff; background-color:#323232; border-radius:2px; text-align:center; font-size:13px; line-height:13px; letter-spacing:3px; text-transform:uppercase; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .services-box-4 .services-box-in.dark-background .in-text-box a.button{ color:#212121; background-color:#fff; } .services-box-4 .services-box-in.dark-background .in-text-box a.button:hover{ color:#fff; } /* #Quotes ================================================== */ #owl-quote { position:relative; width:100%; margin:0 auto; overflow:hidden; } #owl-quote .item{ position:relative; width:100%; margin:0 auto; z-index:2; overflow:hidden; } #owl-quote .item p{ font-family: 'Playfair Display', serif; font-style: italic; color:#111; font-size: 15px; line-height:28px; letter-spacing:4px; text-align:center; margin:0 auto; max-width:1000px; width:100%; } #owl-quote .item h6{ font-family: 'Tangerine', cursive; text-align:center; text-transform:none; font-size:32px; padding-top:30px; margin-bottom:30px; } .dark-background #owl-quote .item p{ color:#fff; } .dark-background #owl-quote .item h6{ color:#9a9a9a; } .split-text-wrap #owl-quote .item p{ color:#fff; } .split-text-wrap #owl-quote .item h6{ } .split-text-wrap .owl-theme .owl-controls .owl-page span{ background-color: #fff; } /* #Counter boxes ================================================== */ .count-box-1 { position:relative; width:100%; margin:0 auto; overflow:hidden; padding-bottom:60px; padding-top:60px; border-radius:5px; } .count-box-1 .icon{ position:relative; width:100%; color:#424242; text-align:center; font-size:32px; line-height:22px; font-weight:normal; padding-bottom:20px; } .count-box-1 .icon:before { font-family: 'Simple-Line-Icons'; speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .count-box-1 h6{ text-align:center; } .count-box-1 h3{ text-align:center; padding-bottom:20px; letter-spacing:2px; } .count-box-1 p{ text-align:center; color:#9a9a9a; font-style: italic; font-family: 'Playfair Display', serif; font-size: 13px; line-height:17px; letter-spacing:1px; font-weight:400; padding-top:5px; } .count-box-1.dark-background .icon{ color:#fff; } .count-box-1.dark-background h6{ color:#fff; } .count-box-1.dark-background h3{ color:#ebebeb; } .count-box-1.dark-background p{ color:#ebebeb; } /* #Progress bars ================================================== */ .pro-bar-container { position:relative; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; width: 100%; height: 5px; background: #ccc; } .pro-bar-margin { margin-bottom:20px; } .skills-name{ position:relative; width:100%; text-align:left; padding-bottom:5px; font-weight:400; font-style: italic; font-family: 'Playfair Display', serif; font-size: 15px; letter-spacing:2px; color:#424242; } .skills-name span{ color:#111; padding-left:5px; } .pro-bar { position:relative; height: 5px; overflow:hidden; background: #000; } .pro-bar.bar-100 { width: 100%; } .pro-bar.bar-99 { width: 99%; } .pro-bar.bar-98 { width: 98%; } .pro-bar.bar-97 { width: 97%; } .pro-bar.bar-96 { width: 96%; } .pro-bar.bar-95 { width: 95%; } .pro-bar.bar-94 { width: 94%; } .pro-bar.bar-93 { width: 93%; } .pro-bar.bar-92 { width: 92%; } .pro-bar.bar-91 { width: 91%; } .pro-bar.bar-90 { width: 90%; } .pro-bar.bar-89 { width: 89%; } .pro-bar.bar-88 { width: 88%; } .pro-bar.bar-87 { width: 87%; } .pro-bar.bar-86 { width: 86%; } .pro-bar.bar-85 { width: 85%; } .pro-bar.bar-84 { width: 84%; } .pro-bar.bar-83 { width: 83%; } .pro-bar.bar-82 { width: 82%; } .pro-bar.bar-81 { width: 81%; } .pro-bar.bar-80 { width: 80%; } .pro-bar.bar-79 { width: 79%; } .pro-bar.bar-78 { width: 78%; } .pro-bar.bar-77 { width: 77%; } .pro-bar.bar-76 { width: 76%; } .pro-bar.bar-75 { width: 75%; } .pro-bar.bar-74 { width: 74%; } .pro-bar.bar-73 { width: 73%; } .pro-bar.bar-72 { width: 72%; } .pro-bar.bar-71 { width: 71%; } .pro-bar.bar-70 { width: 70%; } .pro-bar.bar-69 { width: 69%; } .pro-bar.bar-68 { width: 68%; } .pro-bar.bar-67 { width: 67%; } .pro-bar.bar-66 { width: 66%; } .pro-bar.bar-65 { width: 65%; } .pro-bar.bar-64 { width: 64%; } .pro-bar.bar-63 { width: 63%; } .pro-bar.bar-62 { width: 62%; } .pro-bar.bar-61 { width: 61%; } .pro-bar.bar-60 { width: 60%; } .pro-bar.bar-59 { width: 59%; } .pro-bar.bar-58 { width: 58%; } .pro-bar.bar-57 { width: 57%; } .pro-bar.bar-56 { width: 56%; } .pro-bar.bar-55 { width: 55%; } .pro-bar.bar-54 { width: 54%; } .pro-bar.bar-53 { width: 53%; } .pro-bar.bar-52 { width: 52%; } .pro-bar.bar-51 { width: 51%; } .pro-bar.bar-50 { width: 50%; } .pro-bar.bar-49 { width: 49%; } .pro-bar.bar-48 { width: 48%; } .pro-bar.bar-47 { width: 47%; } .pro-bar.bar-46 { width: 46%; } .pro-bar.bar-45 { width: 45%; } .pro-bar.bar-44 { width: 44%; } .pro-bar.bar-43 { width: 43%; } .pro-bar.bar-42 { width: 42%; } .pro-bar.bar-41 { width: 41%; } .pro-bar.bar-40 { width: 40%; } .pro-bar.bar-39 { width: 39%; } .pro-bar.bar-38 { width: 38%; } .pro-bar.bar-37 { width: 37%; } .pro-bar.bar-36 { width: 36%; } .pro-bar.bar-35 { width: 35%; } .pro-bar.bar-34 { width: 34%; } .pro-bar.bar-33 { width: 33%; } .pro-bar.bar-32 { width: 32%; } .pro-bar.bar-31 { width: 31%; } .pro-bar.bar-30 { width: 30%; } .pro-bar.bar-29 { width: 29%; } .pro-bar.bar-28 { width: 28%; } .pro-bar.bar-27 { width: 27%; } .pro-bar.bar-26 { width: 26%; } .pro-bar.bar-25 { width: 25%; } .pro-bar.bar-24 { width: 24%; } .pro-bar.bar-23 { width: 23%; } .pro-bar.bar-22 { width: 22%; } .pro-bar.bar-21 { width: 21%; } .pro-bar.bar-20 { width: 20%; } .pro-bar.bar-19 { width: 19%; } .pro-bar.bar-18 { width: 18%; } .pro-bar.bar-17 { width: 17%; } .pro-bar.bar-16 { width: 16%; } .pro-bar.bar-15 { width: 15%; } .pro-bar.bar-14 { width: 14%; } .pro-bar.bar-13 { width: 13%; } .pro-bar.bar-12 { width: 12%; } .pro-bar.bar-11 { width: 11%; } .pro-bar.bar-10 { width: 10%; } .pro-bar.bar-9 { width: 9%; } .pro-bar.bar-8 { width: 8%; } .pro-bar.bar-7 { width: 7%; } .pro-bar.bar-6 { width: 6%; } .pro-bar.bar-5 { width: 5%; } .pro-bar.bar-4 { width: 4%; } .pro-bar.bar-3 { width: 3%; } .pro-bar.bar-2 { width: 2%; } .pro-bar.bar-1 { width: 1%; } .pro-bar.bar-0 { width: 0%; } /* #Accordion ================================================== */ .smk_accordion { position: relative; margin: 0; padding: 0; list-style: none; } .smk_accordion .accordion_in { position: relative; z-index: 10; margin-top: -1px; overflow: hidden; margin-bottom:4px; } .smk_accordion .accordion_in .acc_head { position: relative; padding-top: 19px; padding-bottom: 16px; text-align:left; background:#fff; font-weight:400; font-style: italic; font-family: 'Playfair Display', serif; font-size: 15px; line-height:23px; border:1px solid rgba(0,0,0,.2); color: #212121; letter-spacing:2px; display: block; cursor: pointer; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .smk_accordion .accordion_in .acc_head:hover { color:#fff; } .smk_accordion .accordion_in.acc_active > .acc_head { color:#fff; } .smk_accordion .accordion_in .acc_head .acc_icon_expand { display: block; width: 20px; height: 20px; position: absolute; right: 20px; top: 50%; margin-top: -10px; background: url('../images/acc1.png')no-repeat center center; background-size:20px 20px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .smk_accordion .accordion_in .acc_head:hover .acc_icon_expand { background: url('../images/acc2.png')no-repeat center center; background-size:20px 20px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .smk_accordion .accordion_in.acc_active > .acc_head .acc_icon_expand { background: url('../images/acc3.png')no-repeat center center; background-size:20px 20px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .smk_accordion .accordion_in .acc_content { color:#606060; padding:30px; background:#fff; } .smk_accordion .accordion_in .acc_content h1:first-of-type, .smk_accordion .accordion_in .acc_content h2:first-of-type, .smk_accordion .accordion_in .acc_content h3:first-of-type, .smk_accordion .accordion_in .acc_content h4:first-of-type, .smk_accordion .accordion_in .acc_content h5:first-of-type, .smk_accordion .accordion_in .acc_content h6:first-of-type { margin-top: 5px; } .smk_accordion .accordion_in:first-of-type, .smk_accordion .accordion_in:first-of-type .acc_head { } .smk_accordion .accordion_in:last-of-type, .smk_accordion .accordion_in:last-of-type .acc_content { } .smk_accordion .accordion_in.acc_active > .acc_content { display: block; } .smk_accordion.acc_with_icon .accordion_in .acc_head, .smk_accordion.acc_with_icon .accordion_in .acc_content { padding-left: 30px; } .smk_accordion .accordion_in .acc_head:hover, .smk_accordion .accordion_in.acc_active > .acc_head { background-color: #000; } /* #Clients ================================================== */ #owl-logos-3, #owl-logos-2, #owl-logos-1, #owl-logos{ position:relative; width:calc(100% - 30px); overflow:hidden; margin:0 auto; text-align:center; } #owl-logos-3 .item, #owl-logos-2 .item, #owl-logos-1 .item, #owl-logos .item{ position:relative; margin-left:15px; margin-right:15px; overflow:hidden; text-align:center; padding-top:60px; padding-bottom:60px; border-radius:5px; } #owl-logos-3 .item img, #owl-logos-2 .item img, #owl-logos-1 .item img, #owl-logos .item img{ width:100px; display:block; margin:0 auto; text-align:center; } /* #Subscribe ================================================== */ .subscribe-wrapper{ position:relative; width:100%; overflow:hidden; margin:0 auto; text-align:center; } .subscribe-wrapper h4{ text-align:center; padding-bottom:5px; color:#fff; } .subscribe-wrapper p{ text-align:center; color:#fff; padding-bottom:30px; letter-spacing:3px; font-style: italic; font-family: 'Playfair Display', serif; font-size: 15px; line-height:22px; } .subscribe{ position:relative; width:100%; max-width:500px; overflow:hidden; margin:0 auto; text-align:center; } .subscribe input{ position:relative; width:calc(100% - 54px); outline:none; border-radius:8px; margin:0 auto; display:block; border:2px solid #fff; background:transparent; font-style: italic; font-family: 'Playfair Display', serif; font-size: 15px; line-height:18px; letter-spacing:1px; color:#fff; padding:17px 25px; } .subscribe .button{ position:absolute; top:7px; right:7px; z-index:4; border-radius:4px; display:block; background:#fff; font-family: 'Inconsolata'; text-transform:uppercase; cursor:pointer; font-weight:500; font-size: 14px; line-height:18px; letter-spacing:2px; color:#212121; padding:13px 35px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .subscribe .button:hover{ color:#fff; } /* #Video ================================================== */ .play-video { position:relative; width:100%; overflow:hidden; margin:0 auto; text-align:center; } .play-video .button { position:relative; width:100px; height:50px; line-height:50px; font-size:16px; color:#424242; background:#fff; display:block; margin:0 auto; text-align:center; border-radius: 10px/40px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .play-video .button:hover { color:#fff; } .play-video .button:before { font-family: 'Simple-Line-Icons'; speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .play-video h4{ text-align:center; color:#fff; padding-bottom:5px; } .play-video p{ text-align:center; color:#dfdfdf; padding-bottom:30px; letter-spacing:3px; font-style: italic; font-family: 'Playfair Display', serif; font-size: 15px; line-height:22px; } /* #Split scroll home ================================================== */ .ms-section { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-size:cover; background-repeat:no-repeat; } #left1, #left2, #left3{ background-position:center right; } #right1, #right2, #right3{ background-position:center left; } .left-background-1{ background-image:url(../images/split-1-left.jpg); } .left-background-2{ background-image:url(../images/split-2-left.jpg); } .left-background-3{ background-image:url(../images/split-3-left.jpg); } .right-background-1{ background-image:url(../images/split-1-right.jpg); } .right-background-2{ background-image:url(../images/split-2-right.jpg); } .right-background-3{ background-image:url(../images/split-3-right.jpg); } .ms-section.ms-table{ display: table; width: 100%; } .ms-tableCell { display: table-cell; vertical-align: middle; width: 100%; height: 100%; } .ms-easing { -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out; -o-transition: all 0.7s ease-out; transition: all 0.7s ease-out; } #multiscroll-nav { position: fixed; z-index: 100; margin-top: -32px; top: 50%; opacity: 1; } #multiscroll-nav.right { right: 17px; } #multiscroll-nav.left { left: 17px; } #multiscroll-nav ul{ margin: 0; padding: 0; } #multiscroll-nav li{ display: block; width: 14px; height: 20px; margin: 7px; position:relative; } #multiscroll-nav li a{ display: block; position: relative; z-index: 1; width: 100%; height: 100%; cursor: pointer; text-decoration: none; } #multiscroll-nav li .active span{ background:#fff; border:5px solid #343434; } #multiscroll-nav span{ top: 2px; left: 2px; width: 3px; height: 3px; background:#343434; border:5px solid #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; position: absolute; z-index: 1; } .multiscroll-tooltip { position: absolute; color: #fff; font-size: 14px; font-family: arial, helvetica, sans-serif; top: -2px; white-space: nowrap; max-width: 220px; } .multiscroll-tooltip.right { right: 20px; } .multiscroll-tooltip.left { left: 20px; } .ms-right, .ms-left{ width: 50%; position: absolute; height: 100vh; -ms-touch-action: none; } .ms-right{ right: 1px; top: 0; -ms-touch-action: none; touch-action': none; } .ms-left{ left: 0; top: 0; -ms-touch-action: none; touch-action': none; } .split-multiscroll-wrapper{ position: absolute; left:0; width:200%; z-index:4; top:50%; -webkit-transform: translateY(-70%); -moz-transform: translateY(-70%); -ms-transform: translateY(-70%); -o-transform: translateY(-70%); transform: translateY(-70%); } .split-multiscroll-text-1{ position:relative; width:100%; text-align:center; color:rgba(255,255,255,.2); font-family: 'Playfair Display', serif; text-transform:none; letter-spacing:3px; font-size:500px; line-height:600px; font-style: italic; font-weight:900; -webkit-transform: translateY(50%); -moz-transform: translateY(50%); -ms-transform: translateY(50%); -o-transform: translateY(50%); transform: translateY(50%); } .split-multiscroll-text-2{ position:relative; width:100%; text-align:center; color:#fff; font-family: 'Playfair Display', serif; text-transform:none; letter-spacing:3px; font-size:70px; line-height:80px; font-style: italic; font-weight:900; margin-bottom:150px; } .split-multiscroll-button{ position:relative; font-family: 'Inconsolata'; font-weight:600; padding:14px 0; width:180px; color:#fff; background-color:#343434; border-radius:2px; text-align:center; margin:0 auto; font-size:13px; line-height:13px; letter-spacing:3px; text-transform:uppercase; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .split-multiscroll-button:hover{ color:#323232; background-color:#fff; } /* #Blog home ================================================== */ #owl-top .item.top-blog-image-1{ background-image:url('../images/blog-slider-1.jpg'); } #owl-top .item.top-blog-image-2{ background-image:url('../images/blog-slider-2.jpg'); } /* #Blog boxes ================================================== */ .blog-box-1{ position:relative; width:100%; overflow:hidden; } .blog-box-1:after{ content: ''; display: block; clear: both; } .blog-box-1 img{ width:140px; height:140px; float:left; border-radius:50%; margin-right:30px; display:inline-block; } .blog-box-1 a{ font-family: 'Dosis', sans-serif; text-align:left; font-size: 18px; line-height: 24px; text-transform:uppercase; letter-spacing:4px; font-weight:600; color: #414141; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .blog-box-1 .subtext{ text-align:left; color:#747474; font-family: 'Playfair Display', serif; text-transform:none; letter-spacing:1px; font-size:13px; line-height:17px; font-style: italic; margin-top:5px; } .blog-box-1 p{ text-align:left; margin-top:30px; } .blog-box-2{ position:relative; width:100%; overflow:hidden; } .blog-box-2 img{ width:100%; margin-bottom:30px; display:block; } .blog-box-2 a{ font-family: 'Dosis', sans-serif; text-align:left; font-size: 18px; line-height: 24px; text-transform:uppercase; letter-spacing:4px; font-weight:600; color: #414141; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .blog-box-2 .subtext{ text-align:left; color:#747474; font-family: 'Playfair Display', serif; text-transform:none; letter-spacing:1px; font-size:13px; line-height:17px; font-style: italic; margin-top:5px; margin-bottom:20px; } .blog-box-2 p{ text-align:left; } .blog-pages-wrapper{ position:relative; width:calc(100% - 30px); overflow:hidden; margin-left:15px; margin-right:15px; padding-top:15px; padding-bottom:15px; display:block; } .blog-pages-wrapper.smaller-blog-wrapper{ width:calc(100% - 30px); max-width:calc(1360px - 30px); margin:0 auto; } .blog-pages-wrapper:after{ content: ''; display: block; clear: both; } .blog-pages-wrapper .width-sidebar-grid{ position:relative; width:calc(100% - 430px); float:left; display:inline-block; } .blog-pages-wrapper .sidebar{ position:relative; width:400px; float:left; display:inline-block; padding-top:15px; margin-right:15px; padding-bottom:15px; margin-left:15px; } .blog-pages-wrapper .sidebar .sidebar-wrap{ position:relative; padding:40px; border-radius:5px; } .sidebar-blog-wrapper h6{ text-align:left; color:#fff; padding-bottom:25px; font-family: 'Playfair Display', serif; text-transform:none; letter-spacing:2px; font-size:16px; font-style: italic; } .sidebar-blog-wrapper{ position:relative; width:100%; overflow:hidden; margin-top:60px; } .sidebar-blog-wrapper:nth-of-type(1){ margin-top:0; } .sidebar-blog-wrapper-in{ position:relative; width:100%; overflow:hidden; margin-top:25px; } .sidebar-blog-wrapper-in:nth-of-type(1){ margin-top:0; } .sidebar-blog-wrapper-in:after{ content: ''; display: block; clear: both; } .sidebar-blog-wrapper-in img{ width:60px; height:60px; float:left; border-radius:50%; margin-right:30px; display:inline-block; } .sidebar-blog-wrapper-in a{ text-align:left; font-family: 'Inconsolata'; font-weight:700; font-size: 14px; line-height:20px; letter-spacing:2px; text-transform:uppercase; color:#fff; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .sidebar-blog-wrapper-in p{ text-align:left; color:#9a9a9a; font-family: 'Playfair Display', serif; text-transform:none; letter-spacing:2px; font-size:12px; font-style: italic; margin-top:5px; } .sidebar-blog-wrapper ul{ position:relative; width:100%; } .sidebar-blog-wrapper ul:after { content: ''; display: block; clear: both; } .sidebar-blog-wrapper ul li{ position:relative; float:left; display:inline-block; margin-right:5px; margin-bottom:5px; } .sidebar-blog-wrapper ul li a{ position:relative; display:block; text-transform:uppercase; font-size:10px; padding:8px 17px; color:#fff; background:#181818; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .sidebar-blog-wrapper ul.categories{ position:relative; width:100%; } .sidebar-blog-wrapper ul.categories:after { content: ''; display: block; clear: both; } .sidebar-blog-wrapper ul.categories li{ position:relative; float:none; display:block; margin-right:0; padding-top:15px; padding-bottom:15px; border-bottom:1px solid #444; } .sidebar-blog-wrapper ul.categories li:first-child{ padding-top:0; } .sidebar-blog-wrapper ul.categories li:last-child{ padding-bottom:0; border-bottom:none; } .sidebar-blog-wrapper ul.categories li a{ position:relative; font-family: 'Inconsolata'; font-weight:700; font-size: 14px; display:block; text-transform:uppercase; line-height:14px; letter-spacing:2px; padding:0 0; color:#fff; text-align:left; background:transparent; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .sidebar-blog-wrapper ul.categories li a:hover{ padding-left:5px; } .sidebar-blog-wrapper input{ width:calc(100% - 40px); padding-left:20px; padding-right:20px; font-family: 'Open Sans', sans-serif; font-weight:400; letter-spacing:1px; font-size: 12px; line-height:22px; padding-top: 15px; padding-bottom: 15px; background:#444; border:none; color: #fff; -webkit-transition: background 0.3s, color 0.3s; transition: background 0.3s, color 0.3s; } .sidebar-blog-wrapper input:active { color: #fff; outline: none !important; } .sidebar-blog-wrapper input:hover { color: #737373; outline: none !important; } .sidebar-blog-wrapper input:focus { color: #fff; outline: none !important; } .sidebar-blog-wrapper input:-ms-input-placeholder { font-size: 10px; text-transform:uppercase; -webkit-transition: color 0.3s; transition: color 0.3s; } .sidebar-blog-wrapper input::-moz-placeholder { font-size: 10px; text-transform:uppercase; -webkit-transition: color 0.3s; transition: color 0.3s; } .sidebar-blog-wrapper input:-moz-placeholder { font-size: 10px; text-transform:uppercase; -webkit-transition: color 0.3s; transition: color 0.3s; } .sidebar-blog-wrapper input::-webkit-input-placeholder { font-size: 10px; text-transform:uppercase; -webkit-transition: color 0.3s; transition: color 0.3s; } .sidebar-blog-wrapper input:active:-ms-input-placeholder { color: #fff; } .sidebar-blog-wrapper input:active::-moz-placeholder { color: #fff; } .sidebar-blog-wrapper input:active:-moz-placeholder { color: #fff; } .sidebar-blog-wrapper input:active::-webkit-input-placeholder { color: #fff; } .sidebar-blog-wrapper input:focus:-ms-input-placeholder { color: #fff; } .sidebar-blog-wrapper input:focus::-moz-placeholder { color: #fff; } .sidebar-blog-wrapper input:focus:-moz-placeholder { color: #fff; } .sidebar-blog-wrapper input:focus::-webkit-input-placeholder { color: #fff; } .blog-pages-wrap-box{ position:relative; width:calc(25% - 30px); float:left; overflow:hidden; display:inline-block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin-top:15px; margin-right:14px; margin-bottom:15px; margin-left:15px; -webkit-transform: translate3d(1px,0,0); transform: translate3d(1px,0,0); } .blog-pages-wrap-box.half-width{ width:calc(50% - 30px); } .blog-pages-wrap-box.third-width{ width:calc(100% / 3 - 30px); } .blog-pages-wrap-box.full-standard{ width:calc(100% - 30px); } .blog-pages-wrap-box .blog-box-2{ padding-bottom:30px; border-bottom:1px solid rgba(30,30,30,.1); } .blog-pages-wrap-box .blog-box-2 img{ border-radius:5px; } .blog-pages-wrap-box .blog-box-2 p:nth-of-type(2){ padding-top:20px; } .blog-pages-wrap-box .blog-box-2 a{ font-size: 18px; line-height: 24px; text-transform:none; letter-spacing:3px; } .blog-pages-wrap-box.full-standard .blog-box-2 a{ font-size: 26px; line-height: 32px; } .blog-pages-wrap-box .blog-box-2 .subtext a{ color:#000; font-family: 'Playfair Display', serif; text-transform:none; letter-spacing:1px; font-size:13px; line-height:17px; font-style: italic; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .blog-pages-wrap-box .blog-box-2 .link-to-post { position:relative; margin-top:30px; } .blog-pages-wrap-box .blog-box-2 .link-to-post a{ color:#000; font-family: 'Playfair Display', serif; text-transform:none; letter-spacing:3px; font-size:14px; float:left; line-height:17px; font-style: italic; font-weight:400; text-align:left; display:inline-block; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .blog-pages-wrap-box .blog-box-2 .link-to-post a:nth-of-type(2){ float:right; } .blog-pages-wrap-box .blog-box-2 .quote-text{ position:relative; padding-top:40px; padding-bottom:40px; padding-left:40px; padding-right:40px; margin-bottom:30px; background:#323232; border-radius:5px; color:#fff; font-family: 'Playfair Display', serif; text-transform:none; letter-spacing:3px; text-align:left; font-size:15px; line-height:26px; font-style: italic; font-weight:400; } .blog-pages-wrap-box .blog-box-2 .link-text{ position:relative; padding-top:40px; padding-bottom:40px; padding-left:40px; padding-right:40px; margin-bottom:30px; background:#323232; border-radius:5px; color:#fff; font-family: 'Playfair Display', serif; text-transform:none; letter-spacing:3px; text-align:left; font-size:15px; line-height:26px; font-style: italic; font-weight:400; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .blog-pages-wrap-box .blog-box-2 .link-text:hover{ } .audio-player{ padding-top:35px; padding-bottom:30px; background-color:#111; width:100%; display:block; margin-bottom:30px; border-radius:5px; } audio{ width:100%; } #owl-blog-slider-1 { position:relative; width:100%; margin:0 auto; overflow:hidden; } #owl-blog-slider-1 .item{ position:relative; width:100%; margin:0 auto; z-index:2; overflow:hidden; } #owl-blog-slider-1 .item.carousel-slide-club img{ width:100%; display:block; margin-bottom:15px; } #owl-blog-slider-1.owl-theme .owl-controls{ position:absolute; left:0; width:100%; bottom:50px; z-index:5; } #owl-blog-slider-1.owl-theme .owl-controls .owl-page span{ background:#fff; } .blog-pages-wrap-box .blog-box-2 figure { border-radius:5px; margin-bottom:30px; } .blog-pages-wrap-box .blog-box-2 .video-wrapper { margin-bottom:30px; } .video-wrapper, figure.vimeo, figure.youtube { margin:0; position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0; overflow: hidden; } .video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } figure.youtube a img, figure.vimeo a img { position: absolute; top: 0; left: 0; width: auto; height: 100%; max-width:none; } figure.vimeo a:after, figure.youtube a:after { content:""; width:40px; height:40px; background:#fff; z-index:9; position:absolute; top:50%; left:50%; margin:-20px 0 0 -20px; border-radius:50%; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } figure.vimeo:hover a:after, figure.youtube:hover a:after { background:#000; -webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1); box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1); } figure.vimeo a:before, figure.youtube a:before { font-family: 'FontAwesome'; content:"\f04b"; width:40px; height:40px; z-index:10; position:absolute; color:#000; line-height:40px; text-align:center; font-size:10px; top:50%; left:50%; margin:-19px 0 0 -18px; display:block; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } figure.vimeo a:hover:before, figure.youtube a:hover:before { color:#fff; } figure.vimeo a:hover img, figure.youtube a:hover img { -webkit-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale(1.03) rotate(1deg); transform: scale(1.03) rotate(1deg); } figure.vimeo a img, figure.youtube a img { -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; a -webkit-transform: scale(1); transform: scale(1); } .blog-nav nav[role="navigation"] { text-align: center; } .cd-pagination { width: 100%; margin: 0 auto; text-align: center; } .cd-pagination li { /* hide numbers on small devices */ display: none; margin: 0 .2em; } .cd-pagination li.button-pag { /* make sure prev next buttons are visible */ display: inline-block; } .cd-pagination a, .cd-pagination span { display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; /* use padding and font-size to change buttons size */ font-size: 13px; font-weight:700; font-family: 'Playfair Display', serif; letter-spacing:3px; font-style: italic; } .cd-pagination a { border: 1px solid #e6e6e6; border-radius: 0.25em; color:#000; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .no-touch .cd-pagination a:hover { background-color: #000; border: 1px solid #000; color:#fff; } .cd-pagination a:active { /* click effect */ -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } .cd-pagination a.disabled { /* button disabled */ color:#fff; pointer-events: none; } .cd-pagination a.disabled::before, .cd-pagination a.disabled::after { opacity: .4; } .cd-pagination .button-pag:first-of-type a::before { content: '\00ab '; } .cd-pagination .button-pag:last-of-type a::after { content: ' \00bb'; } .cd-pagination .current { /* selected number */ color: #ffffff; background:#000; pointer-events: none; } @media only screen and (min-width: 768px) { .cd-pagination li { display: inline-block; } } @media only screen and (min-width: 1170px) { .cd-pagination { } } /* -------------------------------- No space - remove distance between list items -------------------------------- */ .cd-pagination.no-space { width: auto; max-width: none; display: inline-block; border-radius: 0.25em; border: 1px solid #e6e6e6; } .cd-pagination.no-space:after { content: ""; display: table; clear: both; } .cd-pagination.no-space li { margin: 0; float: left; border-right: 1px solid #e6e6e6; } .cd-pagination.no-space li:last-of-type { border-right: none; } .cd-pagination.no-space a, .cd-pagination.no-space span { float: left; border-radius: 0; border: none; } .cd-pagination.no-space li:first-of-type a { border-radius: 0.25em 0 0 0.25em; } .cd-pagination.no-space li:last-of-type a { border-radius: 0 0.25em 0.25em 0; } /* -------------------------------- move buttons - move prev and next buttons to the sides -------------------------------- */ .cd-pagination.move-buttons:after { content: ""; display: table; clear: both; } .cd-pagination.move-buttons .button-pag:first-of-type { float: left; } .cd-pagination.move-buttons .button-pag:last-of-type { float: right; } .cd-pagination.no-space.move-buttons { width: 90%; max-width: 768px; display: block; overflow: hidden; } .cd-pagination.no-space.move-buttons li { float: none; border: none; } .cd-pagination.no-space.move-buttons a, .cd-pagination.no-space.move-buttons span { float: none; } /* -------------------------------- custom icons - customize the small arrow inside the next and prev buttons -------------------------------- */ .cd-pagination.custom-icons .button-pag a { position: relative; } .cd-pagination.custom-icons .button-pag:first-of-type a { padding-left: 2.4em; } .cd-pagination.custom-icons .button-pag:last-of-type a { padding-right: 2.4em; } .cd-pagination.custom-icons .button-pag:first-of-type a::before, .cd-pagination.custom-icons .button-pag:last-of-type a::after { content: ''; position: absolute; display: inline-block; /* set size for custom icons */ width: 16px; height: 16px; top: 50%; /* set margin-top = icon height/2 */ margin-top: -8px; background: transparent url("../images/cd-icon-arrow-1.svg") no-repeat center center; } .cd-pagination.custom-icons .button-pag:first-of-type a::before { left: .8em; } .cd-pagination.custom-icons .button-pag:last-of-type a::after { right: .8em; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } /* -------------------------------- custom buttons - replace prev and next buttons text with a custom icon -------------------------------- */ .cd-pagination.custom-buttons a, .cd-pagination.custom-buttons span { vertical-align: middle; } .cd-pagination.custom-buttons .button-pag a { /* set custom width */ width: 40px; /* image replacement */ overflow: hidden; white-space: nowrap; text-indent: 100%; color: transparent; background-image: url("../images/cd-icon-arrow-2.svg"); background-repeat: no-repeat; background-position: center center; } .cd-pagination.custom-buttons .button-pag:last-of-type a { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .no-touch .cd-pagination.custom-buttons .button-pag:last-of-type a:active { -webkit-transform: scale(0.9) rotate(180deg); -moz-transform: scale(0.9) rotate(180deg); -ms-transform: scale(0.9) rotate(180deg); -o-transform: scale(0.9) rotate(180deg); transform: scale(0.9) rotate(180deg); } .cd-pagination.no-space.custom-buttons .button-pag:last-of-type a { border-radius: 0.25em 0 0 0.25em; } /* -------------------------------- animated buttons - animate the text inside prev and next buttons -------------------------------- */ .cd-pagination.animated-buttons a, .cd-pagination.animated-buttons span { padding: 0 1.2em; height: 35px; line-height: 35px; overflow: hidden; } .cd-pagination.animated-buttons .button-pag a { position: relative; padding: 0 2em; } .cd-pagination.animated-buttons .button-pag:first-of-type a::before, .cd-pagination.animated-buttons .button-pag:last-of-type a::after { left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); right: auto; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; } .cd-pagination.animated-buttons .button-pag:last-of-type a::after { -webkit-transform: translateX(-50%) rotate(180deg); -moz-transform: translateX(-50%) rotate(180deg); -ms-transform: translateX(-50%) rotate(180deg); -o-transform: translateX(-50%) rotate(180deg); transform: translateX(-50%) rotate(180deg); } .cd-pagination.animated-buttons i { display: block; height: 100%; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; } .no-touch .cd-pagination.animated-buttons .button-pag a:hover i { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .no-touch .cd-pagination.animated-buttons .button-pag:first-of-type a:hover::before { -webkit-transform: translateX(-50%) translateY(-50px); -moz-transform: translateX(-50%) translateY(-50px); -ms-transform: translateX(-50%) translateY(-50px); -o-transform: translateX(-50%) translateY(-50px); transform: translateX(-50%) translateY(-50px); } .no-touch .cd-pagination.animated-buttons .button-pag:last-of-type a:hover::after { -webkit-transform: translateX(-50%) rotate(180deg) translateY(50px); -moz-transform: translateX(-50%) rotate(180deg) translateY(50px); -ms-transform: translateX(-50%) rotate(180deg) translateY(50px); -o-transform: translateX(-50%) rotate(180deg) translateY(50px); transform: translateX(-50%) rotate(180deg) translateY(50px); } /* #Blog Post Style ================================================== */ .num-comments{ position:relative; margin-top:30px; margin-bottom:35px; width:100%; color:#000; font-size:14px; line-height:18px; letter-spacing:3px; text-align:left; font-family: 'Playfair Display', serif; text-transform:none; font-style: italic; } .content-comm{ position:relative; width:100%; margin-top:30px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding:30px; overflow:hidden; border-radius:5px; } .content-comm p{ color:#fff; } .content-comm:nth-of-type(1){ margin-top:0; } .content-comm.subcomm{ width:calc(100% - 80px); } .content-comm.subcomm{ margin-left:80px; } .content-comm.subcomm img{ width:100px; } .content-comm:after { content: ''; display: block; clear: both; } .content-comm img { width:150px; height:auto; display: block; float:left; margin-right:30px; } .content-comm .name-aut-replay{ position:relative; display:block; float:right; letter-spacing:3px; font-family: 'Playfair Display', serif; text-transform:none; font-size:14px; line-height:18px; font-style: italic; color:#fff; margin-top:10px; text-align:left; font-weight:400; } .content-comm .name-aut-replay a{ color:#fff; } .content-comm .name-aut-replay span{ -webkit-transition: color 0.3s; transition: color 0.3s; } .leave-reply{ position:relative; width:100%; overflow:hidden; } .leave-reply:after { content: ''; display: block; clear: both; } .leave-reply input{ width:calc(100% - 40px); margin-top:5px; float:left; display:inline-block; padding-left:20px; padding-right:20px; font-weight:400; letter-spacing:1px; margin-top:5px; font-size: 14px; line-height:22px; padding-top: 15px; padding-bottom: 15px; border-radius:5px; background:rgba(30,30,30,1); border:none; color: #ccc; -webkit-transition: background 0.3s, color 0.3s; transition: background 0.3s, color 0.3s; } .leave-reply input:nth-of-type(1){ margin-top:0; } .leave-reply textarea{ height:120px; width:calc(100% - 40px); padding-left:20px; padding-right:20px; font-weight:400; letter-spacing:1px; margin-top:5px; font-size: 14px; line-height:22px; padding-top: 15px; padding-bottom: 15px; border-radius:5px; background:rgba(30,30,30,1); border:none; color: #ccc; -webkit-transition: background 0.3s, color 0.3s; transition: background 0.3s, color 0.3s; } .leave-reply textarea:active, .leave-reply input:active { color: #fff; outline: none !important; } .leave-reply textarea:hover, .leave-reply input:hover { color: #737373; outline: none !important; } .leave-reply textarea:focus, .leave-reply input:focus { color: #fff; outline: none !important; } .leave-reply textarea:input-placeholder, .leave-reply input:input-placeholder { font-size: 11px; text-transform:uppercase; -webkit-transition: color 0.3s; transition: color 0.3s; } .leave-reply textarea:-ms-input-placeholder, .leave-reply input:-ms-input-placeholder { font-size: 11px; text-transform:uppercase; -webkit-transition: color 0.3s; transition: color 0.3s; } .leave-reply textarea::-o-placeholder, .leave-reply input::-o-placeholder { font-size: 11px; text-transform:uppercase; -webkit-transition: color 0.3s; transition: color 0.3s; } .leave-reply textarea:-moz-placeholder, .leave-reply input:-moz-placeholder { font-size: 11px; text-transform:uppercase; -webkit-transition: color 0.3s; transition: color 0.3s; } .leave-reply textarea::-webkit-input-placeholder, .leave-reply input::-webkit-input-placeholder { font-size: 11px; text-transform:uppercase; -webkit-transition: color 0.3s; transition: color 0.3s; } .leave-reply textarea:active:input-placeholder, .leave-reply input:active:input-placeholder { color: #fff; } .leave-reply textarea:active:-ms-input-placeholder, .leave-reply input:active:-ms-input-placeholder { color: #fff; } .leave-reply textarea:active::-o-placeholder, .leave-reply input:active::-o-placeholder { color: #fff; } .leave-reply textarea:active:-moz-placeholder, .leave-reply input:active:-moz-placeholder { color: #fff; } .leave-reply textarea:active::-webkit-input-placeholder, .leave-reply input:active::-webkit-input-placeholder { color: #fff; } .leave-reply textarea:focus:-ms-input-placeholder, .leave-reply input:focus:-ms-input-placeholder { color: #fff; } .leave-reply textarea:focus::-o-placeholder, .leave-reply input:focus::-o-placeholder { color: #fff; } .leave-reply textarea:focus:-moz-placeholder, .leave-reply input:focus:-moz-placeholder { color: #fff; } .leave-reply textarea:focus::-webkit-input-placeholder, .leave-reply input:focus::-webkit-input-placeholder { color: #fff; } button.post-comment { position:relative; width:100%; height:50px; font-weight:600; letter-spacing:3px; text-transform:uppercase; cursor:pointer; margin-top:5px; display: block; padding:0; font-size: 11px; line-height:50px; background:rgba(30,30,30,1); border-radius:5px; border:none; -webkit-transition: background 0.3s, color 0.3s; transition: background 0.3s, color 0.3s; } button.post-comment:hover { color:#fff; } button.post-comment:focus, button.post-comment:active { border:none; outline:none; } button.post-comment:active { opacity:.7; } .leave-reply input:active, .leave-reply input:focus, .leave-reply textarea:active, .leave-reply textarea:focus { background: #000; } button.post-comment{ color:#ccc; } button.post-comment:hover{ background: #000; } /* #One-page Blog ================================================== */ .one-page-blog-box .blog-box-2{ padding-bottom:30px; border-bottom:1px solid rgba(30,30,30,.1); } .one-page-blog-box .blog-box-2 img{ border-radius:5px; } .one-page-blog-box .blog-box-2 a{ font-size: 18px; line-height: 24px; text-transform:none; letter-spacing:3px; } .one-page-blog-box .blog-box-2 .subtext a{ color:#000; font-family: 'Playfair Display', serif; text-transform:none; letter-spacing:1px; font-size:13px; line-height:17px; font-style: italic; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .one-page-blog-box .blog-box-2 .link-to-post { position:relative; margin-top:30px; } .one-page-blog-box .blog-box-2 .link-to-post a{ color:#000; font-family: 'Playfair Display', serif; text-transform:none; letter-spacing:3px; font-size:14px; float:left; line-height:17px; font-style: italic; font-weight:400; text-align:left; display:inline-block; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .one-page-blog-box .blog-box-2 .link-to-post a:nth-of-type(2){ float:right; } .one-page-blog-box .blog-box-2 .quote-text{ position:relative; padding-top:40px; padding-bottom:40px; padding-left:40px; padding-right:40px; margin-bottom:30px; background:#323232; border-radius:5px; color:#fff; font-family: 'Playfair Display', serif; text-transform:none; letter-spacing:3px; text-align:left; font-size:15px; line-height:26px; font-style: italic; font-weight:400; } .one-page-blog-box .blog-box-2 figure { border-radius:5px; margin-bottom:30px; } .one-page-blog-box .blog-box-2 .video-wrapper { margin-bottom:30px; } /* #Contact boxes ================================================== */ .contact-box-1 { position:relative; width:100%; overflow:hidden; margin:0 auto; text-align:center; } .contact-box-1 .icon{ width:32px; height:32px; display:inline-block; margin:0 auto; text-align:center; font-size:12px; line-height:32px; background:#000; border-radius:50%; color:#fff; margin-right:15px; font-weight:normal; } .contact-box-1 .icon:before { font-family: 'Simple-Line-Icons'; speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .contact-box-1 h6{ margin:0 auto; text-align:center; padding-bottom:20px; line-height:32px; display:inline-block; } .contact-box-1 .subtext{ text-align:center; color:#212121; font-style: italic; font-family: 'Playfair Display', serif; font-size: 14px; line-height:25px; letter-spacing:3px; font-weight:400; } /* #Contact form ================================================== */ #ajax-form { width: 100%; font-family: 'Inconsolata'; font-size: 10px; line-height:14px; color:#101010; margin:0 auto; } #ajax-form label { display: block; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height:30px; } #ajax-form input{ position:relative; width:calc(100% - 40px); padding-left:20px; padding-right:20px; font-family: 'Inconsolata'; font-weight:400; letter-spacing:1px; font-size: 13px; line-height:24px; padding-bottom: 15px; background:transparent; border:none; color: #737373; -webkit-transition: border-bottom 0.3s, color 0.3s; transition: border-bottom 0.3s, color 0.3s; } #ajax-form textarea { width:calc(100% - 40px); padding-left:20px; padding-right:20px; font-family: 'Inconsolata'; font-weight:400; letter-spacing:1px; font-size: 13px; line-height:24px; background:transparent; height:100px; border:none; color: #737373; -webkit-transition: border-bottom 0.3s, color 0.3s; transition: border-bottom 0.3s, color 0.3s; } #ajax-form textarea, #ajax-form input { border-bottom:1px solid rgba(100,100,100,.2); } .error { font: 11px/22px 'Open Sans', sans-serif; text-transform:uppercase; letter-spacing:1px; display: none; color:#636363; } #ajaxsuccess { background: #f2f2f2; color:#101010; font: 20px/60px 'Open Sans', sans-serif; height:60px; display: none; padding-left:10px; width: 100%; margin-left: auto; margin-right: auto; margin-top: 30px; } .text-align-center{ text-align:center; padding-top:10px; } #ajax-form textarea:active, #ajax-form input:active { color: #101010; } #ajax-form textarea:active, #ajax-form input:hover { color: #101010; } #ajax-form textarea:focus, #ajax-form input:focus { outline: none !important; } #ajax-form input:-ms-input-placeholder { font-size: 11px; text-transform:uppercase; letter-spacing:2px; color:#999999; } #ajax-form input::-moz-placeholder { font-size: 11px; text-transform:uppercase; letter-spacing:2px; color:#999999; } #ajax-form input:-moz-placeholder { font-size: 11px; text-transform:uppercase; letter-spacing:2px; color:#999999; } #ajax-form input::-webkit-input-placeholder { font-size: 11px; text-transform:uppercase; letter-spacing:2px; color:#999999; } #ajax-form textarea:-ms-input-placeholder { font-size: 11px; text-transform:uppercase; letter-spacing:2px; color:#999999; } #ajax-form textarea::-moz-placeholder { font-size: 11px; text-transform:uppercase; letter-spacing:2px; color:#999999; } #ajax-form textarea:-moz-placeholder { font-size: 11px; text-transform:uppercase; letter-spacing:2px; color:#999999; } #ajax-form textarea::-webkit-input-placeholder { font-size: 11px; text-transform:uppercase; letter-spacing:2px; color:#999999; } #ajax-form button { background:#efefef; color:#212121; font-size:14px; padding: 13px 30px; max-width:140px; } #ajax-form button:hover { color:#fff; } #ajax-form button:focus, #ajax-form button:active { border:none; outline:none; } #ajax-form button{ } #ajax-form textarea:focus, #ajax-form input:focus, #ajax-form textarea:active, #ajax-form input:active { } .button-effect { min-width: 150px; max-width: 200px; display: block; margin: 0 auto; border: none; background: none; color: inherit; vertical-align: middle; cursor:pointer; position: relative; z-index: 1; -webkit-backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; } .button-effect:focus { outline: none; } .button-effect > span { vertical-align: middle; } .button--moema { padding: 16px 30px; border-radius: 50px; text-align:center; background:#fff; letter-spacing:2px; color: #000; -webkit-transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s; } .button--moema::before { content: ''; position: absolute; top: -20px; left: -20px; bottom: -20px; right: -20px; background: inherit; border-radius: 50px; z-index: -1; opacity: 0.4; -webkit-transform: scale3d(0.8, 0.5, 1); transform: scale3d(0.8, 0.5, 1); } .button--moema:hover { -webkit-transition: background-color 0.3s 0s, color 0.3s 0s; transition: background-color 0.3s 0s, color 0.3s 0s; color:#fff; -webkit-animation: anim-moema-1 0.6s forwards; animation: anim-moema-1 0.6s forwards; } .button--moema:hover::before { -webkit-animation: anim-moema-2 0.6s 0.5s forwards; animation: anim-moema-2 0.6s 0.5s forwards; } @-webkit-keyframes anim-moema-1 { 60% { -webkit-transform: scale3d(0.8, 0.8, 1); transform: scale3d(0.8, 0.8, 1); } 85% { -webkit-transform: scale3d(1.2, 1.2, 1); transform: scale3d(1.2, 1.2, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes anim-moema-1 { 60% { -webkit-transform: scale3d(0.8, 0.8, 1); transform: scale3d(0.8, 0.8, 1); } 85% { -webkit-transform: scale3d(1.2, 1.2, 1); transform: scale3d(1.2, 1.2, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes anim-moema-2 { to { opacity: 0; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes anim-moema-2 { to { opacity: 0; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } /* #Google map ================================================== */ #google-container { position: relative; width: 100%; height:500px; } .contact-gmap-top #google-container { height:70vh; } #cd-google-map { position: relative; } #cd-google-map address { position: absolute; bottom: 0; left: 0; border-radius:3px; padding-bottom:30px; max-width:300px; font-style: italic; font-family: 'Playfair Display', serif; background-color: rgba(0, 0, 0,1); font-weight:400; font-size: 14px; line-height:23px; letter-spacing:3px; color:#fff; text-align: center; z-index:3; } #cd-google-map address span{ padding-left:30px; padding-right:30px; } #cd-google-map address img{ width:100%; display:block; padding-bottom:30px; } #cd-zoom-in, #cd-zoom-out { height: 32px; width: 32px; cursor: pointer; margin-left: 10px; background-repeat: no-repeat; background-size: 32px 64px; opacity:.7; background-image: url("../images/cd-icon-controller.svg"); z-index:3; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } #cd-zoom-in:hover, #cd-zoom-out:hover { opacity:1; } .no-touch #cd-zoom-in:hover, .no-touch #cd-zoom-out:hover { opacity:1; } #cd-zoom-in:hover, #cd-zoom-out:hover { opacity:1; } @media only screen and (min-width: 768px) { #cd-zoom-in, #cd-zoom-out { margin-left: 50px; } } #cd-zoom-in { background-position: 50% 0; margin-top: 50px; margin-bottom: 1px; z-index:3; } #cd-zoom-out { background-position: 50% -32px; z-index:3; } .contact-gmap-top #cd-zoom-in { margin-top: 150px; } /* #Shop ================================================== */ .shop-home-box-1-wrapper{ position:relative; width:calc(100% - 20px); padding-top:10px; padding-bottom:10px; padding-left:10px; padding-right:10px; overflow:hidden; } .shop-home-box-1-wrapper:after{ content: ''; display: block; clear: both; } .shop-home-box-1{ position:relative; width:calc(25% - 20px); float:left; margin-left:10px; margin-right:10px; margin-top:10px; margin-bottom:10px; display:inline-block; overflow:hidden; } .shop-home-box-1.half-width{ width:calc(50% - 20px); } .shop-home-box-1.half-width h6{ position:absolute; width:70%; text-align:left; top:50%; left:15%; color:#000; font-size: 22px; line-height: 25px; letter-spacing:10px; font-weight:800; z-index:3; -webkit-transform: translateY(-33%); -moz-transform: translateY(-33%); -ms-transform: translateY(-33%); -o-transform: translateY(-33%); transform: translateY(-33%); } .shop-home-box-1.half-width h6 span{ font-size: 16px; letter-spacing:6px; font-weight:400; font-style: italic; font-family: 'Playfair Display', serif; text-transform:none; } .shop-home-box-1.half-width h6 span:after{ font-family: 'FontAwesome'; content:'\f178'; font-style: none; margin-left:20px; font-style: normal; font-size: 18px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .shop-home-box-1.half-width:hover h6 span:after{ margin-left:30px; } .shop-home-box-1.half-width h5{ position:absolute; width:70%; text-align:left; top:50%; left:15%; margin-left:-30px; margin-top:-60px; font-style: italic; font-family: 'Playfair Display', serif; text-transform:none; color:rgba(0,0,0,.1); font-size: 115px; line-height: 115px; letter-spacing:3px; font-weight:900; z-index:2; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .shop-home-box-1 img{ width:100%; display:block; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .shop-home-box-1:hover img{ -ms-transform: scale(1.02); -webkit-transform: scale(1.02); transform: scale(1.02); } .shop-home-box-1 p{ position:absolute; width:100%; text-align:center; top:50%; left:0; font-style: italic; font-family: 'Playfair Display', serif; color:#fff; font-size: 13px; line-height: 20px; margin-top:-10px; letter-spacing:3px; font-weight:400; z-index:3; } .shop-home-box-1 p span{ padding:15px 60px; background-color:#161616; } .split-background-shop-1{ background-image:url('../images/split-shop-1.jpg') } .split-background-shop-2{ background-image:url('../images/split-shop-2.jpg') } .shop-counter{ position:relative; width:100%; overflow:hidden; } .shop-counter h4{ width:100%; text-align:center; color:rgba(255,255,255,.3); text-transform:none; font-size:70px; line-height:75px; font-weight:900; font-style: italic; font-family: 'Playfair Display', serif; } .shop-counter p{ width:100%; text-align:center; font-style: italic; font-family: 'Playfair Display', serif; color:#fff; font-size: 13px; line-height: 20px; letter-spacing:3px; font-weight:400; margin-top:20px; } .shop-box-1{ position:relative; width:100%; display:block; overflow:hidden; } .shop-box-1 img{ width:100%; display:block; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .shop-box-1:hover img{ } .shop-box-1 .add-to-cart{ position:absolute; display:block; top:0; left:0; z-index:3; color:#fff; padding:13px 20px; background:#212121; font-family: 'Open Sans', sans-serif; font-weight:400; font-size: 12px; line-height:12px; text-transform:uppercase; opacity:0; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .shop-box-1:hover .add-to-cart{ opacity:1; } .shop-box-1 .add-to-cart span{ font-family: 'Simple-Line-Icons'; margin-right:13px; } .shop-box-1 .zoom{ position:absolute; display:block; top:0; left:154px; z-index:3; color:#fff; padding:13px; background:#212121; font-family: 'Simple-Line-Icons'; font-size: 13px; line-height:13px; opacity:0; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .shop-box-1:hover .zoom{ opacity:1; } .shop-box-1 h6{ text-align:left; letter-spacing:4px; font-weight:500; font-size:16px; margin-top:20px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .shop-box-1 p{ text-align:left; margin-top:5px; font-style: italic; font-family: 'Playfair Display', serif; font-size: 13px; line-height: 20px; letter-spacing:3px; font-weight:400; } .shop-box-1 .price{ position:absolute; display:block; text-align:center; bottom:69px; left:0; z-index:3; color:#fff; padding:13px 0; width:80px; background:#212121; font-style: italic; font-family: 'Playfair Display', serif; font-size: 14px; line-height: 14px; letter-spacing:3px; font-weight:400; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .shop-box-1:hover .price{ width:100%; opacity:.9; } .shop-box-1 .sale{ position:absolute; display:block; text-align:center; bottom:69px; right:0; z-index:3; color:#fff; padding:13px 0; width:80px; font-style: italic; font-family: 'Playfair Display', serif; font-size: 14px; line-height: 14px; letter-spacing:3px; font-weight:400; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .shop-box-1:hover .sale{ width:100%; bottom:109px; opacity:.9; } .services-box-4 .services-box-in.shop-image-1{ background-image:url('../images/shop-1.png') } .services-box-4 .services-box-in.shop-image-2{ background-image:url('../images/shop-2.png') } .shop-grid{ position:relative; margin:0 auto; text-align:center; width:calc(100% - 30px); padding-top:15px; padding-bottom:15px; } .shop-grid.smaller-shop-grid{ max-width:1360px; } .shop-grid:after { content: ''; display: block; clear: both; } .shop-grid .width-shop-sidebar-grid{ position:relative; width:calc(100% - 430px); float:left; display:inline-block; } .shop-grid .sidebar{ position:relative; width:400px; float:left; display:inline-block; padding-top:15px; margin-right:15px; padding-bottom:15px; margin-left:15px; } .shop-grid .sidebar .sidebar-wrap{ padding:40px; } .shop-grid-item{ position:relative; float:left; width:calc(100% / 2 - 30px); display:inline-block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin-top:15px; margin-right:14px; margin-bottom:15px; margin-left:15px; overflow:hidden; padding-bottom:20px; border-bottom:1px solid rgba(0,0,0,.1); -webkit-transform: translate3d(1px,0,0); transform: translate3d(1px,0,0); } .shop-grid-item.third-shop-width{ width:calc(100% / 3 - 30px); } .shop-grid-item.forth-shop-width{ width:calc(100% / 4 - 30px); } /* #Shop Product ================================================== */ .shop-carousel-wrap{ position:relative; width:100%; margin:0 auto; overflow:hidden; z-index:2; } #sync1 .item { position: relative; margin: 0 auto; width:100%; display: block; } #sync1 .item:after { content: ''; display: block; clear: both; } #sync1 .item img{ width:100%; height:auto; display:block; } #sync2 { position:relative; width:100%; z-index:200; } #sync2 .item{ width:100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border:5px solid #fff; z-index:200; overflow:hidden; cursor:pointer; opacity:.5; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } #sync2 .item img{ width:100%; height:auto; display:block; } #sync2 .item:hover { opacity:1; border:5px solid #212121; } #sync2 .synced .item { opacity:1; border:5px solid #212121; } #sync1 .item .zoom{ position:absolute; display:block; top:50%; left:50%; margin-left:-25px; margin-top:-25px; border-radius:50%; z-index:3; color:#fff; background:#212121; height:50px; width:50px; line-height:50px; text-align:center; font-family: 'Simple-Line-Icons'; font-size: 13px; opacity:0; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } #sync1 .item:hover .zoom{ opacity:1; } .product-price{ position: relative; width:100%; display: block; } .product-price .price{ text-align:left; font-style: italic; font-family: 'Playfair Display', serif; color:#000; font-size: 36px; line-height: 36px; letter-spacing:3px; font-weight:400; z-index:3; } .product-price .price span{ font-size: 24px; line-height: 24px; margin-right:20px; text-decoration: line-through; } .num-but{ position: relative; width:100%; display: block; padding-top:20px; padding-bottom:20px; margin-top:30px; margin-bottom:30px; border-top:1px solid rgba(0,0,0,.1); border-bottom:1px solid rgba(0,0,0,.1); } .num-but:after{ content: ''; display: block; clear: both; } .num-but .num{ position: relative; font-style: italic; font-family: 'Playfair Display', serif; text-align:center; font-weight:400; width:40px; height:40px; float:left; display:inline-block; font-size:18px; line-height:40px; background:#f1f1f1; border-left:1px solid rgba(0,0,0,.1); } .num-but .num:nth-of-type(1){ border-left:none; } .num-but .num.over{ cursor:pointer; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .num-but .num.over:hover{ background:#212121; color:#fff; } .num-but .but{ position: relative; font-family: 'Open Sans', sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:2px; font-size: 10px; line-height:10px; text-align:center; width:140px; height:40px; float:left; margin-left:30px; display:inline-block; line-height:40px; background:#f1f1f1; cursor:pointer; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .num-but .but:hover{ background:#212121; color:#fff; } /* #Checkout ================================================== */ .cart-wrap{ position:relative; width:calc(100% - 42px); overflow:hidden; padding:20px; margin:0 auto; border-radius:3px; border:1px solid rgba(0,0,0,.2); height:100px; } .cart-wrap img{ height:100px; display:inline-block; float:left; margin-right:30px; } .cart-wrap p{ position:relative; line-height:100px; display:inline-block; font-style: italic; font-family: 'Playfair Display', serif; text-align:left; font-weight:400; font-size:14px; letter-spacing:1px; } .cart-wrap a{ color:#000; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .cart-wrap .close-icon{ position:absolute; top:20px; right:20px; width:14px; height:14px; font-family: 'FontAwesome'; font-size: 14px; line-height:14px; text-align:center; color:#000; z-index:5; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .cart-wrap h6{ line-height:100px; display:block; font-style: italic; font-family: 'Playfair Display', serif; text-align:center; font-weight:400; font-size:26px; letter-spacing:3px; text-transform:none; } .cart-wrap .num-wrapper{ position: relative; text-align:center; margin:0 auto; } .cart-wrap .num{ position: relative; font-style: italic; font-family: 'Playfair Display', serif; text-align:center; font-weight:400; width:40px; height:40px; margin:0 auto; display:inline-block; font-size:18px; line-height:40px; background:#f1f1f1; -webkit-transform: translateY(30px); -moz-transform: translateY(30px); -ms-transform: translateY(30px); -o-transform: translateY(30px); transform: translateY(30px); } .cart-wrap .num.over{ cursor:pointer; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .cart-wrap .num.over:hover{ background:#212121; color:#fff; } .subtotal-wrap{ position:relative; width:100%; overflow:hidden; } .subtotal-wrap p{ font-style: italic; font-family: 'Playfair Display', serif; text-align:left; font-weight:400; font-size:16px; line-height:16px; letter-spacing:3px; color:#000; padding-bottom:20px; border-bottom:1px solid rgba(0,0,0,.2); margin-bottom:30px; } .subtotal-wrap p span{ float:right; } .subtotal-wrap .but{ position: relative; font-family: 'Open Sans', sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:2px; font-size: 10px; line-height:10px; text-align:center; width:150px; height:40px; float:right; display:block; line-height:40px; background:#f1f1f1; color:#000; cursor:pointer; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .subtotal-wrap .but:hover{ background:#212121; color:#fff; } .checkout-top{ position:relative; width:calc(100% - 80px); overflow:hidden; padding:20px 40px; border:1px solid rgba(0,0,0,.2); border-radius:3px; font-style: italic; font-family: 'Playfair Display', serif; text-align:left; font-weight:400; font-size:14px; line-height:18px; letter-spacing:1px; color:#000; } .checkout-top a{ margin-left:20px; color:#747474; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .checkout{ position:relative; width:100%; overflow:hidden; } .checkout input{ position:relative; width:calc(100% - 42px); outline:none; border-radius:3px; margin:0 auto; display:block; border:1px solid rgba(0,0,0,.2); background:transparent; font-style: italic; font-family: 'Playfair Display', serif; font-size: 13px; line-height:18px; letter-spacing:3px; color:#000; padding:15px 20px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .checkout input:focus{ border:1px solid rgba(0,0,0,.4); } .checkout textarea{ position:relative; width:calc(100% - 42px); height:140px; outline:none; border-radius:3px; margin:0 auto; display:block; border:1px solid rgba(0,0,0,.2); background:transparent; font-style: italic; font-family: 'Playfair Display', serif; font-size: 13px; line-height:18px; letter-spacing:3px; color:#000; padding:15px 20px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .checkout textarea:focus{ border:1px solid rgba(0,0,0,.4); } .checkout input:-ms-input-placeholder { color:#515151; -webkit-transition: color 0.3s; transition: color 0.3s; } .checkout input::-moz-placeholder { color:#515151; -webkit-transition: color 0.3s; transition: color 0.3s; } .checkout input:-moz-placeholder { color:#515151; -webkit-transition: color 0.3s; transition: color 0.3s; } .checkout input::-webkit-input-placeholder { color:#515151; -webkit-transition: color 0.3s; transition: color 0.3s; } .checkout input:active:-ms-input-placeholder { color: rgba(0,0,0,0); } .checkout input:active::-moz-placeholder { color: rgba(0,0,0,0); } .checkout input:active:-moz-placeholder { color: rgba(0,0,0,0); } .checkout input:active::-webkit-input-placeholder { color: rgba(0,0,0,0); } .checkout input:focus:-ms-input-placeholder { color: rgba(0,0,0,0); } .checkout input:focus::-moz-placeholder { color: rgba(0,0,0,0); } .checkout input:focus:-moz-placeholder { color: rgba(0,0,0,0); } .checkout input:focus::-webkit-input-placeholder { color: rgba(0,0,0,0); } .checkout textarea:-ms-input-placeholder { color:#515151; -webkit-transition: color 0.3s; transition: color 0.3s; } .checkout textarea::-moz-placeholder { color:#515151; -webkit-transition: color 0.3s; transition: color 0.3s; } .checkout textarea:-moz-placeholder { color:#515151; -webkit-transition: color 0.3s; transition: color 0.3s; } .checkout textarea::-webkit-input-placeholder { color:#515151; -webkit-transition: color 0.3s; transition: color 0.3s; } .checkout textarea:active:-ms-input-placeholder { color: rgba(0,0,0,0); } .checkout textarea:active::-moz-placeholder { color: rgba(0,0,0,0); } .checkout textarea:active:-moz-placeholder { color: rgba(0,0,0,0); } .checkout textarea:active::-webkit-input-placeholder { color: rgba(0,0,0,0); } .checkout textarea:focus:-ms-input-placeholder { color: rgba(0,0,0,0); } .checkout textarea:focus::-moz-placeholder { color: rgba(0,0,0,0); } .checkout textarea:focus:-moz-placeholder { color: rgba(0,0,0,0); } .checkout textarea:focus::-webkit-input-placeholder { color: rgba(0,0,0,0); } /* #Page Transition ================================================== */ .transition-wrap{ position:relative; width:100%; margin:0 auto; text-align:center; overflow:hidden; } .transition-block{ position:relative; display:inline-block; padding:12px 25px; margin:0 auto; text-align:center; font-family: 'Open Sans', sans-serif; font-weight:500; font-size: 12px; line-height:12px; letter-spacing:3px; color:#fff; background:#212121; border-radius:3px; overflow:hidden; } .transition-button .button-effect { min-width: 150px; max-width: 200px; display: block; margin: 0 auto; border: none; background: none; color: inherit; vertical-align: middle; cursor:pointer; position: relative; z-index: 1; -webkit-backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; } .transition-button .button-effect:focus { outline: none; } .transition-button .button-effect > span { vertical-align: middle; } .transition-button .button--moema { padding: 15px 25px; border-radius: 3px; text-align:center; background:#313131; font-size:11px; line-height:11px; text-transform:uppercase; font-weight:500; letter-spacing:2px; color: #fff; -webkit-transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s; } .transition-button .button--moema::before { content: ''; position: absolute; top: -20px; left: -20px; bottom: -20px; right: -20px; background: inherit; border-radius: 3px; z-index: -1; opacity: 0.4; -webkit-transform: scale3d(0.8, 0.5, 1); transform: scale3d(0.8, 0.5, 1); } .transition-button .button--moema:hover { -webkit-transition: background-color 0.3s 0s, color 0.3s 0s; transition: background-color 0.3s 0s, color 0.3s 0s; color:#fff; -webkit-animation: anim-moema-1 0.6s forwards; animation: anim-moema-1 0.6s forwards; } .transition-button .button--moema:hover::before { -webkit-animation: anim-moema-2 0.6s 0.5s forwards; animation: anim-moema-2 0.6s 0.5s forwards; } /* #Elements ================================================== */ .headins-page h1, .headins-page h2, .headins-page h3, .headins-page h4, .headins-page h5, .headins-page h6{ padding-bottom:25px; text-align:left; } .headins-page h1{ letter-spacing:12px; } .headins-page h2{ letter-spacing:10px; } .headins-page h3{ letter-spacing:9px; } .headins-page h4{ letter-spacing:8px; } .custom-fonts h6{ text-align:center; line-height:80px; } .custom-fonts h6 span{ font-style: italic; font-family: 'Playfair Display', serif; font-weight:400; font-size:80px; } .highlight-1{ background-color:#323232; color:#fff; } .highlight-2{ color:#fff; } .highlight-3{ background-color:#ccc; } .block{ position:relative; font-family: 'Playfair Display', serif; width:100%; background:#323232; padding-top:15px; padding-bottom:15px; text-align:center; text-transform:none; letter-spacing:2px; font-size:13px; line-height:13px; font-weight:400; color:#fff; } #owl-quote-1 { position:relative; width:100%; margin:0 auto; overflow:hidden; } #owl-quote-1 .item{ position:relative; width:100%; margin:0 auto; z-index:2; overflow:hidden; } #owl-quote-1 .item p{ font-family: 'Playfair Display', serif; font-style: italic; color:#f1f1f1; font-size: 15px; line-height:28px; letter-spacing:4px; text-align:center; margin:0 auto; max-width:1000px; width:100%; } #owl-quote-1 .item h6{ font-family: 'Tangerine', cursive; text-align:center; text-transform:none; color:#fff; font-size:32px; padding-top:30px; margin-bottom:30px; } #owl-quote-2 { position:relative; width:100%; margin:0 auto; overflow:hidden; } #owl-quote-2 .item{ position:relative; width:100%; margin:0 auto; z-index:2; overflow:hidden; } #owl-quote-2 .item p{ font-family: 'Playfair Display', serif; font-style: italic; font-size: 15px; line-height:28px; letter-spacing:4px; text-align:center; margin:0 auto; max-width:1000px; width:100%; } #owl-quote-2 .item h6{ font-family: 'Tangerine', cursive; text-align:center; text-transform:none; font-size:32px; padding-top:30px; margin-bottom:30px; } .dropcaps-1{ position:relative; display:inline-block; float:left; height:52px; width:52px; text-align:center; line-height:52px; font-size:32px; color:#424242; font-weight:700; text-align:center; margin:5px 20px 0 0; border-radius:3px; border:1px solid rgba(0,0,0,.2); } .dropcaps-2{ position:relative; display:inline-block; float:left; height:52px; width:52px; text-align:center; line-height:52px; font-size:32px; color:#fff; font-weight:700; text-align:center; margin:5px 20px 0 0; border-radius:3px; } .dropcaps-3{ position:relative; display:inline-block; float:left; height:52px; width:52px; text-align:center; line-height:52px; font-size:32px; color:#fff; font-weight:700; text-align:center; margin:5px 20px 0 0; border-radius:3px; background:#323232; } .dropcaps-4{ position:relative; display:inline-block; float:left; height:52px; width:52px; text-align:center; line-height:52px; font-size:32px; color:#424242; font-weight:700; text-align:center; margin:5px 20px 0 0; border-radius:50%; border:1px solid rgba(0,0,0,.2); } .dropcaps-5{ position:relative; display:inline-block; float:left; height:52px; width:52px; text-align:center; line-height:52px; font-size:32px; color:#fff; font-weight:700; text-align:center; margin:5px 20px 0 0; border-radius:50%; } .dropcaps-6{ position:relative; display:inline-block; float:left; height:52px; width:52px; text-align:center; line-height:52px; font-size:32px; color:#fff; font-weight:700; text-align:center; margin:5px 20px 0 0; border-radius:50%; background:#323232; } .list-style-2{ position:relative; width:100%; } .list-style-2 li{ position:relative; width:100%; display:block; margin-top:20px; margin-bottom:20px; } .list-style-2 li:first-child{ margin-top:0; } .list-style-2 li:last-child{ margin-bottom:0; } .list-style-2 li .icon{ position:relative; width:40px; height:40px; text-align:center; font-size:14px; line-height:40px; color:#414141; display:inline-block; margin-right:20px; float:left; border-radius:50%; font-weight:normal; } .list-style-2 li .icon:before { font-family: 'Simple-Line-Icons'; speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .list-style-2 li p{ line-height:40px; text-align:left; display:inline-block; font-style: italic; font-family: 'Playfair Display', serif; font-size: 14px; letter-spacing:3px; font-weight:400; } .list-style-3{ position:relative; width:100%; } .list-style-3 li{ position:relative; width:100%; display:block; margin-top:20px; margin-bottom:20px; } .list-style-3 li:first-child{ margin-top:0; } .list-style-3 li:last-child{ margin-bottom:0; } .list-style-3 li .icon{ position:relative; width:40px; height:40px; text-align:center; font-size:14px; line-height:40px; color:#fff; display:inline-block; margin-right:20px; float:left; border-radius:50%; font-weight:normal; } .list-style-3 li .icon:before { font-family: 'Simple-Line-Icons'; speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .list-style-3 li p{ line-height:40px; text-align:left; display:inline-block; font-style: italic; font-family: 'Playfair Display', serif; font-size: 14px; letter-spacing:3px; font-weight:400; } .list-style-4{ position:relative; width:100%; } .list-style-4 li{ position:relative; width:100%; display:block; margin-top:20px; margin-bottom:20px; } .list-style-4 li:first-child{ margin-top:0; } .list-style-4 li:last-child{ margin-bottom:0; } .list-style-4 li .icon{ position:relative; width:40px; height:40px; text-align:center; font-size:14px; line-height:40px; color:#fff; display:inline-block; background-color:#313131; margin-right:20px; float:left; border-radius:50%; font-weight:normal; } .list-style-4 li .icon:before { font-family: 'Simple-Line-Icons'; speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .list-style-4 li p{ line-height:40px; text-align:left; display:inline-block; font-style: italic; font-family: 'Playfair Display', serif; font-size: 14px; letter-spacing:3px; font-weight:400; } .list-style-5{ position:relative; width:100%; } .list-style-5 li{ position:relative; width:100%; display:block; margin-top:12px; margin-bottom:12px; } .list-style-5 li:first-child{ margin-top:0; } .list-style-5 li:last-child{ margin-bottom:0; } .list-style-5 li .icon{ position:relative; width:20px; height:20px; text-align:center; font-size:12px; line-height:20px; color:#414141; display:inline-block; margin-right:20px; float:left; border-radius:50%; font-weight:normal; } .list-style-5 li .icon:before { font-family: 'Simple-Line-Icons'; speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .list-style-5 li p{ line-height:20px; text-align:left; display:inline-block; font-size: 12px; letter-spacing:2px; font-weight:400; } .list-style-6{ position:relative; width:100%; } .list-style-6 li{ position:relative; width:100%; display:block; margin-top:12px; margin-bottom:12px; } .list-style-6 li:first-child{ margin-top:0; } .list-style-6 li:last-child{ margin-bottom:0; } .list-style-6 li .icon{ position:relative; width:20px; height:20px; text-align:center; font-size:12px; line-height:20px; display:inline-block; margin-right:20px; float:left; border-radius:50%; font-weight:normal; } .list-style-6 li .icon:before { font-family: 'Simple-Line-Icons'; speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .list-style-6 li p{ line-height:20px; text-align:left; display:inline-block; font-size: 12px; letter-spacing:2px; font-weight:400; } .list-style-7{ position:relative; width:100%; } .list-style-7 li{ position:relative; width:100%; display:block; margin-top:12px; margin-bottom:12px; } .list-style-7 li:first-child{ margin-top:0; } .list-style-7 li:last-child{ margin-bottom:0; } .list-style-7 li .icon{ position:relative; width:20px; height:20px; text-align:center; font-size:12px; line-height:20px; color:#000; display:inline-block; margin-right:20px; float:left; border-radius:50%; font-weight:normal; } .list-style-7 li .icon:before { font-family: 'Simple-Line-Icons'; speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .list-style-7 li p{ line-height:20px; text-align:left; display:inline-block; font-size: 12px; letter-spacing:2px; font-weight:400; } .blockquote-1{ position:relative; overflow:hidden; margin-top:30px; margin-bottom:30px; border-left:3px solid #323232; } .blockquote-1 p{ padding-left:50px; color:#000; font-style: italic; font-family: 'Playfair Display', serif; font-size:14px; line-height:24px; letter-spacing:3px; font-weight:500; } .blockquote-1:before{ position:absolute; font-family: 'FontAwesome'; top:0; left:20px; color:rgba(0,0,0,.2); font-size:50px; line-height:50px; content: "\f10e"; } .blockquote-2{ position:relative; overflow:hidden; margin-top:30px; margin-bottom:30px; padding:30px; } .blockquote-2 p{ padding-left:50px; border-left:3px solid #f1f1f1; color:#fff; font-style: italic; font-family: 'Playfair Display', serif; font-size:14px; line-height:24px; letter-spacing:3px; font-weight:500; } .blockquote-2:before{ position:absolute; font-family: 'FontAwesome'; top:30px; left:50px; color:rgba(255,255,255,.2); font-size:50px; line-height:50px; content: "\f10e"; } .blockquote-3{ position:relative; overflow:hidden; margin-top:30px; margin-bottom:30px; padding:30px; } .blockquote-3 p{ padding-left:50px; border-left:3px solid #f1f1f1; color:#fff; font-style: italic; font-family: 'Playfair Display', serif; font-size:14px; line-height:24px; letter-spacing:3px; font-weight:500; } .blockquote-3:before{ position:absolute; font-family: 'FontAwesome'; top:30px; left:50px; color:rgba(255,255,255,.2); font-size:50px; line-height:50px; content: "\f10e"; } .icons-set-1{ position:relative; width:100%; font-family: 'Simple-Line-Icons'; font-size:50px; line-height:50px; color:#212121; text-align:center; font-weight:normal; } .icons-set-2{ position:relative; width:100%; font-family: 'Pe-icon-7-stroke'; font-size:50px; line-height:50px; color:#212121; text-align:center; font-weight:normal; } .icons-set-3{ position:relative; width:100%; font-family: 'FontAwesome'; font-size:50px; line-height:50px; color:#212121; text-align:center; font-weight:normal; } .icons-set-4{ position:relative; width:100%; font-family: "Ionicons"; font-size:50px; line-height:50px; color:#212121; text-align:center; font-weight:normal; } #portfolio-carousel{ position:relative; width:calc(100% - 40px); overflow:hidden; margin:0 auto; text-align:center; } #portfolio-carousel .item{ position:relative; overflow:hidden; text-align:center; margin:0 auto; text-align:center; margin-left:20px; margin-right:20px; margin-bottom:15px; } .portfolio-wrap-third.full-width-carousel{ width:100%; } #portfolio-carousel-1{ position:relative; width:calc(100% - 40px); overflow:hidden; margin:0 auto; text-align:center; } #portfolio-carousel-1 .item{ position:relative; overflow:hidden; text-align:center; margin:0 auto; text-align:center; margin-left:20px; margin-right:20px; margin-bottom:15px; } #blog-carousel{ position:relative; width:100%; overflow:hidden; } #blog-carousel .item{ position:relative; overflow:hidden; margin-bottom:15px; } #blog-carousel .item .one-page-blog-box{ position:relative; margin-left:20px; margin-right:20px; } .social-wrap{ position:relative; width:100%; margin:0 auto; text-align:center; overflow:hidden; } .social-block{ position:relative; display:inline-block; margin:0 auto; text-align:center; font-family: 'FontAwesome'; font-weight:normal; color:#fff; background:#212121; border-radius:3px; overflow:hidden; cursor:pointer; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .social-block.small{ font-size:16px; width:40px; height:40px; line-height:40px; } .social-block.med{ font-size:24px; width:60px; height:60px; line-height:60px; } .social-block.big{ font-size:34px; width:80px; height:80px; line-height:80px; } .social-block.border-full{ border-radius:50%; } .social-block.no-back{ border:1px solid rgba(0,0,0,.2); background-color:transparent; color:#000; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .social-block.no-back:hover{ border:1px solid transparent; } .grayscale-wrap{ position:relative; width:100%; margin:0 auto; text-align:center; overflow:hidden; cursor:pointer; } .grayscale-wrap img{ width:100%; display:block; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .grayscale-wrap:hover img{ -webkit-filter: grayscale(100%); -ms-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); } .img-num-wrap{ position:relative; width:100%; overflow:hidden; } .img-num-wrap img{ width:100%; display:block; } .img-num-wrap .numb-1{ position:absolute; z-index:2; top:0; left:0; width:60px; height:60px; text-align:center; line-height:50px; font-size:36px; font-style: italic; font-family: 'Playfair Display', serif; color:#fff; font-weight:400; background:rgba(30,30,30,.9); } .img-num-wrap .numb-2{ position:absolute; z-index:2; top:10px; left:10px; width:60px; height:60px; text-align:center; line-height:60px; font-size:18px; font-style: italic; border-radius:50%; font-family: 'Playfair Display', serif; color:#fff; font-weight:400; background:rgba(30,30,30,.9); } .img-num-wrap .numb-3{ position:absolute; z-index:2; top:10px; left:10px; width:60px; height:60px; text-align:center; line-height:60px; font-size:50px; font-style: italic; border-radius:50%; font-family: 'Playfair Display', serif; color:#000; font-weight:900; } .img-num-wrap .numb-4{ position:absolute; z-index:2; top:50%; left:50%; margin-left:-40px; margin-top:-40px; width:80px; height:80px; text-align:center; line-height:70px; font-size:40px; font-style: italic; border-radius:50%; font-family: 'Playfair Display', serif; color:#fff; font-weight:900; background:rgba(30,30,30,.6); } .alert{ position: relative; width: 100%; overflow:hidden; padding:20px; } .alert.big-alerts{ padding:40px; } .alert p{ font-family: 'Open Sans', sans-serif; font-weight:400; font-size: 12px; line-height:24px; color:#212121; text-transform: uppercase; letter-spacing:2px; } .alert p span{ font-family: 'FontAwesome'; padding-right:15px; } .alert.alert-green{ background-color:#c5ebd4; border-left:3px solid #8cd7aa; } .alert.alert-red{ background-color:#ffcccb; border-left:3px solid #ff817f; } .alert.alert-blue{ background-color:#b9dff4; border-left:3px solid #77c1ea; } .alert.alert-yelow{ background-color:#fce1b6; border-left:3px solid #f9c36d; } .alert.alert-blank{ background-color:#eeeeee; border-left:3px solid #ccc; } .alert.alert-blank-2{ background-color:#333333; border-left:3px solid #111; } .alert.alert-blank-2 p{ color:#fff; } #sync3 .item { position: relative; margin: 0 auto; width:100%; display: block; background:#212121; padding:35px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } #sync3 .item:after { content: ''; display: block; clear: both; } #sync3 .item p{ color:#fff; } #sync4 { position:relative; width:100%; z-index:200; } #sync4 .item{ width:100%; height:50px; line-height:50px; font-size:14px; text-align:center; color:#000; background:#f1f1f1; text-transform:uppercase; letter-spacing:3px; font-weight:600; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; z-index:200; overflow:hidden; cursor:pointer; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } #sync4 .item:hover { color:#fff; background:#212121; } #sync4 .synced .item { color:#fff; background:#212121; } #sync5 .item { position: relative; margin: 0 auto; width:100%; display: block; background:#f1f1f1; padding:35px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } #sync5 .item:after { content: ''; display: block; clear: both; } #sync6 { position:relative; width:100%; z-index:200; } #sync6 .item{ width:100%; height:50px; line-height:50px; font-size:14px; text-align:center; color:#000; background:#f1f1f1; text-transform:uppercase; letter-spacing:3px; font-weight:600; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; z-index:200; overflow:hidden; cursor:pointer; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } #sync6 .item:hover { color:#fff; background:#212121; } #sync6 .synced .item { color:#fff; background:#212121; } #sync7 { position: relative; margin-top:50px; } #sync7 .item { position: relative; margin: 0 auto; width:100%; display: block; background:#212121; padding:35px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } #sync7 .item:after { content: ''; display: block; clear: both; } #sync7 .item p{ color:#fff; } #sync8 { position:absolute; top:0; left:0; height:50px; width:100%; z-index:200; } #sync8 .item{ width:100%; height:50px; line-height:50px; font-size:14px; text-align:center; color:#000; background:#f1f1f1; text-transform:uppercase; letter-spacing:3px; font-weight:600; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; z-index:200; overflow:hidden; cursor:pointer; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } #sync8 .item:hover { color:#fff; background:#212121; } #sync8 .synced .item { color:#fff; background:#212121; } #sync9 { position: relative; margin-top:50px; } #sync9 .item { position: relative; margin: 0 auto; width:100%; display: block; background:#f1f1f1; padding:35px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } #sync9 .item:after { content: ''; display: block; clear: both; } #sync10 { position:absolute; top:0; left:0; height:50px; width:100%; z-index:200; } #sync10 .item{ width:100%; height:50px; line-height:50px; font-size:14px; text-align:center; color:#000; background:#f1f1f1; text-transform:uppercase; letter-spacing:3px; font-weight:600; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; z-index:200; overflow:hidden; cursor:pointer; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } #sync10 .item:hover { color:#fff; background:#212121; } #sync10 .synced .item { color:#fff; background:#212121; } #sync11 { position: relative; margin-top:50px; } #sync11 .item { position: relative; margin: 0 auto; width:100%; display: block; padding:35px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } #sync11 .item:after { content: ''; display: block; clear: both; } #sync11 .item p{ color:#fff; } #sync12 { position:absolute; top:0; left:0; height:50px; width:100%; z-index:200; } #sync12 .item{ width:100%; height:50px; line-height:50px; font-size:14px; text-align:center; color:#000; background:#f1f1f1; text-transform:uppercase; letter-spacing:3px; font-weight:600; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; z-index:200; overflow:hidden; cursor:pointer; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } #sync12 .item:hover { color:#fff; } #sync12 .synced .item { color:#fff; } #sync13 { position: relative; margin-top:50px; } #sync13 .item { position: relative; margin: 0 auto; width:100%; display: block; background:#f1f1f1; padding:35px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } #sync13 .item:after { content: ''; display: block; clear: both; } #sync14 { position:absolute; top:0; left:0; height:50px; width:100%; z-index:200; } #sync14 .item{ width:100%; height:50px; line-height:50px; font-size:14px; text-align:center; color:#000; background:#f1f1f1; text-transform:uppercase; letter-spacing:3px; font-weight:600; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; z-index:200; overflow:hidden; cursor:pointer; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } #sync14 .item:hover { color:#fff; } #sync14 .synced .item { color:#fff; } .button-short-wrap{ position:relative; width:100%; margin:0 auto; text-align:center; overflow:hidden; } .button-short-block{ position:relative; display:inline-block; padding:14px 25px; cursor:pointer; margin:0 auto; margin-left:15px; margin-right:15px; text-align:center; font-family: 'Open Sans', sans-serif; font-weight:500; font-size: 10px; line-height:10px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:#fff; background:#212121; border-radius:3px; overflow:hidden; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .button-short-block:hover{ } .button-short-block.border-block{ background:transparent; border:2px solid #212121; color:#212121; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .button-short-block.border-block:hover{ background:transparent; } .button-short-block.border-block-1{ background:transparent; color:#212121; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .button-short-block.border-block-1:hover{ background:#212121; color:#fff; border:2px solid #212121; } .button-short-block.med{ padding:16px 35px; } .button-short-block.big{ padding:20px 55px; } .pricing-box-1.with-image img{ width:100%; display:block; } .pricing-box-1.with-image .text-top .name{ margin-bottom:0; } .type-wrap{ position:relative; width:100%; overflow:hidden; margin:0 auto; text-align:center; } .type-wrap p{ text-align:center; } #typed-strings{ position:relative; width:100%; overflow:hidden; margin:0 auto; text-align:center; } #typed-strings p{ text-align:center; } #typed{ text-align:center; color:#313131; font-size:60px; line-height:85px; font-weight:400; font-style: italic; font-family: 'Playfair Display', serif; letter-spacing:6px; } .type-wrap-1{ position:relative; width:100%; overflow:hidden; margin:0 auto; text-align:center; } .type-wrap-1 p{ text-align:center; } #typed-strings-1{ position:relative; width:100%; overflow:hidden; margin:0 auto; text-align:center; } #typed-strings-1 p{ text-align:center; } #typed-1{ text-align:center; color:#fff; font-size:60px; line-height:85px; font-weight:400; font-style: italic; font-family: 'Playfair Display', serif; letter-spacing:6px; } /* code for animated blinking cursor */ .typed-cursor{ opacity: 1; font-weight: 100; -webkit-animation: blink 0.7s infinite; -moz-animation: blink 0.7s infinite; -ms-animation: blink 0.7s infinite; -o-animation: blink 0.7s infinite; animation: blink 0.7s infinite; } @-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-ms-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } @-o-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } /* #Portfolio ================================================== */ .portfolio-wrapper{ position:relative; width:calc(100% - 30px); overflow:hidden; padding:15px; } .portfolio-wrapper:after{ content: ''; display: block; clear: both; } .portfolio-wrap-fourth{ position:relative; width:calc(25% - 30px); margin:15px; float:left; overflow:hidden; display:inline-block; } .portfolio-wrap-third img, .portfolio-wrap-fourth img{ width:100%; display:block; } .portfolio-wrap-third .mask, .portfolio-wrap-fourth .mask{ position:absolute; width:100%; height:100%; background:rgba(20,20,20,.8); top:100%; left:0; z-index:2; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .portfolio-wrap-third:hover .mask, .portfolio-wrap-fourth:hover .mask{ top:0; } .portfolio-wrap-third .mask h6, .portfolio-wrap-fourth .mask h6{ position:absolute; width:100%; text-align:center; top:50%; left:0; margin-top:-29px; color:#fff; font-size: 16px; line-height: 16px; text-transform:uppercase; letter-spacing:4px; font-weight:600; z-index:3; } .portfolio-wrap-third .mask p, .portfolio-wrap-fourth .mask p{ position:absolute; width:100%; text-align:center; top:50%; left:0; margin-top:15px; font-style: italic; font-family: 'Playfair Display', serif; color:#fff; font-size: 12px; line-height: 12px; letter-spacing:2px; font-weight:400; z-index:3; } .portfolio-wrap-third .mask h6:after, .portfolio-wrap-fourth .mask h6:after{ position:absolute; content:''; width:10px; left:50%; margin-left:-5px; bottom:-15px; height:1px; z-index:5; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .portfolio-wrap-third:hover .mask h6:after, .portfolio-wrap-fourth:hover .mask h6:after{ width:100px; margin-left:-50px; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .portfolio-wrapper-1{ position:relative; width:100%; overflow:hidden; } .portfolio-wrapper-1:after{ content: ''; display: block; clear: both; } .portfolio-wrap-third{ position:relative; width:calc(100% / 3); float:left; overflow:hidden; display:inline-block; } #projects-grid{ position:relative; margin:0 auto; width:calc(100% - 10px); padding-top:5px; margin-right:5px; padding-bottom:5px; margin-left:5px; } #projects-grid.no-margin-gallery{ width:100%; padding-top:0; margin-right:0; padding-bottom:0; margin-left:0; } #projects-grid .width-smaller-grid{ position:relative; margin:0 auto; width:100%; max-width:1360px; } #projects-grid .width-sidebar-grid{ position:relative; width:calc(100% - 410px); float:left; display:inline-block; } #projects-grid .sidebar{ position:relative; width:400px; float:left; display:inline-block; padding-top:5px; margin-right:5px; padding-bottom:5px; margin-left:5px; } #projects-grid:after { content: ''; display: block; clear: both; } #projects-grid .sidebar .sidebar-wrap{ position:relative; padding:40px; } .portfolio-box-1{ position:relative; float:left; width:calc(100% / 4 - 10px); display:inline-block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin-top:5px; margin-right:4px; margin-bottom:5px; margin-left:5px; overflow:hidden; -webkit-transform: translate3d(1px,0,0); transform: translate3d(1px,0,0); } .portfolio-box-1.no-margin-gallery{ width:calc(100% / 4); margin-top:0; margin-right:0; margin-bottom:0; margin-left:-1px; -webkit-transform: translate3d(1px,0,0); transform: translate3d(1px,0,0); } .portfolio-box-1.half-box{ width:calc(100% / 2 - 10px); } .portfolio-box-1.third-box{ width:calc(100% / 3 - 10px); } .portfolio-box-1.fifth-box{ width:calc(100% / 5 - 10px); } .portfolio-box-1 .mask-1{ position:absolute; width:100%; height:100%; top:0; left:0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; background:rgba(0,0,0,0); z-index:2; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .portfolio-box-1:hover .mask-1{ width:calc(100% - 20px); height:calc(100% - 20px); top:10px; left:10px; background:rgba(0,0,0,.9); } .portfolio-box-1 h6{ position:absolute; top:60px; left:120px; color:#fff; font-family: 'Dosis', sans-serif; font-weight:400; font-size: 15px; line-height:22px; letter-spacing:4px; text-transform: uppercase; z-index:4; opacity:0; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .portfolio-box-1:hover h6{ left:60px; opacity:1; } .portfolio-box-1 p{ position:absolute; top:92px; left:120px; color:#fff; z-index:4; opacity:0; font-size:13px; letter-spacing:3px; font-family: 'Playfair Display', serif; font-style: italic; line-height:17px; text-align:left; font-weight:400; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .portfolio-box-1:hover p{ left:60px; opacity:1; -webkit-transition-delay:0.4s; transition-delay:0.4s; } .portfolio-box-1 img{ width:100%; height:auto; display:block; } .portfolio-box-1 h5{ position:absolute; top:50%; left:0; width:100%; margin-top:-87px; text-align:center; color:#fff; font-family: 'Dosis', sans-serif; font-weight:400; font-size: 14px; line-height:22px; letter-spacing:6px; text-transform: uppercase; z-index:4; opacity:0; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .portfolio-box-1:hover h5{ margin-top:-35px; opacity:1; -webkit-transition-delay:0.2s; transition-delay:0.2s; } .portfolio-box-1 h4{ position:absolute; top:50%; left:0; width:100%; text-align:center; color:#dfdfdf; z-index:4; opacity:0; font-size:13px; margin-top:65px; letter-spacing:3px; text-transform: none; font-family: 'Playfair Display', serif; font-style: italic; line-height:17px; font-weight:400; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .portfolio-box-1:hover h4{ margin-top:13px; opacity:1; -webkit-transition-delay:0.2s; transition-delay:0.2s; } .portfolio-box-1 h4:before{ position:absolute; content:''; top:-14px; left:50%; width:0; z-index:4; height:1px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .portfolio-box-1:hover h4:before{ width:70px; margin-left:-35px; -webkit-transition-delay:0.5s; transition-delay:0.5s; } .portfolio-box-1 .text-block{ position:relative; width:calc(100% - 80px); padding-top:80px; padding-bottom:80px; padding-left:40px; padding-right:40px; } .portfolio-box-1 .text-block .small-text{ font-size:14px; letter-spacing:3px; font-family: 'Playfair Display', serif; font-style: italic; line-height:22px; text-align:left; color:#fff; } .portfolio-box-1 .text-block .big-text{ color:#f8f8f8; font-family: 'Dosis', sans-serif; font-weight:500; font-size: 15px; line-height:22px; letter-spacing:4px; text-transform: uppercase; padding-top:30px; text-align:left; } #portfolio-filter { position:relative; width:100%; text-align: center; } #filter { position:relative; width:100%; text-align: center; } #filter li { display: inline-block; text-align: center; } #filter:after { content: ''; display: block; clear: both; } #filter li a { position: relative; display: inline-block; letter-spacing:3px; font-family: 'Playfair Display', serif; font-style: italic; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 15px; margin-top:3px; margin-bottom:3px; text-align: center; outline: none; color: #fff; margin-left:10px; margin-right:10px; text-decoration: none; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } #filter li .current { } #filter li a:hover { } .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: top, left, opacity; transition-property: transform, opacity; } .sidebar-portfolio-wrapper h6{ text-align:left; color:#fff; padding-bottom:25px; font-family: 'Playfair Display', serif; text-transform:none; letter-spacing:2px; font-size:16px; font-style: italic; } .sidebar-portfolio-wrapper{ position:relative; width:100%; overflow:hidden; margin-top:50px; } .sidebar-portfolio-wrapper:nth-of-type(1){ margin-top:0; } .sidebar-portfolio-wrapper-in{ position:relative; width:100%; overflow:hidden; margin-top:30px; } .sidebar-portfolio-wrapper-in:nth-of-type(1){ margin-top:0; } .sidebar-portfolio-wrapper-in:after{ content: ''; display: block; clear: both; } .sidebar-portfolio-wrapper-in img{ width:60px; height:60px; float:left; border-radius:50%; margin-right:30px; display:inline-block; } .sidebar-portfolio-wrapper-in a{ text-align:left; font-family: 'Inconsolata'; font-weight:700; font-size: 14px; line-height:20px; letter-spacing:2px; text-transform:uppercase; color:#fff; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .sidebar-portfolio-wrapper-in p{ text-align:left; color:#9a9a9a; font-family: 'Playfair Display', serif; text-transform:none; letter-spacing:2px; font-size:12px; font-style: italic; margin-top:5px; } .sidebar-portfolio-wrapper ul{ position:relative; width:100%; } .sidebar-portfolio-wrapper ul:after { content: ''; display: block; clear: both; } .sidebar-portfolio-wrapper ul li{ position:relative; float:left; display:inline-block; margin-right:5px; margin-bottom:5px; } .sidebar-portfolio-wrapper ul li a{ position:relative; display:block; text-transform:uppercase; font-size:10px; padding:8px 17px; color:#fff; background:#181818; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } /* #Inner Projects ================================================== */ #owl-project-slider { position:relative; width:100%; margin:0 auto; overflow:hidden; } #owl-project-slider .item{ position:relative; width:100%; margin:0 auto; z-index:2; overflow:hidden; } #owl-project-slider .item img{ width:100%; display:block; } #owl-project-slider.owl-theme .owl-controls{ position:absolute; left:0; width:100%; bottom:50px; z-index:5; } #owl-project-slider.owl-theme .owl-controls .owl-page span{ background:#fff; } .project-descrip { position:relative; padding:40px; overflow:hidden; } .project-descrip h5{ text-align:left; color:#fff; padding-bottom:20px; padding-top:48px; } .project-descrip h5:nth-of-type(1){ padding-top:0; } .project-descrip p{ text-align:left; color:#f8f8f8; } .project-descrip .info-text{ text-align:left; color:#dfdfdf; font-family: 'Playfair Display', serif; text-transform:none; letter-spacing:3px; font-size:13px; line-height:27px; font-weight:400; font-style: italic; margin-bottom:50px; } .project-descrip .info-text a{ font-weight:900; color:#dfdfdf; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .project-descrip .button-effect { float:left; } .project-descrip .button--moema { padding: 12px 20px; border-radius:3px; color:#fff; background-color:#000; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:3px; -webkit-transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s; } .project-descrip .button--moema::before { border-radius:3px; -webkit-transform: scale3d(0.8, 0.5, 1); transform: scale3d(0.8, 0.5, 1); } .project-descrip .button--moema:hover { -webkit-transition: background-color 0.3s 0s, color 0.3s 0s; transition: background-color 0.3s 0s, color 0.3s 0s; color:#fff; -webkit-animation: anim-moema-1 0.6s forwards; animation: anim-moema-1 0.6s forwards; } .project-descrip .button--moema:hover::before { -webkit-animation: anim-moema-2 0.6s 0.5s forwards; animation: anim-moema-2 0.6s 0.5s forwards; } .tumb-wrap{ position:relative; display:block; width:100%; overflow:hidden; } .tumb-wrap img{ width:100%; display:block; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .tumb-wrap:hover img{ opacity:.8; } .tumb-wrap .zoom{ position:absolute; display:block; top:50%; left:50%; margin-left:-25px; margin-top:-25px; border-radius:50%; z-index:3; color:#fff; background:#212121; height:50px; width:50px; line-height:50px; text-align:center; font-family: 'Simple-Line-Icons'; font-size: 13px; opacity:0; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .tumb-wrap:hover .zoom{ opacity:1; } .tumb-wrap .hover-1{ position:absolute; display:block; top:10px; left:10px; z-index:3; background-color:rgba(0,0,0,.8); background-image:url('../images/more.png'); background-position:center center; background-repeat:no-repeat; background-size:40px 40px; height:calc(100% - 20px); width:calc(100% - 20px); opacity:0; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .tumb-wrap:hover .hover-1{ opacity:1; } .tumb-wrap .hover-2{ position:absolute; display:block; top:10px; left:10px; z-index:3; background-color:rgba(0,0,0,.8); height:calc(100% - 20px); width:calc(100% - 20px); opacity:0; overflow:hidden; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .tumb-wrap:hover .hover-2{ opacity:1; } .tumb-wrap .hover-2 p{ font-style: italic; font-family: 'Playfair Display', serif; font-size: 14px; text-align:center; top:-50px; left:0; width:100%; position:absolute; line-height:18px; letter-spacing:3px; text-align:center; font-weight:400; color:#fff; text-transform:none; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .tumb-wrap:hover .hover-2 p{ top:50%; -webkit-transition-delay:0.2s; transition-delay:0.2s; } .tumb-wrap .hover-3{ position:absolute; display:block; top:10px; left:10px; z-index:3; background-color:rgba(0,0,0,.8); height:calc(100% - 20px); width:calc(100% - 20px); opacity:0; overflow:hidden; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .tumb-wrap:hover .hover-3{ opacity:1; } .tumb-wrap .hover-3 p{ font-style: italic; font-family: 'Playfair Display', serif; font-size: 13px; text-align:center; top:calc(100% + 50px); left:0; width:100%; margin-top:5px; position:absolute; line-height:18px; letter-spacing:3px; text-align:center; font-weight:400; color:#fff; text-transform:none; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .tumb-wrap:hover .hover-3 p{ top:50%; -webkit-transition-delay:0.2s; transition-delay:0.2s; } .tumb-wrap .hover-3 h6{ font-family: 'Dosis', sans-serif; font-size: 15px; text-align:center; top:-50px; left:0; width:100%; margin-top:-23px; position:absolute; line-height:18px; letter-spacing:5px; text-align:center; font-weight:400; color:#fff; text-transform:uppercase; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .tumb-wrap:hover .hover-3 h6{ top:50%; -webkit-transition-delay:0.2s; transition-delay:0.2s; } .tumb-wrap .hover-4{ position:absolute; display:block; top:-100%; left:10px; z-index:3; background-color:rgba(0,0,0,.8); height:calc(100% - 20px); width:calc(100% - 20px); opacity:0; overflow:hidden; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .tumb-wrap:hover .hover-4{ top:10px; opacity:1; } .tumb-wrap .hover-4 p{ font-style: italic; font-family: 'Playfair Display', serif; font-size: 13px; text-align:center; top:calc(100% + 50px); left:0; width:100%; margin-top:5px; position:absolute; line-height:18px; letter-spacing:3px; text-align:center; font-weight:400; color:#fff; text-transform:none; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .tumb-wrap:hover .hover-4 p{ top:50%; -webkit-transition-delay:0.2s; transition-delay:0.2s; } .tumb-wrap .hover-4 h6{ font-family: 'Dosis', sans-serif; font-size: 15px; text-align:center; top:-50px; left:0; width:100%; margin-top:-23px; position:absolute; line-height:18px; letter-spacing:5px; text-align:center; font-weight:400; color:#fff; text-transform:uppercase; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .tumb-wrap:hover .hover-4 h6{ top:50%; -webkit-transition-delay:0.2s; transition-delay:0.2s; } .tumb-wrap .hover-5{ position:absolute; display:block; top:-100%; left:10px; z-index:3; background-color:rgba(0,0,0,.8); height:calc(100% - 20px); width:calc(100% - 20px); opacity:0; overflow:hidden; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .tumb-wrap:hover .hover-5{ top:10px; opacity:1; } .tumb-wrap .hover-5 p{ font-style: italic; font-family: 'Playfair Display', serif; font-size: 13px; text-align:center; top:calc(100% + 50px); left:0; width:100%; margin-top:10px; position:absolute; line-height:18px; letter-spacing:3px; text-align:center; font-weight:400; color:#fff; text-transform:none; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .tumb-wrap:hover .hover-5 p{ top:50%; -webkit-transition-delay:0.2s; transition-delay:0.2s; } .tumb-wrap .hover-5 h6{ font-family: 'Dosis', sans-serif; font-size: 15px; text-align:center; top:-50px; left:0; width:100%; margin-top:-28px; position:absolute; line-height:18px; letter-spacing:5px; text-align:center; font-weight:400; color:#fff; text-transform:uppercase; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .tumb-wrap:hover .hover-5 h6{ top:50%; -webkit-transition-delay:0.2s; transition-delay:0.2s; } .tumb-wrap .hover-5 p:before{ position:absolute; content:''; top:-10px; left:50%; width:0; z-index:4; height:1px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .tumb-wrap:hover .hover-5 p:before{ width:70px; margin-left:-35px; -webkit-transition-delay:0.5s; transition-delay:0.5s; } .hero-wrap-pages-parallax{ position:absolute; left:0; top:50%; width:100%; z-index:10; text-align:center; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .hero-wrap-pages-parallax p, .hero-wrap-pages-parallax h2{ text-align:center; } .hero-wrap-pages-parallax h2{ font-style: italic; font-family: 'Playfair Display', serif; font-size: 18px; line-height:18px; letter-spacing:3px; font-weight:400; color:#fff; text-transform:none; z-index:2; -webkit-transform: translateY(-85px); -moz-transform: translateY(-85px); -ms-transform: translateY(-85px); -o-transform: translateY(-85px); transform: translateY(-85px); } .hero-wrap-pages-parallax h2 span{ padding:14px 45px; background:rgba(0,0,0,.75); } .hero-wrap-pages-parallax p{ font-style: italic; font-family: 'Playfair Display', serif; font-size: 120px; line-height:128px; letter-spacing:3px; font-weight:900; color:rgba(255,255,255,.2); text-transform:none; z-index:1; } .hero-wrap-pages-parallax.for-demo h2{ -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } .hero-wrap-pages-parallax .button-effect { width: 50px; height: 50px; max-width:50px; min-width:50px; display: block; margin: 0 auto; border: none; color: inherit; vertical-align: middle; cursor:pointer; position: relative; z-index: 5; -webkit-backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; } .hero-wrap-pages-parallax .button-effect:focus { outline: none; } .hero-wrap-pages-parallax .button-effect > span { vertical-align: middle; } .hero-wrap-pages-parallax .button--moema { padding:0; font-family: 'Simple-Line-Icons'; border-radius: 50%; text-align:center; font-size:13px; line-height:50px; letter-spacing:0; color: #fff; -webkit-transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s; } .hero-wrap-pages-parallax .button--moema::before { padding:0; content: ''; position: absolute; top: -20px; left: -20px; bottom: -20px; right: -20px; background: inherit; border-radius: 50%; z-index: -1; opacity: 0.4; -webkit-transform: scale3d(0.5, 0.5, 1); transform: scale3d(0.5, 0.5, 1); } .hero-wrap-pages-parallax .button--moema:hover { -webkit-transition: background-color 0.3s 0s, color 0.3s 0s; transition: background-color 0.3s 0s, color 0.3s 0s; color:#fff; -webkit-animation: anim-moema-1 0.6s forwards; animation: anim-moema-1 0.6s forwards; } .hero-wrap-pages-parallax .button--moema:hover::before { -webkit-animation: anim-moema-2 0.6s 0.5s forwards; animation: anim-moema-2 0.6s 0.5s forwards; } .parallax-portfolio-1 { background: url('../images/portfolio/parallax/1.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-portfolio-1 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-portfolio-1 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-portfolio-1 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-portfolio-1 { background: url('../images/portfolio/parallax/1.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-portfolio-1 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-portfolio-1 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-portfolio-1 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-portfolio-2 { background: url('../images/portfolio/parallax/2.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-portfolio-2 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-portfolio-2 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-portfolio-2 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-portfolio-3 { background: url('../images/portfolio/parallax/3.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-portfolio-3 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-portfolio-3 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-portfolio-3 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-portfolio-4 { background: url('../images/portfolio/parallax/4.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-portfolio-4 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-portfolio-4 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-portfolio-4 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } /* #Parallax ================================================== */ .parallax-home { background: url('../images/parallax-1.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-home { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-home { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-home { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-home-1 { background: url('../images/parallax-3.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-home-1 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-home-1 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-home-1 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-1 { background: url('../images/parallax-2.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-1 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-1 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-1 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-2 { background: url('../images/parallax-4.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-2 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-2 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-2 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-3 { background: url('../images/parallax-5.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-3 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-3 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-3 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-4 { background: url('../images/parallax-6.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-4 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-4 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-4 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-5 { background: url('../images/parallax-7.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-5 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-5 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-5 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-6 { background: url('../images/parallax-8.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-6 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-6 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-6 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-7 { background: url('../images/parallax-9.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-7 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-7 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-7 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-8 { background: url('../images/parallax-10.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-8 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-8 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-8 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-9 { background: url('../images/parallax-11.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-9 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-9 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-9 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-about { background: url('../images/parallax-12.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-about { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-about { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-about { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-team { background: url('../images/parallax-13.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-team { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-team { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-team { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-services { background: url('../images/parallax-14.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-services { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-services { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-services { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-clients { background: url('../images/parallax-15.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-clients { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-clients { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-clients { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-pricing { background: url('../images/parallax-16.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-pricing { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-pricing { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-pricing { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-whatwedo { background: url('../images/parallax-17.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-whatwedo { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-whatwedo { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-whatwedo { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-personal { background: url('../images/parallax-18.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-personal { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-personal { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-personal { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-faq { background: url('../images/parallax-19.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-faq { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-faq { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-faq { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-404 { background: url('../images/parallax-20.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-404 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-404 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-404 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-contact { background: url('../images/parallax-21.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-contact { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-contact { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-contact { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-comingsoon { background: url('../images/parallax-22.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-comingsoon { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-comingsoon { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-comingsoon { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-portfolio { background: url('../images/parallax-23.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-portfolio { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-portfolio { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-portfolio { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-projects { background: url('../images/parallax-24.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-projects { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-projects { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-projects { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-blog-pages { background: url('../images/parallax-25.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-blog-pages { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-blog-pages { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-blog-pages { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-page-home { background: url('../images/parallax-page-home.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-page-home { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-page-home { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-page-home { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-page-home1 { background: url('../images/parallax-page-home1.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-page-home1 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-page-home1 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-page-home1 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-page-home2 { background: url('../images/parallax-page-home2.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-page-home2 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-page-home2 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-page-home2 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-text-wrap{ position:absolute; width:100%; left:0; top:50%; text-align:center; display:block; z-index:3; margin-top:40px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .parallax-text-1{ position:relative; color:rgba(255,255,255,1.00); font-family: 'Playfair Display', serif; font-style: italic; font-size:70px; font-weight:900; letter-spacing:4px; line-height:85px; padding:0; text-align:left; text-decoration:none; margin-bottom:70px; z-index:3; } .parallax-text-2{ position:absolute; top:-30px; left:0; width:100%; color:rgba(255,255,255,.2); font-family: 'Playfair Display', serif; font-style: italic; font-size:120px; font-weight:900; letter-spacing:4px; line-height:85px; padding:0; text-align:left; text-decoration:none; z-index:2; } .parallax-text-wrap a.button{ font-family: 'Inconsolata'; float:left; display:block; font-weight:600; padding:12px 38px; border:2px solid #212121; background-color:#212121; color:#fff; border-radius:2px; text-align:center; font-size:14px; line-height:13px; letter-spacing:3px; text-transform:uppercase; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } /* #Footers ================================================== */ .footer-wrap-1 h6, .footer-wrap-2 h6, .footer-wrap-3 h6, .footer-wrap-5 h6{ text-align:left; color:#fff; padding-bottom:40px; font-family: 'Playfair Display', serif; text-transform:none; letter-spacing:2px; font-size:16px; font-style: italic; } .white-footer .footer-wrap-1 h6, .white-footer .footer-wrap-2 h6, .white-footer .footer-wrap-3 h6, .white-footer .footer-wrap-5 h6{ color:#000; } .white-footer .footer-wrap-1 p{ color:#212121; font-weight:400; } .white-footer .footer-wrap-2-in a{ color:#000; } .white-footer .footer-wrap-2-in p{ color:#424242; } .footer-wrap-1{ position:relative; width:100%; overflow:hidden; } .footer-wrap-1 img{ width:180px; display:block; } .footer-wrap-1 p{ text-align:left; color:#f1f1f1; margin-top:15px; font-size:13px; } .footer-wrap-1 p:nth-of-type(1){ margin-top:50px; } .footer-wrap-1 p span{ text-align:left; font-family: 'Simple-Line-Icons'; margin-right:20px; } .footer-wrap-2{ position:relative; width:100%; overflow:hidden; } .footer-wrap-2-in{ position:relative; width:100%; overflow:hidden; margin-top:30px; } .footer-wrap-2-in:nth-of-type(1){ margin-top:0; } .footer-wrap-2-in:after{ content: ''; display: block; clear: both; } .footer-wrap-2-in img{ width:60px; height:60px; float:left; border-radius:50%; margin-right:30px; display:inline-block; } .footer-wrap-2-in a{ text-align:left; font-family: 'Inconsolata'; font-weight:700; font-size: 14px; line-height:20px; letter-spacing:2px; text-transform:uppercase; color:#fff; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .footer-wrap-2-in p{ text-align:left; color:#9a9a9a; font-family: 'Playfair Display', serif; text-transform:none; letter-spacing:2px; font-size:12px; font-style: italic; margin-top:5px; } .footer-wrap-3{ position:relative; width:100%; overflow:hidden; } .footer-wrap-3:after{ content: ''; display: block; clear: both; } .footer-wrap-3 img{ width: calc(100% / 4 - 10px); margin-right:10px; margin-bottom:10px; display:inline-block; float:left; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .footer-wrap-3 img:hover{ opacity:.7; } .footer-wrap-4{ position:relative; width:100%; overflow:hidden; margin:0 auto; text-align:center; } .footer-wrap-4 img{ width:160px; display:block; margin:0 auto; text-align:center; } .footer-wrap-4 ul{ position:relative; width:100%; text-align:center; margin:0 auto; padding-top:40px; } .footer-wrap-4 ul li{ display:inline-block; text-align:center; } .footer-wrap-4 ul li:before{ content:'/'; padding-left:5px; margin-right:12px; font-size: 18px; color:#111; font-style: italic; font-family: 'Playfair Display', serif; } .footer-wrap-4 ul li:first-child:before{ content:none; } .footer-wrap-4 ul li a{ color:#313131; font-style: italic; font-family: 'Playfair Display', serif; font-size: 13px; line-height:17px; letter-spacing:2px; font-weight:400; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .dark-background .footer-wrap-4 ul li a{ color:#fff; } .dark-background .footer-wrap-4 ul li:before{ color:#fff; } .footer-wrap-5{ position:relative; width:100%; overflow:hidden; } .footer-wrap-5 ul{ position:relative; width:100%; display:block; } .footer-wrap-5 ul li{ display:block; text-align:left; padding-bottom:10px; padding-top:10px; border-bottom:1px solid rgba(0,0,0,.1); } .footer-wrap-5 ul li a{ color:#000; font-family: 'Open Sans', sans-serif; font-weight:400; font-size: 10px; line-height:18px; letter-spacing:3px; text-transform:uppercase; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .footer-wrap-5 ul li:first-child{ padding-top:0; } .footer-wrap-5 ul li:last-child{ padding-bottom:0; border-bottom:none; } .footer-down{ position:relative; width:100%; overflow:hidden; } .footer-down p{ text-transform:uppercase; font-size:11px; letter-spacing:3px; font-weight:600; color:#9a9a9a; text-align:center; } .grey-background .footer-down p{ color:#656565; } /* #Business Variants ================================================== */ .parallax-business1 { background: url('../images/business/parallax-business-1.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-business1 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-business1 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-business1 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-business2 { background: url('../images/business/parallax-business-2.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-business2 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-business2 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-business2 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-business3 { background: url('../images/business/parallax-business-3.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-business3 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-business3 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-business3 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-business4 { background: url('../images/business/parallax-business-4.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-business4 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-business4 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-business4 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-business5 { background: url('../images/business/parallax-business-5.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-business5 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-business5 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-business5 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-business6 { background: url('../images/business/parallax-business-6.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-business6 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-business6 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-business6 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-business7 { background: url('../images/business/parallax-business-7.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-business7 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-business7 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-business7 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-business8 { background: url('../images/business/parallax-business-8.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-business8 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-business8 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-business8 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-business9 { background: url('../images/business/parallax-business-9.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-business9 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-business9 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-business9 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-business10 { background: url('../images/business/parallax-business-10.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-business10 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-business10 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-business10 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-business11 { background: url('../images/business/parallax-business-11.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-business11 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-business11 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-business11 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-business12 { background: url('../images/business/parallax-business-12.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-business12 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-business12 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-business12 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-business13 { background: url('../images/business/parallax-business-13.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-business13 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-business13 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-business13 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-business14 { background: url('../images/business/parallax-business-14.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-business14 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-business14 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-business14 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-business15 { background: url('../images/business/parallax-business-15.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-business15 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-business15 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-business15 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-business16 { background: url('../images/business/parallax-business-16.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-business16 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-business16 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-business16 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-business17 { background: url('../images/business/parallax-business-17.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-business17 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-business17 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-business17 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-business18 { background: url('../images/business/parallax-business-18.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-business18 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-business18 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-business18 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-business19 { background: url('../images/business/parallax-business-19.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-business19 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-business19 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-business19 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-business20 { background: url('../images/business/parallax-business-20.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-business20 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-business20 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-business20 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-business21 { background: url('../images/business/parallax-business-21.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-business21 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-business21 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-business21 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-business22 { background: url('../images/business/parallax-business-22.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-business22 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-business22 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-business22 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-business23 { background: url('../images/business/parallax-business-23.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-business23 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-business23 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-business23 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-business24 { background: url('../images/business/parallax-business-24.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-business24 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-business24 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-business24 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-business25 { background: url('../images/business/parallax-business-25.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-business25 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-business25 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-business25 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-business26 { background: url('../images/business/parallax-business-26.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-business26 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-business26 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-business26 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-business27 { background: url('../images/business/parallax-business-27.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-business27 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-business27 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-business27 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .parallax-business28 { background: url('../images/business/parallax-business-28.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-business28 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1200px) and (orientation : landscape) { .parallax-business28 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 1400px) { .parallax-business28 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .split-background-cons-1{ background-image:url('../images/business/split-1.jpg') } .split-background-cons-2{ background-image:url('../images/business/split-2.jpg') } .split-background-medical-1{ background-image:url('../images/business/split-medical-1.jpg') } .split-background-medical-2{ background-image:url('../images/business/split-medical-2.jpg') } .split-background-medical-3{ background-image:url('../images/business/split-medical-3.jpg') } .split-background-medical-4{ background-image:url('../images/business/split-medical-4.jpg') } .split-background-barbar-1{ background-image:url('../images/business/split-barbar-1.jpg'); background-position:left center; } .split-background-barbar-2{ background-image:url('../images/business/split-barbar-2.jpg'); background-position:right center; } .dark-background.opacity-background{ background-color:rgba(40,40,40,.5); } .team-box-1 ul.business li:before{ content:none; } .team-box-1 ul.business li a{ color:#000; background:#fff; font-style: normal; font-family: 'FontAwesome'; display:block; margin-left:3px; margin-right:3px; font-size: 15px; line-height:35px; width:35px; height:35px; text-align:center; border-radius:50%; letter-spacing:0; font-weight:400; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .team-box-1 ul.business li a:hover{ color:#fff; } .three-quarters-height{ height:75vh; } .team-box-in-image-wedding-1{ background-image:url('../images/business/team-wedding-1.jpg'); } .team-box-in-image-wedding-2{ background-image:url('../images/business/team-wedding-2.jpg'); } #sync11 .item.center p, #sync7 .item.center p{ color:#fff; text-align:center; } #sync11 .item.center h5, #sync7 .item.center h5{ color:#fff; text-align:center; padding-bottom:20px; } .services-box-1.rest-icon .icon { font-size:80px; color:#fff; } .services-box-1.rest-icon .icon:before { font-family: "Ionicons"; } .services-box-1.medical-icon .icon { font-size:80px; color:#fff; } .services-box-1.medical-icon .icon:before { font-family: 'FontAwesome'; } .sky-mega-menu a .tooltip{ background: #fff; bottom: 0; color: #fff; display: block; right: auto; left: 100%; margin-left: 10px; margin-bottom: -100px; opacity: 0; padding: 5px; pointer-events: none; position: absolute; z-index:100; width: 200%; max-width:280px; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); -webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out; -ms-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out; -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); } .sky-mega-menu a .tooltip img { display: block; width: 100%; } .sky-mega-menu a:hover .tooltip { opacity: 1; pointer-events: auto; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .sky-mega-menu a .tooltip:after { border-top: solid transparent 6px; border-bottom: solid transparent 6px; border-right: solid #fff 6px; left: -6px; content: " "; height: 0; top: 24px; position: absolute; width: 0; } .sky-mega-menu a:hover .tooltip { opacity: 1; pointer-events: auto; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .sky-mega-menu ul li a .new-menu{ vertical-align: super; font-size:7px; font-weight:800; } .sky-mega-menu ul li a .hot-menu{ vertical-align: super; font-size:7px; font-weight:400; color:#fff; padding-top:2px; padding-bottom:2px; padding-left:6px; padding-right:4px; border-radius:2px; } .hero-wrap-2.photoghrapher .text-back{ top:20px; font-size:100px; } .title-text-center.dark-title-back h5, .title-text-center.dark-title-back h4{ color:#fff; } .title-text-center.dark-title-back p{ color:#fafafa; } .about-carousel-wrap{ position:relative; width:100%; margin:0 auto; overflow:hidden; z-index:2; } #sync21 .item { position: relative; margin: 0 auto; width:100%; display: block; } #sync21 .item:after { content: ''; display: block; clear: both; } #sync21 .item img{ } #sync21 .item p{ width:100%; max-width:900px; margin: 0 auto; color:#fff; text-align:center; } #sync21 .item p.text-padding{ padding-bottom:15px; } #sync22 { position:relative; width:100%; max-width:550px; margin:0 auto; } #sync22 .item{ width:80%; margin-left:10%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; z-index:200; cursor:pointer; margin-top:80px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } #sync22 .item .line{ position:absolute; width:100%; height:1px; top:80px; left:-100%; z-index:1px; background:#fff; opacity:0; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } #sync22 .item .point-item { position: absolute; border-radius: 50%; width: 7px; height: 7px; background:#fff; z-index:1; top:40px; left:50%; margin-left:-3px; opacity:0; -webkit-transition: -webkit-transform 0.6s; transition: transform 0.6s; } #sync22 .item .line-ver{ position:absolute; width:1px; height:20px; top:40px; left:50%; z-index:1px; background:#fff; opacity:0; -webkit-transition: -webkit-transform 0.4s; transition: transform 0.4s; } #sync22 .item p{ font-family: 'Open Sans', sans-serif; font-weight:600; font-size: 12px; line-height:25px; padding-top:10px; color:#fafafa; text-align:center; text-transform: uppercase; letter-spacing:3px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } #sync22 .item:hover p{ } #sync22 .synced .item { } #sync22 .synced .item .line{ -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); opacity:1; } #sync22 .synced .item .line-ver{ -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); opacity:1; } #sync22 .synced .item .point-item { -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); opacity:1; } .section-call-action-link{ position:relative; text-align:center; margin:0 auto; background:#323232; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .section-call-action-link:hover{ background:#111; } .section-call-action-link.fitness-call{ background:#111; } .section-call-action-link.fitness-call:hover{ background:#000; } .section-call-action-link p{ text-align:center; font-weight:400; letter-spacing:3px; color:#fafafa; font-style: italic; font-family: 'Playfair Display', serif; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .section-call-action-link h5{ text-align:center; padding-bottom:10px; color:#fff; } #owl-top .item.top-image-fitness-1{ background-image:url('../images/business/fitness-1.jpg'); } #owl-top .item.top-image-fitness-2{ background-image:url('../images/business/fitness-2.jpg'); } #owl-top .item.top-image-fitness-1, #owl-top .item.top-image-fitness-2{ height:75vh; } .shop-home-box-1.half-width.fitness h6{ position:absolute; width:70%; text-align:left; top:50%; left:15%; color:#fff; font-size: 22px; line-height: 25px; letter-spacing:10px; font-weight:600; z-index:3; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .shop-home-box-1.half-width.fitness h6 span{ font-size: 16px; letter-spacing:6px; font-weight:400; font-style: italic; font-family: 'Playfair Display', serif; text-transform:none; } .shop-home-box-1.half-width.tourism h6{ position:absolute; width:70%; text-align:left; top:50%; left:15%; color:#212121; font-size: 17px; line-height: 25px; letter-spacing:3px; font-weight:600; z-index:3; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .shop-home-box-1.half-width.tourism h6 span{ font-size: 14px; letter-spacing:6px; font-weight:400; font-style: italic; font-family: 'Playfair Display', serif; text-transform:none; } .split-tourist-1{ background-image:url('../images/business/tourist-split-1.jpg') } .split-tourist-2{ background-image:url('../images/business/tourist-split-2.jpg') } .split-tourist-3{ background-image:url('../images/business/tourist-split-3.jpg') } .split-tourist-4{ background-image:url('../images/business/tourist-split-4.jpg') } .count-box-1.busines-profile-counter h3{ position:absolute; width:100%; color:rgba(255,255,255,.2); top:50%; left:0; line-height:140px; font-size:240px; height:240px; font-style: italic; font-weight:100; font-family: 'Playfair Display', serif; text-align:center; padding-bottom:0; letter-spacing:2px; vertical-align: text-top; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .sky-mega-menu li a > .fa.fa-submenu { display: inline-block; width: 12px; float: none; margin: 0; padding-right:10px; font-size: 10px; text-align: center; font-weight:400; line-height: inherit; } .split-text-wrap .blockquote-2 p, .split-text-wrap .blockquote-3 p { text-align:left; } .sky-mega-menu li > div.background-menu-image-farmer-1{ background-position:bottom right; background-size:cover; background-image:url('../images/business/menu-farmer-1.png') } .sky-mega-menu li > div.background-menu-image-farmer-2{ background-position:bottom right; background-size:cover; background-image:url('../images/business/menu-farmer-2.png') } .sky-mega-menu li > div.background-menu-image-club-1{ background-position:bottom right; background-size:cover; background-image:url('../images/business/menu-club-1.png') } .sky-mega-menu li > div.background-menu-image-club-2{ background-position:bottom right; background-size:cover; background-image:url('../images/business/menu-club-2.png') } .split-club-1{ background-image:url('../images/business/club-split-1.jpg') } .footer-club-image{ background-image:url('../images/business/footer-club.png'); background-size:cover; background-repeat:no-repeat; background-position:center bottom; } .portfolio-box-1 .zoom{ position:absolute; display:block; top:50%; left:50%; margin-left:-25px; margin-top:-25px; border-radius:50%; z-index:3; color:#fff; background:#212121; text-align:center; height:50px; width:50px; line-height:50px; font-family: 'Simple-Line-Icons'; font-size: 13px; opacity:0; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .portfolio-box-1:hover .zoom{ opacity:1; } .split-software-1{ background-image:url('../images/business/software-1.jpg') } .split-software-2{ background-image:url('../images/business/software-2.jpg') } .sign-section-left .sign.link-sign-cosmetics span{ font-family: 'FontAwesome'; padding-left:10px; font-size:14px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .sign-section-left .sign.link-sign-cosmetics:hover span{ padding-left:25px; } .sky-mega-menu li > div.background-menu-image-cosmetics-1{ background-position:bottom right; background-size:cover; background-image:url('../images/business/menu-cosmetics-1.png') } .sky-mega-menu li > div.background-menu-image-cosmetics-2{ background-position:bottom right; background-size:cover; background-image:url('../images/business/menu-cosmetics-2.png') } .story-split{ position:absolute; width:50%; float:left; height:100vh; z-index:10; top:0; left:0; } .hero-wrap-story{ position:absolute; left:15%; top:50%; width:70%; z-index:10; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .hero-wrap-story h2{ font-style: italic; font-family: 'Playfair Display', serif; font-size: 66px; text-align:left; line-height:74px; letter-spacing:8px; font-weight:900; color:#212121; text-transform:none; } .hero-wrap-story h3{ font-style: italic; font-family: 'Playfair Display', serif; font-size: 36px; text-align:left; line-height:44px; letter-spacing:8px; font-weight:900; color:#212121; text-transform:none; } .hero-wrap-story .subtext{ font-family: 'Open Sans', sans-serif; font-weight:300; font-size: 15px; line-height:23px; letter-spacing:3px; text-align:left; font-weight:600; color:#545454; margin-top:15px; text-transform:uppercase; } .hero-wrap-story p{ text-align:left; color:#757575; margin-top:40px; } /* #Navigation */ .cd-header{ position: fixed; width:100%; top:0; left:0; z-index:10; } /* Main Components */ main { position: relative; z-index: 2; width:100%; -webkit-overflow-scrolling: touch; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.7s; -moz-transition: -moz-transform 0.7s; transition: transform 0.7s; -webkit-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99); -moz-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99); -ms-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99); -o-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99); transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99); } .navigation-is-open main { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); } @media screen and (min-width:0\0) and (min-resolution: +72dpi) { .navigation-is-open main { z-index:-1; } } .cd-nav-trigger { position: fixed; z-index: 3; left: 5%; top: 20px; height: 54px; width: 54px; border-radius: 50%; /* image replacement */ overflow: hidden; text-indent: 100%; white-space: nowrap; -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; transition: transform 0.5s; } .logo-story { position: absolute; left: calc(5% + 75px); top: 29px; z-index:5; } .logo-story img{ width:140px; height:auto; display:block; } @media only screen and (min-width: 1170px) { .logo-story { top: 50px; } } .cd-nav-trigger .cd-nav-icon { /* icon created in CSS */ position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 22px; height: 2px; background-color: #000; } .cd-nav-trigger .cd-nav-icon::before, .cd-nav-trigger .cd-nav-icon:after { /* upper and lower lines of the menu icon */ content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: inherit; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.5s, width 0.5s, top 0.3s; -moz-transition: -moz-transform 0.5s, width 0.5s, top 0.3s; transition: transform 0.5s, width 0.5s, top 0.3s; } .cd-nav-trigger .cd-nav-icon::before { -webkit-transform-origin: right top; -moz-transform-origin: right top; -ms-transform-origin: right top; -o-transform-origin: right top; transform-origin: right top; -webkit-transform: translateY(-6px); -moz-transform: translateY(-6px); -ms-transform: translateY(-6px); -o-transform: translateY(-6px); transform: translateY(-6px); } .cd-nav-trigger .cd-nav-icon::after { -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -o-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: translateY(6px); -moz-transform: translateY(6px); -ms-transform: translateY(6px); -o-transform: translateY(6px); transform: translateY(6px); } .no-touch .cd-nav-trigger:hover .cd-nav-icon::after { top: 2px; } .no-touch .cd-nav-trigger:hover .cd-nav-icon::before { top: -2px; } .cd-nav-trigger svg { position: absolute; top: 0; left: 0; } .cd-nav-trigger circle { /* circle border animation */ -webkit-transition: stroke-dashoffset 0.4s 0s; -moz-transition: stroke-dashoffset 0.4s 0s; transition: stroke-dashoffset 0.4s 0s; } .navigation-is-open .cd-nav-trigger { /* rotate trigger when navigation becomes visible */ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .navigation-is-open .cd-nav-trigger .cd-nav-icon::after, .navigation-is-open .cd-nav-trigger .cd-nav-icon::before { /* animate arrow --> from hamburger to arrow */ width: 50%; -webkit-transition: -webkit-transform 0.5s, width 0.5s; -moz-transition: -moz-transform 0.5s, width 0.5s; transition: transform 0.5s, width 0.5s; } .navigation-is-open .cd-nav-trigger .cd-nav-icon::before { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .navigation-is-open .cd-nav-trigger .cd-nav-icon::after { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .no-touch .navigation-is-open .cd-nav-trigger:hover .cd-nav-icon::after, .no-touch .navigation-is-open .cd-nav-trigger:hover .cd-nav-icon::before { top: 0; } .navigation-is-open .cd-nav-trigger circle { stroke-dashoffset: 0; -webkit-transition: stroke-dashoffset 0.4s 0.3s; -moz-transition: stroke-dashoffset 0.4s 0.3s; transition: stroke-dashoffset 0.4s 0.3s; } @media only screen and (min-width: 1170px) { .cd-nav-trigger { top: 40px; } } .cd-nav { position: fixed; z-index: 1; top: 0; left: 0; height: 100%; width: 100%; background-color: #fff; visibility: hidden; -webkit-transition: visibility 0s 0.7s; -moz-transition: visibility 0s 0.7s; transition: visibility 0s 0.7s; } .cd-nav .cd-navigation-wrapper { /* all navigation content */ height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 40px 5% 40px calc(5% + 80px); /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: -webkit-transform 0.7s; -moz-transition: -moz-transform 0.7s; transition: transform 0.7s; -webkit-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78); -moz-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78); -ms-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78); -o-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78); transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78); } .navigation-is-open .cd-nav { visibility: visible; -webkit-transition: visibility 0s 0s; -moz-transition: visibility 0s 0s; transition: visibility 0s 0s; } .navigation-is-open .cd-nav .cd-navigation-wrapper { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; transition: transform 0.5s; -webkit-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78); -moz-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78); -ms-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78); -o-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78); transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78); } .cd-nav .cd-primary-nav { margin-top: 60px; } .cd-nav .cd-primary-nav li { margin: 0.5em 0; } .cd-nav .cd-primary-nav a { position:relative; font-family: 'Open Sans', sans-serif; font-weight:800; font-size: 18px; line-height:20px; letter-spacing:3px; overflow:hidden; text-transform:uppercase; color:rgba(32,32,32,.4); display: inline-block; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .cd-nav .cd-primary-nav a:after { content: ''; position: absolute; left: -100%; bottom: 9px; height: 2px; width: 100%; background-color: #212121; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .cd-nav .cd-primary-nav a.selected { color: #212121; } .cd-nav .cd-primary-nav a.selected::after{ left:0; } .cd-nav .cd-primary-nav a:hover:after { left:0; } .no-touch .cd-nav .cd-primary-nav a:hover { color: #212121; } .cd-nav .cd-contact-info { margin-top: 80px; } .cd-nav .cd-contact-info li { font-family: 'Open Sans', sans-serif; font-weight:800; font-size: 14px; line-height:20px; margin-bottom: 1.6em; color: rgba(0, 0, 0, 0.4); } .cd-nav .cd-contact-info a { color: #212121; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .cd-nav .cd-contact-info a:hover { color: rgba(0, 0, 0, 0.6); } .cd-nav .cd-contact-info span { display: block; } .cd-nav .cd-contact-info span.nav-social{ display:inline-block; font-family: 'FontAwesome'; color:#212121; font-size:15px; margin-right:20px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .cd-nav .cd-contact-info span.nav-social:hover{ color:rgba(0,0,0,.6); } @media only screen and (min-width: 1170px) { .cd-nav .cd-contact-info span.nav-social{ margin-right:0; margin-left:20px; } } .cd-nav .cd-contact-info li, .cd-nav .cd-contact-info a, .cd-nav .cd-contact-info span { font-size: 16px; line-height:20px; } @media only screen and (min-width: 1170px) { .cd-nav .cd-navigation-wrapper { padding: 162px 20%; } .cd-nav .cd-navigation-wrapper::after { clear: both; content: ""; display: table; } .cd-nav .cd-primary-nav a:after { bottom: 13px; height: 4px; } .cd-nav .cd-half-block { width: 50%; float: left; } .cd-nav .cd-primary-nav { margin-top: 0; } .cd-nav .cd-primary-nav li { margin: 1em 0; } .cd-nav .cd-primary-nav a { font-size: 32px; line-height:32px; } .cd-nav .cd-contact-info { text-align: right; } .cd-nav .cd-contact-info li { margin-top: 10px; margin-bottom: 2em; } .cd-nav .cd-contact-info li, .cd-nav .cd-contact-info a, .cd-nav .cd-contact-info span { font-size: 14px; line-height:26px; letter-spacing:2px; } .cd-nav .cd-contact-info { margin-top: 0; } } .no-js main { height: auto; overflow: visible; } .no-js .cd-nav { position: static; visibility: visible; } .no-js .cd-nav .cd-navigation-wrapper { height: auto; overflow: visible; padding: 100px 5%; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .cd-nav .cd-primary-nav li.cd-label ul{ overflow: hidden; max-height: 0; transition:all 0.7s ease 0s; -moz-transition:all 0.7s ease 0s; -webkit-transition:all 0.7s ease 0s; -o-transition:all 0.7s ease 0s; } .cd-nav .cd-primary-nav li.cd-label:hover ul{ margin-top:5px; margin-bottom:5px; max-height: 500px; } .cd-nav .cd-primary-nav li.cd-label ul li { margin: 0.4em 0; } .cd-nav .cd-primary-nav li.cd-label ul a { font-family: 'Open Sans', sans-serif; font-weight:800; display:block; font-size: 13px; line-height:18px; letter-spacing:2px; text-align:left; } .cd-nav .cd-primary-nav li.cd-label ul a:after { display:none; } /* #Media Queries ================================================== */ @media only screen and (max-width: 1319px) { .shop-grid-item.forth-shop-width{ width:calc(100% / 3 - 30px); } .services-box-3 .services-box-in:before{ display:none; } .portfolio-box-1{ width:calc(100% / 3 - 10px); } .portfolio-box-1.no-margin-gallery{ width:calc(100% / 3); } .portfolio-box-1.no-margin-gallery{ width:calc(100% / 3); } .dark-section-with-title{ width:calc(100% - 80px); padding-top:40px; padding-bottom:40px; padding-left:40px; padding-right:40px; } .portfolio-box-1.fifth-box{ width:calc(100% / 4 - 10px); } } @media only screen and (max-width: 1200px) { .story-split{ width:100%; height:60vh; bottom:0; top:auto; } .hero-wrap-story{ left:10%; width:80%; } .hero-wrap-story h2{ font-size: 26px; text-align:center; line-height:32px; letter-spacing:3px; } .hero-wrap-story h3{ font-size: 20px; text-align:center; line-height:26px; letter-spacing:3px; } .hero-wrap-story .subtext{ text-align:center; } .hero-wrap-story p{ text-align:center; } .logo-wrap.top-logo{ position:absolute; left:10px; top:50%; z-index:11; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .logo-wrap.top-logo img{ margin:0; padding-top:0; text-align:left; } .cbp-af-header.cbp-af-header-shrink .logo-wrap.top-logo img{ width:120px; padding-top:0; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; } .sky-mega-menu a .tooltip{ display:none; } .shop-grid-item.third-shop-width{ width:calc(100% / 2 - 30px); } .blog-pages-wrap-box.third-width{ width:calc(100% / 2 - 30px); } .portfolio-box-1.third-box{ width:calc(100% / 2 - 10px); } .portfolio-box-1.fifth-box{ width:calc(100% / 3 - 10px); } #projects-grid .width-sidebar-grid{ width:100%; } #projects-grid .sidebar{ display:none; } .shop-grid .width-shop-sidebar-grid{ width:100%; } .shop-grid .sidebar{ display:none; } .blog-pages-wrapper .width-sidebar-grid{ width:100%; } .blog-pages-wrapper .sidebar{ display:none; } ul.countdown li span { font-size: 30px; line-height: 30px; } ul.countdown li.seperator { font-size: 20px; width: 20px; line-height: 30px; padding-left:5px; padding-right:5px; } ul.countdown li p { font-size: 10px; letter-spacing:1px; margin-top:15px; } .blog-pages-wrap-box{ width:calc(50% - 30px); } .shop-home-box-1{ width:calc(50% - 20px); } .portfolio-wrap-fourth{ width:calc(50% - 30px); } .blog-box-1 img{ float:none; margin-right:0; margin-bottom:30px; display:block; } .hero-wrap-1 h2{ font-size:80px; line-height:70px; margin-bottom:100px; } .hero-wrap-1 h2 span{ font-size:30px; line-height:30px; letter-spacing:2px; } .hero-wrap-2 h2{ letter-spacing:2px; font-size:35px; line-height:40px; } .hero-wrap-2 h2 span{ letter-spacing:2px; font-size:60px; line-height:50px; } .hero-wrap-2 p{ letter-spacing:5px; font-size:18px; line-height:60px; } .team-box-2 .team-box-in{ width:50%; background-position:center center; } .services-box-3 .services-box-in{ width:50%; } .services-box-3 .services-box-in:before{ display:none; } .portfolio-wrap-third{ width:50%; } .services-box-4 .services-box-in{ width:100%; } .hero-wrap-2.photoghrapher .text-back{ font-size:50px; top:0; } } @media only screen and (max-width: 1000px) { .shop-grid-item.forth-shop-width{ width:calc(100% / 2 - 30px); } .hero-wrap-pages-parallax h2{ font-size: 13px; line-height:13px; -webkit-transform: translateY(-70px); -moz-transform: translateY(-70px); -ms-transform: translateY(-70px); -o-transform: translateY(-70px); transform: translateY(-70px); } .hero-wrap-pages-parallax h2 span{ padding:14px 25px; } .hero-wrap-pages-parallax p{ font-size: 60px; line-height:68px; letter-spacing:3px; } .hero-wrap-2.center .text-back{ font-size:70px; } .portfolio-box-1.fifth-box{ width:calc(100% / 2 - 10px); } .hero-wrap-2, .hero-wrap-1, .hero-wrap{ margin-top:-60px; } .section-menu-fixed{ position:relative; width:100%; z-index:9999; } .logo-wrap{ z-index:101; } .portfolio-box-1{ width:calc(100% / 2 - 10px); } .portfolio-box-1.no-margin-gallery{ width:calc(100% / 2); } .split-multiscroll-text-1{ font-size:200px; line-height:200px; -webkit-transform: translateY(50%); -moz-transform: translateY(50%); -ms-transform: translateY(50%); -o-transform: translateY(50%); transform: translateY(50%); } .split-multiscroll-text-2{ font-size:30px; line-height:40px; margin-bottom:100px; } .shop-home-box-1.half-width{ width:calc(100% - 20px); } .hero-wrap-pages { margin-top:0; } .hero-wrap-pages h2{ font-size: 30px; line-height:38px; letter-spacing:4px; } .hero-wrap-pages p{ font-size: 14px; letter-spacing:2px; } } @media only screen and (max-width: 800px) { .blog-pages-wrap-box.third-width{ width:calc(100% - 30px); } .portfolio-box-1.half-box{ width:calc(100% - 10px); } .portfolio-box-1.third-box{ width:calc(100% - 10px); } .portfolio-box-1.fifth-box{ width:calc(100% - 10px); } #owl-top .item.top-image-1{ background-position:70% center; } #owl-top .item.top-image-2{ background-position:20% center; } #owl-top .item.top-image-fitness-1{ background-position:70% center; } #owl-top .item.top-image-fitness-2{ background-position:20% center; } .split-left, .split-right{ width:100%; height:75vh; } #cd-google-map address { padding-top:30px; max-width:100%; width:100%; } #cd-google-map address img{ display:none; } .parallax-text-1{ font-size:30px; letter-spacing:2px; line-height:35px; } .parallax-text-2{ font-size:50px; letter-spacing:3px; line-height:45px; } } @media only screen and (max-width: 600px) { .shop-grid-item.forth-shop-width{ width:calc(100% - 30px); } .shop-grid-item.third-shop-width{ width:calc(100% - 30px); } .shop-grid-item{ width:calc(100% - 30px); } .content-comm img{ display:none; } .blog-pages-wrap-box.half-width{ width:calc(100% - 30px); } .blog-pages-wrap-box{ width:calc(100% - 30px); } .portfolio-wrap-fourth{ width:calc(100% - 30px); } .team-box-2 .team-box-in{ width:100%; background-position:center center; } .team-box-2 .team-box-in.arrow:before { display:none; } .services-box-3 .services-box-in{ width:100%; } .portfolio-wrap-third{ width:100%; } .portfolio-box-1{ width:calc(100% - 10px); } .portfolio-box-1.no-margin-gallery{ width:100%; } .shop-home-box-1{ width:calc(100% - 20px); } } @media only screen and (min-width: 1200px) and (max-width: 1319px) { .hero-wrap p{ font-size:26px; letter-spacing:6px; margin-bottom:30px; } .hero-wrap h2{ letter-spacing:25px; font-size:50px; line-height:62px; margin-bottom:60px; } } @media only screen and (min-width: 960px) and (max-width: 1199px) { .hero-wrap p{ font-size:26px; letter-spacing:6px; margin-bottom:30px; } .hero-wrap h2{ letter-spacing:25px; font-size:50px; line-height:62px; margin-bottom:60px; } .hero-wrap.hero-landing p{ margin-bottom:60px; } .hero-wrap.hero-landing h2{ font-size:40px; line-height:52px; } } @media only screen and (min-width: 768px) and (max-width: 959px) { .hero-wrap p{ font-size:18px; letter-spacing:4px; margin-bottom:30px; } .hero-wrap h2{ letter-spacing:15px; font-size:40px; line-height:52px; margin-bottom:50px; } .hero-wrap.hero-landing p{ font-size:12px; margin-right:7px; margin-bottom:40px; } .hero-wrap.hero-landing p:after{ left:calc(100% - 28px); top:-18px; width:40px; } .hero-wrap.hero-landing h2{ letter-spacing:10px; font-size:26px; line-height:33px; margin-bottom:30px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .hero-wrap p{ font-size:18px; letter-spacing:4px; margin-bottom:30px; } .hero-wrap h2{ letter-spacing:15px; font-size:40px; line-height:52px; margin-bottom:50px; } .hero-wrap.hero-landing .landing-home-text{ -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .hero-wrap.hero-landing p, .hero-wrap.hero-landing h2{ text-align:center; } .hero-wrap.hero-landing p{ font-size:12px; margin-right:0; margin-bottom:40px; } .hero-wrap.hero-landing p:after{ display:none; } .hero-wrap.hero-landing h2{ letter-spacing:10px; font-size:26px; line-height:33px; margin-bottom:15px; } .hero-wrap.hero-landing a.hero-link { float:none; margin:0 auto; margin-right:0; } .landing-page-image{ display:none; } #buy a.button:before{ display:none; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .hero-wrap h2{ letter-spacing:7px; font-size:24px; line-height:32px; margin-bottom:40px; } .hero-wrap p{ font-size:18px; letter-spacing:4px; margin-bottom:30px; } .hero-wrap.hero-landing .landing-home-text{ -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .hero-wrap.hero-landing p, .hero-wrap.hero-landing h2{ text-align:center; } .hero-wrap.hero-landing p{ font-size:12px; margin-right:0; margin-bottom:40px; } .hero-wrap.hero-landing p:after{ display:none; } .hero-wrap.hero-landing h2{ letter-spacing:10px; font-size:26px; line-height:33px; margin-bottom:15px; } .hero-wrap.hero-landing a.hero-link { float:none; margin:0 auto; margin-right:0; } .landing-page-image{ display:none; } #buy a.button:before{ display:none; } } @media only screen and (max-width: 319px) { .hero-wrap h2{ letter-spacing:7px; font-size:24px; line-height:32px; margin-bottom:40px; } .hero-wrap p{ font-size:18px; letter-spacing:4px; margin-bottom:30px; } .hero-wrap.hero-landing .landing-home-text{ -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .hero-wrap.hero-landing p, .hero-wrap.hero-landing h2{ text-align:center; } .hero-wrap.hero-landing p{ font-size:12px; margin-right:0; margin-bottom:40px; } .hero-wrap.hero-landing p:after{ display:none; } .hero-wrap.hero-landing h2{ letter-spacing:10px; font-size:26px; line-height:33px; margin-bottom:15px; } .hero-wrap.hero-landing a.hero-link { float:none; margin:0 auto; margin-right:0; } .landing-page-image{ display:none; } #buy a.button:before{ display:none; } }