/* GLOBAL STYLES
-------------------------------------------------- */


/* Padding below the footer and lighter body text */

body {
	color: #5a5a5a;
	background-image: url('3.png');
	background-repeat: repeat;
}

#top {
	background: rgba(0,0,0,0.85);
	padding-top: 10px;
	padding-bottom: 10px;
}

#top .top-text {
	font-size: 1.5rem;
	font-weight: 500;
	text-align: center;
	color: yellow;
}

#top-promo-small {
	/*    height:100px;*/
	background-color: rgba(170, 170, 15, 0.6);
	color: #000;
}

.navbar {
	text-transform: uppercase;
	font-size: 1.2rem;
}

.navbar-collapse {
	height: 100%;
	width: 100%;
}

.navbar-dark .navbar-nav .nav-link :before {
	content: "// ";
	font-weight: bold;
	font-style: italic;
	color: yellow;
}

.product-info {
	background-color: rgba(150,150,150,0.45);
	color: black;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */


/* Carousel base class */

.carousel {
	margin-bottom: 0rem;
}


/* Since positioning the image, we need to help out the caption */

.carousel-caption {
	bottom: 1rem;
	padding: 10px;
	z-index: 10;
	background-color: rgba(0, 0, 0, 0.6);
}


/* Declare heights because of positioning of img element */
/*
.carousel-item {
	height: 32rem;
	background-color: #777;
}

.carousel-item>img {
	position: absolute;
	top: 0;
	left: 0;
	min-width: 100%;
	height: 32rem;
}
*/
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}
.carousel-indicators .active {
    background-color: #ff0000;
}
.carousel-indicators li {
    background-color: rgba(80,80,80,0.7);
}
/*intro*/

.card-img-overlay-2 {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 1.25rem;
	color: white;
	background-color: rgba(0, 0, 0, 0.6);
}


/* project hover*/

.project-hover {
	position: relative;
	overflow: hidden;
	/* border:1px solid grey;*/
}

.project-hover:hover .text-view {
	top: 40%;
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.8);
	color: white;
}

.project-hover:hover .btn-view {
	top: 60%;
	opacity: 1;
}

.project-hover:hover img {
	opacity: .8;
}

.project-hover .text-view {
	width: 95%;
	position: absolute;
	top: 35%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
	font-weight: 600;
}

.project-hover .text-view h2 {
	margin-bottom: 10px;
	font-weight: 600;
}

.project-hover .text-view h3 {
	margin-bottom: 10px;
	font-weight: 600;
}

.project-hover .btn-view {
	width: 100%;
	position: absolute;
	top: 65%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
}

.transitionproject {
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}

@keyframes blink {
	0% {
		opacity: 0.4
	}
	50% {
		opacity: 1
	}
	100% {
		opacity: 0.4
	}
}

.blink {
	animation: blink 2s infinite;
}

.blink:hover {
	animation: step-end;
}


/* MARKETING CONTENT
-------------------------------------------------- */


/* Center align the text within the three columns below the carousel */

.marketing .col-lg-4 {
	margin-bottom: 1.5rem;
	text-align: center;
}

.marketing h2 {
	font-weight: 400;
}

.marketing .col-lg-4 p {
	margin-right: .75rem;
	margin-left: .75rem;
}


/* Featurettes
------------------------- */

.featurette-divider {
	margin: 5rem 0;
	/* Space out the Bootstrap <hr> more */
}


/* Thin out the marketing headings */

.featurette-heading {
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
	/* Bump up size of carousel content */
	.carousel-caption p {
		margin-bottom: 1.25rem;
		font-size: 1.25rem;
		line-height: 1.4;
	}
	.featurette-heading {
		font-size: 50px;
	}
}

@media (min-width: 62em) {
	.featurette-heading {
		margin-top: 7rem;
	}
}


/*paralax*/

.paral {
	min-height: 600px;
	background-attachment: fixed;
	background-size: cover;
	background-position: 50% 50%;
}


/*footer*/

#footer {
	background-color: #202021;
}

#footer2 {
	background-color: #242627;
	color: #fff;
	margin: 0!important;
	padding: 5px;
}

#footer ul {
	margin-left: 0;
	padding-left: 0;
	list-style-type: none;
}


/*#footer ul li {
  position: relative;
  margin-left: 1em;
}

#footer ul li:before {
  position: absolute;
  left: -1em;
  content: "\f18e";
}*/

#footer ul li a {
	color: white;
}

.back-to-top {
	cursor: pointer;
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: none;
	background-color: #FEF200;
	color: #000;
}


/*shake image*/

.imgShake:hover {
	/* Start the shake animation and make the animation last for 0.5 seconds */
	animation: shake 0.5s;
	/* When the animation is finished, start again */
	animation-iteration-count: infinite;
}

@keyframes shake {
	0% {
		transform: translate(1px, 1px) rotate(0deg);
	}
	10% {
		transform: translate(-1px, -2px) rotate(-1deg);
	}
	20% {
		transform: translate(-3px, 0px) rotate(1deg);
	}
	30% {
		transform: translate(3px, 2px) rotate(0deg);
	}
	40% {
		transform: translate(1px, -1px) rotate(1deg);
	}
	50% {
		transform: translate(-1px, 2px) rotate(-1deg);
	}
	60% {
		transform: translate(-3px, 1px) rotate(0deg);
	}
	70% {
		transform: translate(3px, 1px) rotate(-1deg);
	}
	80% {
		transform: translate(-1px, -1px) rotate(1deg);
	}
	90% {
		transform: translate(1px, 2px) rotate(0deg);
	}
	100% {
		transform: translate(1px, -2px) rotate(-1deg);
	}
}

.draw {
	overflow: hidden;
	position: relative;
}

.draw::before,
.draw::after {
	content: '';
	box-sizing: border-box;
	position: absolute;
	border: 2px dashed transparent;
	width: 0;
	height: 0;
}

.draw::before {
	top: 0;
	left: 0;
	border-top-color: red;
	border-right-color: red;
	animation: border 2s infinite;
}

.draw::after {
	bottom: 0;
	right: 0;
	animation: border 2s 1s infinite, borderColor 2s 1s infinite;
}

@keyframes border {
	0% {
		width: 0;
		height: 0;
	}
	25% {
		width: 100%;
		height: 0;
	}
	50% {
		width: 100%;
		height: 100%;
	}
	100% {
		width: 100%;
		height: 100%;
	}
}

@keyframes borderColor {
	0% {
		border-bottom-color: red;
		border-left-color: red;
	}
	50% {
		border-bottom-color: red;
		border-left-color: red;
	}
	51% {
		border-bottom-color: transparent;
		border-left-color: transparent;
	}
	100% {
		border-bottom-color: transparent;
		border-left-color: transparent;
	}
}
/*product page*/
#filter-sizes {
	/*    height:100px;*/
	background-color: rgba(170, 170, 15, 0.6);
	color: #000;
	overflow:hidden;
}
#filter-sizes1 {
	/*    height:100px;*/
	background-color: rgba(170, 170, 15, 0.6);
	color: #000;
	overflow:hidden;
}
/*modal fullscreen*/
.modal-fullscreen {
  padding: 0 !important;
   width: 100%;
    height: 100%;
}  
  .modal-fullscreen .modal-dialog {
    max-width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  .modal-fullscreen .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
  }
  .section-title {
	margin: 0;
	padding-bottom: 50px;
	text-align: center;
}
.section-title h3 {
	position: relative;
	font-size: 40px;
	margin-bottom: 50px;
	text-transform: uppercase;
	font-weight: 700;
	line-height: 42px;
}
.section-title h3:after {
	content: '';
	background: #e80a0a;
	height: 2px;
	width: 60px;
	position: absolute;
	bottom: -30px;
	left: 50%;
	margin-left: -30px;
}
.section-title h3:before {
	content: '';
	background: #e80a0a;
	height: 9px;
	width: 4px;
	position: absolute;
	bottom: -33px;
	left: 50%;
	margin-left: -2px
}
.section-title h3 span {
	color: #e80a0a;
	font-weight: 400;
}
.section-title p {
	max-width: 800px;
	margin: auto;
}
/*end modal fullscreen*/
/*gradients badges*/
.badge-multicolor{
    background:red;
    background:linear-gradient(to right,red,black,green,orange);
    color:white;
    font-weight:bold;
}
.badge-duocolor{
    background:greenyellow;
    background:linear-gradient(to right,yellow,red);
    color:black;
    font-weight:bold;
}
.badge-onecolor{
    background:orangered;
     color:white;
     font-weight:bold;
}