diff --git a/app/css/app.css b/app/css/app.css deleted file mode 100644 index c925240..0000000 --- a/app/css/app.css +++ /dev/null @@ -1,30 +0,0 @@ -/* app css stylesheet */ - -.menu { - list-style: none; - border-bottom: 0.1em solid black; - margin-bottom: 2em; - padding: 0 0 0.5em; -} - -.menu:before { - content: "["; -} - -.menu:after { - content: "]"; -} - -.menu > li { - display: inline; -} - -.menu > li:before { - content: "|"; - padding-right: 0.3em; -} - -.menu > li:nth-child(1):before { - content: ""; - padding: 0; -} diff --git a/app/css/edoStyle.css b/app/css/edoStyle.css deleted file mode 100644 index 96313f4..0000000 --- a/app/css/edoStyle.css +++ /dev/null @@ -1,319 +0,0 @@ -/* ------------------------------- */ -/* COLORS */ - -/* DARK GREY: #24221f */ -/* MEDIUM GREY: #938b7f */ -/* LIGHT GREY: #E2E2E2 */ -/* RED: #b80b5b */ -/* BLUE: #3fabd3 */ -/* GREEN: #0bb988 */ -/* ORANGE: #FF793A */ -/* BROWN: #938b7f */ - - -@import url(http://weloveiconfonts.com/api/?family=fontawesome); - -/* fontawesome */ -[class*="fontawesome-"]:before { - font-family: 'FontAwesome', sans-serif; -} - -html { - width: 100%; - height: 100%; -} - -body { - background: #EDEDED; - width: 100%; - height: 100%; - font-family: "Noto Sans", sans-serif; -} - -.clearfix:before, .clearfix:after { content: ""; display: table; } -.clearfix:after { clear: both; } -.clearfix { zoom: 1; } - -a, a:visited { - text-decoration: none; - color: #3fabd3; -} - -.hide { - display: none; -} - -#search { - width: 800px; - height: 60px; - background: white; - box-shadow: 6px 6px rgba(0, 0, 0, 0.2); - margin: 40px auto; - border: 10px solid #e3e3e3; -} - -#add { - font-weight: bold; - height: 60px; - width: 60px; - text-align: center; - line-height: 60px; - background: #333333; - color: white; - font-size: 50px; - float: left; - cursor: pointer; - transition: all 0.2s; - -moz-transition: all 0.2s; - -webkit-transition: all 0.2s; -} - -#add:hover { - background: #3fabd3; - transform: rotate(2deg); - -moz-transform: rotate(-5deg) scale(1.1); - -webkit-transform: rotate(-5deg) scale(1.1); -} - -#search input[type="text"] { - height: 60px; - width: 680px; - border: 0; - box-shadow: none; - padding: 20px; - box-sizing: border-box; - outline: none; - font-family: "Noto Sans", sans-serif; - font-size: 20px; - float: left; -} - -#search input[type="text"]:focus { - box-shadow: none; - outline: none; - - } - -#search button[type="submit"] { - height: 60px; - width: 60px; - text-align: center; - line-height: 60px; - background: #333333; - color: white; - font-size: 30px; - float: right; - border: none; - cursor: pointer; - transition: all 0.2s; - -moz-transition: all 0.2s; - -webkit-transition: all 0.2s; -} - -#search button[type="submit"]:hover { - box-shadow: none; - outline: none; - background: #0bb988; - transform: rotate(2deg); - -moz-transform: rotate(-5deg) scale(1.1); - -webkit-transform: rotate(-5deg) scale(1.1); - -} - -#actionNeeded { - width: 800px; - background: #b80b5b; - color: white; - font-weight: bold; - text-transform: uppercase; - text-align: center; - padding: 10px; - box-sizing: border-box; - margin: 0 auto 20px; -} - -.contacts { - width: 800px; - margin: 0 auto; -} - -.contacts ul { - width: 100%; - margin: 0; - padding: 0; -} - -.contacts li { - position: relative; - font-size: 10px; - float: left; - width: 32%; - height: 220px; - background: white; - margin: 0 2% 2% 0; - box-sizing: border-box; - box-shadow: 6px 6px rgba(0, 0, 0, 0.2); - list-style-type: none; - cursor: default; -} - -.contacts li:nth-child(3n + 3) { - margin: 0 0 2% 0; -} - -.loading { - opacity: 0.4; -} - -.cssLoader { - position: absolute; - z-index: 1000000000; - top: 50%; - left: 50%; - margin-top: -19px; - margin-left: -19px; -} - -.loader { - display: none; - border: 17px solid; - border-color: #3fabd3 #24221f #24221f; - border-radius: 50%; - -webkit-animation: spin 1s linear infinite; - -moz-animation: spin 1s linear infinite; - -o-animation: spin 1s linear infinite; - animation: spin 1s linear infinite; -} - -.loading .loader { - display: block; -} - -@-webkit-keyframes spin { - 100% { -webkit-transform: rotate(359deg); } -} - -@-moz-keyframes spin { - 100% { -moz-transform: rotate(359deg); } -} - -@-o-keyframes spin { - 100% { -moz-transform: rotate(359deg); } -} - -@keyframes spin { - 100% { transform: rotate(359deg); } -} - - -.error { - background: rgb(255, 230, 230) !important; -} - -.name { - font-weight: bold; - font-size: 18px; - text-transform: uppercase; - margin: 10px 10px 0; -} - -.surname { - font-weight: bold; - font-size: 14px; - text-transform: uppercase; - margin: 0 10px 0; -} - -.company { - margin: 2px 10px 0; - font-size: 12px; - color: #bfbfbf; -} - -.moreInfo { - clear: both; - margin: 45px 10px 0; - color: #e2e2e2; -} - -.contact:hover .moreInfo { - color: black; -} - -.contact a, -.contact a:visited { - color: #e2e2e2; -} - -.contact:hover a, -.contact:hover a:visited { - color: #3fabd3; -} - -.lastInteraction { - text-align: center; - margin-bottom: 10px; -} - -.lastInteraction span { - font-weight: bold; -} - -.message { - font-style: italic; - padding: 7px 10px; - margin: 5px 0; - background: #f8f8f8; - -} - -.contact:hover .message { - background: #fffdcb; -} - -.nextStep { - position: absolute; - bottom: 10px; - right: 10px; - text-align: right; -} - -.picture { - margin: 10px; - float: right; - width: 92px; -} - -.picture img { - width: 100%; - height: auto; -} - -.recentInteractions, -.newMessages, -.updates { - float: left; - text-align: center; - width: 21px; - height: 21px; - line-height: 20px; - border-radius: 11px; - color: white; - margin: 8px 0 10px 10px; -} - -.newMessages { - background: #b80b5b; -} - -.recentInteractions { - background: #0bb988; -} - -.updates { - background: #3fabd3; -} - - - - diff --git a/app/css/style.css b/app/css/style.css new file mode 100644 index 0000000..c2db321 --- /dev/null +++ b/app/css/style.css @@ -0,0 +1,4567 @@ +/* ------------------------------- */ +/* COLORS */ +/* ------------------------------- */ +/* MIXINS */ +/* ------------------------------- */ +/* FONTS */ +@charset "UTF-8"; +@font-face { + font-family: 'FontAwesome'; + font-style: normal; + font-weight: normal; + src: url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.eot'); + src: url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.eot?#iefix') format('eot'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.woff') format('woff'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.ttf') format('truetype'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.svg#FontAwesomeRegular') format('svg'); +} +.fontawesome-glass:before { + content: "\f000"; +} +.fontawesome-music:before { + content: "\f001"; +} +.fontawesome-search:before { + content: "\f002"; +} +.fontawesome-envelope:before { + content: "\f003"; +} +.fontawesome-heart:before { + content: "\f004"; +} +.fontawesome-star:before { + content: "\f005"; +} +.fontawesome-star-empty:before { + content: "\f006"; +} +.fontawesome-user:before { + content: "\f007"; +} +.fontawesome-film:before { + content: "\f008"; +} +.fontawesome-th-large:before { + content: "\f009"; +} +.fontawesome-th:before { + content: "\f00a"; +} +.fontawesome-th-list:before { + content: "\f00b"; +} +.fontawesome-ok:before { + content: "\f00c"; +} +.fontawesome-remove:before { + content: "\f00d"; +} +.fontawesome-zoom-in:before { + content: "\f00e"; +} +.fontawesome-zoom-out:before { + content: "\f010"; +} +.fontawesome-off:before { + content: "\f011"; +} +.fontawesome-signal:before { + content: "\f012"; +} +.fontawesome-cog:before { + content: "\f013"; +} +.fontawesome-trash:before { + content: "\f014"; +} +.fontawesome-home:before { + content: "\f015"; +} +.fontawesome-file:before { + content: "\f016"; +} +.fontawesome-time:before { + content: "\f017"; +} +.fontawesome-road:before { + content: "\f018"; +} +.fontawesome-download-alt:before { + content: "\f019"; +} +.fontawesome-download:before { + content: "\f01a"; +} +.fontawesome-upload:before { + content: "\f01b"; +} +.fontawesome-inbox:before { + content: "\f01c"; +} +.fontawesome-play-circle:before { + content: "\f01d"; +} +.fontawesome-repeat:before { + content: "\f01e"; +} +.fontawesome-refresh:before { + content: "\f021"; +} +.fontawesome-list-alt:before { + content: "\f022"; +} +.fontawesome-lock:before { + content: "\f023"; +} +.fontawesome-flag:before { + content: "\f024"; +} +.fontawesome-headphones:before { + content: "\f025"; +} +.fontawesome-volume-off:before { + content: "\f026"; +} +.fontawesome-volume-down:before { + content: "\f027"; +} +.fontawesome-volume-up:before { + content: "\f028"; +} +.fontawesome-qrcode:before { + content: "\f029"; +} +.fontawesome-barcode:before { + content: "\f02a"; +} +.fontawesome-tag:before { + content: "\f02b"; +} +.fontawesome-tags:before { + content: "\f02c"; +} +.fontawesome-book:before { + content: "\f02d"; +} +.fontawesome-bookmark:before { + content: "\f02e"; +} +.fontawesome-print:before { + content: "\f02f"; +} +.fontawesome-camera:before { + content: "\f030"; +} +.fontawesome-font:before { + content: "\f031"; +} +.fontawesome-bold:before { + content: "\f032"; +} +.fontawesome-italic:before { + content: "\f033"; +} +.fontawesome-text-height:before { + content: "\f034"; +} +.fontawesome-text-width:before { + content: "\f035"; +} +.fontawesome-align-left:before { + content: "\f036"; +} +.fontawesome-align-center:before { + content: "\f037"; +} +.fontawesome-align-right:before { + content: "\f038"; +} +.fontawesome-align-justify:before { + content: "\f039"; +} +.fontawesome-list:before { + content: "\f03a"; +} +.fontawesome-indent-left:before { + content: "\f03b"; +} +.fontawesome-indent-right:before { + content: "\f03c"; +} +.fontawesome-facetime-video:before { + content: "\f03d"; +} +.fontawesome-picture:before { + content: "\f03e"; +} +.fontawesome-pencil:before { + content: "\f040"; +} +.fontawesome-map-marker:before { + content: "\f041"; +} +.fontawesome-adjust:before { + content: "\f042"; +} +.fontawesome-tint:before { + content: "\f043"; +} +.fontawesome-edit:before { + content: "\f044"; +} +.fontawesome-share:before { + content: "\f045"; +} +.fontawesome-check:before { + content: "\f046"; +} +.fontawesome-move:before { + content: "\f047"; +} +.fontawesome-step-backward:before { + content: "\f048"; +} +.fontawesome-fast-backward:before { + content: "\f049"; +} +.fontawesome-backward:before { + content: "\f04a"; +} +.fontawesome-play:before { + content: "\f04b"; +} +.fontawesome-pause:before { + content: "\f04c"; +} +.fontawesome-stop:before { + content: "\f04d"; +} +.fontawesome-forward:before { + content: "\f04e"; +} +.fontawesome-fast-forward:before { + content: "\f050"; +} +.fontawesome-step-forward:before { + content: "\f051"; +} +.fontawesome-eject:before { + content: "\f052"; +} +.fontawesome-chevron-left:before { + content: "\f053"; +} +.fontawesome-chevron-right:before { + content: "\f054"; +} +.fontawesome-plus-sign:before { + content: "\f055"; +} +.fontawesome-minus-sign:before { + content: "\f056"; +} +.fontawesome-remove-sign:before { + content: "\f057"; +} +.fontawesome-ok-sign:before { + content: "\f058"; +} +.fontawesome-question-sign:before { + content: "\f059"; +} +.fontawesome-info-sign:before { + content: "\f05a"; +} +.fontawesome-screenshot:before { + content: "\f05b"; +} +.fontawesome-remove-circle:before { + content: "\f05c"; +} +.fontawesome-ok-circle:before { + content: "\f05d"; +} +.fontawesome-ban-circle:before { + content: "\f05e"; +} +.fontawesome-arrow-left:before { + content: "\f060"; +} +.fontawesome-arrow-right:before { + content: "\f061"; +} +.fontawesome-arrow-up:before { + content: "\f062"; +} +.fontawesome-arrow-down:before { + content: "\f063"; +} +.fontawesome-share-alt:before { + content: "\f064"; +} +.fontawesome-resize-full:before { + content: "\f065"; +} +.fontawesome-resize-small:before { + content: "\f066"; +} +.fontawesome-plus:before { + content: "\f067"; +} +.fontawesome-minus:before { + content: "\f068"; +} +.fontawesome-asterisk:before { + content: "\f069"; +} +.fontawesome-exclamation-sign:before { + content: "\f06a"; +} +.fontawesome-gift:before { + content: "\f06b"; +} +.fontawesome-leaf:before { + content: "\f06c"; +} +.fontawesome-fire:before { + content: "\f06d"; +} +.fontawesome-eye-open:before { + content: "\f06e"; +} +.fontawesome-eye-close:before { + content: "\f070"; +} +.fontawesome-warning-sign:before { + content: "\f071"; +} +.fontawesome-plane:before { + content: "\f072"; +} +.fontawesome-calendar:before { + content: "\f073"; +} +.fontawesome-random:before { + content: "\f074"; +} +.fontawesome-comment:before { + content: "\f075"; +} +.fontawesome-magnet:before { + content: "\f076"; +} +.fontawesome-chevron-up:before { + content: "\f077"; +} +.fontawesome-chevron-down:before { + content: "\f078"; +} +.fontawesome-retweet:before { + content: "\f079"; +} +.fontawesome-shopping-cart:before { + content: "\f07a"; +} +.fontawesome-folder-close:before { + content: "\f07b"; +} +.fontawesome-folder-open:before { + content: "\f07c"; +} +.fontawesome-resize-vertical:before { + content: "\f07d"; +} +.fontawesome-resize-horizontal:before { + content: "\f07e"; +} +.fontawesome-bar-chart:before { + content: "\f080"; +} +.fontawesome-twitter-sign:before { + content: "\f081"; +} +.fontawesome-facebook-sign:before { + content: "\f082"; +} +.fontawesome-camera-retro:before { + content: "\f083"; +} +.fontawesome-key:before { + content: "\f084"; +} +.fontawesome-cogs:before { + content: "\f085"; +} +.fontawesome-comments:before { + content: "\f086"; +} +.fontawesome-thumbs-up:before { + content: "\f087"; +} +.fontawesome-thumbs-down:before { + content: "\f088"; +} +.fontawesome-star-half:before { + content: "\f089"; +} +.fontawesome-heart-empty:before { + content: "\f08a"; +} +.fontawesome-signout:before { + content: "\f08b"; +} +.fontawesome-linkedin-sign:before { + content: "\f08c"; +} +.fontawesome-pushpin:before { + content: "\f08d"; +} +.fontawesome-external-link:before { + content: "\f08e"; +} +.fontawesome-signin:before { + content: "\f090"; +} +.fontawesome-trophy:before { + content: "\f091"; +} +.fontawesome-github-sign:before { + content: "\f092"; +} +.fontawesome-upload-alt:before { + content: "\f093"; +} +.fontawesome-lemon:before { + content: "\f094"; +} +.fontawesome-phone:before { + content: "\f095"; +} +.fontawesome-check-empty:before { + content: "\f096"; +} +.fontawesome-bookmark-empty:before { + content: "\f097"; +} +.fontawesome-phone-sign:before { + content: "\f098"; +} +.fontawesome-twitter:before { + content: "\f099"; +} +.fontawesome-facebook:before { + content: "\f09a"; +} +.fontawesome-github:before { + content: "\f09b"; +} +.fontawesome-unlock:before { + content: "\f09c"; +} +.fontawesome-credit-card:before { + content: "\f09d"; +} +.fontawesome-rss:before { + content: "\f09e"; +} +.fontawesome-hdd:before { + content: "\f0a0"; +} +.fontawesome-bullhorn:before { + content: "\f0a1"; +} +.fontawesome-bell:before { + content: "\f0a2"; +} +.fontawesome-certificate:before { + content: "\f0a3"; +} +.fontawesome-hand-right:before { + content: "\f0a4"; +} +.fontawesome-hand-left:before { + content: "\f0a5"; +} +.fontawesome-hand-up:before { + content: "\f0a6"; +} +.fontawesome-hand-down:before { + content: "\f0a7"; +} +.fontawesome-circle-arrow-left:before { + content: "\f0a8"; +} +.fontawesome-circle-arrow-right:before { + content: "\f0a9"; +} +.fontawesome-circle-arrow-up:before { + content: "\f0aa"; +} +.fontawesome-circle-arrow-down:before { + content: "\f0ab"; +} +.fontawesome-globe:before { + content: "\f0ac"; +} +.fontawesome-wrench:before { + content: "\f0ad"; +} +.fontawesome-tasks:before { + content: "\f0ae"; +} +.fontawesome-filter:before { + content: "\f0b0"; +} +.fontawesome-briefcase:before { + content: "\f0b1"; +} +.fontawesome-fullscreen:before { + content: "\f0b2"; +} +.fontawesome-group:before { + content: "\f0c0"; +} +.fontawesome-link:before { + content: "\f0c1"; +} +.fontawesome-cloud:before { + content: "\f0c2"; +} +.fontawesome-beaker:before { + content: "\f0c3"; +} +.fontawesome-cut:before { + content: "\f0c4"; +} +.fontawesome-copy:before { + content: "\f0c5"; +} +.fontawesome-paper-clip:before { + content: "\f0c6"; +} +.fontawesome-save:before { + content: "\f0c7"; +} +.fontawesome-sign-blank:before { + content: "\f0c8"; +} +.fontawesome-reorder:before { + content: "\f0c9"; +} +.fontawesome-list-ul:before { + content: "\f0ca"; +} +.fontawesome-list-ol:before { + content: "\f0cb"; +} +.fontawesome-strikethrough:before { + content: "\f0cc"; +} +.fontawesome-underline:before { + content: "\f0cd"; +} +.fontawesome-table:before { + content: "\f0ce"; +} +.fontawesome-magic:before { + content: "\f0d0"; +} +.fontawesome-truck:before { + content: "\f0d1"; +} +.fontawesome-pinterest:before { + content: "\f0d2"; +} +.fontawesome-pinterest-sign:before { + content: "\f0d3"; +} +.fontawesome-google-plus-sign:before { + content: "\f0d4"; +} +.fontawesome-google-plus:before { + content: "\f0d5"; +} +.fontawesome-money:before { + content: "\f0d6"; +} +.fontawesome-caret-down:before { + content: "\f0d7"; +} +.fontawesome-caret-up:before { + content: "\f0d8"; +} +.fontawesome-caret-left:before { + content: "\f0d9"; +} +.fontawesome-caret-right:before { + content: "\f0da"; +} +.fontawesome-columns:before { + content: "\f0db"; +} +.fontawesome-sort:before { + content: "\f0dc"; +} +.fontawesome-sort-down:before { + content: "\f0dd"; +} +.fontawesome-sort-up:before { + content: "\f0de"; +} +.fontawesome-envelope-alt:before { + content: "\f0e0"; +} +.fontawesome-linkedin:before { + content: "\f0e1"; +} +.fontawesome-undo:before { + content: "\f0e2"; +} +.fontawesome-legal:before { + content: "\f0e3"; +} +.fontawesome-dashboard:before { + content: "\f0e4"; +} +.fontawesome-comment-alt:before { + content: "\f0e5"; +} +.fontawesome-comments-alt:before { + content: "\f0e6"; +} +.fontawesome-bolt:before { + content: "\f0e7"; +} +.fontawesome-sitemap:before { + content: "\f0e8"; +} +.fontawesome-umbrella:before { + content: "\f0e9"; +} +.fontawesome-paste:before { + content: "\f0ea"; +} +.fontawesome-lightbulb:before { + content: "\f0eb"; +} +.fontawesome-exchange:before { + content: "\f0ec"; +} +.fontawesome-cloud-download:before { + content: "\f0ed"; +} +.fontawesome-cloud-upload:before { + content: "\f0ee"; +} +.fontawesome-user-md:before { + content: "\f0f0"; +} +.fontawesome-stethoscope:before { + content: "\f0f1"; +} +.fontawesome-suitcase:before { + content: "\f0f2"; +} +.fontawesome-bell-alt:before { + content: "\f0f3"; +} +.fontawesome-coffee:before { + content: "\f0f4"; +} +.fontawesome-food:before { + content: "\f0f5"; +} +.fontawesome-file-alt:before { + content: "\f0f6"; +} +.fontawesome-building:before { + content: "\f0f7"; +} +.fontawesome-hospital:before { + content: "\f0f8"; +} +.fontawesome-ambulance:before { + content: "\f0f9"; +} +.fontawesome-medkit:before { + content: "\f0fa"; +} +.fontawesome-fighter-jet:before { + content: "\f0fb"; +} +.fontawesome-beer:before { + content: "\f0fc"; +} +.fontawesome-h-sign:before { + content: "\f0fd"; +} +.fontawesome-plus-sign-alt:before { + content: "\f0fe"; +} +.fontawesome-double-angle-left:before { + content: "\f100"; +} +.fontawesome-double-angle-right:before { + content: "\f101"; +} +.fontawesome-double-angle-up:before { + content: "\f102"; +} +.fontawesome-double-angle-down:before { + content: "\f103"; +} +.fontawesome-angle-left:before { + content: "\f104"; +} +.fontawesome-angle-right:before { + content: "\f105"; +} +.fontawesome-angle-up:before { + content: "\f106"; +} +.fontawesome-angle-down:before { + content: "\f107"; +} +.fontawesome-desktop:before { + content: "\f108"; +} +.fontawesome-laptop:before { + content: "\f109"; +} +.fontawesome-tablet:before { + content: "\f10a"; +} +.fontawesome-mobile-phone:before { + content: "\f10b"; +} +.fontawesome-circle-blank:before { + content: "\f10c"; +} +.fontawesome-quote-left:before { + content: "\f10d"; +} +.fontawesome-quote-right:before { + content: "\f10e"; +} +.fontawesome-spinner:before { + content: "\f110"; +} +.fontawesome-circle:before { + content: "\f111"; +} +.fontawesome-reply:before { + content: "\f112"; +} +.fontawesome-github-alt:before { + content: "\f113"; +} +.fontawesome-folder-close-alt:before { + content: "\f114"; +} +.fontawesome-folder-open-alt:before { + content: "\f115"; +} +[class*="fontawesome-"]:before { + font-family: 'FontAwesome', sans-serif; +} +/* ------------------------------- */ +/* VARIABLES */ +/* ------------------------------- */ +/* BASIC */ +html { + width: 100%; + height: 100%; +} +body { + background: #EDEDED; + width: 100%; + height: auto; + font-family: 'Noto Sans', sans-serif; +} +div { + box-sizing: border-box; +} +.clearfix:before, +.clearfix:after { + content: ""; + display: table; +} +.clearfix:after { + clear: both; +} +.clearfix { + zoom: 1; +} +a, +a:visited { + text-decoration: none; + color: #3fabd3; +} +.center { + margin: 0 auto; +} +.center-text { + text-align: center; +} +.hide { + display: none; +} +.loading { + opacity: 0.4; +} +.error { + background: #ffe6e6 !important; +} +.float-left { + float: left; +} +.float-right { + float: right; +} +.title-case { + font-weight: bold; + text-transform: uppercase; + color: #000000; +} +input[type="text"] { + font-family: 'Noto Sans', sans-serif; + border: none; + box-shadow: none; + border-radius: 0; + outline: none; + box-sizing: border-box; +} +input[type="text"]:focus { + border: none; + box-shadow: none; + border-radius: 0; + outline: none; +} +textarea { + font-family: 'Noto Sans', sans-serif; + font-size: 16px; + border: none; + box-shadow: none; + border-radius: 0; + outline: none; + resize: none; + box-sizing: border-box; +} +textarea:focus { + border: none; + box-shadow: none; + border-radius: 0; + outline: none; +} +/* ------------------------------- */ +/* SEARCH */ +#search { + width: 800px; + height: 60px; + background: white; + box-shadow: 6px 6px rgba(0, 0, 0, 0.2); + margin: 40px auto; + border: 10px solid #e3e3e3; + box-sizing: content-box; +} +#add { + font-weight: bold; + height: 60px; + width: 60px; + text-align: center; + line-height: 60px; + background: #333333; + color: white; + font-size: 50px; + float: left; + cursor: pointer; + transition: all 0.2s; + -moz-transition: all 0.2s; + -webkit-transition: all 0.2s; +} +#add:hover { + background: #3fabd3; + -webkit-transform: rotate(-5deg) scale(1.1); + -moz-transform: rotate(-5deg) scale(1.1); + -ms-transform: rotate(-5deg) scale(1.1); + -o-transform: rotate(-5deg) scale(1.1); +} +#search input[type="text"] { + height: 60px; + width: 680px; + border: 0; + box-shadow: none; + padding: 20px; + box-sizing: border-box; + outline: none; + font-family: "Noto Sans", sans-serif; + font-size: 20px; + float: left; +} +#search input[type="text"]:focus { + box-shadow: none; + outline: none; +} +#search button[type="submit"] { + height: 60px; + width: 60px; + text-align: center; + line-height: 60px; + background: #333333; + color: white; + font-size: 30px; + float: right; + border: none; + cursor: pointer; + transition: all 0.2s; + -moz-transition: all 0.2s; + -webkit-transition: all 0.2s; +} +#search button[type="submit"]:hover { + box-shadow: none; + outline: none; + background: #0bb988; + -webkit-transform: rotate(-5deg) scale(1.1); + -moz-transform: rotate(-5deg) scale(1.1); + -ms-transform: rotate(-5deg) scale(1.1); + -o-transform: rotate(-5deg) scale(1.1); +} +/* ------------------------------- */ +/* LOADER */ +.loader { + display: none; + position: absolute; + z-index: 1000000000; + top: 50%; + left: 50%; + margin-top: -19px; + margin-left: -19px; + border: 17px solid; + border-color: #3fabd3 #24221f #24221f; + border-radius: 50%; + -webkit-animation: spin 1s linear infinite; + -moz-animation: spin 1s linear infinite; + -o-animation: spin 1s linear infinite; + animation: spin 1s linear infinite; +} +.loading .loader { + display: block; +} +@-webkit-keyframes spin { + 100% { + -webkit-transform: rotate(359deg); + } +} +@-moz-keyframes spin { + 100% { + -moz-transform: rotate(359deg); + } +} +@-o-keyframes spin { + 100% { + -moz-transform: rotate(359deg); + } +} +@keyframes spin { + 100% { + transform: rotate(359deg); + } +} +ul { + padding: 0; +} +.span3 li { + list-style-type: none; + width: 32%; + margin: 0 2% 2% 0; + box-sizing: border-box; +} +.span3 li:nth-child(3n + 3) { + margin: 0 0 2% 0; +} +.contact-base, +.contacts .contact { + position: relative; + font-size: 10px; + width: 32%; + height: 220px; + background: white; + margin: 0 2% 2% 0; + box-sizing: border-box; + box-shadow: 6px 6px rgba(0, 0, 0, 0.2); + list-style-type: none; + cursor: default; +} +.contact-base:nth-child(3n + 3), +.contacts .contact:nth-child(3n + 3) { + margin: 0 0 2% 0; +} +.contact-base .picture, +.contacts .contact .picture { + margin: 10px; + width: 92px; +} +.contact-base .picture img, +.contacts .contact .picture img { + width: 100%; + height: auto; +} +.contact-base .name, +.contacts .contact .name { + font-size: 18px; + margin: 10px 10px 0; +} +.contact-base .surname, +.contacts .contact .surname { + font-size: 14px; + margin: 0 10px 0; +} +.contact-base .company, +.contacts .contact .company { + margin: 2px 10px 0; + font-size: 12px; + color: #938b7f; +} +.contact-base .moreInfo, +.contacts .contact .moreInfo { + clear: both; + margin: 45px 10px 0; + color: #e2e2e2; +} +.contact-base:hover a, +.contact-base:hover a:visited, +.contacts .contact:hover a, +.contacts .contact:hover a:visited { + color: #3fabd3; +} +.contact-base:hover .moreInfo, +.contacts .contact:hover .moreInfo { + color: black; +} +.contact-base:hover .message, +.contacts .contact:hover .message { + background: #fffdcb; +} +.contact-base .recentInteractions, +.contact-base .newMessages, +.contact-base .updates, +.contacts .contact .recentInteractions, +.contacts .contact .newMessages, +.contacts .contact .updates { + font-size: 10px; + text-align: center; + width: 21px; + height: 21px; + line-height: 20px; + color: white; + margin: 8px 0 10px 10px; +} +.contact-base .lastInteraction, +.contacts .contact .lastInteraction { + text-align: center; + margin-bottom: 10px; +} +.contact-base .lastInteraction span, +.contacts .contact .lastInteraction span { + font-weight: bold; +} +.contact-base .message, +.contacts .contact .message { + font-style: italic; + padding: 7px 10px; + margin: 5px 0; + background: #f8f8f8; +} +.contact-base .nextStep, +.contacts .contact .nextStep { + position: absolute; + bottom: 10px; + right: 10px; + text-align: right; +} +.contact-base .newMessages, +.contacts .contact .newMessages { + background: #b80b5b; +} +.contact-base .recentInteractions, +.contacts .contact .recentInteractions { + background: #0bb988; +} +.contact-base .updates, +.contacts .contact .updates { + background: #3fabd3; +} +#actionNeeded { + width: 800px; + background: #b80b5b; + color: white; + font-weight: bold; + text-transform: uppercase; + text-align: center; + padding: 10px; + box-sizing: border-box; + margin: 0 auto 20px; +} +.contacts { + width: 800px; + margin: 0 auto; +} +.contacts a, +.contacts a:visited { + color: #e2e2e2; +} +.contacts ul { + width: 100%; + margin: 0; + padding: 0; +} +/* ------------------------------- */ +/* COLORS */ +/* ------------------------------- */ +/* MIXINS */ +/* ------------------------------- */ +/* FONTS */ +@charset "UTF-8"; +@font-face { + font-family: 'FontAwesome'; + font-style: normal; + font-weight: normal; + src: url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.eot'); + src: url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.eot?#iefix') format('eot'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.woff') format('woff'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.ttf') format('truetype'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.svg#FontAwesomeRegular') format('svg'); +} +.fontawesome-glass:before { + content: "\f000"; +} +.fontawesome-music:before { + content: "\f001"; +} +.fontawesome-search:before { + content: "\f002"; +} +.fontawesome-envelope:before { + content: "\f003"; +} +.fontawesome-heart:before { + content: "\f004"; +} +.fontawesome-star:before { + content: "\f005"; +} +.fontawesome-star-empty:before { + content: "\f006"; +} +.fontawesome-user:before { + content: "\f007"; +} +.fontawesome-film:before { + content: "\f008"; +} +.fontawesome-th-large:before { + content: "\f009"; +} +.fontawesome-th:before { + content: "\f00a"; +} +.fontawesome-th-list:before { + content: "\f00b"; +} +.fontawesome-ok:before { + content: "\f00c"; +} +.fontawesome-remove:before { + content: "\f00d"; +} +.fontawesome-zoom-in:before { + content: "\f00e"; +} +.fontawesome-zoom-out:before { + content: "\f010"; +} +.fontawesome-off:before { + content: "\f011"; +} +.fontawesome-signal:before { + content: "\f012"; +} +.fontawesome-cog:before { + content: "\f013"; +} +.fontawesome-trash:before { + content: "\f014"; +} +.fontawesome-home:before { + content: "\f015"; +} +.fontawesome-file:before { + content: "\f016"; +} +.fontawesome-time:before { + content: "\f017"; +} +.fontawesome-road:before { + content: "\f018"; +} +.fontawesome-download-alt:before { + content: "\f019"; +} +.fontawesome-download:before { + content: "\f01a"; +} +.fontawesome-upload:before { + content: "\f01b"; +} +.fontawesome-inbox:before { + content: "\f01c"; +} +.fontawesome-play-circle:before { + content: "\f01d"; +} +.fontawesome-repeat:before { + content: "\f01e"; +} +.fontawesome-refresh:before { + content: "\f021"; +} +.fontawesome-list-alt:before { + content: "\f022"; +} +.fontawesome-lock:before { + content: "\f023"; +} +.fontawesome-flag:before { + content: "\f024"; +} +.fontawesome-headphones:before { + content: "\f025"; +} +.fontawesome-volume-off:before { + content: "\f026"; +} +.fontawesome-volume-down:before { + content: "\f027"; +} +.fontawesome-volume-up:before { + content: "\f028"; +} +.fontawesome-qrcode:before { + content: "\f029"; +} +.fontawesome-barcode:before { + content: "\f02a"; +} +.fontawesome-tag:before { + content: "\f02b"; +} +.fontawesome-tags:before { + content: "\f02c"; +} +.fontawesome-book:before { + content: "\f02d"; +} +.fontawesome-bookmark:before { + content: "\f02e"; +} +.fontawesome-print:before { + content: "\f02f"; +} +.fontawesome-camera:before { + content: "\f030"; +} +.fontawesome-font:before { + content: "\f031"; +} +.fontawesome-bold:before { + content: "\f032"; +} +.fontawesome-italic:before { + content: "\f033"; +} +.fontawesome-text-height:before { + content: "\f034"; +} +.fontawesome-text-width:before { + content: "\f035"; +} +.fontawesome-align-left:before { + content: "\f036"; +} +.fontawesome-align-center:before { + content: "\f037"; +} +.fontawesome-align-right:before { + content: "\f038"; +} +.fontawesome-align-justify:before { + content: "\f039"; +} +.fontawesome-list:before { + content: "\f03a"; +} +.fontawesome-indent-left:before { + content: "\f03b"; +} +.fontawesome-indent-right:before { + content: "\f03c"; +} +.fontawesome-facetime-video:before { + content: "\f03d"; +} +.fontawesome-picture:before { + content: "\f03e"; +} +.fontawesome-pencil:before { + content: "\f040"; +} +.fontawesome-map-marker:before { + content: "\f041"; +} +.fontawesome-adjust:before { + content: "\f042"; +} +.fontawesome-tint:before { + content: "\f043"; +} +.fontawesome-edit:before { + content: "\f044"; +} +.fontawesome-share:before { + content: "\f045"; +} +.fontawesome-check:before { + content: "\f046"; +} +.fontawesome-move:before { + content: "\f047"; +} +.fontawesome-step-backward:before { + content: "\f048"; +} +.fontawesome-fast-backward:before { + content: "\f049"; +} +.fontawesome-backward:before { + content: "\f04a"; +} +.fontawesome-play:before { + content: "\f04b"; +} +.fontawesome-pause:before { + content: "\f04c"; +} +.fontawesome-stop:before { + content: "\f04d"; +} +.fontawesome-forward:before { + content: "\f04e"; +} +.fontawesome-fast-forward:before { + content: "\f050"; +} +.fontawesome-step-forward:before { + content: "\f051"; +} +.fontawesome-eject:before { + content: "\f052"; +} +.fontawesome-chevron-left:before { + content: "\f053"; +} +.fontawesome-chevron-right:before { + content: "\f054"; +} +.fontawesome-plus-sign:before { + content: "\f055"; +} +.fontawesome-minus-sign:before { + content: "\f056"; +} +.fontawesome-remove-sign:before { + content: "\f057"; +} +.fontawesome-ok-sign:before { + content: "\f058"; +} +.fontawesome-question-sign:before { + content: "\f059"; +} +.fontawesome-info-sign:before { + content: "\f05a"; +} +.fontawesome-screenshot:before { + content: "\f05b"; +} +.fontawesome-remove-circle:before { + content: "\f05c"; +} +.fontawesome-ok-circle:before { + content: "\f05d"; +} +.fontawesome-ban-circle:before { + content: "\f05e"; +} +.fontawesome-arrow-left:before { + content: "\f060"; +} +.fontawesome-arrow-right:before { + content: "\f061"; +} +.fontawesome-arrow-up:before { + content: "\f062"; +} +.fontawesome-arrow-down:before { + content: "\f063"; +} +.fontawesome-share-alt:before { + content: "\f064"; +} +.fontawesome-resize-full:before { + content: "\f065"; +} +.fontawesome-resize-small:before { + content: "\f066"; +} +.fontawesome-plus:before { + content: "\f067"; +} +.fontawesome-minus:before { + content: "\f068"; +} +.fontawesome-asterisk:before { + content: "\f069"; +} +.fontawesome-exclamation-sign:before { + content: "\f06a"; +} +.fontawesome-gift:before { + content: "\f06b"; +} +.fontawesome-leaf:before { + content: "\f06c"; +} +.fontawesome-fire:before { + content: "\f06d"; +} +.fontawesome-eye-open:before { + content: "\f06e"; +} +.fontawesome-eye-close:before { + content: "\f070"; +} +.fontawesome-warning-sign:before { + content: "\f071"; +} +.fontawesome-plane:before { + content: "\f072"; +} +.fontawesome-calendar:before { + content: "\f073"; +} +.fontawesome-random:before { + content: "\f074"; +} +.fontawesome-comment:before { + content: "\f075"; +} +.fontawesome-magnet:before { + content: "\f076"; +} +.fontawesome-chevron-up:before { + content: "\f077"; +} +.fontawesome-chevron-down:before { + content: "\f078"; +} +.fontawesome-retweet:before { + content: "\f079"; +} +.fontawesome-shopping-cart:before { + content: "\f07a"; +} +.fontawesome-folder-close:before { + content: "\f07b"; +} +.fontawesome-folder-open:before { + content: "\f07c"; +} +.fontawesome-resize-vertical:before { + content: "\f07d"; +} +.fontawesome-resize-horizontal:before { + content: "\f07e"; +} +.fontawesome-bar-chart:before { + content: "\f080"; +} +.fontawesome-twitter-sign:before { + content: "\f081"; +} +.fontawesome-facebook-sign:before { + content: "\f082"; +} +.fontawesome-camera-retro:before { + content: "\f083"; +} +.fontawesome-key:before { + content: "\f084"; +} +.fontawesome-cogs:before { + content: "\f085"; +} +.fontawesome-comments:before { + content: "\f086"; +} +.fontawesome-thumbs-up:before { + content: "\f087"; +} +.fontawesome-thumbs-down:before { + content: "\f088"; +} +.fontawesome-star-half:before { + content: "\f089"; +} +.fontawesome-heart-empty:before { + content: "\f08a"; +} +.fontawesome-signout:before { + content: "\f08b"; +} +.fontawesome-linkedin-sign:before { + content: "\f08c"; +} +.fontawesome-pushpin:before { + content: "\f08d"; +} +.fontawesome-external-link:before { + content: "\f08e"; +} +.fontawesome-signin:before { + content: "\f090"; +} +.fontawesome-trophy:before { + content: "\f091"; +} +.fontawesome-github-sign:before { + content: "\f092"; +} +.fontawesome-upload-alt:before { + content: "\f093"; +} +.fontawesome-lemon:before { + content: "\f094"; +} +.fontawesome-phone:before { + content: "\f095"; +} +.fontawesome-check-empty:before { + content: "\f096"; +} +.fontawesome-bookmark-empty:before { + content: "\f097"; +} +.fontawesome-phone-sign:before { + content: "\f098"; +} +.fontawesome-twitter:before { + content: "\f099"; +} +.fontawesome-facebook:before { + content: "\f09a"; +} +.fontawesome-github:before { + content: "\f09b"; +} +.fontawesome-unlock:before { + content: "\f09c"; +} +.fontawesome-credit-card:before { + content: "\f09d"; +} +.fontawesome-rss:before { + content: "\f09e"; +} +.fontawesome-hdd:before { + content: "\f0a0"; +} +.fontawesome-bullhorn:before { + content: "\f0a1"; +} +.fontawesome-bell:before { + content: "\f0a2"; +} +.fontawesome-certificate:before { + content: "\f0a3"; +} +.fontawesome-hand-right:before { + content: "\f0a4"; +} +.fontawesome-hand-left:before { + content: "\f0a5"; +} +.fontawesome-hand-up:before { + content: "\f0a6"; +} +.fontawesome-hand-down:before { + content: "\f0a7"; +} +.fontawesome-circle-arrow-left:before { + content: "\f0a8"; +} +.fontawesome-circle-arrow-right:before { + content: "\f0a9"; +} +.fontawesome-circle-arrow-up:before { + content: "\f0aa"; +} +.fontawesome-circle-arrow-down:before { + content: "\f0ab"; +} +.fontawesome-globe:before { + content: "\f0ac"; +} +.fontawesome-wrench:before { + content: "\f0ad"; +} +.fontawesome-tasks:before { + content: "\f0ae"; +} +.fontawesome-filter:before { + content: "\f0b0"; +} +.fontawesome-briefcase:before { + content: "\f0b1"; +} +.fontawesome-fullscreen:before { + content: "\f0b2"; +} +.fontawesome-group:before { + content: "\f0c0"; +} +.fontawesome-link:before { + content: "\f0c1"; +} +.fontawesome-cloud:before { + content: "\f0c2"; +} +.fontawesome-beaker:before { + content: "\f0c3"; +} +.fontawesome-cut:before { + content: "\f0c4"; +} +.fontawesome-copy:before { + content: "\f0c5"; +} +.fontawesome-paper-clip:before { + content: "\f0c6"; +} +.fontawesome-save:before { + content: "\f0c7"; +} +.fontawesome-sign-blank:before { + content: "\f0c8"; +} +.fontawesome-reorder:before { + content: "\f0c9"; +} +.fontawesome-list-ul:before { + content: "\f0ca"; +} +.fontawesome-list-ol:before { + content: "\f0cb"; +} +.fontawesome-strikethrough:before { + content: "\f0cc"; +} +.fontawesome-underline:before { + content: "\f0cd"; +} +.fontawesome-table:before { + content: "\f0ce"; +} +.fontawesome-magic:before { + content: "\f0d0"; +} +.fontawesome-truck:before { + content: "\f0d1"; +} +.fontawesome-pinterest:before { + content: "\f0d2"; +} +.fontawesome-pinterest-sign:before { + content: "\f0d3"; +} +.fontawesome-google-plus-sign:before { + content: "\f0d4"; +} +.fontawesome-google-plus:before { + content: "\f0d5"; +} +.fontawesome-money:before { + content: "\f0d6"; +} +.fontawesome-caret-down:before { + content: "\f0d7"; +} +.fontawesome-caret-up:before { + content: "\f0d8"; +} +.fontawesome-caret-left:before { + content: "\f0d9"; +} +.fontawesome-caret-right:before { + content: "\f0da"; +} +.fontawesome-columns:before { + content: "\f0db"; +} +.fontawesome-sort:before { + content: "\f0dc"; +} +.fontawesome-sort-down:before { + content: "\f0dd"; +} +.fontawesome-sort-up:before { + content: "\f0de"; +} +.fontawesome-envelope-alt:before { + content: "\f0e0"; +} +.fontawesome-linkedin:before { + content: "\f0e1"; +} +.fontawesome-undo:before { + content: "\f0e2"; +} +.fontawesome-legal:before { + content: "\f0e3"; +} +.fontawesome-dashboard:before { + content: "\f0e4"; +} +.fontawesome-comment-alt:before { + content: "\f0e5"; +} +.fontawesome-comments-alt:before { + content: "\f0e6"; +} +.fontawesome-bolt:before { + content: "\f0e7"; +} +.fontawesome-sitemap:before { + content: "\f0e8"; +} +.fontawesome-umbrella:before { + content: "\f0e9"; +} +.fontawesome-paste:before { + content: "\f0ea"; +} +.fontawesome-lightbulb:before { + content: "\f0eb"; +} +.fontawesome-exchange:before { + content: "\f0ec"; +} +.fontawesome-cloud-download:before { + content: "\f0ed"; +} +.fontawesome-cloud-upload:before { + content: "\f0ee"; +} +.fontawesome-user-md:before { + content: "\f0f0"; +} +.fontawesome-stethoscope:before { + content: "\f0f1"; +} +.fontawesome-suitcase:before { + content: "\f0f2"; +} +.fontawesome-bell-alt:before { + content: "\f0f3"; +} +.fontawesome-coffee:before { + content: "\f0f4"; +} +.fontawesome-food:before { + content: "\f0f5"; +} +.fontawesome-file-alt:before { + content: "\f0f6"; +} +.fontawesome-building:before { + content: "\f0f7"; +} +.fontawesome-hospital:before { + content: "\f0f8"; +} +.fontawesome-ambulance:before { + content: "\f0f9"; +} +.fontawesome-medkit:before { + content: "\f0fa"; +} +.fontawesome-fighter-jet:before { + content: "\f0fb"; +} +.fontawesome-beer:before { + content: "\f0fc"; +} +.fontawesome-h-sign:before { + content: "\f0fd"; +} +.fontawesome-plus-sign-alt:before { + content: "\f0fe"; +} +.fontawesome-double-angle-left:before { + content: "\f100"; +} +.fontawesome-double-angle-right:before { + content: "\f101"; +} +.fontawesome-double-angle-up:before { + content: "\f102"; +} +.fontawesome-double-angle-down:before { + content: "\f103"; +} +.fontawesome-angle-left:before { + content: "\f104"; +} +.fontawesome-angle-right:before { + content: "\f105"; +} +.fontawesome-angle-up:before { + content: "\f106"; +} +.fontawesome-angle-down:before { + content: "\f107"; +} +.fontawesome-desktop:before { + content: "\f108"; +} +.fontawesome-laptop:before { + content: "\f109"; +} +.fontawesome-tablet:before { + content: "\f10a"; +} +.fontawesome-mobile-phone:before { + content: "\f10b"; +} +.fontawesome-circle-blank:before { + content: "\f10c"; +} +.fontawesome-quote-left:before { + content: "\f10d"; +} +.fontawesome-quote-right:before { + content: "\f10e"; +} +.fontawesome-spinner:before { + content: "\f110"; +} +.fontawesome-circle:before { + content: "\f111"; +} +.fontawesome-reply:before { + content: "\f112"; +} +.fontawesome-github-alt:before { + content: "\f113"; +} +.fontawesome-folder-close-alt:before { + content: "\f114"; +} +.fontawesome-folder-open-alt:before { + content: "\f115"; +} +[class*="fontawesome-"]:before { + font-family: 'FontAwesome', sans-serif; +} +/* ------------------------------- */ +/* VARIABLES */ +/* ------------------------------- */ +/* BASIC */ +html { + width: 100%; + height: 100%; +} +body { + background: #EDEDED; + width: 100%; + height: auto; + font-family: 'Noto Sans', sans-serif; +} +div { + box-sizing: border-box; +} +.clearfix:before, +.clearfix:after { + content: ""; + display: table; +} +.clearfix:after { + clear: both; +} +.clearfix { + zoom: 1; +} +a, +a:visited { + text-decoration: none; + color: #3fabd3; +} +.center { + margin: 0 auto; +} +.center-text { + text-align: center; +} +.hide { + display: none; +} +.loading { + opacity: 0.4; +} +.error { + background: #ffe6e6 !important; +} +.float-left { + float: left; +} +.float-right { + float: right; +} +.title-case { + font-weight: bold; + text-transform: uppercase; + color: #000000; +} +input[type="text"] { + font-family: 'Noto Sans', sans-serif; + border: none; + box-shadow: none; + border-radius: 0; + outline: none; + box-sizing: border-box; +} +input[type="text"]:focus { + border: none; + box-shadow: none; + border-radius: 0; + outline: none; +} +textarea { + font-family: 'Noto Sans', sans-serif; + font-size: 16px; + border: none; + box-shadow: none; + border-radius: 0; + outline: none; + resize: none; + box-sizing: border-box; +} +textarea:focus { + border: none; + box-shadow: none; + border-radius: 0; + outline: none; +} +/* ------------------------------- */ +/* SEARCH */ +#search { + width: 800px; + height: 60px; + background: white; + box-shadow: 6px 6px rgba(0, 0, 0, 0.2); + margin: 40px auto; + border: 10px solid #e3e3e3; + box-sizing: content-box; +} +#add { + font-weight: bold; + height: 60px; + width: 60px; + text-align: center; + line-height: 60px; + background: #333333; + color: white; + font-size: 50px; + float: left; + cursor: pointer; + transition: all 0.2s; + -moz-transition: all 0.2s; + -webkit-transition: all 0.2s; +} +#add:hover { + background: #3fabd3; + -webkit-transform: rotate(-5deg) scale(1.1); + -moz-transform: rotate(-5deg) scale(1.1); + -ms-transform: rotate(-5deg) scale(1.1); + -o-transform: rotate(-5deg) scale(1.1); +} +#search input[type="text"] { + height: 60px; + width: 680px; + border: 0; + box-shadow: none; + padding: 20px; + box-sizing: border-box; + outline: none; + font-family: "Noto Sans", sans-serif; + font-size: 20px; + float: left; +} +#search input[type="text"]:focus { + box-shadow: none; + outline: none; +} +#search button[type="submit"] { + height: 60px; + width: 60px; + text-align: center; + line-height: 60px; + background: #333333; + color: white; + font-size: 30px; + float: right; + border: none; + cursor: pointer; + transition: all 0.2s; + -moz-transition: all 0.2s; + -webkit-transition: all 0.2s; +} +#search button[type="submit"]:hover { + box-shadow: none; + outline: none; + background: #0bb988; + -webkit-transform: rotate(-5deg) scale(1.1); + -moz-transform: rotate(-5deg) scale(1.1); + -ms-transform: rotate(-5deg) scale(1.1); + -o-transform: rotate(-5deg) scale(1.1); +} +/* ------------------------------- */ +/* LOADER */ +.loader { + display: none; + position: absolute; + z-index: 1000000000; + top: 50%; + left: 50%; + margin-top: -19px; + margin-left: -19px; + border: 17px solid; + border-color: #3fabd3 #24221f #24221f; + border-radius: 50%; + -webkit-animation: spin 1s linear infinite; + -moz-animation: spin 1s linear infinite; + -o-animation: spin 1s linear infinite; + animation: spin 1s linear infinite; +} +.loading .loader { + display: block; +} +@-webkit-keyframes spin { + 100% { + -webkit-transform: rotate(359deg); + } +} +@-moz-keyframes spin { + 100% { + -moz-transform: rotate(359deg); + } +} +@-o-keyframes spin { + 100% { + -moz-transform: rotate(359deg); + } +} +@keyframes spin { + 100% { + transform: rotate(359deg); + } +} +ul { + padding: 0; +} +.span3 li { + list-style-type: none; + width: 32%; + margin: 0 2% 2% 0; + box-sizing: border-box; +} +.span3 li:nth-child(3n + 3) { + margin: 0 0 2% 0; +} +.contact-base, +#profile > #contacts .contact { + position: relative; + font-size: 10px; + width: 32%; + height: 220px; + background: white; + margin: 0 2% 2% 0; + box-sizing: border-box; + box-shadow: 6px 6px rgba(0, 0, 0, 0.2); + list-style-type: none; + cursor: default; +} +.contact-base:nth-child(3n + 3), +#profile > #contacts .contact:nth-child(3n + 3) { + margin: 0 0 2% 0; +} +.contact-base .picture, +#profile > #contacts .contact .picture { + margin: 10px; + width: 92px; +} +.contact-base .picture img, +#profile > #contacts .contact .picture img { + width: 100%; + height: auto; +} +.contact-base .name, +#profile > #contacts .contact .name { + font-size: 18px; + margin: 10px 10px 0; +} +.contact-base .surname, +#profile > #contacts .contact .surname { + font-size: 14px; + margin: 0 10px 0; +} +.contact-base .company, +#profile > #contacts .contact .company { + margin: 2px 10px 0; + font-size: 12px; + color: #938b7f; +} +.contact-base .moreInfo, +#profile > #contacts .contact .moreInfo { + clear: both; + margin: 45px 10px 0; + color: #e2e2e2; +} +.contact-base:hover a, +.contact-base:hover a:visited, +#profile > #contacts .contact:hover a, +#profile > #contacts .contact:hover a:visited { + color: #3fabd3; +} +.contact-base:hover .moreInfo, +#profile > #contacts .contact:hover .moreInfo { + color: black; +} +.contact-base:hover .message, +#profile > #contacts .contact:hover .message { + background: #fffdcb; +} +.contact-base .recentInteractions, +.contact-base .newMessages, +.contact-base .updates, +#profile > #contacts .contact .recentInteractions, +#profile > #contacts .contact .newMessages, +#profile > #contacts .contact .updates { + font-size: 10px; + text-align: center; + width: 21px; + height: 21px; + line-height: 20px; + color: white; + margin: 8px 0 10px 10px; +} +.contact-base .lastInteraction, +#profile > #contacts .contact .lastInteraction { + text-align: center; + margin-bottom: 10px; +} +.contact-base .lastInteraction span, +#profile > #contacts .contact .lastInteraction span { + font-weight: bold; +} +.contact-base .message, +#profile > #contacts .contact .message { + font-style: italic; + padding: 7px 10px; + margin: 5px 0; + background: #f8f8f8; +} +.contact-base .nextStep, +#profile > #contacts .contact .nextStep { + position: absolute; + bottom: 10px; + right: 10px; + text-align: right; +} +.contact-base .newMessages, +#profile > #contacts .contact .newMessages { + background: #b80b5b; +} +.contact-base .recentInteractions, +#profile > #contacts .contact .recentInteractions { + background: #0bb988; +} +.contact-base .updates, +#profile > #contacts .contact .updates { + background: #3fabd3; +} +#profile { + position: relative; + width: 800px; + height: auto; + background: white; + box-shadow: 6px 6px rgba(0, 0, 0, 0.2); + padding: 30px; + box-sizing: border-box; + margin-bottom: 50px; +} +#profile > .basic .name { + font-size: 50px; + margin-top: -15px; +} +#profile > .basic .surname { + line-height: 30px; + font-size: 30px; +} +#profile > .basic .company { + line-height: 40px; + font-size: 16px; + color: #938b7f; +} +#profile > .notifications { + color: white; + cursor: pointer; + font-size: 20px; +} +#profile > .notifications div { + text-align: center; + width: 42px; + height: 42px; + line-height: 42px; + margin: 8px 10px 10px 0; +} +#profile > .notifications .newMessages { + background: #b80b5b; +} +#profile > .notifications .recentInteractions { + background: #0bb988; +} +#profile > .notifications .updates { + background: #3fabd3; +} +#profile > .moreInfo .lastInteraction { + clear: both; + text-align: center; + padding: 40px 0 20px; +} +#profile > .moreInfo .lastInteraction span { + font-weight: bold; +} +#profile > .moreInfo .message { + font-style: italic; + padding: 14px 20px; + margin: 5px 0; + background: #fffdcb; + color: #938b7f; + line-height: 1.8em; +} +#profile > .moreInfo .nextStep { + position: relative; + width: 120px; + margin: 30px auto; + text-align: center; + padding: 10px 14px; + background: #0bb988; + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; + -ms-transition: all 0.2s; + -o-transition: all 0.2s; +} +#profile > .moreInfo .nextStep:hover { + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + -ms-transform: scale(1.1); + -o-transform: scale(1.1); + background: #b80b5b; +} +#profile > .moreInfo .nextStep a { + color: white; +} +#profile > #details { + color: #938b7f; +} +#profile > #details .title { + background: #3fabd3; + padding: 7px 10px; + margin: 30px 0; + color: #ffffff; +} +#profile > #details .title-case { + margin: 0 0 5px; +} +#profile > #details .content { + margin: 0 0 20px; +} +#profile > #details ul { + padding: 0; +} +#profile > #details li { + height: 150px; + padding: 10px; + background: #f8f8f8; +} +#profile > #webid { + background: #f8f8f8; + margin: 20px 0; + padding: 10px; +} +#profile > #webid img { + width: 40px; + height: 40px; + margin-right: 10px; +} +#profile > #webid #webid-address { + color: #938b7f; + height: 40px; + line-height: 40px; + vertical-align: middle; +} +#profile > #contacts .title { + background: #3fabd3; + padding: 7px 10px; + margin: 30px 0; + color: #ffffff; +} +#profile > #contacts li img { + width: 100%; + height: auto; +} +#profile > #contacts .contact { + background: #f8f8f8; + box-shadow: none; +} +/* ------------------------------- */ +/* COLORS */ +/* ------------------------------- */ +/* MIXINS */ +/* ------------------------------- */ +/* FONTS */ +@charset "UTF-8"; +@font-face { + font-family: 'FontAwesome'; + font-style: normal; + font-weight: normal; + src: url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.eot'); + src: url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.eot?#iefix') format('eot'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.woff') format('woff'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.ttf') format('truetype'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.svg#FontAwesomeRegular') format('svg'); +} +.fontawesome-glass:before { + content: "\f000"; +} +.fontawesome-music:before { + content: "\f001"; +} +.fontawesome-search:before { + content: "\f002"; +} +.fontawesome-envelope:before { + content: "\f003"; +} +.fontawesome-heart:before { + content: "\f004"; +} +.fontawesome-star:before { + content: "\f005"; +} +.fontawesome-star-empty:before { + content: "\f006"; +} +.fontawesome-user:before { + content: "\f007"; +} +.fontawesome-film:before { + content: "\f008"; +} +.fontawesome-th-large:before { + content: "\f009"; +} +.fontawesome-th:before { + content: "\f00a"; +} +.fontawesome-th-list:before { + content: "\f00b"; +} +.fontawesome-ok:before { + content: "\f00c"; +} +.fontawesome-remove:before { + content: "\f00d"; +} +.fontawesome-zoom-in:before { + content: "\f00e"; +} +.fontawesome-zoom-out:before { + content: "\f010"; +} +.fontawesome-off:before { + content: "\f011"; +} +.fontawesome-signal:before { + content: "\f012"; +} +.fontawesome-cog:before { + content: "\f013"; +} +.fontawesome-trash:before { + content: "\f014"; +} +.fontawesome-home:before { + content: "\f015"; +} +.fontawesome-file:before { + content: "\f016"; +} +.fontawesome-time:before { + content: "\f017"; +} +.fontawesome-road:before { + content: "\f018"; +} +.fontawesome-download-alt:before { + content: "\f019"; +} +.fontawesome-download:before { + content: "\f01a"; +} +.fontawesome-upload:before { + content: "\f01b"; +} +.fontawesome-inbox:before { + content: "\f01c"; +} +.fontawesome-play-circle:before { + content: "\f01d"; +} +.fontawesome-repeat:before { + content: "\f01e"; +} +.fontawesome-refresh:before { + content: "\f021"; +} +.fontawesome-list-alt:before { + content: "\f022"; +} +.fontawesome-lock:before { + content: "\f023"; +} +.fontawesome-flag:before { + content: "\f024"; +} +.fontawesome-headphones:before { + content: "\f025"; +} +.fontawesome-volume-off:before { + content: "\f026"; +} +.fontawesome-volume-down:before { + content: "\f027"; +} +.fontawesome-volume-up:before { + content: "\f028"; +} +.fontawesome-qrcode:before { + content: "\f029"; +} +.fontawesome-barcode:before { + content: "\f02a"; +} +.fontawesome-tag:before { + content: "\f02b"; +} +.fontawesome-tags:before { + content: "\f02c"; +} +.fontawesome-book:before { + content: "\f02d"; +} +.fontawesome-bookmark:before { + content: "\f02e"; +} +.fontawesome-print:before { + content: "\f02f"; +} +.fontawesome-camera:before { + content: "\f030"; +} +.fontawesome-font:before { + content: "\f031"; +} +.fontawesome-bold:before { + content: "\f032"; +} +.fontawesome-italic:before { + content: "\f033"; +} +.fontawesome-text-height:before { + content: "\f034"; +} +.fontawesome-text-width:before { + content: "\f035"; +} +.fontawesome-align-left:before { + content: "\f036"; +} +.fontawesome-align-center:before { + content: "\f037"; +} +.fontawesome-align-right:before { + content: "\f038"; +} +.fontawesome-align-justify:before { + content: "\f039"; +} +.fontawesome-list:before { + content: "\f03a"; +} +.fontawesome-indent-left:before { + content: "\f03b"; +} +.fontawesome-indent-right:before { + content: "\f03c"; +} +.fontawesome-facetime-video:before { + content: "\f03d"; +} +.fontawesome-picture:before { + content: "\f03e"; +} +.fontawesome-pencil:before { + content: "\f040"; +} +.fontawesome-map-marker:before { + content: "\f041"; +} +.fontawesome-adjust:before { + content: "\f042"; +} +.fontawesome-tint:before { + content: "\f043"; +} +.fontawesome-edit:before { + content: "\f044"; +} +.fontawesome-share:before { + content: "\f045"; +} +.fontawesome-check:before { + content: "\f046"; +} +.fontawesome-move:before { + content: "\f047"; +} +.fontawesome-step-backward:before { + content: "\f048"; +} +.fontawesome-fast-backward:before { + content: "\f049"; +} +.fontawesome-backward:before { + content: "\f04a"; +} +.fontawesome-play:before { + content: "\f04b"; +} +.fontawesome-pause:before { + content: "\f04c"; +} +.fontawesome-stop:before { + content: "\f04d"; +} +.fontawesome-forward:before { + content: "\f04e"; +} +.fontawesome-fast-forward:before { + content: "\f050"; +} +.fontawesome-step-forward:before { + content: "\f051"; +} +.fontawesome-eject:before { + content: "\f052"; +} +.fontawesome-chevron-left:before { + content: "\f053"; +} +.fontawesome-chevron-right:before { + content: "\f054"; +} +.fontawesome-plus-sign:before { + content: "\f055"; +} +.fontawesome-minus-sign:before { + content: "\f056"; +} +.fontawesome-remove-sign:before { + content: "\f057"; +} +.fontawesome-ok-sign:before { + content: "\f058"; +} +.fontawesome-question-sign:before { + content: "\f059"; +} +.fontawesome-info-sign:before { + content: "\f05a"; +} +.fontawesome-screenshot:before { + content: "\f05b"; +} +.fontawesome-remove-circle:before { + content: "\f05c"; +} +.fontawesome-ok-circle:before { + content: "\f05d"; +} +.fontawesome-ban-circle:before { + content: "\f05e"; +} +.fontawesome-arrow-left:before { + content: "\f060"; +} +.fontawesome-arrow-right:before { + content: "\f061"; +} +.fontawesome-arrow-up:before { + content: "\f062"; +} +.fontawesome-arrow-down:before { + content: "\f063"; +} +.fontawesome-share-alt:before { + content: "\f064"; +} +.fontawesome-resize-full:before { + content: "\f065"; +} +.fontawesome-resize-small:before { + content: "\f066"; +} +.fontawesome-plus:before { + content: "\f067"; +} +.fontawesome-minus:before { + content: "\f068"; +} +.fontawesome-asterisk:before { + content: "\f069"; +} +.fontawesome-exclamation-sign:before { + content: "\f06a"; +} +.fontawesome-gift:before { + content: "\f06b"; +} +.fontawesome-leaf:before { + content: "\f06c"; +} +.fontawesome-fire:before { + content: "\f06d"; +} +.fontawesome-eye-open:before { + content: "\f06e"; +} +.fontawesome-eye-close:before { + content: "\f070"; +} +.fontawesome-warning-sign:before { + content: "\f071"; +} +.fontawesome-plane:before { + content: "\f072"; +} +.fontawesome-calendar:before { + content: "\f073"; +} +.fontawesome-random:before { + content: "\f074"; +} +.fontawesome-comment:before { + content: "\f075"; +} +.fontawesome-magnet:before { + content: "\f076"; +} +.fontawesome-chevron-up:before { + content: "\f077"; +} +.fontawesome-chevron-down:before { + content: "\f078"; +} +.fontawesome-retweet:before { + content: "\f079"; +} +.fontawesome-shopping-cart:before { + content: "\f07a"; +} +.fontawesome-folder-close:before { + content: "\f07b"; +} +.fontawesome-folder-open:before { + content: "\f07c"; +} +.fontawesome-resize-vertical:before { + content: "\f07d"; +} +.fontawesome-resize-horizontal:before { + content: "\f07e"; +} +.fontawesome-bar-chart:before { + content: "\f080"; +} +.fontawesome-twitter-sign:before { + content: "\f081"; +} +.fontawesome-facebook-sign:before { + content: "\f082"; +} +.fontawesome-camera-retro:before { + content: "\f083"; +} +.fontawesome-key:before { + content: "\f084"; +} +.fontawesome-cogs:before { + content: "\f085"; +} +.fontawesome-comments:before { + content: "\f086"; +} +.fontawesome-thumbs-up:before { + content: "\f087"; +} +.fontawesome-thumbs-down:before { + content: "\f088"; +} +.fontawesome-star-half:before { + content: "\f089"; +} +.fontawesome-heart-empty:before { + content: "\f08a"; +} +.fontawesome-signout:before { + content: "\f08b"; +} +.fontawesome-linkedin-sign:before { + content: "\f08c"; +} +.fontawesome-pushpin:before { + content: "\f08d"; +} +.fontawesome-external-link:before { + content: "\f08e"; +} +.fontawesome-signin:before { + content: "\f090"; +} +.fontawesome-trophy:before { + content: "\f091"; +} +.fontawesome-github-sign:before { + content: "\f092"; +} +.fontawesome-upload-alt:before { + content: "\f093"; +} +.fontawesome-lemon:before { + content: "\f094"; +} +.fontawesome-phone:before { + content: "\f095"; +} +.fontawesome-check-empty:before { + content: "\f096"; +} +.fontawesome-bookmark-empty:before { + content: "\f097"; +} +.fontawesome-phone-sign:before { + content: "\f098"; +} +.fontawesome-twitter:before { + content: "\f099"; +} +.fontawesome-facebook:before { + content: "\f09a"; +} +.fontawesome-github:before { + content: "\f09b"; +} +.fontawesome-unlock:before { + content: "\f09c"; +} +.fontawesome-credit-card:before { + content: "\f09d"; +} +.fontawesome-rss:before { + content: "\f09e"; +} +.fontawesome-hdd:before { + content: "\f0a0"; +} +.fontawesome-bullhorn:before { + content: "\f0a1"; +} +.fontawesome-bell:before { + content: "\f0a2"; +} +.fontawesome-certificate:before { + content: "\f0a3"; +} +.fontawesome-hand-right:before { + content: "\f0a4"; +} +.fontawesome-hand-left:before { + content: "\f0a5"; +} +.fontawesome-hand-up:before { + content: "\f0a6"; +} +.fontawesome-hand-down:before { + content: "\f0a7"; +} +.fontawesome-circle-arrow-left:before { + content: "\f0a8"; +} +.fontawesome-circle-arrow-right:before { + content: "\f0a9"; +} +.fontawesome-circle-arrow-up:before { + content: "\f0aa"; +} +.fontawesome-circle-arrow-down:before { + content: "\f0ab"; +} +.fontawesome-globe:before { + content: "\f0ac"; +} +.fontawesome-wrench:before { + content: "\f0ad"; +} +.fontawesome-tasks:before { + content: "\f0ae"; +} +.fontawesome-filter:before { + content: "\f0b0"; +} +.fontawesome-briefcase:before { + content: "\f0b1"; +} +.fontawesome-fullscreen:before { + content: "\f0b2"; +} +.fontawesome-group:before { + content: "\f0c0"; +} +.fontawesome-link:before { + content: "\f0c1"; +} +.fontawesome-cloud:before { + content: "\f0c2"; +} +.fontawesome-beaker:before { + content: "\f0c3"; +} +.fontawesome-cut:before { + content: "\f0c4"; +} +.fontawesome-copy:before { + content: "\f0c5"; +} +.fontawesome-paper-clip:before { + content: "\f0c6"; +} +.fontawesome-save:before { + content: "\f0c7"; +} +.fontawesome-sign-blank:before { + content: "\f0c8"; +} +.fontawesome-reorder:before { + content: "\f0c9"; +} +.fontawesome-list-ul:before { + content: "\f0ca"; +} +.fontawesome-list-ol:before { + content: "\f0cb"; +} +.fontawesome-strikethrough:before { + content: "\f0cc"; +} +.fontawesome-underline:before { + content: "\f0cd"; +} +.fontawesome-table:before { + content: "\f0ce"; +} +.fontawesome-magic:before { + content: "\f0d0"; +} +.fontawesome-truck:before { + content: "\f0d1"; +} +.fontawesome-pinterest:before { + content: "\f0d2"; +} +.fontawesome-pinterest-sign:before { + content: "\f0d3"; +} +.fontawesome-google-plus-sign:before { + content: "\f0d4"; +} +.fontawesome-google-plus:before { + content: "\f0d5"; +} +.fontawesome-money:before { + content: "\f0d6"; +} +.fontawesome-caret-down:before { + content: "\f0d7"; +} +.fontawesome-caret-up:before { + content: "\f0d8"; +} +.fontawesome-caret-left:before { + content: "\f0d9"; +} +.fontawesome-caret-right:before { + content: "\f0da"; +} +.fontawesome-columns:before { + content: "\f0db"; +} +.fontawesome-sort:before { + content: "\f0dc"; +} +.fontawesome-sort-down:before { + content: "\f0dd"; +} +.fontawesome-sort-up:before { + content: "\f0de"; +} +.fontawesome-envelope-alt:before { + content: "\f0e0"; +} +.fontawesome-linkedin:before { + content: "\f0e1"; +} +.fontawesome-undo:before { + content: "\f0e2"; +} +.fontawesome-legal:before { + content: "\f0e3"; +} +.fontawesome-dashboard:before { + content: "\f0e4"; +} +.fontawesome-comment-alt:before { + content: "\f0e5"; +} +.fontawesome-comments-alt:before { + content: "\f0e6"; +} +.fontawesome-bolt:before { + content: "\f0e7"; +} +.fontawesome-sitemap:before { + content: "\f0e8"; +} +.fontawesome-umbrella:before { + content: "\f0e9"; +} +.fontawesome-paste:before { + content: "\f0ea"; +} +.fontawesome-lightbulb:before { + content: "\f0eb"; +} +.fontawesome-exchange:before { + content: "\f0ec"; +} +.fontawesome-cloud-download:before { + content: "\f0ed"; +} +.fontawesome-cloud-upload:before { + content: "\f0ee"; +} +.fontawesome-user-md:before { + content: "\f0f0"; +} +.fontawesome-stethoscope:before { + content: "\f0f1"; +} +.fontawesome-suitcase:before { + content: "\f0f2"; +} +.fontawesome-bell-alt:before { + content: "\f0f3"; +} +.fontawesome-coffee:before { + content: "\f0f4"; +} +.fontawesome-food:before { + content: "\f0f5"; +} +.fontawesome-file-alt:before { + content: "\f0f6"; +} +.fontawesome-building:before { + content: "\f0f7"; +} +.fontawesome-hospital:before { + content: "\f0f8"; +} +.fontawesome-ambulance:before { + content: "\f0f9"; +} +.fontawesome-medkit:before { + content: "\f0fa"; +} +.fontawesome-fighter-jet:before { + content: "\f0fb"; +} +.fontawesome-beer:before { + content: "\f0fc"; +} +.fontawesome-h-sign:before { + content: "\f0fd"; +} +.fontawesome-plus-sign-alt:before { + content: "\f0fe"; +} +.fontawesome-double-angle-left:before { + content: "\f100"; +} +.fontawesome-double-angle-right:before { + content: "\f101"; +} +.fontawesome-double-angle-up:before { + content: "\f102"; +} +.fontawesome-double-angle-down:before { + content: "\f103"; +} +.fontawesome-angle-left:before { + content: "\f104"; +} +.fontawesome-angle-right:before { + content: "\f105"; +} +.fontawesome-angle-up:before { + content: "\f106"; +} +.fontawesome-angle-down:before { + content: "\f107"; +} +.fontawesome-desktop:before { + content: "\f108"; +} +.fontawesome-laptop:before { + content: "\f109"; +} +.fontawesome-tablet:before { + content: "\f10a"; +} +.fontawesome-mobile-phone:before { + content: "\f10b"; +} +.fontawesome-circle-blank:before { + content: "\f10c"; +} +.fontawesome-quote-left:before { + content: "\f10d"; +} +.fontawesome-quote-right:before { + content: "\f10e"; +} +.fontawesome-spinner:before { + content: "\f110"; +} +.fontawesome-circle:before { + content: "\f111"; +} +.fontawesome-reply:before { + content: "\f112"; +} +.fontawesome-github-alt:before { + content: "\f113"; +} +.fontawesome-folder-close-alt:before { + content: "\f114"; +} +.fontawesome-folder-open-alt:before { + content: "\f115"; +} +[class*="fontawesome-"]:before { + font-family: 'FontAwesome', sans-serif; +} +/* ------------------------------- */ +/* VARIABLES */ +/* ------------------------------- */ +/* BASIC */ +html { + width: 100%; + height: 100%; +} +body { + background: #EDEDED; + width: 100%; + height: auto; + font-family: 'Noto Sans', sans-serif; +} +div { + box-sizing: border-box; +} +.clearfix:before, +.clearfix:after { + content: ""; + display: table; +} +.clearfix:after { + clear: both; +} +.clearfix { + zoom: 1; +} +a, +a:visited { + text-decoration: none; + color: #3fabd3; +} +.center { + margin: 0 auto; +} +.center-text { + text-align: center; +} +.hide { + display: none; +} +.loading { + opacity: 0.4; +} +.error { + background: #ffe6e6 !important; +} +.float-left { + float: left; +} +.float-right { + float: right; +} +.title-case { + font-weight: bold; + text-transform: uppercase; + color: #000000; +} +input[type="text"] { + font-family: 'Noto Sans', sans-serif; + border: none; + box-shadow: none; + border-radius: 0; + outline: none; + box-sizing: border-box; +} +input[type="text"]:focus { + border: none; + box-shadow: none; + border-radius: 0; + outline: none; +} +textarea { + font-family: 'Noto Sans', sans-serif; + font-size: 16px; + border: none; + box-shadow: none; + border-radius: 0; + outline: none; + resize: none; + box-sizing: border-box; +} +textarea:focus { + border: none; + box-shadow: none; + border-radius: 0; + outline: none; +} +/* ------------------------------- */ +/* SEARCH */ +#search { + width: 800px; + height: 60px; + background: white; + box-shadow: 6px 6px rgba(0, 0, 0, 0.2); + margin: 40px auto; + border: 10px solid #e3e3e3; + box-sizing: content-box; +} +#add { + font-weight: bold; + height: 60px; + width: 60px; + text-align: center; + line-height: 60px; + background: #333333; + color: white; + font-size: 50px; + float: left; + cursor: pointer; + transition: all 0.2s; + -moz-transition: all 0.2s; + -webkit-transition: all 0.2s; +} +#add:hover { + background: #3fabd3; + -webkit-transform: rotate(-5deg) scale(1.1); + -moz-transform: rotate(-5deg) scale(1.1); + -ms-transform: rotate(-5deg) scale(1.1); + -o-transform: rotate(-5deg) scale(1.1); +} +#search input[type="text"] { + height: 60px; + width: 680px; + border: 0; + box-shadow: none; + padding: 20px; + box-sizing: border-box; + outline: none; + font-family: "Noto Sans", sans-serif; + font-size: 20px; + float: left; +} +#search input[type="text"]:focus { + box-shadow: none; + outline: none; +} +#search button[type="submit"] { + height: 60px; + width: 60px; + text-align: center; + line-height: 60px; + background: #333333; + color: white; + font-size: 30px; + float: right; + border: none; + cursor: pointer; + transition: all 0.2s; + -moz-transition: all 0.2s; + -webkit-transition: all 0.2s; +} +#search button[type="submit"]:hover { + box-shadow: none; + outline: none; + background: #0bb988; + -webkit-transform: rotate(-5deg) scale(1.1); + -moz-transform: rotate(-5deg) scale(1.1); + -ms-transform: rotate(-5deg) scale(1.1); + -o-transform: rotate(-5deg) scale(1.1); +} +/* ------------------------------- */ +/* LOADER */ +.loader { + display: none; + position: absolute; + z-index: 1000000000; + top: 50%; + left: 50%; + margin-top: -19px; + margin-left: -19px; + border: 17px solid; + border-color: #3fabd3 #24221f #24221f; + border-radius: 50%; + -webkit-animation: spin 1s linear infinite; + -moz-animation: spin 1s linear infinite; + -o-animation: spin 1s linear infinite; + animation: spin 1s linear infinite; +} +.loading .loader { + display: block; +} +@-webkit-keyframes spin { + 100% { + -webkit-transform: rotate(359deg); + } +} +@-moz-keyframes spin { + 100% { + -moz-transform: rotate(359deg); + } +} +@-o-keyframes spin { + 100% { + -moz-transform: rotate(359deg); + } +} +@keyframes spin { + 100% { + transform: rotate(359deg); + } +} +ul { + padding: 0; +} +.span3 li { + list-style-type: none; + width: 32%; + margin: 0 2% 2% 0; + box-sizing: border-box; +} +.span3 li:nth-child(3n + 3) { + margin: 0 0 2% 0; +} +.contact-base { + position: relative; + font-size: 10px; + width: 32%; + height: 220px; + background: white; + margin: 0 2% 2% 0; + box-sizing: border-box; + box-shadow: 6px 6px rgba(0, 0, 0, 0.2); + list-style-type: none; + cursor: default; +} +.contact-base:nth-child(3n + 3) { + margin: 0 0 2% 0; +} +.contact-base .picture { + margin: 10px; + width: 92px; +} +.contact-base .picture img { + width: 100%; + height: auto; +} +.contact-base .name { + font-size: 18px; + margin: 10px 10px 0; +} +.contact-base .surname { + font-size: 14px; + margin: 0 10px 0; +} +.contact-base .company { + margin: 2px 10px 0; + font-size: 12px; + color: #938b7f; +} +.contact-base .moreInfo { + clear: both; + margin: 45px 10px 0; + color: #e2e2e2; +} +.contact-base:hover a, +.contact-base:hover a:visited { + color: #3fabd3; +} +.contact-base:hover .moreInfo { + color: black; +} +.contact-base:hover .message { + background: #fffdcb; +} +.contact-base .recentInteractions, +.contact-base .newMessages, +.contact-base .updates { + font-size: 10px; + text-align: center; + width: 21px; + height: 21px; + line-height: 20px; + color: white; + margin: 8px 0 10px 10px; +} +.contact-base .lastInteraction { + text-align: center; + margin-bottom: 10px; +} +.contact-base .lastInteraction span { + font-weight: bold; +} +.contact-base .message { + font-style: italic; + padding: 7px 10px; + margin: 5px 0; + background: #f8f8f8; +} +.contact-base .nextStep { + position: absolute; + bottom: 10px; + right: 10px; + text-align: right; +} +.contact-base .newMessages { + background: #b80b5b; +} +.contact-base .recentInteractions { + background: #0bb988; +} +.contact-base .updates { + background: #3fabd3; +} +#conversation { + width: 800px; + padding: 0; +} +#title { + width: 800px; + background: #3fabd3; + padding: 10px; + color: white; + box-sizing: border-box; + margin-bottom: 30px; +} +.message { + position: relative; + list-style-type: none; + margin-bottom: 30px; + width: 800px; + height: auto; + background: white; + box-shadow: 6px 6px rgba(0, 0, 0, 0.2); + box-sizing: border-box; +} +.message.right { + text-align: right; +} +.message .author { + position: absolute; + top: 10px; + width: 100px; + height: 100px; + border-radius: 50px; + overflow: hidden; +} +.message .author.left { + left: 0; + margin-left: -130px; +} +.message .author.right { + right: 0; + margin-right: -130px; +} +.message .author img { + width: 100%; + height: auto; +} +.message .title { + padding: 30px; + font-size: 30px; +} +.message .summary { + width: 100%; + margin-top: 10px; + background: #fffdcb; + padding: 20px 30px; + box-sizing: border-box; +} +.message .content { + width: 100%; + padding: 20px 30px; + box-sizing: border-box; +} +.message #summary { + width: 100%; + margin-top: 10px; + background: #fffdcb; + padding: 20px 30px; + box-sizing: border-box; +} +.message #content { + width: 100%; + padding: 20px 30px; + box-sizing: border-box; +} +.message button[type="submit"] { + font-family: 'Noto Sans', sans-serif; + font-size: 16px; + text-transform: uppercase; + font-weight: bold; + color: white; + background: #0bb988; + border: none; + box-shadow: none; + border-radius: 0; + outline: none; + padding: 10px; + margin: 30px; + cursor: pointer; +} +/* ------------------------------- */ +/* COLORS */ +/* ------------------------------- */ +/* MIXINS */ +/* ------------------------------- */ +/* FONTS */ +@charset "UTF-8"; +@font-face { + font-family: 'FontAwesome'; + font-style: normal; + font-weight: normal; + src: url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.eot'); + src: url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.eot?#iefix') format('eot'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.woff') format('woff'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.ttf') format('truetype'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.svg#FontAwesomeRegular') format('svg'); +} +.fontawesome-glass:before { + content: "\f000"; +} +.fontawesome-music:before { + content: "\f001"; +} +.fontawesome-search:before { + content: "\f002"; +} +.fontawesome-envelope:before { + content: "\f003"; +} +.fontawesome-heart:before { + content: "\f004"; +} +.fontawesome-star:before { + content: "\f005"; +} +.fontawesome-star-empty:before { + content: "\f006"; +} +.fontawesome-user:before { + content: "\f007"; +} +.fontawesome-film:before { + content: "\f008"; +} +.fontawesome-th-large:before { + content: "\f009"; +} +.fontawesome-th:before { + content: "\f00a"; +} +.fontawesome-th-list:before { + content: "\f00b"; +} +.fontawesome-ok:before { + content: "\f00c"; +} +.fontawesome-remove:before { + content: "\f00d"; +} +.fontawesome-zoom-in:before { + content: "\f00e"; +} +.fontawesome-zoom-out:before { + content: "\f010"; +} +.fontawesome-off:before { + content: "\f011"; +} +.fontawesome-signal:before { + content: "\f012"; +} +.fontawesome-cog:before { + content: "\f013"; +} +.fontawesome-trash:before { + content: "\f014"; +} +.fontawesome-home:before { + content: "\f015"; +} +.fontawesome-file:before { + content: "\f016"; +} +.fontawesome-time:before { + content: "\f017"; +} +.fontawesome-road:before { + content: "\f018"; +} +.fontawesome-download-alt:before { + content: "\f019"; +} +.fontawesome-download:before { + content: "\f01a"; +} +.fontawesome-upload:before { + content: "\f01b"; +} +.fontawesome-inbox:before { + content: "\f01c"; +} +.fontawesome-play-circle:before { + content: "\f01d"; +} +.fontawesome-repeat:before { + content: "\f01e"; +} +.fontawesome-refresh:before { + content: "\f021"; +} +.fontawesome-list-alt:before { + content: "\f022"; +} +.fontawesome-lock:before { + content: "\f023"; +} +.fontawesome-flag:before { + content: "\f024"; +} +.fontawesome-headphones:before { + content: "\f025"; +} +.fontawesome-volume-off:before { + content: "\f026"; +} +.fontawesome-volume-down:before { + content: "\f027"; +} +.fontawesome-volume-up:before { + content: "\f028"; +} +.fontawesome-qrcode:before { + content: "\f029"; +} +.fontawesome-barcode:before { + content: "\f02a"; +} +.fontawesome-tag:before { + content: "\f02b"; +} +.fontawesome-tags:before { + content: "\f02c"; +} +.fontawesome-book:before { + content: "\f02d"; +} +.fontawesome-bookmark:before { + content: "\f02e"; +} +.fontawesome-print:before { + content: "\f02f"; +} +.fontawesome-camera:before { + content: "\f030"; +} +.fontawesome-font:before { + content: "\f031"; +} +.fontawesome-bold:before { + content: "\f032"; +} +.fontawesome-italic:before { + content: "\f033"; +} +.fontawesome-text-height:before { + content: "\f034"; +} +.fontawesome-text-width:before { + content: "\f035"; +} +.fontawesome-align-left:before { + content: "\f036"; +} +.fontawesome-align-center:before { + content: "\f037"; +} +.fontawesome-align-right:before { + content: "\f038"; +} +.fontawesome-align-justify:before { + content: "\f039"; +} +.fontawesome-list:before { + content: "\f03a"; +} +.fontawesome-indent-left:before { + content: "\f03b"; +} +.fontawesome-indent-right:before { + content: "\f03c"; +} +.fontawesome-facetime-video:before { + content: "\f03d"; +} +.fontawesome-picture:before { + content: "\f03e"; +} +.fontawesome-pencil:before { + content: "\f040"; +} +.fontawesome-map-marker:before { + content: "\f041"; +} +.fontawesome-adjust:before { + content: "\f042"; +} +.fontawesome-tint:before { + content: "\f043"; +} +.fontawesome-edit:before { + content: "\f044"; +} +.fontawesome-share:before { + content: "\f045"; +} +.fontawesome-check:before { + content: "\f046"; +} +.fontawesome-move:before { + content: "\f047"; +} +.fontawesome-step-backward:before { + content: "\f048"; +} +.fontawesome-fast-backward:before { + content: "\f049"; +} +.fontawesome-backward:before { + content: "\f04a"; +} +.fontawesome-play:before { + content: "\f04b"; +} +.fontawesome-pause:before { + content: "\f04c"; +} +.fontawesome-stop:before { + content: "\f04d"; +} +.fontawesome-forward:before { + content: "\f04e"; +} +.fontawesome-fast-forward:before { + content: "\f050"; +} +.fontawesome-step-forward:before { + content: "\f051"; +} +.fontawesome-eject:before { + content: "\f052"; +} +.fontawesome-chevron-left:before { + content: "\f053"; +} +.fontawesome-chevron-right:before { + content: "\f054"; +} +.fontawesome-plus-sign:before { + content: "\f055"; +} +.fontawesome-minus-sign:before { + content: "\f056"; +} +.fontawesome-remove-sign:before { + content: "\f057"; +} +.fontawesome-ok-sign:before { + content: "\f058"; +} +.fontawesome-question-sign:before { + content: "\f059"; +} +.fontawesome-info-sign:before { + content: "\f05a"; +} +.fontawesome-screenshot:before { + content: "\f05b"; +} +.fontawesome-remove-circle:before { + content: "\f05c"; +} +.fontawesome-ok-circle:before { + content: "\f05d"; +} +.fontawesome-ban-circle:before { + content: "\f05e"; +} +.fontawesome-arrow-left:before { + content: "\f060"; +} +.fontawesome-arrow-right:before { + content: "\f061"; +} +.fontawesome-arrow-up:before { + content: "\f062"; +} +.fontawesome-arrow-down:before { + content: "\f063"; +} +.fontawesome-share-alt:before { + content: "\f064"; +} +.fontawesome-resize-full:before { + content: "\f065"; +} +.fontawesome-resize-small:before { + content: "\f066"; +} +.fontawesome-plus:before { + content: "\f067"; +} +.fontawesome-minus:before { + content: "\f068"; +} +.fontawesome-asterisk:before { + content: "\f069"; +} +.fontawesome-exclamation-sign:before { + content: "\f06a"; +} +.fontawesome-gift:before { + content: "\f06b"; +} +.fontawesome-leaf:before { + content: "\f06c"; +} +.fontawesome-fire:before { + content: "\f06d"; +} +.fontawesome-eye-open:before { + content: "\f06e"; +} +.fontawesome-eye-close:before { + content: "\f070"; +} +.fontawesome-warning-sign:before { + content: "\f071"; +} +.fontawesome-plane:before { + content: "\f072"; +} +.fontawesome-calendar:before { + content: "\f073"; +} +.fontawesome-random:before { + content: "\f074"; +} +.fontawesome-comment:before { + content: "\f075"; +} +.fontawesome-magnet:before { + content: "\f076"; +} +.fontawesome-chevron-up:before { + content: "\f077"; +} +.fontawesome-chevron-down:before { + content: "\f078"; +} +.fontawesome-retweet:before { + content: "\f079"; +} +.fontawesome-shopping-cart:before { + content: "\f07a"; +} +.fontawesome-folder-close:before { + content: "\f07b"; +} +.fontawesome-folder-open:before { + content: "\f07c"; +} +.fontawesome-resize-vertical:before { + content: "\f07d"; +} +.fontawesome-resize-horizontal:before { + content: "\f07e"; +} +.fontawesome-bar-chart:before { + content: "\f080"; +} +.fontawesome-twitter-sign:before { + content: "\f081"; +} +.fontawesome-facebook-sign:before { + content: "\f082"; +} +.fontawesome-camera-retro:before { + content: "\f083"; +} +.fontawesome-key:before { + content: "\f084"; +} +.fontawesome-cogs:before { + content: "\f085"; +} +.fontawesome-comments:before { + content: "\f086"; +} +.fontawesome-thumbs-up:before { + content: "\f087"; +} +.fontawesome-thumbs-down:before { + content: "\f088"; +} +.fontawesome-star-half:before { + content: "\f089"; +} +.fontawesome-heart-empty:before { + content: "\f08a"; +} +.fontawesome-signout:before { + content: "\f08b"; +} +.fontawesome-linkedin-sign:before { + content: "\f08c"; +} +.fontawesome-pushpin:before { + content: "\f08d"; +} +.fontawesome-external-link:before { + content: "\f08e"; +} +.fontawesome-signin:before { + content: "\f090"; +} +.fontawesome-trophy:before { + content: "\f091"; +} +.fontawesome-github-sign:before { + content: "\f092"; +} +.fontawesome-upload-alt:before { + content: "\f093"; +} +.fontawesome-lemon:before { + content: "\f094"; +} +.fontawesome-phone:before { + content: "\f095"; +} +.fontawesome-check-empty:before { + content: "\f096"; +} +.fontawesome-bookmark-empty:before { + content: "\f097"; +} +.fontawesome-phone-sign:before { + content: "\f098"; +} +.fontawesome-twitter:before { + content: "\f099"; +} +.fontawesome-facebook:before { + content: "\f09a"; +} +.fontawesome-github:before { + content: "\f09b"; +} +.fontawesome-unlock:before { + content: "\f09c"; +} +.fontawesome-credit-card:before { + content: "\f09d"; +} +.fontawesome-rss:before { + content: "\f09e"; +} +.fontawesome-hdd:before { + content: "\f0a0"; +} +.fontawesome-bullhorn:before { + content: "\f0a1"; +} +.fontawesome-bell:before { + content: "\f0a2"; +} +.fontawesome-certificate:before { + content: "\f0a3"; +} +.fontawesome-hand-right:before { + content: "\f0a4"; +} +.fontawesome-hand-left:before { + content: "\f0a5"; +} +.fontawesome-hand-up:before { + content: "\f0a6"; +} +.fontawesome-hand-down:before { + content: "\f0a7"; +} +.fontawesome-circle-arrow-left:before { + content: "\f0a8"; +} +.fontawesome-circle-arrow-right:before { + content: "\f0a9"; +} +.fontawesome-circle-arrow-up:before { + content: "\f0aa"; +} +.fontawesome-circle-arrow-down:before { + content: "\f0ab"; +} +.fontawesome-globe:before { + content: "\f0ac"; +} +.fontawesome-wrench:before { + content: "\f0ad"; +} +.fontawesome-tasks:before { + content: "\f0ae"; +} +.fontawesome-filter:before { + content: "\f0b0"; +} +.fontawesome-briefcase:before { + content: "\f0b1"; +} +.fontawesome-fullscreen:before { + content: "\f0b2"; +} +.fontawesome-group:before { + content: "\f0c0"; +} +.fontawesome-link:before { + content: "\f0c1"; +} +.fontawesome-cloud:before { + content: "\f0c2"; +} +.fontawesome-beaker:before { + content: "\f0c3"; +} +.fontawesome-cut:before { + content: "\f0c4"; +} +.fontawesome-copy:before { + content: "\f0c5"; +} +.fontawesome-paper-clip:before { + content: "\f0c6"; +} +.fontawesome-save:before { + content: "\f0c7"; +} +.fontawesome-sign-blank:before { + content: "\f0c8"; +} +.fontawesome-reorder:before { + content: "\f0c9"; +} +.fontawesome-list-ul:before { + content: "\f0ca"; +} +.fontawesome-list-ol:before { + content: "\f0cb"; +} +.fontawesome-strikethrough:before { + content: "\f0cc"; +} +.fontawesome-underline:before { + content: "\f0cd"; +} +.fontawesome-table:before { + content: "\f0ce"; +} +.fontawesome-magic:before { + content: "\f0d0"; +} +.fontawesome-truck:before { + content: "\f0d1"; +} +.fontawesome-pinterest:before { + content: "\f0d2"; +} +.fontawesome-pinterest-sign:before { + content: "\f0d3"; +} +.fontawesome-google-plus-sign:before { + content: "\f0d4"; +} +.fontawesome-google-plus:before { + content: "\f0d5"; +} +.fontawesome-money:before { + content: "\f0d6"; +} +.fontawesome-caret-down:before { + content: "\f0d7"; +} +.fontawesome-caret-up:before { + content: "\f0d8"; +} +.fontawesome-caret-left:before { + content: "\f0d9"; +} +.fontawesome-caret-right:before { + content: "\f0da"; +} +.fontawesome-columns:before { + content: "\f0db"; +} +.fontawesome-sort:before { + content: "\f0dc"; +} +.fontawesome-sort-down:before { + content: "\f0dd"; +} +.fontawesome-sort-up:before { + content: "\f0de"; +} +.fontawesome-envelope-alt:before { + content: "\f0e0"; +} +.fontawesome-linkedin:before { + content: "\f0e1"; +} +.fontawesome-undo:before { + content: "\f0e2"; +} +.fontawesome-legal:before { + content: "\f0e3"; +} +.fontawesome-dashboard:before { + content: "\f0e4"; +} +.fontawesome-comment-alt:before { + content: "\f0e5"; +} +.fontawesome-comments-alt:before { + content: "\f0e6"; +} +.fontawesome-bolt:before { + content: "\f0e7"; +} +.fontawesome-sitemap:before { + content: "\f0e8"; +} +.fontawesome-umbrella:before { + content: "\f0e9"; +} +.fontawesome-paste:before { + content: "\f0ea"; +} +.fontawesome-lightbulb:before { + content: "\f0eb"; +} +.fontawesome-exchange:before { + content: "\f0ec"; +} +.fontawesome-cloud-download:before { + content: "\f0ed"; +} +.fontawesome-cloud-upload:before { + content: "\f0ee"; +} +.fontawesome-user-md:before { + content: "\f0f0"; +} +.fontawesome-stethoscope:before { + content: "\f0f1"; +} +.fontawesome-suitcase:before { + content: "\f0f2"; +} +.fontawesome-bell-alt:before { + content: "\f0f3"; +} +.fontawesome-coffee:before { + content: "\f0f4"; +} +.fontawesome-food:before { + content: "\f0f5"; +} +.fontawesome-file-alt:before { + content: "\f0f6"; +} +.fontawesome-building:before { + content: "\f0f7"; +} +.fontawesome-hospital:before { + content: "\f0f8"; +} +.fontawesome-ambulance:before { + content: "\f0f9"; +} +.fontawesome-medkit:before { + content: "\f0fa"; +} +.fontawesome-fighter-jet:before { + content: "\f0fb"; +} +.fontawesome-beer:before { + content: "\f0fc"; +} +.fontawesome-h-sign:before { + content: "\f0fd"; +} +.fontawesome-plus-sign-alt:before { + content: "\f0fe"; +} +.fontawesome-double-angle-left:before { + content: "\f100"; +} +.fontawesome-double-angle-right:before { + content: "\f101"; +} +.fontawesome-double-angle-up:before { + content: "\f102"; +} +.fontawesome-double-angle-down:before { + content: "\f103"; +} +.fontawesome-angle-left:before { + content: "\f104"; +} +.fontawesome-angle-right:before { + content: "\f105"; +} +.fontawesome-angle-up:before { + content: "\f106"; +} +.fontawesome-angle-down:before { + content: "\f107"; +} +.fontawesome-desktop:before { + content: "\f108"; +} +.fontawesome-laptop:before { + content: "\f109"; +} +.fontawesome-tablet:before { + content: "\f10a"; +} +.fontawesome-mobile-phone:before { + content: "\f10b"; +} +.fontawesome-circle-blank:before { + content: "\f10c"; +} +.fontawesome-quote-left:before { + content: "\f10d"; +} +.fontawesome-quote-right:before { + content: "\f10e"; +} +.fontawesome-spinner:before { + content: "\f110"; +} +.fontawesome-circle:before { + content: "\f111"; +} +.fontawesome-reply:before { + content: "\f112"; +} +.fontawesome-github-alt:before { + content: "\f113"; +} +.fontawesome-folder-close-alt:before { + content: "\f114"; +} +.fontawesome-folder-open-alt:before { + content: "\f115"; +} +[class*="fontawesome-"]:before { + font-family: 'FontAwesome', sans-serif; +} +/* ------------------------------- */ +/* VARIABLES */ +/* ------------------------------- */ +/* BASIC */ +html { + width: 100%; + height: 100%; +} +body { + background: #EDEDED; + width: 100%; + height: auto; + font-family: 'Noto Sans', sans-serif; +} +div { + box-sizing: border-box; +} +.clearfix:before, +.clearfix:after { + content: ""; + display: table; +} +.clearfix:after { + clear: both; +} +.clearfix { + zoom: 1; +} +a, +a:visited { + text-decoration: none; + color: #3fabd3; +} +.center { + margin: 0 auto; +} +.center-text { + text-align: center; +} +.hide { + display: none; +} +.loading { + opacity: 0.4; +} +.error { + background: #ffe6e6 !important; +} +.float-left { + float: left; +} +.float-right { + float: right; +} +.title-case { + font-weight: bold; + text-transform: uppercase; + color: #000000; +} +input[type="text"] { + font-family: 'Noto Sans', sans-serif; + border: none; + box-shadow: none; + border-radius: 0; + outline: none; + box-sizing: border-box; +} +input[type="text"]:focus { + border: none; + box-shadow: none; + border-radius: 0; + outline: none; +} +textarea { + font-family: 'Noto Sans', sans-serif; + font-size: 16px; + border: none; + box-shadow: none; + border-radius: 0; + outline: none; + resize: none; + box-sizing: border-box; +} +textarea:focus { + border: none; + box-shadow: none; + border-radius: 0; + outline: none; +} +/* ------------------------------- */ +/* SEARCH */ +#search { + width: 800px; + height: 60px; + background: white; + box-shadow: 6px 6px rgba(0, 0, 0, 0.2); + margin: 40px auto; + border: 10px solid #e3e3e3; + box-sizing: content-box; +} +#add { + font-weight: bold; + height: 60px; + width: 60px; + text-align: center; + line-height: 60px; + background: #333333; + color: white; + font-size: 50px; + float: left; + cursor: pointer; + transition: all 0.2s; + -moz-transition: all 0.2s; + -webkit-transition: all 0.2s; +} +#add:hover { + background: #3fabd3; + -webkit-transform: rotate(-5deg) scale(1.1); + -moz-transform: rotate(-5deg) scale(1.1); + -ms-transform: rotate(-5deg) scale(1.1); + -o-transform: rotate(-5deg) scale(1.1); +} +#search input[type="text"] { + height: 60px; + width: 680px; + border: 0; + box-shadow: none; + padding: 20px; + box-sizing: border-box; + outline: none; + font-family: "Noto Sans", sans-serif; + font-size: 20px; + float: left; +} +#search input[type="text"]:focus { + box-shadow: none; + outline: none; +} +#search button[type="submit"] { + height: 60px; + width: 60px; + text-align: center; + line-height: 60px; + background: #333333; + color: white; + font-size: 30px; + float: right; + border: none; + cursor: pointer; + transition: all 0.2s; + -moz-transition: all 0.2s; + -webkit-transition: all 0.2s; +} +#search button[type="submit"]:hover { + box-shadow: none; + outline: none; + background: #0bb988; + -webkit-transform: rotate(-5deg) scale(1.1); + -moz-transform: rotate(-5deg) scale(1.1); + -ms-transform: rotate(-5deg) scale(1.1); + -o-transform: rotate(-5deg) scale(1.1); +} +/* ------------------------------- */ +/* LOADER */ +.loader { + display: none; + position: absolute; + z-index: 1000000000; + top: 50%; + left: 50%; + margin-top: -19px; + margin-left: -19px; + border: 17px solid; + border-color: #3fabd3 #24221f #24221f; + border-radius: 50%; + -webkit-animation: spin 1s linear infinite; + -moz-animation: spin 1s linear infinite; + -o-animation: spin 1s linear infinite; + animation: spin 1s linear infinite; +} +.loading .loader { + display: block; +} +@-webkit-keyframes spin { + 100% { + -webkit-transform: rotate(359deg); + } +} +@-moz-keyframes spin { + 100% { + -moz-transform: rotate(359deg); + } +} +@-o-keyframes spin { + 100% { + -moz-transform: rotate(359deg); + } +} +@keyframes spin { + 100% { + transform: rotate(359deg); + } +} +ul { + padding: 0; +} +.span3 li { + list-style-type: none; + width: 32%; + margin: 0 2% 2% 0; + box-sizing: border-box; +} +.span3 li:nth-child(3n + 3) { + margin: 0 0 2% 0; +} +.contact-base { + position: relative; + font-size: 10px; + width: 32%; + height: 220px; + background: white; + margin: 0 2% 2% 0; + box-sizing: border-box; + box-shadow: 6px 6px rgba(0, 0, 0, 0.2); + list-style-type: none; + cursor: default; +} +.contact-base:nth-child(3n + 3) { + margin: 0 0 2% 0; +} +.contact-base .picture { + margin: 10px; + width: 92px; +} +.contact-base .picture img { + width: 100%; + height: auto; +} +.contact-base .name { + font-size: 18px; + margin: 10px 10px 0; +} +.contact-base .surname { + font-size: 14px; + margin: 0 10px 0; +} +.contact-base .company { + margin: 2px 10px 0; + font-size: 12px; + color: #938b7f; +} +.contact-base .moreInfo { + clear: both; + margin: 45px 10px 0; + color: #e2e2e2; +} +.contact-base:hover a, +.contact-base:hover a:visited { + color: #3fabd3; +} +.contact-base:hover .moreInfo { + color: black; +} +.contact-base:hover .message { + background: #fffdcb; +} +.contact-base .recentInteractions, +.contact-base .newMessages, +.contact-base .updates { + font-size: 10px; + text-align: center; + width: 21px; + height: 21px; + line-height: 20px; + color: white; + margin: 8px 0 10px 10px; +} +.contact-base .lastInteraction { + text-align: center; + margin-bottom: 10px; +} +.contact-base .lastInteraction span { + font-weight: bold; +} +.contact-base .message { + font-style: italic; + padding: 7px 10px; + margin: 5px 0; + background: #f8f8f8; +} +.contact-base .nextStep { + position: absolute; + bottom: 10px; + right: 10px; + text-align: right; +} +.contact-base .newMessages { + background: #b80b5b; +} +.contact-base .recentInteractions { + background: #0bb988; +} +.contact-base .updates { + background: #3fabd3; +} diff --git a/app/img/webid.png b/app/img/webid.png new file mode 100644 index 0000000..6983444 Binary files /dev/null and b/app/img/webid.png differ diff --git a/app/index.html b/app/index.html index 0ac9b19..7402321 100644 --- a/app/index.html +++ b/app/index.html @@ -3,8 +3,7 @@ My AngularJS App - - +
diff --git a/app/js/app.js b/app/js/app.js index 6ed5c5d..5da26b8 100644 --- a/app/js/app.js +++ b/app/js/app.js @@ -16,6 +16,7 @@ angular.module('myApp', [ .config(['$routeProvider', function($routeProvider) { $routeProvider.when('/personProfile', {templateUrl: 'partials/personProfile.html', controller: 'PersonProfileCtrl'}); $routeProvider.when('/friendsView', {templateUrl: 'partials/friendsView.html', controller: 'PersonProfileCtrl'}); - $routeProvider.otherwise({redirectTo: '/friendsView'}); + $routeProvider.when('/profileView', {templateUrl: 'partials/profileView.html', controller: 'PersonProfileCtrl'}); + $routeProvider.otherwise({redirectTo: '/profileView'}); }]) ; diff --git a/app/partials/friendsView.html b/app/partials/friendsView.html index f4e78f2..ab75b90 100644 --- a/app/partials/friendsView.html +++ b/app/partials/friendsView.html @@ -10,19 +10,23 @@