@font-face { font-family: 'Icons'; src:url('/usite/176/font/Icons.eot'); src:url('/usite/176/font/Icons.eot?#iefix') format('embedded-opentype'), url('/usite/176/font/Icons.woff') format('woff'), url('/usite/176/font/Icons.ttf') format('truetype'), url('/usite/176/font/Icons.svg#Icons') format('svg'); font-weight: normal; font-style: normal; } /* Use the following CSS code if you want to use data attributes for inserting your icons */ [data-icon]:before { font-family: 'Icons'; content: attr(data-icon); speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } /* Use the following CSS code if you want to have a class per icon */ /* Instead of a list of all class selectors, you can use the generic selector below, but it's slower: [class*="font-icon-"] { */ .font-icon-zoom-out, .font-icon-zoom-in, .font-icon-wrench, .font-icon-waves, .font-icon-warning, .font-icon-volume-up, .font-icon-volume-off, .font-icon-volume-down, .font-icon-viewport, .font-icon-user, .font-icon-user-border, .font-icon-upload, .font-icon-upload-2, .font-icon-unlock, .font-icon-underline, .font-icon-tint, .font-icon-time, .font-icon-text, .font-icon-text-width, .font-icon-text-height, .font-icon-tags, .font-icon-tag, .font-icon-table, .font-icon-strikethrough, .font-icon-stop, .font-icon-step-forward, .font-icon-step-backward, .font-icon-stars, .font-icon-star, .font-icon-star-line, .font-icon-star-half, .font-icon-sort, .font-icon-sort-up, .font-icon-sort-down, .font-icon-social-zerply, .font-icon-social-youtube, .font-icon-social-yelp, .font-icon-social-yahoo, .font-icon-social-wordpress, .font-icon-social-virb, .font-icon-social-vimeo, .font-icon-social-viddler, .font-icon-social-twitter, .font-icon-social-tumblr, .font-icon-social-stumbleupon, .font-icon-social-soundcloud, .font-icon-social-skype, .font-icon-social-share-this, .font-icon-social-quora, .font-icon-social-pinterest, .font-icon-social-photobucket, .font-icon-social-paypal, .font-icon-social-myspace, .font-icon-social-linkedin, .font-icon-social-last-fm, .font-icon-social-grooveshark, .font-icon-social-google-plus, .font-icon-social-github, .font-icon-social-forrst, .font-icon-social-flickr, .font-icon-social-facebook, .font-icon-social-evernote, .font-icon-social-envato, .font-icon-social-email, .font-icon-social-dribbble, .font-icon-social-digg, .font-icon-social-deviant-art, .font-icon-social-blogger, .font-icon-social-behance, .font-icon-social-bebo, .font-icon-social-addthis, .font-icon-social-500px, .font-icon-sitemap, .font-icon-signout, .font-icon-signin, .font-icon-signal, .font-icon-shopping-cart, .font-icon-search, .font-icon-rss, .font-icon-road, .font-icon-retweet, .font-icon-resize-vertical, .font-icon-resize-vertical-2, .font-icon-resize-small, .font-icon-resize-horizontal, .font-icon-resize-horizontal-2, .font-icon-resize-fullscreen, .font-icon-resize-full, .font-icon-repeat, .font-icon-reorder, .font-icon-remove, .font-icon-remove-sign, .font-icon-remove-circle, .font-icon-read-more, .font-icon-random, .font-icon-question-sign, .font-icon-pushpin, .font-icon-pushpin-2, .font-icon-print, .font-icon-plus, .font-icon-plus-sign, .font-icon-play, .font-icon-picture, .font-icon-phone, .font-icon-phone-sign, .font-icon-phone-boxed, .font-icon-pause, .font-icon-paste, .font-icon-paper-clip, .font-icon-ok, .font-icon-ok-sign, .font-icon-ok-circle, .font-icon-music, .font-icon-move, .font-icon-money, .font-icon-minus, .font-icon-minus-sign, .font-icon-map, .font-icon-map-marker, .font-icon-map-marker-2, .font-icon-magnet, .font-icon-magic, .font-icon-lock, .font-icon-list, .font-icon-list-3, .font-icon-list-2, .font-icon-link, .font-icon-layer, .font-icon-key, .font-icon-italic, .font-icon-info, .font-icon-indent-right, .font-icon-indent-left, .font-icon-inbox, .font-icon-inbox-empty, .font-icon-home, .font-icon-heart, .font-icon-heart-line, .font-icon-headphones, .font-icon-headphones-line, .font-icon-headphones-line-2, .font-icon-headphones-2, .font-icon-hdd, .font-icon-group, .font-icon-grid, .font-icon-grid-large, .font-icon-globe_line, .font-icon-glass, .font-icon-glass_2, .font-icon-gift, .font-icon-forward, .font-icon-font, .font-icon-folder-open, .font-icon-folder-close, .font-icon-flag, .font-icon-fire, .font-icon-film, .font-icon-file, .font-icon-file-empty, .font-icon-fast-forward, .font-icon-fast-backward, .font-icon-facetime, .font-icon-eye, .font-icon-eye_disable, .font-icon-expand-view, .font-icon-expand-view-3, .font-icon-expand-view-2, .font-icon-expand-vertical, .font-icon-expand-horizontal, .font-icon-exclamation, .font-icon-email, .font-icon-email_2, .font-icon-eject, .font-icon-edit, .font-icon-edit-check, .font-icon-download, .font-icon-download_2, .font-icon-dashboard, .font-icon-credit-card, .font-icon-copy, .font-icon-comments, .font-icon-comments-line, .font-icon-comment, .font-icon-comment-line, .font-icon-columns, .font-icon-columns-2, .font-icon-cogs, .font-icon-cog, .font-icon-cloud, .font-icon-check, .font-icon-check-empty, .font-icon-certificate, .font-icon-camera, .font-icon-calendar, .font-icon-bullhorn, .font-icon-briefcase, .font-icon-bookmark, .font-icon-book, .font-icon-bolt, .font-icon-bold, .font-icon-blockquote, .font-icon-bell, .font-icon-beaker, .font-icon-barcode, .font-icon-ban-circle, .font-icon-ban-chart, .font-icon-ban-chart-2, .font-icon-backward, .font-icon-asterisk, .font-icon-arrow-simple-up, .font-icon-arrow-simple-up-circle, .font-icon-arrow-simple-right, .font-icon-arrow-simple-right-circle, .font-icon-arrow-simple-left, .font-icon-arrow-simple-left-circle, .font-icon-arrow-simple-down, .font-icon-arrow-simple-down-circle, .font-icon-arrow-round-up, .font-icon-arrow-round-up-circle, .font-icon-arrow-round-right, .font-icon-arrow-round-right-circle, .font-icon-arrow-round-left, .font-icon-arrow-round-left-circle, .font-icon-arrow-round-down, .font-icon-arrow-round-down-circle, .font-icon-arrow-light-up, .font-icon-arrow-light-round-up, .font-icon-arrow-light-round-up-circle, .font-icon-arrow-light-round-right, .font-icon-arrow-light-round-right-circle, .font-icon-arrow-light-round-left, .font-icon-arrow-light-round-left-circle, .font-icon-arrow-light-round-down, .font-icon-arrow-light-round-down-circle, .font-icon-arrow-light-right, .font-icon-arrow-light-left, .font-icon-arrow-light-down, .font-icon-align-right, .font-icon-align-left, .font-icon-align-justify, .font-icon-align-center, .font-icon-adjust { font-family: 'Icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } .font-icon-zoom-out:before { content: "\e000"; } .font-icon-zoom-in:before { content: "\e001"; } .font-icon-wrench:before { content: "\e002"; } .font-icon-waves:before { content: "\e003"; } .font-icon-warning:before { content: "\e004"; } .font-icon-volume-up:before { content: "\e005"; } .font-icon-volume-off:before { content: "\e006"; } .font-icon-volume-down:before { content: "\e007"; } .font-icon-viewport:before { content: "\e008"; } .font-icon-user:before { content: "\e009"; } .font-icon-user-border:before { content: "\e00a"; } .font-icon-upload:before { content: "\e00b"; } .font-icon-upload-2:before { content: "\e00c"; } .font-icon-unlock:before { content: "\e00d"; } .font-icon-underline:before { content: "\e00e"; } .font-icon-tint:before { content: "\e00f"; } .font-icon-time:before { content: "\e010"; } .font-icon-text:before { content: "\e011"; } .font-icon-text-width:before { content: "\e012"; } .font-icon-text-height:before { content: "\e013"; } .font-icon-tags:before { content: "\e014"; } .font-icon-tag:before { content: "\e015"; } .font-icon-table:before { content: "\e016"; } .font-icon-strikethrough:before { content: "\e017"; } .font-icon-stop:before { content: "\e018"; } .font-icon-step-forward:before { content: "\e019"; } .font-icon-step-backward:before { content: "\e01a"; } .font-icon-stars:before { content: "\e01b"; } .font-icon-star:before { content: "\e01c"; } .font-icon-star-line:before { content: "\e01d"; } .font-icon-star-half:before { content: "\e01e"; } .font-icon-sort:before { content: "\e01f"; } .font-icon-sort-up:before { content: "\e020"; } .font-icon-sort-down:before { content: "\e021"; } .font-icon-social-zerply:before { content: "\e022"; } .font-icon-social-youtube:before { content: "\e023"; } .font-icon-social-yelp:before { content: "\e024"; } .font-icon-social-yahoo:before { content: "\e025"; } .font-icon-social-wordpress:before { content: "\e026"; } .font-icon-social-virb:before { content: "\e027"; } .font-icon-social-vimeo:before { content: "\e028"; } .font-icon-social-viddler:before { content: "\e029"; } .font-icon-social-twitter:before { content: "\e02a"; } .font-icon-social-tumblr:before { content: "\e02b"; } .font-icon-social-stumbleupon:before { content: "\e02c"; } .font-icon-social-soundcloud:before { content: "\e02d"; } .font-icon-social-skype:before { content: "\e02e"; } .font-icon-social-share-this:before { content: "\e02f"; } .font-icon-social-quora:before { content: "\e030"; } .font-icon-social-pinterest:before { content: "\e031"; } .font-icon-social-photobucket:before { content: "\e032"; } .font-icon-social-paypal:before { content: "\e033"; } .font-icon-social-myspace:before { content: "\e034"; } .font-icon-social-linkedin:before { content: "\e035"; } .font-icon-social-last-fm:before { content: "\e036"; } .font-icon-social-grooveshark:before { content: "\e037"; } .font-icon-social-google-plus:before { content: "\e038"; } .font-icon-social-github:before { content: "\e039"; } .font-icon-social-forrst:before { content: "\e03a"; } .font-icon-social-flickr:before { content: "\e03b"; } .font-icon-social-facebook:before { content: "\e03c"; } .font-icon-social-evernote:before { content: "\e03d"; } .font-icon-social-envato:before { content: "\e03e"; } .font-icon-social-email:before { content: "\e03f"; } .font-icon-social-dribbble:before { content: "\e040"; } .font-icon-social-digg:before { content: "\e041"; } .font-icon-social-deviant-art:before { content: "\e042"; } .font-icon-social-blogger:before { content: "\e043"; } .font-icon-social-behance:before { content: "\e044"; } .font-icon-social-bebo:before { content: "\e045"; } .font-icon-social-addthis:before { content: "\e046"; } .font-icon-social-500px:before { content: "\e047"; } .font-icon-sitemap:before { content: "\e048"; } .font-icon-signout:before { content: "\e049"; } .font-icon-signin:before { content: "\e04a"; } .font-icon-signal:before { content: "\e04b"; } .font-icon-shopping-cart:before { content: "\e04c"; } .font-icon-search:before { content: "\e04d"; } .font-icon-rss:before { content: "\e04e"; } .font-icon-road:before { content: "\e04f"; } .font-icon-retweet:before { content: "\e050"; } .font-icon-resize-vertical:before { content: "\e051"; } .font-icon-resize-vertical-2:before { content: "\e052"; } .font-icon-resize-small:before { content: "\e053"; } .font-icon-resize-horizontal:before { content: "\e054"; } .font-icon-resize-horizontal-2:before { content: "\e055"; } .font-icon-resize-fullscreen:before { content: "\e056"; } .font-icon-resize-full:before { content: "\e057"; } .font-icon-repeat:before { content: "\e058"; } .font-icon-reorder:before { content: "\e059"; } .font-icon-remove:before { content: "\e05a"; } .font-icon-remove-sign:before { content: "\e05b"; } .font-icon-remove-circle:before { content: "\e05c"; } .font-icon-read-more:before { content: "\e05d"; } .font-icon-random:before { content: "\e05e"; } .font-icon-question-sign:before { content: "\e05f"; } .font-icon-pushpin:before { content: "\e060"; } .font-icon-pushpin-2:before { content: "\e061"; } .font-icon-print:before { content: "\e062"; } .font-icon-plus:before { content: "\e063"; } .font-icon-plus-sign:before { content: "\e064"; } .font-icon-play:before { content: "\e065"; } .font-icon-picture:before { content: "\e066"; } .font-icon-phone:before { content: "\e067"; } .font-icon-phone-sign:before { content: "\e068"; } .font-icon-phone-boxed:before { content: "\e069"; } .font-icon-pause:before { content: "\e06a"; } .font-icon-paste:before { content: "\e06b"; } .font-icon-paper-clip:before { content: "\e06c"; } .font-icon-ok:before { content: "\e06d"; } .font-icon-ok-sign:before { content: "\e06e"; } .font-icon-ok-circle:before { content: "\e06f"; } .font-icon-music:before { content: "\e070"; } .font-icon-move:before { content: "\e071"; } .font-icon-money:before { content: "\e072"; } .font-icon-minus:before { content: "\e073"; } .font-icon-minus-sign:before { content: "\e074"; } .font-icon-map:before { content: "\e075"; } .font-icon-map-marker:before { content: "\e076"; } .font-icon-map-marker-2:before { content: "\e077"; } .font-icon-magnet:before { content: "\e078"; } .font-icon-magic:before { content: "\e079"; } .font-icon-lock:before { content: "\e07a"; } .font-icon-list:before { content: "\e07b"; } .font-icon-list-3:before { content: "\e07c"; } .font-icon-list-2:before { content: "\e07d"; } .font-icon-link:before { content: "\e07e"; } .font-icon-layer:before { content: "\e07f"; } .font-icon-key:before { content: "\e080"; } .font-icon-italic:before { content: "\e081"; } .font-icon-info:before { content: "\e082"; } .font-icon-indent-right:before { content: "\e083"; } .font-icon-indent-left:before { content: "\e084"; } .font-icon-inbox:before { content: "\e085"; } .font-icon-inbox-empty:before { content: "\e086"; } .font-icon-home:before { content: "\e087"; } .font-icon-heart:before { content: "\e088"; } .font-icon-heart-line:before { content: "\e089"; } .font-icon-headphones:before { content: "\e08a"; } .font-icon-headphones-line:before { content: "\e08b"; } .font-icon-headphones-line-2:before { content: "\e08c"; } .font-icon-headphones-2:before { content: "\e08d"; } .font-icon-hdd:before { content: "\e08e"; } .font-icon-group:before { content: "\e08f"; } .font-icon-grid:before { content: "\e090"; } .font-icon-grid-large:before { content: "\e091"; } .font-icon-globe_line:before { content: "\e092"; } .font-icon-glass:before { content: "\e093"; } .font-icon-glass_2:before { content: "\e094"; } .font-icon-gift:before { content: "\e095"; } .font-icon-forward:before { content: "\e096"; } .font-icon-font:before { content: "\e097"; } .font-icon-folder-open:before { content: "\e098"; } .font-icon-folder-close:before { content: "\e099"; } .font-icon-flag:before { content: "\e09a"; } .font-icon-fire:before { content: "\e09b"; } .font-icon-film:before { content: "\e09c"; } .font-icon-file:before { content: "\e09d"; } .font-icon-file-empty:before { content: "\e09e"; } .font-icon-fast-forward:before { content: "\e09f"; } .font-icon-fast-backward:before { content: "\e0a0"; } .font-icon-facetime:before { content: "\e0a1"; } .font-icon-eye:before { content: "\e0a2"; } .font-icon-eye_disable:before { content: "\e0a3"; } .font-icon-expand-view:before { content: "\e0a4"; } .font-icon-expand-view-3:before { content: "\e0a5"; } .font-icon-expand-view-2:before { content: "\e0a6"; } .font-icon-expand-vertical:before { content: "\e0a7"; } .font-icon-expand-horizontal:before { content: "\e0a8"; } .font-icon-exclamation:before { content: "\e0a9"; } .font-icon-email:before { content: "\e0aa"; } .font-icon-email_2:before { content: "\e0ab"; } .font-icon-eject:before { content: "\e0ac"; } .font-icon-edit:before { content: "\e0ad"; } .font-icon-edit-check:before { content: "\e0ae"; } .font-icon-download:before { content: "\e0af"; } .font-icon-download_2:before { content: "\e0b0"; } .font-icon-dashboard:before { content: "\e0b1"; } .font-icon-credit-card:before { content: "\e0b2"; } .font-icon-copy:before { content: "\e0b3"; } .font-icon-comments:before { content: "\e0b4"; } .font-icon-comments-line:before { content: "\e0b5"; } .font-icon-comment:before { content: "\e0b6"; } .font-icon-comment-line:before { content: "\e0b7"; } .font-icon-columns:before { content: "\e0b8"; } .font-icon-columns-2:before { content: "\e0b9"; } .font-icon-cogs:before { content: "\e0ba"; } .font-icon-cog:before { content: "\e0bb"; } .font-icon-cloud:before { content: "\e0bc"; } .font-icon-check:before { content: "\e0bd"; } .font-icon-check-empty:before { content: "\e0be"; } .font-icon-certificate:before { content: "\e0bf"; } .font-icon-camera:before { content: "\e0c0"; } .font-icon-calendar:before { content: "\e0c1"; } .font-icon-bullhorn:before { content: "\e0c2"; } .font-icon-briefcase:before { content: "\e0c3"; } .font-icon-bookmark:before { content: "\e0c4"; } .font-icon-book:before { content: "\e0c5"; } .font-icon-bolt:before { content: "\e0c6"; } .font-icon-bold:before { content: "\e0c7"; } .font-icon-blockquote:before { content: "\e0c8"; } .font-icon-bell:before { content: "\e0c9"; } .font-icon-beaker:before { content: "\e0ca"; } .font-icon-barcode:before { content: "\e0cb"; } .font-icon-ban-circle:before { content: "\e0cc"; } .font-icon-ban-chart:before { content: "\e0cd"; } .font-icon-ban-chart-2:before { content: "\e0ce"; } .font-icon-backward:before { content: "\e0cf"; } .font-icon-asterisk:before { content: "\e0d0"; } .font-icon-arrow-simple-up:before { content: "\e0d1"; } .font-icon-arrow-simple-up-circle:before { content: "\e0d2"; } .font-icon-arrow-simple-right:before { content: "\e0d3"; } .font-icon-arrow-simple-right-circle:before { content: "\e0d4"; } .font-icon-arrow-simple-left:before { content: "\e0d5"; } .font-icon-arrow-simple-left-circle:before { content: "\e0d6"; } .font-icon-arrow-simple-down:before { content: "\e0d7"; } .font-icon-arrow-simple-down-circle:before { content: "\e0d8"; } .font-icon-arrow-round-up:before { content: "\e0d9"; } .font-icon-arrow-round-up-circle:before { content: "\e0da"; } .font-icon-arrow-round-right:before { content: "\e0db"; } .font-icon-arrow-round-right-circle:before { content: "\e0dc"; } .font-icon-arrow-round-left:before { content: "\e0dd"; } .font-icon-arrow-round-left-circle:before { content: "\e0de"; } .font-icon-arrow-round-down:before { content: "\e0df"; } .font-icon-arrow-round-down-circle:before { content: "\e0e0"; } .font-icon-arrow-light-up:before { content: "\e0e1"; } .font-icon-arrow-light-round-up:before { content: "\e0e2"; } .font-icon-arrow-light-round-up-circle:before { content: "\e0e3"; } .font-icon-arrow-light-round-right:before { content: "\e0e4"; } .font-icon-arrow-light-round-right-circle:before { content: "\e0e5"; } .font-icon-arrow-light-round-left:before { content: "\e0e6"; } .font-icon-arrow-light-round-left-circle:before { content: "\e0e7"; } .font-icon-arrow-light-round-down:before { content: "\e0e8"; } .font-icon-arrow-light-round-down-circle:before { content: "\e0e9"; } .font-icon-arrow-light-right:before { content: "\e0ea"; } .font-icon-arrow-light-left:before { content: "\e0eb"; } .font-icon-arrow-light-down:before { content: "\e0ec"; } .font-icon-align-right:before { content: "\e0ed"; } .font-icon-align-left:before { content: "\e0ee"; } .font-icon-align-justify:before { content: "\e0ef"; } .font-icon-align-center:before { content: "\e0f0"; } .font-icon-adjust:before { content: "\e0f1"; }/* CSS definations for Solotrio */ /*-------------------------------------------------------------------------------------------*/ /* 0. RESET */ /*-------------------------------------------------------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } * { outline:none; } /*-------------------------------------------------------------------------------------------*/ /* 1. SETUP */ /*-------------------------------------------------------------------------------------------*/ /* Google Fonts Import */ @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,700,700italic,800,800italic,600italic,600); /* 1.1 Defaults */ h1, h2, h3, h4, h5, h6, strong { font-weight:bold; } i, em { font-style:italic; } .left { float:left; } .right { float:right; } .alignleft { text-align:left; } .alignright { text-align:right; } .aligncenter { text-align:center; } .clear { clear:both; line-height:1px; height:1px; } textarea { overflow:auto; font-family:Arial, Helvetica, sans-serif; /* Body Font Family Will Come Here */ } a { color:#00B4FF; text-decoration:none; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; } a:hover { color:#333; } address { font-style:normal; } /* 1.2 Common Tages */ input[type="text"], input[type="email"], input[type="phone"], textarea { border:1px solid #e5e5e5; background:#f8f8f8; display: block; width: 100%; min-height: 45px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding:0 10px; font-size:14px; color:#1d1d1d; line-height:30px; -webkit-transition: .5s; -moz-transition: .5s; transition: .5s; -webkit-appearance:none; } textarea { resize:vertical; height:125px; padding:10px; font-family: 'Open Sans', sans-serif; } input[type="text"]:focus, input[type="email"]:focus, input[type="phone"]:focus, textarea:focus { border:1px solid #999; } input[type="button"], input[type="submit"], button { background:#00b4ff; border:none; width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height:43px; cursor:pointer; font-size:16px; color:#fff; line-height:43px; text-transform:uppercase; -webkit-transition: .5s; -moz-transition: .5s; transition: .5s; -webkit-appearance:none; } input[type="button"]:hover, input[type="submit"]:hover, button:hover, input[type="button"]:active, input[type="submit"]:active, button:active { background:#333; } img, object, embed { max-width: 100%; } img { height: auto; width:100%; } /* Preloader */ #preloader { position:fixed; top:0; left:0; right:0; bottom:0; background-color:#fff; /* change if the mask should have another color then white */ z-index:11000; /* makes sure it stays on top */ } #status { width:200px; height:200px; position:absolute; left:50%; /* centers the loading animation horizontally one the screen */ top:50%; /* centers the loading animation vertically one the screen */ margin:-100px 0 0 -100px; /* is width and height divided by two */ } /* Flexslider CSS */ /* Browser Resets */ .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} .flex-direction-nav { display:none; } /* FlexSlider Necessary Styles *********************************/ .flexslider {margin: 0; padding: 0;} .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img {width: 100%; display: block;} .flex-pauseplay span {text-transform: capitalize;} /* Clearfix for the .slides element */ .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;} * html .slides {height: 1%;} /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child {display: block;} /* FlexSlider Default Theme *********************************/ .flexslider {margin: 0 0 0 0; position: relative; zoom: 1;} .flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;} .loading .flex-viewport {max-height: 300px;} .flexslider .slides {zoom: 1;} .carousel li {margin-right: 5px} .flex-control-nav{margin-top:20px;} .flex-control-nav li{display:inline-block; margin-right:10px; cursor:pointer} .flex-control-nav a{width:10px; height:10px; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; background:#fff; opacity:.7; text-indent:-9999px; display:block;} .flex-control-nav a:hover, .flex-control-nav a.flex-active{opacity:1;} /*-------------------------------------------------------------------------------------------*/ /* 2. SITE STRUCTURE & APPEARANCE */ /*-------------------------------------------------------------------------------------------*/ body { background:#fff; font-family: 'Open Sans', sans-serif; font-size:12px; line-height:18px; color:#333; -webkit-text-size-adjust: 100%; } .bg{ background: url(/usite/7750/images/back2.jpg) no-repeat fixed center center; -webkit-background-size:cover; -moz-background-size:cover; background-size:cover; position:fixed; width:100%; height:100%; z-index:-1; top:0; left:0; } .main-wrapper{ padding-left:60px; position:relative; } /* Navigation */ .navigation { background:#f8f8f8; width:60px; overflow:hidden; height:100%; float:left; position:fixed; left:0; top:0; z-index:999; font-size:16px; color:#6c6c6c; text-transform:uppercase; } .navigation a.nav-icon { font-size:22px; line-height:22px; width:22px; height:22px; float:left; display:block; margin:22px 0 0 19px; color:#6c6c6c; } .navigation a.nav-icon:hover{ color:#999; } .navigation ul { padding:58px 0 0 0; float:left; clear:both; } .navigation ul.nav { display:none; } .navigation li { height:15px; white-space:nowrap; padding-bottom:25px; } .navigation li a { color:#6c6c6c; width:38px; padding-left:22px; display:block; text-align:center; font-size:14px; } .navigation li:hover a { color:#999; } .navigation li.active a { color:#333; } .navigation li span{ display:none; padding-top:5px; font-size:12px; } .navigation li i { width:16px; height:15px; float:left; margin:0 10px 0 0; } /* header */ .showcase .alt-img{ display:none; } .showcase .tagline { padding-top:240px; font-size:36px; color:#333; line-height:normal; } .showcase .tagline strong { display:block; font-size:72px; text-transform:uppercase; } /* page-heading */ .page-heading { padding-bottom:60px; text-align:center; font-size:17px; color:#bbb; } .page-heading h2 { padding-bottom:10px; font-size:40px; color:#1d1d1d; font-weight:300; line-height:normal; } .page-heading h2 span { color:#00b4ff; } .breaker { background:#ccc; width:83px; height:1px; clear:both; margin:0 auto; } .page-heading p { line-height:normal; text-transform:uppercase; font-weight:400; } /* Work */ .work { padding:60px 0; background: #FFF; } .work .grid_4{ margin-bottom:20px; } /* project-lightbox */ .project-lightbox { background:#fff; width:100%; height:100%; font-size:14px; color:#333; position:fixed; left:0; top:0; z-index:9999; display:none; overflow:auto; } .project-lightbox .title { background:#333; width:100%; height:70px; margin-bottom:75px; line-height:70px; } .project-lightbox .title h3 { text-align:center; font-size:30px; color:#fffefe; font-weight:300; } .project-lightbox a.close { background:#1d1d1d; width:70px; height:70px; float:left; position:absolute; right:0; top:0; color:#fff; font-size:54px; font-weight:400; line-height:60px; text-align:center; z-index:999; } .project-lightbox a.close:hover{ background:#00B4FF; } /* Info */ .project-info p { line-height:24px; padding-bottom:26px; } .project-info ul { margin-top:-13px; } .project-info li { border-top:1px solid #ccc; width:auto; float:none; margin:0; padding:10px 0; } .project-info li:first-child { border-top:none; } .project-info li span { display:inline-block; width:145px; } /* About */ .about { background:rgba(225,225,225,.9); padding:60px 0 40px 0; font-size:15px; color:#999; } .about .page-heading h2 { color:#333; } .content { padding-bottom:57px; } .content p { line-height:28px; padding-bottom:30px; } .content p .title { color:#333; text-transform:uppercase; } h3.sub-title{ color:#333; line-height:28px; text-transform:uppercase; font-weight:normal; } .expertise{ margin-top:12px; } .expertise .level{ display:inline-block; background:#ccc; width:60%; height:9px; } .expertise .level span{ display:block; height:9px; } .level .color1{ background:#53ccff; } .level .color2{ background:#47bced; } .level .color3{ background:#31a5d5; } .level .color4{ background:#1f90be; } .level .color5{ background:#0e7aa6; } .level .color6{ background:#096286; } .expertise .skill{ display:inline-block; margin-left:3px; font-size:12px; text-transform:uppercase; color:#999; } /* Social */ .social { padding-top:60px; } .social ul { text-align:center; } .social li { display:inline-block; width:48px; height:50px; margin:0 1px; padding:0; } .social li a { display:block; height:35px; padding:15px 0 0 0; color:#bbb; font-size:22px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } .social li a:hover{ color:#fff; } .social li.facebook a:hover { background:#3b56b6; } .social li.twitter a:hover { background:#33ccff; } .social li.vimeo a:hover { background:#aad450; } .social li.dribbble a:hover { background:#ea4c89; } /* Clients */ .clients { padding:60px 0; background:#00b4ff; color:#fff; } .clients .page-heading h2 { padding-bottom:20px; color:#fff; } .clients .page-heading .breaker { margin-bottom:13px; background:#fff } .clients-logo{ padding:0 0 30px 0; text-align:center; } .clients-logo li{ margin:0 25px; display:inline-block; } .testimonials{ text-align:center; margin-top:50px; } .testimonials p{ font-size:30px; line-height:40px; font-style:italic; font-weight:300 } .testimonials cite{ font-weight:600; font-size:18px; margin-top:40px; display:block; } /* Contact */ .contact { padding:60px 0; background:#fff; } .contact .page-heading h2 { padding-bottom:20px; } .contact .page-heading .breaker { margin-bottom:23px; } .contact .form-row { margin-bottom:12px; } .contact .form-row.last { margin-bottom:0; } .contact #message{ padding:10px 0 0 0; color:#e74c3c; } .contact #success_page h3{ color:#2ecc71; } .contact #success_page p{ color:#333; } /* Twitter-comment */ .twitter-comment { background:#e7e7e7; text-align:center; font-size:14px; color:#1d1d1d; position:relative; padding:40px 0; } .twitter-comment .tweet{ display:inline-block; } .twitter-comment .tweetie { color:#33ccff; font-size:30px; display:inline-block; margin-right:20px; line-height:normal; } .twitter-comment .date{ color:#999; font-style:italic; font-size:80%; padding-top:10px; } /* Footer */ .footer { background:#ddd; color:#999; min-height:15px; padding:30px 0; text-align:center; } /* Variable Grid System (Fluid Version). Learn more ~ http://www.spry-soft.com/grids/ Based on 960 Grid System - http://960.gs/ & 960 Fluid - http://www.designinfluences.com/ Licensed under GPL and MIT. */ /* Containers ----------------------------------------------------------------------------------------------------*/ .container_12 { max-width:940px; margin:0 auto; padding:0 10px; } /* Grid >> Global ----------------------------------------------------------------------------------------------------*/ .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { display:inline; float: left; position: relative; margin-left: 1%; margin-right: 1%; } /* Grid >> Children (Alpha ~ First, Omega ~ Last) ----------------------------------------------------------------------------------------------------*/ .alpha { margin-left: 0; } .omega { margin-right: 0; } /* Grid >> 12 Columns ----------------------------------------------------------------------------------------------------*/ .container_12 .grid_1 { width:6.333%; } .container_12 .grid_2 { width:14.667%; } .container_12 .grid_3 { width:23.0%; } .container_12 .grid_4 { width:31.333%; } .container_12 .grid_5 { width:39.667%; } .container_12 .grid_6 { width:48.0%; } .container_12 .grid_7 { width:56.333%; } .container_12 .grid_8 { width:64.667%; } .container_12 .grid_9 { width:73.0%; } .container_12 .grid_10 { width:81.333%; } .container_12 .grid_11 { width:89.667%; } .container_12 .grid_12 { width:98.0%; } /* Prefix Extra Space >> 12 Columns ----------------------------------------------------------------------------------------------------*/ .container_12 .prefix_1 { padding-left:8.333%; } .container_12 .prefix_2 { padding-left:16.667%; } .container_12 .prefix_3 { padding-left:25.0%; } .container_12 .prefix_4 { padding-left:33.333%; } .container_12 .prefix_5 { padding-left:41.667%; } .container_12 .prefix_6 { padding-left:50.0%; } .container_12 .prefix_7 { padding-left:58.333%; } .container_12 .prefix_8 { padding-left:66.667%; } .container_12 .prefix_9 { padding-left:75.0%; } .container_12 .prefix_10 { padding-left:83.333%; } .container_12 .prefix_11 { padding-left:91.667%; } /* Suffix Extra Space >> 12 Columns ----------------------------------------------------------------------------------------------------*/ .container_12 .suffix_1 { padding-right:8.333%; } .container_12 .suffix_2 { padding-right:16.667%; } .container_12 .suffix_3 { padding-right:25.0%; } .container_12 .suffix_4 { padding-right:33.333%; } .container_12 .suffix_5 { padding-right:41.667%; } .container_12 .suffix_6 { padding-right:50.0%; } .container_12 .suffix_7 { padding-right:58.333%; } .container_12 .suffix_8 { padding-right:66.667%; } .container_12 .suffix_9 { padding-right:75.0%; } .container_12 .suffix_10 { padding-right:83.333%; } .container_12 .suffix_11 { padding-right:91.667%; } /* Push Space >> 12 Columns ----------------------------------------------------------------------------------------------------*/ .container_12 .push_1 { left:8.333%; } .container_12 .push_2 { left:16.667%; } .container_12 .push_3 { left:25.0%; } .container_12 .push_4 { left:33.333%; } .container_12 .push_5 { left:41.667%; } .container_12 .push_6 { left:50.0%; } .container_12 .push_7 { left:58.333%; } .container_12 .push_8 { left:66.667%; } .container_12 .push_9 { left:75.0%; } .container_12 .push_10 { left:83.333%; } .container_12 .push_11 { left:91.667%; } /* Pull Space >> 12 Columns ----------------------------------------------------------------------------------------------------*/ .container_12 .pull_1 { left:-8.333%; } .container_12 .pull_2 { left:-16.667%; } .container_12 .pull_3 { left:-25.0%; } .container_12 .pull_4 { left:-33.333%; } .container_12 .pull_5 { left:-41.667%; } .container_12 .pull_6 { left:-50.0%; } .container_12 .pull_7 { left:-58.333%; } .container_12 .pull_8 { left:-66.667%; } .container_12 .pull_9 { left:-75.0%; } .container_12 .pull_10 { left:-83.333%; } .container_12 .pull_11 { left:-91.667%; } @media only screen and (max-width: 767px) { .container_12 { width:auto; min-width: 0; margin-left: 0px; margin-right: 0px; padding:0 20px } .container_12 .grid_1, .container_12 .grid_2, .container_12 .grid_3, .container_12 .grid_4, .container_12 .grid_5, .container_12 .grid_6, .container_12 .grid_7, .container_12 .grid_8, .container_12 .grid_9, .container_12 .grid_10, .container_12 .grid_11, .container_12 .grid_12 { width: 100%; margin:0 0 30px 0; } .container_12 .prefix_1, .container_12 .prefix_2, .container_12 .prefix_3, .container_12 .prefix_4, .container_12 .prefix_5, .container_12 .prefix_6, .container_12 .prefix_7, .container_12 .prefix_8, .container_12 .prefix_9, .container_12 .prefix_10, .container_12 .prefix_11{ padding-left:0; } .container_12 .suffix_1, .container_12 .suffix_2, .container_12 .suffix_3, .container_12 .suffix_4, .container_12 .suffix_5, .container_12 .suffix_6, .container_12 .suffix_7, .container_12 .suffix_8, .container_12 .suffix_9, .container_12 .suffix_10, .container_12 .suffix_11{ padding-right:0; } .container_12 .push_1, .container_12 .push_2, .container_12 .push_3, .container_12 .push_4, .container_12 .push_5, .container_12 .push_6, .container_12 .push_7, .container_12 .push_8, .container_12 .push_9, .container_12 .push_10, .container_12 .push_11, .container_12 .pull_1, .container_12 .pull_2, .container_12 .pull_3, .container_12 .pull_4, .container_12 .pull_5, .container_12 .pull_6, .container_12 .pull_7, .container_12 .pull_8, .container_12 .pull_9, .container_12 .pull_10, .container_12 .pull_11{ left:0; } .bg{ background:none; } .showcase .alt-img{ display:block; width:80%; height:auto; margin:0 auto; margin-top:40px; } .showcase .alt-img img{ -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; } .showcase .tagline { padding:40px 0; font-size:20px; text-align:center; width:80%; margin:0 auto; } .showcase .tagline strong { font-size:36px; } .project-lightbox .title h3{ text-align:left; padding-left:20px; } }