/* #Site Styles ================================================== */ html { overflow-y:scroll; /* Force scrollbars all the time to avoid page jumps. */ padding: 0; margin: 0; height: 100%;} body { padding: 0; margin: 0; height: 100%;background-color:#fff; /* Footer Colour */ color:#938a7f;} #wrapper, #nextimg { position: absolute; width:100%; height:356px; background: #666 no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; margin-bottom:20px; max-width:1920px;margin-right:auto; margin-left:auto;; } #wrapper { z-index: 2; } #nextimg { z-index: 1; } .scale-to-grid {width:100%;} .tick {list-style-position:inside;} ul.tick { list-style-type: none; padding: 0px; margin: 0px; } ul.tick li { background-image: url(../../img/site/tick.png); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 24px; line-height:20px; } /* #Images ================================================== */ img { max-width: 100%; height: auto; } .leftproductlogo {float:left; width:50px; position:relative; top:10px;} /* #Misc ================================================== */ .remove-bottom { margin-bottom: 0 !important; } .half-bottom { margin-bottom: 10px !important; } .add-bottom { margin-bottom: 20px !important; } .add-top{margin-top:20px !important;} .sliderorange {background-color:#fe7200;} /* #Header and Logo ================================================== */ .logo { margin:30px 0px 20px 0px; z-index:9900; max-width:260px;} .headercontainer {width:960px; margin: 0 auto; padding: 0;} .logocolumn { float: left; display: inline; margin-left: 0px; margin-right: 10px; width:350px;} .navcolumn { float: right; display: inline; margin-left: 10px; margin-right: 10px; } .homestart {padding-top:365px;} /* #Map ================================================== */ .nzmap1 {max-width:350px;} /* #Forms ================================================== */ /* === Drop down product search === */ .content {position:relative; margin-right:auto; margin-left:auto;} .menuwrapper {position:relative;} .toggle{ position:absolute; right:0px; top:0px; display:block; height:31px; width:32px; background:url("../../img/site/search/search-icon.png");cursor:pointer;z-index:9920; } .toggle:hover{ background:url("../../img/site/search/search-icon-rollover.png");cursor:pointer; } .toggle.expanded{ background:url("../../img/site/search/search-icon-rollover.png");} .toggle.expanded:hover{ background:url("../../img/site/search/search-icon.png");} .hiddensearchbox { width:22%; position:absolute; top:0px; right:0; z-index:7777; background-color:rgba(255, 255, 255, 0.7); background: url(../../img/site/search/searchbackground-1.png) no-repeat center; background-size: 100% 360px; height:360px; } .advancedsearchcontainer{ text-align:center; margin-right:auto;margin-left:auto; } .advancedsearch ul { width:220px;text-align:center; margin-right:auto;margin-left:auto; } .advancedsearch label { display:none; } .advancedsearch legend {font-family: Lato, aqua_grotesqueregular, Arial, sans-serif; font-size:15px; font-weight:normal; text-transform: uppercase; width:210px; text-align:center; color:#938a7f;line-height:20px; margin:12px auto 48px auto; } .advancedsearch select{ height:34px; width:210px; padding:4px; margin: 3px auto; background-color: #fff; border: 2px #938a7f solid; font-family: Lato, calibri, Arial, sans-serif; font-size:15px; color:#938a7f; } .advancedsearch li{ padding:0px; border:0px; position:relative; margin:0px auto; } input#as0_advsea-submit {background:transparent; font-family: Lato, aqua_grotesqueregular, HelveticaNeueBold, "Helvetica Neue Bold", Arial, sans-serif; color:#938a7f; text-transform: uppercase; font-size:25px; border:0px;text-align:center; margin: 28px auto; padding:0px;float:none;} input#as0_advsea-submit:hover {color:#111;border:0px;background:transparent;} /* Homepage Slider -------------------------------------------------------------- */ #slideit {} .slidertext {font-family: Lato, Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;; text-transform:uppercase; font-weight:bolder; color:#fe7200; font-size:30px; line-height:35px; position: relative; background-color:rgba(255, 255, 255, .7);padding:5px 10px; top: 250px; width:55%} /* Product page -------------------------------------------------------------- */ .producttable {position: relative; margin:8px 0px; padding:0px;} .producttable p {margin-bottom:0px;} .productlabel {font-weight:bold; font-family: Lato, aqua_grotesqueregular, "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; text-transform:uppercase; font-size:14px;} .add20top {margin-top:20px;} a .productlabel {text-decoration:none; color:#938a7f;} .nounderline{text-decoration:none;} .prodcolweek {background-color: rgba(255, 255, 255, .8); position:absolute; top:20px; left:0px; z-index:6666; color:#938a7f; text-transform:uppercase; font-size:20px; font-weight:normal;padding:10px 25px;font-family: Lato, aqua_grotesqueregular, "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;} .prodcolweekend {background-color: rgba(255, 255, 255, .8); position:absolute; top:20px; left:0px; z-index:6666;color:#938a7f; text-transform:uppercase; font-size:20px; font-weight:normal;padding: 10px 25px;font-family: Lato, aqua_grotesqueregular, "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;} .prodcolanytime {background-color: rgba(255, 255, 255, .8); position:absolute; top:20px; left:0px; z-index:6666;color:#938a7f; text-transform:uppercase; font-size:20px; font-weight:normal;padding: 10px 25px;font-family: Lato, aqua_grotesqueregular, "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;} .productmap {position: absolute; right:5px; top:-10px; width:35px;} .productmap:hover {width:39px;} .levelimg{position: absolute; right:5px;width:36px;top:-10px;} .starimg{position: absolute; right:5px; top:5px; width:15px;} .productimage {max-width:440px;} .spaceleft {margin-left:55px;} .producthead {color:#938a7f;padding-top:20px;font-weight:bold;} .productbutton { -moz-border-radius: 10px; font-size:13px; -webkit-border-radius: 10px;border:0px; border-radius: 10px; padding:10px; color: #fff; font-family: Lato, aqua_grotesqueregular, "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; text-transform:uppercase; text-align:center; display:inline; margin:16px 10px 0px 20px;float:left;-webkit-appearance: none;} /* product buttons */ .water .productbutton.waterbackground, .waterbackground {background-color:#48b5e7;} /* water */ .earth .productbutton.earthbackground, .earthbackground {background-color:#99cc00;} /* earth */ .mountain .productbutton.mountainbackground, .mountainbackground {background-color: #938a7f;} /* mountain */ .air .productbutton.airbackground, .airbackground {background-color: #fe7200;} /* air */ .water .productbutton:hover {background-color:#b8e2f6 ;font-weight:bold;border:0px;} .earth .productbutton:hover {background-color:#d7eb9c ;font-weight:bold;border:0px;} .mountain .productbutton:hover {background-color:#c2bdb7 ;font-weight:bold;border:0px;} .air .productbutton:hover {background-color:#fbbd7d ;font-weight:bold;border:0px;} .productbuttons {height:50px;} .productbutton a {color: #fff; text-decoration:none;} .buttons {padding-top:20px;} /* product search results & listing page & Calendar ================================================== */ .bannerwater {width:100%; height:180px; background: url(../../img/slider/water-banner.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position:absolute; z-index:5900; width:100%; } .bannerearth {width:100%; height:180px; background: url(../../img/slider/earth-banner.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position:absolute; z-index:5900; width:100%; } .bannerair {width:100%; height:180px; background: url(../../img/slider/air-banner.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position:absolute; z-index:5900; width:100%; } .bannermountain {width:100%; height:180px; background: url(../../img/slider/snow-banner.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position:absolute; z-index:5900; width:100%; } .bannercustom {width:100%; height:180px; background: url(../../img/slider/custom-banner.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position:absolute; z-index:5900; width:100%; } .h1water h1 {color:#fff; margin-bottom:70px; position:relative; z-index:222;} .h1earth h1 {color:#fff; margin-bottom:70px; position:relative; z-index:222;} .h1mountain h1 {color:#fff; margin-bottom:70px; position:relative; z-index:222;} .h1air h1 {color:#fff; margin-bottom:70px; position:relative; z-index: 222;} .h1custom h1 {color:#fff; margin-bottom:70px; position:relative; z-index: 222;} .listing {padding-top:30px;} .listingpagecategory {width:100%;margin-right:auto; margin-left:auto;} .searchresult a.moreinfo {font-weight:normal; text-decoration:none; font-family: Lato, alibri, "Arial", sans-serif; -moz-border-radius: 10px; font-size:16px; -webkit-border-radius: 10px;border:0px; border-radius: 10px; padding:5px 10px; color: #fff; width:auto; text-align:center; margin- } .searchresult {border-bottom: 1px solid #938a7f;} .searchresult .searchstrong {font-family: Lato, aqua_grotesqueregular, "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-size:12px; color: #938a7f; font-weight:bold;} .searchresult {width:100%; display:block; clear:both;margin-bottom:10px;margin-top:10px; padding:0px 0px 20px 0px; background-color:#f0eeeb;} .searchresult h3 a {text-decoration:none; font-weight:bold; font-size:20px; line-height:15px;margin-bottom:0px; padding-bottom:0px;position:relative;top:10px;} .water h3, .water h3 a, .searchwater h3 a, .water .price, .searchwater .price, .water .priceproduct, .water .blok p, .searchwater .blok p{color: #48b5e7;} .earth h3, .earth h3 a, .searchearth h3 a, .earth .price, .searchearth .price, .earth .priceproduct, .earth .blok p, .searchearth .blok p{color: #99cc00;} .mountain h3, .mountain h3 a, .searchmountain h3 a, .mountain .price, .searchmountain .price, .mountain .priceproduct, .mountain .blok p, .searchmountain .blok p{color: #938a7f;} .air h3, .air h3 a, .searchair h3 a, .air .price, .searchair .price, .air .priceproduct, .air .blok p, .searchair .blok p{color: #fe7200;} .blok h3 {margin-bottom:10px; line-height:1.1;} .blok p {line-height:1.2;} .water h3 a:hover {color:#b8e2f6 } .earth h3 a:hover {color:#d7eb9c ;} .mountain h3 a:hover {color:#c2bdb7 ;} .air h3 a:hover {color:#fbbd7d ;} .searchresult a img { max-width: 100%; height: auto; } .colweek {background-color: rgba(255, 255, 255, .8); width: 85px; position:absolute; top:20px; left:-10px; z-index:6666; color:#938a7f; text-transform:uppercase; font-size:18px; padding:5px 15px;font-family: Lato, aqua_grotesqueregular, "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; } .colanytime {background-color: rgba(255, 255, 255, .8); width: 85px; position:absolute; top:20px; left:-10px; z-index:6666; color:#938a7f; text-transform:uppercase; font-size:18px; padding:5px 15px;font-family: Lato, aqua_grotesqueregular, "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; } .colweekend {background-color: rgba(255, 255, 255, .8); width: 85px; position:absolute; top:20px; left:-10px; z-index:6666;color:#938a7f; text-transform:uppercase; font-size:18px; padding:5px 15px;font-family: Lato, aqua_grotesqueregular, "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;} .flexi {display:flex;} .paddingside {padding:0px 10px;} .starimgsearch {width:15px;position:relative; top:3px; right:-30px;} .levelimgsearch {width:35px;position:relative; top:-15px; right:5px;} .imagesearch {position:relative; z-index:5500;margin-left:0px;} .searchimage {padding-top:10px;} .productlogosearch {padding-top:10px; width:60px; height:60px; max-width:60px;} .productlogo {width:100%;} .title {min-height:50px;} .priceproduct {font-size:20px; font-weight:bold; } .productbackground {background-color:#f0eeeb; margin-bottom:60px;} .searchresult .price {font-size:17px; line-height:25px;} .blok {display:inline-block;} .advsea-current {color:#938a7f;} .control .paging { background-color:#444; margin-left: auto; margin-right: auto; } .pageList ul { padding:0px; margin: 0px; list-style-type: none; line-height: 1; letter-spacing:1.5px; } .pageList li { float: left; width: auto;list-style-type: none;margin-right:2px;} .pageList a { display: block; width: auto; text-decoration:none; color:#fff; border-right: 1px solid #fff; border-bottom: 0px; text-align:center; padding:10px 12px 10px 12px; font-size:1em;text-transform:uppercase; font-weight:normal;background-color: #756d64;} .pageList a:hover {background-color: #938a7f; /*First or top level hover colour*/ color:#fff;} /* faqs -------------------------------------------------------------- */ #faqs { position:relative; } .rightcolumngrey {background-color:#f0eeeb;} #faqs h3 { cursor:pointer; font-size:1.1em; line-height:32px; margin-bottom:15px; width:100%; background-color:#fff; color:#938a7f; padding:1px 5px; background-image: url(../../img/site/faq/faqcontrol-brown.png); background-position:99% center; background-repeat:no-repeat; right:-5px; border-bottom:1px solid #cbbdb5;} #faqs h3.active { background-color:#cbbdb5; color: #fff; background-image: url(../img/site/faq/faqcontrol-down.png);} #faqs h3.selected { background-color:#cbbdb5; color: #fff; } .faqback {} #faqs h5 {font-family: calibri, Arial, sans-serif; font-weight:bold;} #faqs div { position:relative; } #faqs div p { padding:0; margin-bottom:30px; } /* What´s coming boxes on homepage -------------------------------------------------------------- */ .whatscomingboxes {padding:15px 0px 15px 0px;} .whatscomingboxesalltext {padding:5px;} .whatscomingboxes h5 {margin-bottom:10px; } .whatscomingboxes h5 a {text-transform:uppercase; text-decoration:none; padding: 0px; margin-bottom:0px; } .whatscomingboxes p {padding-top:0px; margin-top:0px; margin-bottom:0px; padding: 0px; } .whatcomingtext {margin-bottom:10px;} .listingtext {height:60px;} /* Specials box on homepage -------------------------------------------------------------- */ .specialsbox h5 a {text-transform:uppercase; text-decoration:none; padding-bottom:0px; margin-bottom:0px; } .specialsbox p {padding-top:0px; margin-top:0px; margin-bottom:0px; padding-bottom:0px; } /* Footer -------------------------------------------------------------- */ .footerback {border-top:4px solid #938a7f; padding-top:0px; padding-bottom:20px; margin-top:20px; } .footerback h4 a{text-decoration:none; margin-right: auto; color: #756d64; font-size:15px; letter-spacing:3px; margin-left: auto;} .footer {} .footer p { font-family: Lato,"HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-weight:600; font-stretch:normal; color:#938a7f; } .center {text-align:center;} .copyright {text-align:center;font-size:10px;margin-top:0px;} .copyrightimage {width:200px;} .addthis_sharing_toolbox {text-align:center;position:relative; top:-20px;} .stay {position:relative;} #mc_embed_signup h2 {font-size:1.1em;line-height:1.1em;} #mc-embedded-subscribe.mailchimpbutton {background-color:#fe7200; -moz-border-radius: 10px;font-size:13px; -webkit-border-radius: 10px;border:0px; border-radius: 10px; color: #fff; font-family: Lato, aqua_grotesqueregular, "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; text-transform:uppercase; text-align:center; display:block; -webkit-appearance: none; width:40%; } #mc-embedded-subscribe.mailchimpbutton:hover{ background-color: #fbbd7d;} #mc_embed_signup input {display:block; margin-left:0px; margin-top:0px; width: 100%;} /* Misc -------------------------------------------------------------- */ .remove-top { margin-top: 0 !important; position:relative;} .remove-bottom { margin-bottom: 0 !important; } .remove-topandbottom { margin-top: 0 !important; margin-bottom: 0 !important; position:relative;padding:0px 10px;} .floatright {float: right;} .add10top {margin-top:10px;} .paddingtop {padding-top:30px;} .paddingtop h1 {margin-bottom:0px;} .addspace {padding-bottom:49px;} .spacebottom {padding-bottom:30px;} .floatleft {float:left; margin-right:10px;} .listingpaddingtop {padding-top:100px;position:relative; z-index:6000;} .listingnone .listingpaddingtop {padding-top:30px;} /* Simple Search -------------------------------------------------------------- */ h2.simplesearch {font-size:1.1em;line-height:1.1em;} .searchcontents {text-align:left;} .sisea-search-form {width:100%;} .sisea-search-form .searchfield { } .sisea-search-form input, .sisea-search-form input[type="text"] { display: block; margin-left:0px; margin-top:0px; width: 100%; } .sisea-search-form .search-button {width: 40%; float: right;} *::-webkit-input-placeholder { color: #756d64; } *:-moz-placeholder { /* FF 4-18 */ color: #756d64; } *::-moz-placeholder { /* FF 19+ */ color: white; } *:-ms-input-placeholder { /* IE 10+ */ color: #756d64; } .sisea-search-form .search-button {background-color:#fe7200; -moz-border-radius: 10px;font-size:13px; -webkit-border-radius: 10px;border:0px; border-radius: 10px; color: #fff; font-family: Lato, aqua_grotesqueregular, "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; text-transform:uppercase; text-align:center; display:inline;-webkit-appearance: none; } .sisea-search-form .search-button:hover {background-color:#fbbd7d;font-weight:bold;border:0px; } .sisea-result h5 a {text-decoration:none;} /* #All Mobile ================================================== */ @media only screen and (max-width: 767px) { .logo {padding-top:10px; height:auto;padding-bottom:5px; max-width:190px; margin:0px 0px 5px 0px; position:absolute; left:90px;} .blok h3 {margin-left:5px;} .blok p {margin-left:5px;} .slidertext {display:none;} .toggle{ top:-10px; right:10px; } .searchbox {padding-top:1px; padding-bottom:2em;} .simplesearchbox {float:none !important; } #faqs h3 { font-size:1em;} .hideonmobile {display:none;} .productbutton {margin: 16px 10px 0px 10px;} .leftproductlogo {position:relative; top:-5px;} } /* #Mobile (Landscape) ================================================== */ @media only screen and (min-width: 550px) and (max-width: 767px) { .sisea-search-form .search-button {float: none;} .logo {padding-top:10px; max-width:170px;height:auto;padding-bottom:1px;} .hiddensearchbox {width:43%; } .producttable {padding:0px 10px;} .form .inset{margin-left:5px;} .form button { margin:20px 20px 20px 20px; } .logo {padding-top:5px; max-width:90%; height:auto; padding-bottom:1px; left:0px; position:relative; } .toggle {height:28px; width:27px; } } /* #Tablet (Portrait) ================================================== */ @media only screen and (min-width: 768px) and (max-width: 959px) { .starimgsearch {left:-1px;} .producttable {margin:2px 0px; } .producttable p {font-size:14px; } .priceproduct {font-size:16px; } .productbuttons {padding-left:200px;padding-bottom:5px;} .spaceleft {margin-bottom:20px;} .slidertext {font-size:28px; line-height:32px; top: 200px; width:70%;} .searchimage {margin-top:90px;} .colweek { top:110px; } .colweekend {top:110px; } .hiddensearchbox {width:43%;} } /* #Mobile (Portrait) Nav icon ================================================== */ @media only screen and (max-width: 549px) { .hiddensearchbox { width:100%; position:absolute; top:0px; left:0px; } .sisea-search-form .search-button {float: none;} .searchbox {padding-top:1px; padding-bottom:1px;margin-bottom:0px;} .starimgsearch {right:0px;} .producttable {padding:0px 10px;} .spaceleft {margin-left:10px; margin-bottom:20px;} .prodcolweek {top:5px; } .prodcolweekend {top:5px; } #faqs h3 { font-size:.9em; } .form button { margin:20px 20px 20px 20px; } .form .inset{margin-left:5px;} #recaptcha_image { width:auto !important; max-width: 100%; height: auto !important} #recaptcha_image img { width:100% ;} #recaptcha_response_field { width: 100% !important; max-width: 302px; } .recaptchatable, #recaptcha_area tr, #recaptcha_area td, #recaptcha_area th{ float: left; } #recaptcha_area tr{ height: auto !important; } .recaptcha_image_cell{ width: 100% !important; max-width: 300px;} img{ height: auto !important; } } /* larger breakpoints ================================================== */ @media only screen and (min-width: 960px) and (max-width: 1199px){ .producttable {margin:4px 0px; } .producttable p {font-size:15px;} .slidertext {top: 250px; } .searchimage {margin-top:30px;} .colweek { top:50px; } .colweekend {top:50px; } .hiddensearchbox { width:30%; } } @media only screen and (min-width: 1024px) { input.productbutton.airbackground {margin-left:45px;} } @media only screen and (min-width: 1200px) and (max-width: 1439px){ .starimgsearch {left:-75px;} .levelimgsearch {left:-110px; } .addthis_sharing_toolbox {position:relative; top:-82px; z-index:8100;} .simplesearchbox {position:relative; z-index:9920;} } @media only screen and (min-width: 1440px) { .starimgsearch {left:-75px;} .levelimgsearch {left:-110px; } .addthis_sharing_toolbox {position:relative; top:-92px; z-index:8100;} .simplesearchbox {position:relative; z-index:9920;} } @font-face { font-family: 'aqua_grotesqueregular'; src: url('fonts/aqua-webfont.eot'); src: url('fonts/aqua-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/aqua-webfont.woff') format('woff'), url('fonts/aqua-webfont.ttf') format('truetype'), url('fonts/aqua-webfont.svg#aqua_grotesqueregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'freestyle_scriptregular'; src: url('fonts/freescpt-webfont.eot'); src: url('fonts/freescpt-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/freescpt-webfont.woff') format('woff'), url('fonts/freescpt-webfont.ttf') format('truetype'), url('fonts/freescpt-webfont.svg#freestyle_scriptregular') format('svg'); font-weight: normal; font-style: normal; } #icons { text-align:center; margin: 10px auto 30px auto; } .demo-icon { font-size:3.5rem; font-family: "phone"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center; /* opacity: .8; */ /* For safety - reset parent styles, that can break glyph codes*/ font-variant: normal; text-transform: none; /* fix buttons height, for twitter bootstrap */ line-height: 1em; /* Animation center compensation - margins should be symmetric */ /* remove if not needed */ margin-left: .2em; /* You can be more comfortable with increased icons size */ /* font-size: 120%; */ /* Font smoothing. That was taken from TWBS */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Uncomment for 3D effect */ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ } @font-face { font-family: 'phone'; src: url('fonts/phone.eot?32544943'); src: url('fonts/phone.eot?32544943#iefix') format('embedded-opentype'), url('fonts/phone.woff2?32544943') format('woff2'), url('fonts/phone.woff?32544943') format('woff'), url('fonts/phone.ttf?32544943') format('truetype'), url('fonts/phone.svg?32544943#phone') format('svg'); font-weight: normal; font-style: normal; } /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */ /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ /* @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'phone'; src: url('fonts/phone.svg?32544943#phone') format('svg'); } } */ [class^="icon-"]:before, [class*=" icon-"]:before { font-family: "phone"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center; /* opacity: .8; */ /* For safety - reset parent styles, that can break glyph codes*/ font-variant: normal; text-transform: none; /* fix buttons height, for twitter bootstrap */ line-height: 1em; /* Animation center compensation - margins should be symmetric */ /* remove if not needed */ margin-left: .2em; /* you can be more comfortable with increased icons size */ /* font-size: 120%; */ /* Font smoothing. That was taken from TWBS */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Uncomment for 3D effect */ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ } .icon-phone-squared:before { content: '\f098'; } /* '' */ .icon-mail-squared:before { content: '\f199'; } /* '' */ .icon-facebook-squared:before { content: '\f308'; } /* '' */ .icon-instagram:before { content: '\f32d'; } /* '' */ /* For devices larger than 550px */ @media (min-width: 550px) { #icons {position: relative; top:-50px; margin: 10px auto;} }