/* light colors */ /* Font Smoothing */ .card h1, .card .h1, .card h2, .card .h2, .card h3, .card .h3, .card h4, .card .h4, .card h5, .card .h5, .card h6, .card .h6, .card p, .card .navbar, .card .brand, .card .btn, .card a, .card .td-name, .card td { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: "Playfair Display","Raleway","Helvetica Neue",Arial,sans-serif; } .card h1, .card .h1, .card h2, .card .h2, .card h3, .card .h3, .card h4, .card .h4 { font-weight: 400; margin: 30px 0 15px; } .card h1, .card .h1 { font-size: 52px; } .card h2, .card .h2 { font-size: 36px; } .card h3, .card .h3 { font-size: 28px; margin: 20px 0 10px; } .card h4, .card .h4 { font-size: 24px; line-height: 30px; } .card h5, .card .h5 { font-size: 18px; margin-bottom: 15px; } .card h6, .card .h6 { font-size: 14px; font-weight: 600; text-transform: uppercase; } .card p { font-size: 16px; line-height: 1.3; font-family: "Raleway","Helvetica","Arial", sans-serif; } .card .category, .card .label, .card .title-modern, .card .btn-modern, .card .price h4 { font-family: "Raleway","Helvetica","Arial", sans-serif; } .card h1 small, .card h2 small, .card h3 small, .card h4 small, .card h5 small, .card h6 small, .card .h1 small, .card .h2 small, .card .h3 small, .card .h4 small, .card .h5 small, .card .h6 small, .card h1 .small, .card h2 .small, .card h3 .small, .card h4 .small, .card h5 .small, .card h6 .small, .card .h1 .small, .card .h2 .small, .card .h3 .small, .card .h4 .small, .card .h5 .small, .card .h6 .small { color: #9A9A9A; font-weight: 300; line-height: 1.3; } .card h1 small, .card h2 small, .card h3 small, .card h1 .small, .card h2 .small, .card h3 .small { font-size: 60%; } .card .text-primary, .card .text-primary:hover { color: #1D62F0 !important; } .card .text-info, .card .text-info:hover { color: #109CFF !important; } .card .text-success, .card .text-success:hover { color: #0C9C14 !important; } .card .text-warning, .card .text-warning:hover { color: #ED8D00 !important; } .card .text-danger, .card .text-danger:hover { color: #EE2D20 !important; } /* General overwrite */ body { font-family: "Helvetica Neue","Open Sans",Arial,sans-serif; background-color: #cccccc; } a { color: #2CA8FF; } a:hover, a:focus { color: #109CFF; text-decoration: none; } a:focus, a:active, button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, select::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { outline: 0; } .ui-slider-handle:focus, .navbar-toggle { outline: 0 !important; } /* Animations */ .form-control, .input-group-addon, .tagsinput, .navbar, .navbar .alert { -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .tagsinput .tag, .tagsinput-remove-link, .filter, .btn-hover, [data-toggle="collapse"] i { -webkit-transition: all 150ms linear; -moz-transition: all 150ms linear; -o-transition: all 150ms linear; -ms-transition: all 150ms linear; transition: all 150ms linear; } .btn-morphing .fa, .btn-morphing .circle, .gsdk-collapse { -webkit-transition: all 370ms linear; -moz-transition: all 370ms linear; -o-transition: all 370ms linear; -ms-transition: all 370ms linear; transition: all 370ms linear; } .margin-top { margin-top: 50px; } .btn-center { text-align: center; } .btn { border-width: 1px; background-color: transparent; font-weight: 400; opacity: 0.8; filter: alpha(opacity=80); padding: 8px 16px; border-color: #888888; color: #888888; } .btn:hover, .btn:focus, .btn:active, .btn.active, .open > .btn.dropdown-toggle { background-color: transparent; color: #777777; border-color: #777777; } .btn.disabled, .btn.disabled:hover, .btn.disabled:focus, .btn.disabled.focus, .btn.disabled:active, .btn.disabled.active, .btn:disabled, .btn:disabled:hover, .btn:disabled:focus, .btn:disabled.focus, .btn:disabled:active, .btn:disabled.active, .btn[disabled], .btn[disabled]:hover, .btn[disabled]:focus, .btn[disabled].focus, .btn[disabled]:active, .btn[disabled].active, fieldset[disabled] .btn, fieldset[disabled] .btn:hover, fieldset[disabled] .btn:focus, fieldset[disabled] .btn.focus, fieldset[disabled] .btn:active, fieldset[disabled] .btn.active { background-color: transparent; border-color: #888888; } .btn.btn-fill { color: #FFFFFF; background-color: #888888; opacity: 1; filter: alpha(opacity=100); } .btn.btn-fill:hover, .btn.btn-fill:focus, .btn.btn-fill:active, .btn.btn-fill.active, .open > .btn.btn-fill.dropdown-toggle { background-color: #777777; color: #FFFFFF; } .btn.btn-fill .caret { border-top-color: #FFFFFF; } .btn .caret { border-top-color: #888888; } .btn:hover, .btn:focus { opacity: 1; filter: alpha(opacity=100); outline: 0 !important; } .btn:active, .btn.active, .open > .btn.dropdown-toggle { -webkit-box-shadow: none; box-shadow: none; outline: 0 !important; } .btn.btn-icon { padding: 8px; } .btn-primary { border-color: #3472F7; color: #3472F7; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .btn-primary.dropdown-toggle { background-color: transparent; color: #1D62F0; border-color: #1D62F0; } .btn-primary.disabled, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary.disabled:active, .btn-primary.disabled.active, .btn-primary:disabled, .btn-primary:disabled:hover, .btn-primary:disabled:focus, .btn-primary:disabled.focus, .btn-primary:disabled:active, .btn-primary:disabled.active, .btn-primary[disabled], .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled].focus, .btn-primary[disabled]:active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary:hover, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary.active { background-color: transparent; border-color: #3472F7; } .btn-primary.btn-fill { color: #FFFFFF; background-color: #3472F7; opacity: 1; filter: alpha(opacity=100); } .btn-primary.btn-fill:hover, .btn-primary.btn-fill:focus, .btn-primary.btn-fill:active, .btn-primary.btn-fill.active, .open > .btn-primary.btn-fill.dropdown-toggle { background-color: #1D62F0; color: #FFFFFF; } .btn-primary.btn-fill .caret { border-top-color: #FFFFFF; } .btn-primary .caret { border-top-color: #3472F7; } .btn-success { border-color: #05AE0E; color: #05AE0E; } .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open > .btn-success.dropdown-toggle { background-color: transparent; color: #049F0C; border-color: #049F0C; } .btn-success.disabled, .btn-success.disabled:hover, .btn-success.disabled:focus, .btn-success.disabled.focus, .btn-success.disabled:active, .btn-success.disabled.active, .btn-success:disabled, .btn-success:disabled:hover, .btn-success:disabled:focus, .btn-success:disabled.focus, .btn-success:disabled:active, .btn-success:disabled.active, .btn-success[disabled], .btn-success[disabled]:hover, .btn-success[disabled]:focus, .btn-success[disabled].focus, .btn-success[disabled]:active, .btn-success[disabled].active, fieldset[disabled] .btn-success, fieldset[disabled] .btn-success:hover, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success.focus, fieldset[disabled] .btn-success:active, fieldset[disabled] .btn-success.active { background-color: transparent; border-color: #05AE0E; } .btn-success.btn-fill { color: #FFFFFF; background-color: #05AE0E; opacity: 1; filter: alpha(opacity=100); } .btn-success.btn-fill:hover, .btn-success.btn-fill:focus, .btn-success.btn-fill:active, .btn-success.btn-fill.active, .open > .btn-success.btn-fill.dropdown-toggle { background-color: #049F0C; color: #FFFFFF; } .btn-success.btn-fill .caret { border-top-color: #FFFFFF; } .btn-success .caret { border-top-color: #05AE0E; } .btn-info { border-color: #2CA8FF; color: #2CA8FF; } .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open > .btn-info.dropdown-toggle { background-color: transparent; color: #109CFF; border-color: #109CFF; } .btn-info.disabled, .btn-info.disabled:hover, .btn-info.disabled:focus, .btn-info.disabled.focus, .btn-info.disabled:active, .btn-info.disabled.active, .btn-info:disabled, .btn-info:disabled:hover, .btn-info:disabled:focus, .btn-info:disabled.focus, .btn-info:disabled:active, .btn-info:disabled.active, .btn-info[disabled], .btn-info[disabled]:hover, .btn-info[disabled]:focus, .btn-info[disabled].focus, .btn-info[disabled]:active, .btn-info[disabled].active, fieldset[disabled] .btn-info, fieldset[disabled] .btn-info:hover, fieldset[disabled] .btn-info:focus, fieldset[disabled] .btn-info.focus, fieldset[disabled] .btn-info:active, fieldset[disabled] .btn-info.active { background-color: transparent; border-color: #2CA8FF; } .btn-info.btn-fill { color: #FFFFFF; background-color: #2CA8FF; opacity: 1; filter: alpha(opacity=100); } .btn-info.btn-fill:hover, .btn-info.btn-fill:focus, .btn-info.btn-fill:active, .btn-info.btn-fill.active, .open > .btn-info.btn-fill.dropdown-toggle { background-color: #109CFF; color: #FFFFFF; } .btn-info.btn-fill .caret { border-top-color: #FFFFFF; } .btn-info .caret { border-top-color: #2CA8FF; } .btn-warning { border-color: #FF9500; color: #FF9500; } .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open > .btn-warning.dropdown-toggle { background-color: transparent; color: #ED8D00; border-color: #ED8D00; } .btn-warning.disabled, .btn-warning.disabled:hover, .btn-warning.disabled:focus, .btn-warning.disabled.focus, .btn-warning.disabled:active, .btn-warning.disabled.active, .btn-warning:disabled, .btn-warning:disabled:hover, .btn-warning:disabled:focus, .btn-warning:disabled.focus, .btn-warning:disabled:active, .btn-warning:disabled.active, .btn-warning[disabled], .btn-warning[disabled]:hover, .btn-warning[disabled]:focus, .btn-warning[disabled].focus, .btn-warning[disabled]:active, .btn-warning[disabled].active, fieldset[disabled] .btn-warning, fieldset[disabled] .btn-warning:hover, fieldset[disabled] .btn-warning:focus, fieldset[disabled] .btn-warning.focus, fieldset[disabled] .btn-warning:active, fieldset[disabled] .btn-warning.active { background-color: transparent; border-color: #FF9500; } .btn-warning.btn-fill { color: #FFFFFF; background-color: #FF9500; opacity: 1; filter: alpha(opacity=100); } .btn-warning.btn-fill:hover, .btn-warning.btn-fill:focus, .btn-warning.btn-fill:active, .btn-warning.btn-fill.active, .open > .btn-warning.btn-fill.dropdown-toggle { background-color: #ED8D00; color: #FFFFFF; } .btn-warning.btn-fill .caret { border-top-color: #FFFFFF; } .btn-warning .caret { border-top-color: #FF9500; } .btn-danger { border-color: #FF3B30; color: #FF3B30; } .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .btn-danger.dropdown-toggle { background-color: transparent; color: #EE2D20; border-color: #EE2D20; } .btn-danger.disabled, .btn-danger.disabled:hover, .btn-danger.disabled:focus, .btn-danger.disabled.focus, .btn-danger.disabled:active, .btn-danger.disabled.active, .btn-danger:disabled, .btn-danger:disabled:hover, .btn-danger:disabled:focus, .btn-danger:disabled.focus, .btn-danger:disabled:active, .btn-danger:disabled.active, .btn-danger[disabled], .btn-danger[disabled]:hover, .btn-danger[disabled]:focus, .btn-danger[disabled].focus, .btn-danger[disabled]:active, .btn-danger[disabled].active, fieldset[disabled] .btn-danger, fieldset[disabled] .btn-danger:hover, fieldset[disabled] .btn-danger:focus, fieldset[disabled] .btn-danger.focus, fieldset[disabled] .btn-danger:active, fieldset[disabled] .btn-danger.active { background-color: transparent; border-color: #FF3B30; } .btn-danger.btn-fill { color: #FFFFFF; background-color: #FF3B30; opacity: 1; filter: alpha(opacity=100); } .btn-danger.btn-fill:hover, .btn-danger.btn-fill:focus, .btn-danger.btn-fill:active, .btn-danger.btn-fill.active, .open > .btn-danger.btn-fill.dropdown-toggle { background-color: #EE2D20; color: #FFFFFF; } .btn-danger.btn-fill .caret { border-top-color: #FFFFFF; } .btn-danger .caret { border-top-color: #FF3B30; } .btn-neutral { border-color: #FFFFFF; color: #FFFFFF; } .btn-neutral:hover, .btn-neutral:focus, .btn-neutral:active, .btn-neutral.active, .open > .btn-neutral.dropdown-toggle { background-color: transparent; color: #FFFFFF; border-color: #FFFFFF; } .btn-neutral.disabled, .btn-neutral.disabled:hover, .btn-neutral.disabled:focus, .btn-neutral.disabled.focus, .btn-neutral.disabled:active, .btn-neutral.disabled.active, .btn-neutral:disabled, .btn-neutral:disabled:hover, .btn-neutral:disabled:focus, .btn-neutral:disabled.focus, .btn-neutral:disabled:active, .btn-neutral:disabled.active, .btn-neutral[disabled], .btn-neutral[disabled]:hover, .btn-neutral[disabled]:focus, .btn-neutral[disabled].focus, .btn-neutral[disabled]:active, .btn-neutral[disabled].active, fieldset[disabled] .btn-neutral, fieldset[disabled] .btn-neutral:hover, fieldset[disabled] .btn-neutral:focus, fieldset[disabled] .btn-neutral.focus, fieldset[disabled] .btn-neutral:active, fieldset[disabled] .btn-neutral.active { background-color: transparent; border-color: #FFFFFF; } .btn-neutral.btn-fill { color: #FFFFFF; background-color: #FFFFFF; opacity: 1; filter: alpha(opacity=100); } .btn-neutral.btn-fill:hover, .btn-neutral.btn-fill:focus, .btn-neutral.btn-fill:active, .btn-neutral.btn-fill.active, .open > .btn-neutral.btn-fill.dropdown-toggle { background-color: #FFFFFF; color: #FFFFFF; } .btn-neutral.btn-fill .caret { border-top-color: #FFFFFF; } .btn-neutral .caret { border-top-color: #FFFFFF; } .btn-neutral:active, .btn-neutral.active, .open > .btn-neutral.dropdown-toggle { background-color: #FFFFFF; color: #888888; } .btn-neutral.btn-fill, .btn-neutral.btn-fill:hover, .btn-neutral.btn-fill:focus { color: #888888; } .btn-neutral.btn-simple:active, .btn-neutral.btn-simple.active { background-color: transparent; } .btn:disabled, .btn[disabled], .btn.disabled { opacity: 0.5; filter: alpha(opacity=50); } .btn-round { border-width: 1px; border-radius: 30px !important; padding: 9px 18px; } .btn-round.btn-icon { padding: 9px; } .btn-simple { border: 0; font-size: 16px; padding: 8px 16px; } .btn-simple.btn-icon { padding: 8px; } .btn-lg { font-size: 18px; border-radius: 6px; padding: 14px 30px; font-weight: 400; } .btn-lg.btn-round { padding: 15px 30px; } .btn-lg.btn-simple { padding: 16px 30px; } .btn-sm { font-size: 12px; border-radius: 6px; padding: 5px 10px; } .btn-sm.btn-round { padding: 6px 10px; } .btn-sm.btn-simple { padding: 7px 10px; } .btn-xs { font-size: 12px; border-radius: 6px; padding: 1px 5px; } .btn-xs.btn-round { padding: 2px 5px; } .btn-xs.btn-simple { padding: 3px 5px; } .btn-wd { min-width: 140px; } .btn-group.select { width: 100%; } .btn-group.select .btn { text-align: left; } .btn-group.select .caret { position: absolute; top: 50%; margin-top: -1px; right: 8px; } /* Labels & Progress-bar */ .label { padding: 10px 13px; border-radius: 2px; font-weight: 500; font-size: 11px; text-transform: uppercase; display: inline-block; } .label-primary { background-color: #3472F7; } .label-info { background-color: #2CA8FF; } .label-success { background-color: #05AE0E; } .label-warning { background-color: #FF9500; } .label-danger { background-color: #FF3B30; } .section { padding: 30px 0; position: relative; background-color: #FFFFFF; } .section-gray { background-color: #EEEEEE; } .section-white { background-color: #FFFFFF; } .btn-social { opacity: 0.93; padding: 8px 9px; } .btn-social .fa { font-size: 18px; vertical-align: middle; display: inline-block; } .btn-social.btn-round { padding: 9px 10px; } .btn-social.btn-simple { padding: 9px 5px; font-size: 16px; } .btn-social.btn-simple .fa { font-size: 20px; position: relative; top: -2px; width: 24px; } .btn-facebook { border-color: #3b5998; color: #3b5998; } .btn-facebook:hover, .btn-facebook:focus, .btn-facebook:active, .btn-facebook.active, .open > .btn-facebook.dropdown-toggle { background-color: transparent; color: #3b5998; border-color: #3b5998; opacity: 1; } .btn-facebook:disabled, .btn-facebook[disabled], .btn-facebook.disabled { background-color: transparent; border-color: #3b5998; } .btn-facebook.btn-fill { color: #FFFFFF; background-color: #3b5998; opacity: 0.9; } .btn-facebook.btn-fill:hover, .btn-facebook.btn-fill:focus, .btn-facebook.btn-fill:active, .btn-facebook.btn-fill.active, .open > .btn-facebook.btn-fill.dropdown-toggle { background-color: #3b5998; color: #FFFFFF; opacity: 1; } .btn-twitter { border-color: #55acee; color: #55acee; } .btn-twitter:hover, .btn-twitter:focus, .btn-twitter:active, .btn-twitter.active, .open > .btn-twitter.dropdown-toggle { background-color: transparent; color: #55acee; border-color: #55acee; opacity: 1; } .btn-twitter:disabled, .btn-twitter[disabled], .btn-twitter.disabled { background-color: transparent; border-color: #55acee; } .btn-twitter.btn-fill { color: #FFFFFF; background-color: #55acee; opacity: 0.9; } .btn-twitter.btn-fill:hover, .btn-twitter.btn-fill:focus, .btn-twitter.btn-fill:active, .btn-twitter.btn-fill.active, .open > .btn-twitter.btn-fill.dropdown-toggle { background-color: #55acee; color: #FFFFFF; opacity: 1; } .btn-pinterest { border-color: #cc2127; color: #cc2127; } .btn-pinterest:hover, .btn-pinterest:focus, .btn-pinterest:active, .btn-pinterest.active, .open > .btn-pinterest.dropdown-toggle { background-color: transparent; color: #cc2127; border-color: #cc2127; opacity: 1; } .btn-pinterest:disabled, .btn-pinterest[disabled], .btn-pinterest.disabled { background-color: transparent; border-color: #cc2127; } .btn-pinterest.btn-fill { color: #FFFFFF; background-color: #cc2127; opacity: 0.9; } .btn-pinterest.btn-fill:hover, .btn-pinterest.btn-fill:focus, .btn-pinterest.btn-fill:active, .btn-pinterest.btn-fill.active, .open > .btn-pinterest.btn-fill.dropdown-toggle { background-color: #cc2127; color: #FFFFFF; opacity: 1; } .btn-google { border-color: #dd4b39; color: #dd4b39; } .btn-google:hover, .btn-google:focus, .btn-google:active, .btn-google.active, .open > .btn-google.dropdown-toggle { background-color: transparent; color: #dd4b39; border-color: #dd4b39; opacity: 1; } .btn-google:disabled, .btn-google[disabled], .btn-google.disabled { background-color: transparent; border-color: #dd4b39; } .btn-google.btn-fill { color: #FFFFFF; background-color: #dd4b39; opacity: 0.9; } .btn-google.btn-fill:hover, .btn-google.btn-fill:focus, .btn-google.btn-fill:active, .btn-google.btn-fill.active, .open > .btn-google.btn-fill.dropdown-toggle { background-color: #dd4b39; color: #FFFFFF; opacity: 1; } .btn-linkedin { border-color: #0976b4; color: #0976b4; } .btn-linkedin:hover, .btn-linkedin:focus, .btn-linkedin:active, .btn-linkedin.active, .open > .btn-linkedin.dropdown-toggle { background-color: transparent; color: #0976b4; border-color: #0976b4; opacity: 1; } .btn-linkedin:disabled, .btn-linkedin[disabled], .btn-linkedin.disabled { background-color: transparent; border-color: #0976b4; } .btn-linkedin.btn-fill { color: #FFFFFF; background-color: #0976b4; opacity: 0.9; } .btn-linkedin.btn-fill:hover, .btn-linkedin.btn-fill:focus, .btn-linkedin.btn-fill:active, .btn-linkedin.btn-fill.active, .open > .btn-linkedin.btn-fill.dropdown-toggle { background-color: #0976b4; color: #FFFFFF; opacity: 1; } .btn-dribbble { border-color: #ea4c89; color: #ea4c89; } .btn-dribbble:hover, .btn-dribbble:focus, .btn-dribbble:active, .btn-dribbble.active, .open > .btn-dribbble.dropdown-toggle { background-color: transparent; color: #ea4c89; border-color: #ea4c89; opacity: 1; } .btn-dribbble:disabled, .btn-dribbble[disabled], .btn-dribbble.disabled { background-color: transparent; border-color: #ea4c89; } .btn-dribbble.btn-fill { color: #FFFFFF; background-color: #ea4c89; opacity: 0.9; } .btn-dribbble.btn-fill:hover, .btn-dribbble.btn-fill:focus, .btn-dribbble.btn-fill:active, .btn-dribbble.btn-fill.active, .open > .btn-dribbble.btn-fill.dropdown-toggle { background-color: #ea4c89; color: #FFFFFF; opacity: 1; } .btn-github { border-color: #333333; color: #333333; } .btn-github:hover, .btn-github:focus, .btn-github:active, .btn-github.active, .open > .btn-github.dropdown-toggle { background-color: transparent; color: #333333; border-color: #333333; opacity: 1; } .btn-github:disabled, .btn-github[disabled], .btn-github.disabled { background-color: transparent; border-color: #333333; } .btn-github.btn-fill { color: #FFFFFF; background-color: #333333; opacity: 0.9; } .btn-github.btn-fill:hover, .btn-github.btn-fill:focus, .btn-github.btn-fill:active, .btn-github.btn-fill.active, .open > .btn-github.btn-fill.dropdown-toggle { background-color: #333333; color: #FFFFFF; opacity: 1; } .btn-youtube { border-color: #e52d27; color: #e52d27; } .btn-youtube:hover, .btn-youtube:focus, .btn-youtube:active, .btn-youtube.active, .open > .btn-youtube.dropdown-toggle { background-color: transparent; color: #e52d27; border-color: #e52d27; opacity: 1; } .btn-youtube:disabled, .btn-youtube[disabled], .btn-youtube.disabled { background-color: transparent; border-color: #e52d27; } .btn-youtube.btn-fill { color: #FFFFFF; background-color: #e52d27; opacity: 0.9; } .btn-youtube.btn-fill:hover, .btn-youtube.btn-fill:focus, .btn-youtube.btn-fill:active, .btn-youtube.btn-fill.active, .open > .btn-youtube.btn-fill.dropdown-toggle { background-color: #e52d27; color: #FFFFFF; opacity: 1; } .btn-stumbleupon { border-color: #eb4924; color: #eb4924; } .btn-stumbleupon:hover, .btn-stumbleupon:focus, .btn-stumbleupon:active, .btn-stumbleupon.active, .open > .btn-stumbleupon.dropdown-toggle { background-color: transparent; color: #eb4924; border-color: #eb4924; opacity: 1; } .btn-stumbleupon:disabled, .btn-stumbleupon[disabled], .btn-stumbleupon.disabled { background-color: transparent; border-color: #eb4924; } .btn-stumbleupon.btn-fill { color: #FFFFFF; background-color: #eb4924; opacity: 0.9; } .btn-stumbleupon.btn-fill:hover, .btn-stumbleupon.btn-fill:focus, .btn-stumbleupon.btn-fill:active, .btn-stumbleupon.btn-fill.active, .open > .btn-stumbleupon.btn-fill.dropdown-toggle { background-color: #eb4924; color: #FFFFFF; opacity: 1; } .btn-reddit { border-color: #ff4500; color: #ff4500; } .btn-reddit:hover, .btn-reddit:focus, .btn-reddit:active, .btn-reddit.active, .open > .btn-reddit.dropdown-toggle { background-color: transparent; color: #ff4500; border-color: #ff4500; opacity: 1; } .btn-reddit:disabled, .btn-reddit[disabled], .btn-reddit.disabled { background-color: transparent; border-color: #ff4500; } .btn-reddit.btn-fill { color: #FFFFFF; background-color: #ff4500; opacity: 0.9; } .btn-reddit.btn-fill:hover, .btn-reddit.btn-fill:focus, .btn-reddit.btn-fill:active, .btn-reddit.btn-fill.active, .open > .btn-reddit.btn-fill.dropdown-toggle { background-color: #ff4500; color: #FFFFFF; opacity: 1; } .btn-tumblr { border-color: #35465c; color: #35465c; } .btn-tumblr:hover, .btn-tumblr:focus, .btn-tumblr:active, .btn-tumblr.active, .open > .btn-tumblr.dropdown-toggle { background-color: transparent; color: #35465c; border-color: #35465c; opacity: 1; } .btn-tumblr:disabled, .btn-tumblr[disabled], .btn-tumblr.disabled { background-color: transparent; border-color: #35465c; } .btn-tumblr.btn-fill { color: #FFFFFF; background-color: #35465c; opacity: 0.9; } .btn-tumblr.btn-fill:hover, .btn-tumblr.btn-fill:focus, .btn-tumblr.btn-fill:active, .btn-tumblr.btn-fill.active, .open > .btn-tumblr.btn-fill.dropdown-toggle { background-color: #35465c; color: #FFFFFF; opacity: 1; } .btn-behance { border-color: #1769ff; color: #1769ff; } .btn-behance:hover, .btn-behance:focus, .btn-behance:active, .btn-behance.active, .open > .btn-behance.dropdown-toggle { background-color: transparent; color: #1769ff; border-color: #1769ff; opacity: 1; } .btn-behance:disabled, .btn-behance[disabled], .btn-behance.disabled { background-color: transparent; border-color: #1769ff; } .btn-behance.btn-fill { color: #FFFFFF; background-color: #1769ff; opacity: 0.9; } .btn-behance.btn-fill:hover, .btn-behance.btn-fill:focus, .btn-behance.btn-fill:active, .btn-behance.btn-fill.active, .open > .btn-behance.btn-fill.dropdown-toggle { background-color: #1769ff; color: #FFFFFF; opacity: 1; } .card { border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.23); background-color: #FFFFFF; margin-bottom: 20px; position: relative; max-width: 320px; margin-left: auto; margin-right: auto; } .card .title, .card .stats, .card .category, .card .description, .card .social-line, .card .actions, .card .content, .card .footer, .card small, .card a { position: relative; z-index: 3; } .card a { color: #444444; } .card a:hover, .card a:focus { color: #333333; } .card[data-radius="none"] { border-radius: 0px; } .card[data-radius="none"] .header { border-radius: 0px 0px 0 0; } .card[data-radius="none"] .header img { border-radius: 0px 0px 0 0; } .card.card-plain { box-shadow: none; } .card .btn { text-shadow: none; font-weight: bold; } .card .title-uppercase { text-transform: uppercase; } .card .header { position: relative; border-radius: 6px 6px 0 0; height: 200px; z-index: 3; } .card .header img { opacity: 0; filter: alpha(opacity=0); display: none; } .card .header .category { padding: 15px; } .card .header .social-line { position: absolute; bottom: 0; width: 100%; opacity: 0; filter: alpha(opacity=0); display: block; transition: all 0.4s; -webkit-transition: all 0.4s; } .card .header .social-line .btn, .card .header .social-line a { font-family: "Roboto","Helvetica","Arial", sans-serif; font-weight: 400; } .card .header .social-line.social-line-visible { opacity: 1; filter: alpha(opacity=100); } .card .content .price { border: 2px solid rgba(255, 255, 255, 0.7); color: white; border-radius: 50%; width: 152px; height: 152px; margin: 50px auto; text-align: center; vertical-align: middle; line-height: 200px; } .card .content .price h4 { margin: 5px 0 0; font-size: 36px; } .card .content .price h6 { margin-top: 45px; font-size: 16px; } .card .content .price .currency { font-size: 22px; font-weight: normal; } .card .actions { padding: 10px 15px; } .card .social-line .btn { float: left; display: block; transition: all 0.2s; -webkit-transition: all 0.2s; } .card .social-line .btn-social { border: 1px solid #EEEEEE; border-radius: 0; border-left: 0; background-color: #FFFFFF; padding: 12px 4px; } .card .social-line .btn-social:last-child { border-right: 0; } .card .social-line[data-buttons="5"] .btn { width: 20%; } .card .social-line[data-buttons="4"] .btn { width: 25%; } .card .social-line[data-buttons="3"] .btn { width: 33.3333333%; } .card .social-line[data-buttons="2"] .btn { width: 50%; } .card .social-line:after { clear: both; display: table; content: " "; } .card .filter, .card .header .actions { position: absolute; z-index: 2; background-color: rgba(0, 0, 0, 0.76); top: 0; left: 0; width: 100%; height: 100%; text-align: center; opacity: 0; filter: alpha(opacity=0); } .card .header .actions { background-color: transparent; z-index: 3; } .card .header .actions .btn { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .card:hover .filter { opacity: 0.7; filter: alpha(opacity=70); } .card:hover .header .social-line, .card:hover .header .actions { opacity: 1; filter: alpha(opacity=100); } .card .category, .card .label { font-size: 14px; margin-bottom: 0px; } .card .category i, .card .label i { font-size: 16px; } .card .category { color: #9A9A9A; } .card .label { text-shadow: none; } .card .title { color: #333333; } .card > .title { margin: 0; padding: 30px 0 0; } .card .content { padding: 15px 15px 5px 15px; } .card .content .title { margin: 10px 0 20px 0; } .card .content .category ~ .title { margin-top: 0px; } .card .content .description ~ .title { margin-top: -10px; } .card .description { font-size: 16px; color: #9A9A9A; } .card h6 { font-size: 12px; margin: 0; } .card .footer { padding: 0 15px 15px; } .card .footer .social-line .btn:first-child { border-radius: 0 0 0 6px; } .card .footer .social-line .btn:last-child { border-radius: 0 0 6px 0; } .card.card-separator:after { height: 100%; right: -15px; top: 0; width: 1px; background-color: #DDDDDD; content: ""; position: absolute; } .card .icon { display: block; margin: 0 auto; top: 50%; position: relative; transform: translateY(-50%); -webkit-transform: translateY(-50%); text-align: center; } .card .icon i { font-size: 60px; border: 2px solid rgba(0, 0, 0, 0.3); padding: 18px; border-radius: 50%; } .col-lg-4 .card .icon i { font-size: 80px; padding: 22px; } .card.card-with-border .content { padding: 15px 15px 25px 15px; } .card.card-with-border .footer { padding-bottom: 25px; } .card.card-with-border:after { position: absolute; display: block; width: calc(100% - 10px); height: calc(100% - 10px); content: ""; top: 5px; left: 5px; border: 1px solid rgba(0, 0, 0, 0.15); z-index: 1; border-radius: 5px; } .card.card-just-text .content { padding: 50px 65px; text-align: center; } .card[data-background="image"] .image, .card[data-background="color"] .image { border-radius: 6px; } .card[data-background="image"] .title, .card[data-background="color"] .title { font-weight: bold; } .card[data-background="image"] .filter, .card[data-background="color"] .filter { border-radius: 6px; } .card[data-background="image"] .title, .card[data-background="image"] .stats, .card[data-background="image"] .category, .card[data-background="image"] .description, .card[data-background="image"] .content, .card[data-background="image"] .footer, .card[data-background="image"] small, .card[data-background="image"] a, .card[data-background="color"] .title, .card[data-background="color"] .stats, .card[data-background="color"] .category, .card[data-background="color"] .description, .card[data-background="color"] .content, .card[data-background="color"] .footer, .card[data-background="color"] small, .card[data-background="color"] a { color: #FFFFFF; } .card[data-background="image"] a:hover, .card[data-background="image"] a:focus, .card[data-background="color"] a:hover, .card[data-background="color"] a:focus { color: #FFFFFF; } .card[data-background="image"] .icon i, .card[data-background="color"] .icon i { color: #FFFFFF; border: 2px solid rgba(255, 255, 255, 0.6); } .card[data-background="image"].card-with-border:after, .card[data-background="color"].card-with-border:after { border: 1px solid rgba(255, 255, 255, 0.45); } .card[data-background="image"] { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); } .card[data-background="image"] .filter { opacity: 0.55; filter: alpha(opacity=55.0); } .card[data-background="image"]:hover .filter { opacity: 0.75; filter: alpha(opacity=75); } .card[data-color="blue"] { background: #4087ea; background: -moz-radial-gradient(center, ellipse cover, #533ce1 0%, #4087ea 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #533ce1), color-stop(100%, #4087ea)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #533ce1 0%, #4087ea 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #533ce1 0%, #4087ea 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #533ce1 0%, #4087ea 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #533ce1 0%, #4087ea 100%); /* W3C */ background-size: 250% 250%; } .card[data-color="azure"] { background: #45c0fd; background: -moz-radial-gradient(center, ellipse cover, #4091ff 0%, #45c0fd 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #4091ff), color-stop(100%, #45c0fd)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #4091ff 0%, #45c0fd 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #4091ff 0%, #45c0fd 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #4091ff 0%, #45c0fd 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #4091ff 0%, #45c0fd 100%); /* W3C */ background-size: 250% 250%; } .card[data-color="green"] { background: #a1eb3a; background: -moz-radial-gradient(center, ellipse cover, #53A319 0%, #a1eb3a 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #53A319), color-stop(100%, #a1eb3a)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #53A319 0%, #a1eb3a 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #53A319 0%, #a1eb3a 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #53A319 0%, #a1eb3a 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #53A319 0%, #a1eb3a 100%); /* W3C */ background-size: 250% 250%; } .card[data-color="orange"] { background: #ffb33b; background: -moz-radial-gradient(center, ellipse cover, #ff5221 0%, #ffb33b 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #ff5221), color-stop(100%, #ffb33b)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #ff5221 0%, #ffb33b 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #ff5221 0%, #ffb33b 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #ff5221 0%, #ffb33b 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #ff5221 0%, #ffb33b 100%); /* W3C */ background-size: 250% 250%; } .card[data-color="red"] { background: #ff3b30; background: -moz-radial-gradient(center, ellipse cover, #bb0502 0%, #ff3b30 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #bb0502), color-stop(100%, #ff3b30)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #bb0502 0%, #ff3b30 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #bb0502 0%, #ff3b30 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #bb0502 0%, #ff3b30 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #bb0502 0%, #ff3b30 100%); /* W3C */ background-size: 250% 250%; } .card[data-color="black"] { background: #787878; background: -moz-radial-gradient(center, ellipse cover, #343434 0%, #787878 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #343434), color-stop(100%, #787878)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #343434 0%, #787878 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #343434 0%, #787878 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #343434 0%, #787878 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #343434 0%, #787878 100%); /* W3C */ background-size: 250% 250%; } .filter.filter-white { background-color: rgba(255, 255, 255, 0.91); } .filter.filter-blue { background: #4087ea; background: -moz-radial-gradient(center, ellipse cover, #533ce1 0%, #4087ea 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #533ce1), color-stop(100%, #4087ea)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #533ce1 0%, #4087ea 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #533ce1 0%, #4087ea 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #533ce1 0%, #4087ea 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #533ce1 0%, #4087ea 100%); /* W3C */ background-size: 250% 250%; } .filter.filter-azure { background: #45c0fd; background: -moz-radial-gradient(center, ellipse cover, #4091ff 0%, #45c0fd 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #4091ff), color-stop(100%, #45c0fd)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #4091ff 0%, #45c0fd 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #4091ff 0%, #45c0fd 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #4091ff 0%, #45c0fd 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #4091ff 0%, #45c0fd 100%); /* W3C */ background-size: 250% 250%; } .filter.filter-green { background: #a1eb3a; background: -moz-radial-gradient(center, ellipse cover, #53A319 0%, #a1eb3a 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #53A319), color-stop(100%, #a1eb3a)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #53A319 0%, #a1eb3a 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #53A319 0%, #a1eb3a 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #53A319 0%, #a1eb3a 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #53A319 0%, #a1eb3a 100%); /* W3C */ background-size: 250% 250%; } .filter.filter-orange { background: #ffb33b; background: -moz-radial-gradient(center, ellipse cover, #ff5221 0%, #ffb33b 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #ff5221), color-stop(100%, #ffb33b)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #ff5221 0%, #ffb33b 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #ff5221 0%, #ffb33b 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #ff5221 0%, #ffb33b 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #ff5221 0%, #ffb33b 100%); /* W3C */ background-size: 250% 250%; } .filter.filter-red { background: #ff3b30; background: -moz-radial-gradient(center, ellipse cover, #bb0502 0%, #ff3b30 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #bb0502), color-stop(100%, #ff3b30)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #bb0502 0%, #ff3b30 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #bb0502 0%, #ff3b30 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #bb0502 0%, #ff3b30 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #bb0502 0%, #ff3b30 100%); /* W3C */ background-size: 250% 250%; } @media (min-width: 1200px) { .card .header { height: 265px; } .card[data-background="color"] .header { height: 230px; } .col-md-3 .card .header, .col-sm-3 .card .header, .col-xs-3 .card .header, .col-lg-3 .card .header { height: 185px; } } /* Changes for small display */ @media (max-width: 767px) { .navbar-transparent { padding-top: 15px; background-color: rgba(0, 0, 0, 0.45); } body { position: relative; } .social-line .btn { margin: 0 0 10px 0; } .card .header .social-line .btn { margin: 0; } }