Website templates

This commit is contained in:
Dawid Olko
2023-07-26 19:33:39 +02:00
commit 0d2d73a034
10339 changed files with 2002333 additions and 0 deletions

View File

@@ -0,0 +1,98 @@
/*******************************/
/* Navigatioin */
/*******************************/
.navbar-inverse { border-radius: 0; background:rgba(0, 0, 0, .8); border-bottom:1px solid rgba(255, 255, 255, 0.15); min-height:100px; padding-top:25px; margin-bottom:0;}
.navbar-inverse *:focus { outline: 0; }
@media (max-width: 767px) {
.navbar-inverse { background:rgba(0,0,0,.9); }
}
.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .navbar-nav > .open ul > a { color:rgba(255, 255, 255, .4); }
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus { color: #fff; background:none ; }
.navbar-inverse .navbar-nav > .open > a{ background:none; color:white; }
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus { background:none; color:white; }
.navbar-inverse .navbar-nav > .active > a { background:none; color:white; }
.navbar-inverse .navbar-brand { font-family: "Open sans", helvetica, arial; font-size: 24px; color:white; padding:0 0 0 15px; margin:12px 0 0 0; }
.navbar-inverse .navbar-brand img { margin-top:-8px;}
.navbar-nav .dropdown-menu {
left:-5px;
font-size: 13px;
background-color: rgba(0, 0, 0, .7);
border: 0px none;
-webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.navbar-nav .dropdown-menu > li > a { color:rgba(255, 255, 255, .7); padding:7px 20px; }
.navbar-nav .dropdown-menu > li > a:hover,
.navbar-nav .dropdown-menu > li > a:focus,
.navbar-nav .dropdown-menu > .active > a:hover{ background: rgba(255, 255, 255, .1); color:white; }
.navbar-nav .dropdown-menu > .active > a,
.navbar-nav .dropdown-menu > .active > a:focus { background: none; color:#fff; }
.navbar-nav .btn { border:1px solid rgba(255, 255, 255, .2); margin-left:5px; margin-top:5px; padding-top:10px; padding-bottom:10px; }
.navbar-nav a.btn:focus,
.navbar-nav a.btn:hover { border:1px solid rgba(255,255,255,.6); }
.navbar-collapse { border:0 none; border-top:0 none; box-shadow: none; }
@media (max-width: 767px) {
.navbar-collapse ul { text-align: center; width:100%; padding-bottom:10px; }
.navbar-collapse ul .btn{ max-width:50%; margin:0 auto; }
}
.navbar-static-top,
.navbar-fixed-top,
.navbar-fixed-bottom { border-radius: 0; }
/*******************************/
/* Buttons */
/*******************************/
.btn-default, .btn-primary, .btn-success, .btn-action
.btn-info, .btn-warning, .btn-danger {
text-shadow: 0 2px 1px rgba(0, 0, 0, .2);
}
.btn { padding: 10px 40px; font-weight: bold; border:0 none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.btn-lg { padding: 15px 65px; font-size: 14px; font-weight:bold; }
.btn-default { text-shadow: none; background:transparent; color:rgba(50,50,50,.5); -webkit-box-shadow:inset 0px 0px 0px 3px rgba(50,50,50,.5); -moz-box-shadow:inset 0px 0px 0px 3px rgba(50,50,50,.5); box-shadow:inset 0px 0px 0px 3px rgba(50,50,50,.5); }
.btn-default:hover,
.btn-default:focus { color:rgba(50,50,50,.8); -webkit-box-shadow:inset 0px 0px 0px 3px rgba(50,50,50,.8); -moz-box-shadow:inset 0px 0px 0px 3px rgba(50,50,50,.8); box-shadow:inset 0px 0px 0px 3px rgba(50,50,50,.8); background: transparent; }
.btn-default:active,
.btn-default.active { color:#333; -webkit-box-shadow:inset 0px 0px 0px 3px #333; -moz-box-shadow:inset 0px 0px 0px 3px #333; box-shadow:inset 0px 0px 0px 3px #333; background: transparent; }
.btn-action,
.btn-primary { color:#FFEFD7; background-image: -webkit-linear-gradient(top, #FF9B22 0%, #FF8C00 100%); background-image: linear-gradient(to bottom, #FF9B22 0%, #FF8C00 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffFF9B22', endColorstr='#ffFF8C00', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); background-repeat: repeat-x; border:0 none; }
.btn-action:hover,
.btn-action:focus { color:#fff; background: #FF9B22; }
.btn-action:active { background: #FF8C00; }
/*******************************/
/* Jumbotron */
/*******************************/
.jumbotron { color: inherit; background-color: #F7F5F4; padding-top:30px; padding-bottom:30px; margin-bottom:0; }
.container .jumbotron { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding-left:40px; padding-right:40px; }
.jumbotron p { font-size:inherit; }
.jumbotron h2, .jumbotron h3, .jumbotron h4,
.jumbotron h5, .jumbotron h6 { line-height: 1.3em; }
/*******************************/
/* Images */
/*******************************/
.img-rounded { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,179 @@
/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: top, left, opacity;
transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
/* End: Recommended Isotope styles */
/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
/**** Isotope styles ****/
/* required for containers to inherit vertical size from window */
/*html,
body {
height: 100%;
}*/
#container {
border: 1px solid #666;
padding: 5px;
margin-bottom: 20px;
}
.element {
width: 110px;
height: 110px;
margin: 5px;
float: left;
overflow: hidden;
position: relative;
background: #888;
color: #222;
-webkit-border-top-right-radius: 1.2em;
-moz-border-radius-topright: 1.2em;
border-top-right-radius: 1.2em;
}
.element.alkali { background: #F00; background: hsl( 0, 100%, 50%); }
.element.alkaline-earth { background: #F80; background: hsl( 36, 100%, 50%); }
.element.lanthanoid { background: #FF0; background: hsl( 72, 100%, 50%); }
.element.actinoid { background: #0F0; background: hsl( 108, 100%, 50%); }
.element.transition { background: #0F8; background: hsl( 144, 100%, 50%); }
.element.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }
.element.metalloid { background: #08F; background: hsl( 216, 100%, 50%); }
.element.other.nonmetal { background: #00F; background: hsl( 252, 100%, 50%); }
.element.halogen { background: #F0F; background: hsl( 288, 100%, 50%); }
.element.noble-gas { background: #F08; background: hsl( 324, 100%, 50%); }
.element * {
position: absolute;
margin: 0;
}
.element .symbol {
left: 0.2em;
top: 0.4em;
font-size: 3.8em;
line-height: 1.0em;
color: #FFF;
}
.element.large .symbol {
font-size: 4.5em;
}
.element.fake .symbol {
color: #000;
}
.element .name {
left: 0.5em;
bottom: 1.6em;
font-size: 1.05em;
}
.element .weight {
font-size: 0.9em;
left: 0.5em;
bottom: 0.5em;
}
.element .number {
font-size: 1.25em;
font-weight: bold;
color: hsla(0,0%,0%,.5);
right: 0.5em;
top: 0.5em;
}
.variable-sizes .element.width2 { width: 230px; }
.variable-sizes .element.height2 { height: 230px; }
.variable-sizes .element.width2.height2 {
font-size: 2.0em;
}
.element.large,
.variable-sizes .element.large,
.variable-sizes .element.large.width2.height2 {
font-size: 3.0em;
width: 350px;
height: 350px;
z-index: 100;
}
.clickable .element:hover {
cursor: pointer;
}
.clickable .element:hover h3 {
text-shadow:
0 0 10px white,
0 0 10px white
;
}
.clickable .element:hover h2 {
color: white;
}

View File

@@ -0,0 +1,638 @@
/*
Theme: vOne - Free Business HTML5 Responsive WebsiteDescription: Free to use for personal and commercial use
Author: WebThemez.com
Website: http://webthemez.com
Note: Please do not remove the footer backlink (webthemez.com)--(if you want to remove contact: webthemez@gmail.com)
Licence: Creative Commons Attribution 3.0** - http://creativecommons.org/licenses/by/3.0/
*/
/*General*/
h1, h2, h3, h4, h5, h6 {
font-family: "Open sans", Helvetica, Arial;
}
p {
font-size: 15px;
}
h1, .h1, h2, .h2, h3, .h3 {
margin-top: 30px;
}
blockquote {
font-style: italic;
font-family: Georgia;
color: #999;
margin: 30px 0 30px;
}
label {
color: #777;
}
.herotxt{
background:#f4b905;
}
.herotxt p {
font-size: 20px;
color:#333;
}
.herotxt span {
color: #222;
display: block;
font-size: 35px;
line-height: 45px;
font-weight: normal;
margin-bottom: 12px;
}
.herotxt p {
margin-bottom: 0;
}
.herotxt .btn-download a {
margin-top: 37px;
text-align: center;
display: inline-block;
background: #fff;
font-size: 18px;
padding: 10px 25px;
text-decoration:none;
color:#222;
}
.herotxt .btn-download{
text-align: center;
}
.highlight {
margin-top: 40px;
border-left: 1px solid rgba(255, 255, 255, 0.13);
}
.highlight:first-child {
border: none;
}
element.style {
}
.headroom {
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.navbar-nav .dropdown-menu {
left: -5px;
font-size: 13px;
background-color: #f4b905;
}
.navbar-inverse .navbar-nav > li > a, .navbar-inverse .navbar-nav > .open ul > a {
color: rgba(255, 255, 255, 1);
}
.navbar-inverse {
background:transparent;
}
.navbar-nav>li>a {
font-size: 18px;
}
.navbar-inverse{
border:none !important;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-nav>li:hover {
color: #3A3A3A !important;
background: #f4b905;
}
.navbar-fixed-top, .navbar-fixed-bottom {
z-index: 9999;
}
.navbar-fixed-top{
position:absolute;
}
.btn:hover{
color: #3A3A3A !important;
background: #E9AF00;
}
.btn{
color: #3A3A3A !important;
background: #f4b905;
}
.btn-action, .btn-primary {
color: #3A3A3A !important;
background: #f4b905;
}
/* Header */
#head {
background: #181015 url( ../images/bg_header.jpg) no-repeat;
background-size: cover;
min-height: 520px;
text-align: center;
padding-top: 240px;
color: white;
font-family: "Open sans", Helvetica, Arial;
font-weight: 300;
}
#head.secondary {
height: 100px;
min-height: 100px;
padding-top: 0px;
}
#head .lead {
font-family: "Open sans", Helvetica, Arial;
font-size: 44px;
margin-bottom: 6px;
color: white;
line-height: 1.15em;
}
#head .tagline {
color: rgba(255,255,255,0.75);
margin-bottom: 25px;
}
#head .tagline a {
color: #fff;
}
#head .btn {
margin-bottom: 10px;
}
#head .btn-default {
text-shadow: none;
background: transparent;
color: rgba(255,255,255,.5);
-webkit-box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,.5);
-moz-box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,.5);
box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,.5);
background: transparent;
}
#head .btn-default:hover, #head .btn-default:focus {
color: rgba(255,255,255,.8);
-webkit-box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,.8);
-moz-box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,.8);
box-shadow: inset 0px 0px 0px 3px rgba(255,255,255,.8);
background: transparent;
}
#head .btn-default:active, #head .btn-default.active {
color: #fff;
-webkit-box-shadow: inset 0px 0px 0px 3px #fff;
-moz-box-shadow: inset 0px 0px 0px 3px #fff;
box-shadow: inset 0px 0px 0px 3px #fff;
background: transparent;
}
.panel {
margin-bottom: 0px;
background-color: transparent;
border: 1px solid transparent;
border-radius: 0px;
-webkit-box-shadow: none;
box-shadow: none;
}
.panel-body {
padding: 0px;
}
.sectionBox {
padding-top: 35px;
padding-bottom:40px;
}
.slideUp {
top: -100px;
}
.headroom {
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.serviceslist .btn {
padding: 10px 38px;
font-weight: bold;
border: 0 none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
/* Highlights*/
.highlight {
margin-top: 40px;
}
.h-caption {
text-align: center;
}
.h-caption i {
display: block;
font-size: 46px;
color: #fff;
float:left;
margin-right: 9px;
}
.h-caption h4 {
color: #888;
font-size: 22px;
font-weight: normal;
margin-bottom: 20px;
text-align:left;
height:47px;
line-height:47px;
}
.jumbotron p {
font-size: inherit;
color: #555;
font-size: 16px;
padding: 0px;
}
.jumbotron .fa{
color: #888;
}
.h-body {
}
.jumbotron {
background-color: #111;
}
.page-title {
margin-top: 20px;
font-weight: 300;
color: #000;
}
.text-muted {
color: #888;
}
.breadcrumb {
background: none;
padding: 0;
margin: 30px 0 0px 0;
}
ul.list-spaces li {
margin-bottom: 10px;
}
.bgColor1 {
background-color: #323a47;
color: #fff;
}
.bgColor1 .fa {
color: #fff;
}
/* Helpers */
.container-full {
margin: 0 auto;
width: 100%;
}
.top-space {
margin-top: 35px;
}
.top-margin {
margin-top: 20px;
}
img {
max-width: 100%;
}
img.pull-right {
margin-left: 10px;
}
img.pull-left {
margin-right: 10px;
}
#map {
width: 100%;
height: 280px;
}
#social {
margin-top: 50px;
margin-bottom: 50px;
}
#social .wrapper {
width: 340px;
margin: 0 auto;
}
.sidebar {
padding-top: 36px;
padding-bottom: 30px;
}
.sidebar .panel {
margin-bottom: 20px;
}
.sidebar h1, .sidebar .h1, .sidebar h2, .sidebar .h2, .sidebar h3, .sidebar .h3 {
margin-top: 20px;
}
.glyphicon-lg{font-size:3em}
.blockquote-box{margin-bottom:25px}
.blockquote-box .square{width:100px;min-height:50px;margin-right:22px;text-align:center!important;background-color:#E6E6E6;padding:20px 0}
.blockquote-box.blockquote-primary{border-color:#357EBD}
.blockquote-box.blockquote-primary .square{background-color:#428BCA;color:#FFF}
.blockquote-box.blockquote-success{border-color:#4CAE4C}
.blockquote-box.blockquote-success .square{background-color:#5CB85C;color:#FFF}
.blockquote-box.blockquote-info{border-color:#46B8DA}
.blockquote-box.blockquote-info .square{background-color:#5BC0DE;color:#FFF}
.blockquote-box.blockquote-warning{border-color:#EEA236}
.blockquote-box.blockquote-warning .square{background-color:#F0AD4E;color:#FFF}
.blockquote-box.blockquote-danger{border-color:#D43F3A}
.blockquote-box.blockquote-danger .square{background-color:#D9534F;color:#FFF}
/* Footer */
.footer1 {
background: #111;
padding: 30px 0 0 0;
font-size: 12px;
color: #999;
}
.footer1 a {
color: #ccc;
}
.footer1 a:hover {
color: #fff;
}
.footer1 .panel {
margin-bottom: 30px;
}
.footer1 .panel-title {
font-size: 17px;
font-weight: bold;
color: #ccc;
margin: 0 0 20px;
}
.footer1 .entry-meta {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 0 0 35px 0;
padding: 2px 0;
color: #888888;
font-size: 12px;
font-size: 0.75rem;
}
.footer1 .entry-meta a {
color: #333333;
}
.footer1 .entry-meta .meta-in {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 10px 0;
}
.follow-me-icons {
font-size: 30px;
}
.follow-me-icons i {
float: left;
margin: 0 10px 0 0;
font-size: 25px;
}
.footer2 {
background: #000;
padding: 15px 0;
color: #777;
font-size: 13px;
}
.footer2 a {
color: #aaa;
padding: 0px 10px;
font-size: 13px;
}
.footer1 p {
font-size: 14px;
color: #666;
}
.footer2 a:hover {
color: #fff;
}
.footer2 p {
margin: 0;
color: #666;
font-size: 13px;
}
.panel-simplenav {
margin-left: -5px;
}
.panel-simplenav a {
margin: 0 5px;
}
/* carousel */
#quote-carousel {
padding: 0 10px 30px 10px;
margin-top: 30px 0px 0px;
}
/* Control buttons */
#quote-carousel .carousel-control {
background: none;
color: #222;
font-size: 2.3em;
text-shadow: none;
margin-top: 30px;
}
/* Previous button */
#quote-carousel .carousel-control.left {
left: -12px;
}
/* Next button */
#quote-carousel .carousel-control.right {
right: -12px !important;
}
/* Changes the position of the indicators */
#quote-carousel .carousel-indicators {
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the color of the indicators */
#quote-carousel .carousel-indicators li {
background: #c0c0c0;
}
.item p {
font-size: 16px;
}
#quote-carousel .carousel-indicators .active {
background: #333333;
}
#quote-carousel img {
width: 250px;
height: 100px;
}
/* End carousel */
.item blockquote {
border-left: none;
margin: 0;
}
.item blockquote img {
margin-bottom: 10px;
}
.item blockquote p:before {
content: "\f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;
}
.contact ul {
padding: 0px;
}
.contact ul li {
margin-bottom: 10px;
list-style: none;
}
footer ul li {
list-style: none;
}
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
/* ------- */
.isotopeWrapper article {
margin-bottom: 30px;
}
#portfolio {
}
#portfolio img {
width: 100%;
}
#portfolio article p {
margin-bottom: 1.45em;
/*set next row on the baseline*/;
}
nav#filter {
margin-bottom: 1.5em;
}
nav#filter li {
display: inline-block;
margin: 0 0 0 5px;
}
nav#filter a {
padding: 4px 12px;
line-height: 20px;
border: 1px solid #f4b905;
text-decoration: none;
color: #f4b905;
}
nav#filter a.current {
background: #f4b905;
color: #fff;
}
.iconColor .fa {
color: #ee0c45;
}
.portfolio-items article img {
width: 100%;
}
.portfolio-item {
display: block;
position: relative;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.portfolio-item img {
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.portfolio-item .portfolio-desc {
display: block;
opacity: 0;
position: absolute;
width: 100%;
left: 0;
top: 0;
color: rgba(220, 220, 220);
}
.fancybox-overlay {
background: rgba(0, 0, 0, 0.64);
}
.portfolio-item:hover .portfolio-desc {
padding-top: 20%;
height: 100%;
transition: all 200ms ease-in-out 0s;
opacity: 1;
background: rgba(244, 185, 5, 0.72);
}
.isotope-item {
margin-bottom: 25px;
display: inline-block;
list-style: none;
}
.portfolio-item .portfolio-desc a {
color: #fff;
text-align: center;
display: block;
}
.portfolio-item .portfolio-desc a:hover {
/*text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.7);*/
text-decoration: none;
}
.portfolio-item .portfolio-desc .folio-info {
top: -20px;
padding: 30px;
height: 0;
opacity: 0;
position: relative;
}
.portfolio-item:hover .folio-info {
height: 100%;
opacity: 1;
transition: all 500ms ease-in-out 0s;
top: 5px;
}
.portfolio-item .portfolio-desc .folio-info h5 {
text-transform: uppercase;
text-align: center;
font-weight: bold;
font-size: 1.4em;
}
.portfolio-item .portfolio-desc .folio-info p {
color: #ffffff;
font-size: 12px;
}
.contact-details {
padding: 20px;
background: #fff;
border: none;
position: relative;
}
/**
MEDIA QUERIES
*/
@media (max-width: 767px) {
#head {
min-height: 420px;
padding-top: 160px;
}
#head .lead {
font-size: 34px;
}
.navbar-collapse{
background:rgba(0,0,0,0.80) ;
}
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
#quote-carousel {
margin-bottom: 0;
padding: 0 40px 30px 40px;
margin-top: 30px;
}
}
@media (max-width: 767px) {
.navbar-collapse ul {
text-align: right;
margin-right: 0px;
}
}
/* Small devices (tablets, up to 768px) */
@media (max-width: 768px) {
/* Make the indicators larger for easier clicking with fingers/thumb on mobile */
#quote-carousel .carousel-indicators {
bottom: -20px !important;
}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
border-color: #101010;
overflow: hidden;
}
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #fff;
}
#quote-carousel .carousel-indicators li {
display: inline-block;
margin: 0px 5px;
width: 15px;
height: 15px;
}
#quote-carousel .carousel-indicators li.active {
margin: 0px 5px;
width: 20px;
height: 20px;
}
}