@import url('https://fonts.googleapis.com/css?family=Lobster+Two|Macondo');
@import url('https://fonts.googleapis.com/css?family=Passion+One');
@import url('https://fonts.googleapis.com/css?family=Bevan');
@import url('https://fonts.googleapis.com/css?family=Chewy');
@import url('https://fonts.googleapis.com/css?family=Baloo+Bhaina');
@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan');
@import url('https://fonts.googleapis.com/css?family=Patua+One');
@import url('https://fonts.googleapis.com/css?family=Dancing+Script');
@import url('https://fonts.googleapis.com/css?family=Gloria+Hallelujah');
@import url('https://fonts.googleapis.com/css?family=Comfortaa');
@import url('https://fonts.googleapis.com/css?family=Righteous');
@import url('https://fonts.googleapis.com/css?family=Dosis');
@import url('https://fonts.googleapis.com/css?family=ABeeZee');
@import url('https://fonts.googleapis.com/css?family=Bungee');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
@import url('https://fonts.googleapis.com/css?family=Londrina+Solid');
@import url('https://fonts.googleapis.com/css?family=Fredericka+the+Great');
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Source+Serif+Pro');
@import url('https://fonts.googleapis.com/css?family=Rammetto+One');
@import url('https://fonts.googleapis.com/css?family=Lilita+One');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
@import url('https://fonts.googleapis.com/css?family=PT+Sans+Narrow');

/**********************************************GLOBAL*******************************************************/

*{
	padding:0;
	margin:0;
	border:0;
}

html{
	width:100%;
	height:100%;
}

body{
	position:relative;
	width:100%;
	height:100%;
	font-family: 'Raleway' , cursive;
	position:relative;
}

ul li{
	list-style:none;
}

a,
a:hover,
a:focus,
a:active,
a:visited{
	text-decoration:none;
}

.tagline{
	font-size:2em;
	font-weight:bold;
	text-align:center;
	color:#000;
	margin:30px 0px;
	font-family:'Hallelujah';
	letter-spacing:1px;
}

.section-title{
	font-size:1.8em;
	font-weight:700;
	text-align:center;
	color:#000;
	font-family:'Comfortaa', cursive;
	text-transform:uppercase;
	margin:45px 0 15px 0;
	padding-bottom:3px;
}



#page-title{
	text-align:center;	
	margin-bottom:20px;
	width:100%;
	height:150px;
	color:#FFF;
	position:relative;
	overflow: hidden;
}

#page-title img{
	position: absolute;
	width:100%;
	top:0;
	left:0;
	right:0;
	bottom:0;
	height:100%;
	object-fit: cover;
	z-index:-1;
}

#page-title .overlay{
	background:rgba(65,65,65,0.6);
	position: absolute;
	width:100%;
	top:0;
	left:0;
	right:0;
	bottom:0;
	height:100%;
	z-index:-1;
}

#page-title #title{
	font-size:1.4em;
	font-weight:bold;
	text-align:center;
	text-transform:uppercase;
	letter-spacing:1.5px;
	display:inline-block;
	padding:8px 10px;
	margin-top:35px;	
	z-index:100;
	border:2px solid;
	font-family: 'Montserrat';
	
}



#page-title #desc{
	font-size:1em;
	text-align:center;
	color:#FFF;
	letter-spacing: 0.5px;
	font-weight: bold;
	font-family:'Comfortaa', cursive;
	margin:5px 0px;
	
}

.home-sec{
	text-align: center;
}

.home-sec .title{
	display:inline-block;
	text-transform: uppercase;
	font-weight:bold;
	font-family: 'Macondo';
}

#back-to-top{
	position: fixed;
	bottom:30px;
	right:10px;
	font-size:1.4em;
	border-radius: 50%;
	background: #000;
	color:#FFF;
	padding:7px 8px;
	cursor: pointer;
	z-index:20;
	display:none;
}

#back-to-top.show{
	display:block;
}

/***************MESSAGE*************/

.has-error{
	border:1.5px solid red;
	border-radius:5px;
	
}

.error-help-block{
	color:red;
	margin-top:5px;
	font-weight: bold;	
	font-size:0.9em;
}

span.alert-success,
span.alert-error,
span.alert-danger{
	display:table;
	margin:10px auto;
	padding-left:20px;
	padding-right:20px;
	font-size:1.2em;
	font-weight: bold;
}

.message{
	position:fixed;
	left:0;
	right:0;	
	margin:0 auto;
	top:-100px;
	z-index:200;
	pointer-events: none
}

.message span.alert-success{
	background:#000;
	color:#FFF;
}

.message span.alert-danger{
	background:#CD5C5C;
	color:#FFF;
}



/****HEADER******/
header{
	width:100%;
	min-height:50px;
	transition: all ease 2s;
	background:#FFF;
}

header.scroll{
	position: fixed;
	top:0;
	left:0;
	z-index:200;
	background:rgba(255,255,255,0.8);
	font-size:0.8em;
	min-height:30px;
	transition: all ease 2s;
}

header.scroll #top-add{
	display:none;
}

header #top-add{
	width:100%;
	margin-top:-1px;
	border-top:-1px;
	margin-bottom:2px;
	background:#000;
	color:#FFF;
	min-height:40px;
	padding-top:5px;
	padding-bottom:5px;
}

header #top-add .col .tag{
	font-weight:bold;
}

header #top-add .col .tag,
header #top-add .col .desc{
	text-transform:uppercase;
	text-align:center;
	font-family: 'Raleway', cursive;
	font-size:0.8em;
	margin-top:2px;
	margin-bottom:2px;
}

header #top{
	padding-top:5px;
}

header #logo{
	float:left;
	margin:18px auto 5px auto;
	background: #000;
	width:70px;
	padding:5px;
	height:auto;
	border-radius: 10%;
}

header #company{
	display: inline-block !important;
	margin:0;
	min-height:80px;
}

header #company #name{
	display: block;
	text-align: left;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 2px;
	color:#000;
	padding:5px 10px 5px 0px;
	margin-top:17px;
	margin-left:6px;
	font-size:1.2em;
	margin-bottom: 0px;
	border-bottom:1px solid;
}

header #company #tag{
	display: block;
	text-align: left;
	font-weight: bold;
	font-family: 'Comfortaa';
	color:#000;
	padding:5px 10px 5px 0px;
	margin-left:6px;
	font-size:1em;
	margin-top:1px;
	font-size:0.7em;
	margin-bottom: 2px;
	border-top:1px solid;
}
/*
header ul#tag{
	display: block;
	margin-top:0px;
	margin-bottom: 0px;
	text-align: left;
}

header ul#tag li{
	display: inline-block;
	background: #000;
	color:#FFF;
	font-weight: bold;
	padding:2px 5px;
	margin:2px 2px;
	font-size:0.7em;
	text-align: center;
	text-transform: uppercase;
}

header ul#tag li:nth-child(odd){
	transform:rotateZ(-10deg);
}
header ul#tag li:nth-child(even){
	transform:rotateZ(20deg);
}*/


header #name span{
	display: block;
	display:none;
	margin-top:5px;
	font-size:0.5em;
	letter-spacing: 3px;
}

header ul#nav{
	text-align: center;
	display: block;
	margin-top:40px;
}

header ul#nav li{
	display: inline-block;
	padding:2px 20px;
	text-align: center;
	text-transform: capitalize;
	font-size:1.1em;
	font-weight: bold;
	font-family: 'Londrina Solid';
	font-family: 'Comfortaa';
	letter-spacing: 1.4px;
}

header ul#nav li a{color:#000;}


header #search-form{
	margin-top:30px;
}

header #search-form .form-group{
	position: relative;
}

header #search-form input{
	border:0;
	outline:0;
	box-shadow: none;
	border-bottom: 2px solid #000;
	border-radius: 0px;
	background:none;
}

header #search-form button[type="submit"]{
	font-weight: bold;
	position: absolute;
	top:8px;
	right:0;
	background:none;
}


header #search-form button[type="submit"] .fa{
	font-size:1.2em;
	font-weight: bold;
}

#toggle-nav{
	font-size:2em;
	float:right;
	color:#000;
	margin-top:25px;
	display:none;
	cursor:pointer;
}

/***********BACKGROUND SlIDER*******/

section#slider{
	width:100%;
}

section#slider figure{
	width:100%;
	height:auto;
	position: relative;
}

section#slider figure img{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:auto;
	max-height: 650px;
	opacity: 0;
	transition: all ease 2s;
}

section#slider figure img.active{
	opacity: 1;
	transition: all ease 2s;
}


/***********ADVERTISMENT*******/

section#advertisement{
	padding-top:10px;
	margin-top:30px;
	padding-bottom:10px;
}

section#advertisement .img{
	background:#e6e6e6;
	height:400px;
	overflow: hidden;
	margin:10px 0px;
}

section#advertisement .img img{
	width:100%;
	height:110%;
	object-fit: cover;
}

/***HOME PRODUCTS*****/

section#popular .row{
	margin-top:20px;
}

section#popular .product{
    overflow: hidden;
    width:100%;
    min-height:380px;
    color: #000;
    box-shadow: 0 6px 8px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .20);
    transition: all 0.5s;
    background-color: white;
    margin:10px 0px 20px 0px;
}

section#popular .product img{
	display:block;
	width:100%;
	height:350px;
	margin-bottom:10px;
}

section#popular .product .name{
	text-align:center;
	font-size:1.1em;
	font-weight: bold;
	text-transform:capitalize;
	letter-spacing: 0.6px;
	margin-top:0px;
}

/*****BANNER*****/

section#banner{
	width:100%;
	min-height:250px;
	margin-top:40px;
	margin-bottom:30px;
	text-align: center;
	padding:45px 0px;
	background: linear-gradient(rgba(65,65,65,0.6),rgba(65,65,65,0.6)), url('/storage/images/banner4.jpg') no-repeat;
	background-attachment: fixed;
	background-size:cover;
	color:#FFF;
}

section#banner #title{
	font-weight: bold;
	text-transform: capitalize;
	font-size:3em;
}

section#banner a{
	background:#FFF;
	color:#000;
	border-radius: 5px;
	padding:6px 8px;
	margin-top:12px;
	display: inline-block;
	text-transform: uppercase;
	font-size:1.1em;
	font-weight: bold;
}


/***** SHOW ****/

section#show{
	text-align: center;
}

section#show .small{
	height:200px;
	width:100%;
	margin:20px 0px;
	position: relative;
	overflow: hidden;
}

section#show .big{
	height:400px;
	width:100%;
	margin:20px 0px;
	position: relative;
	overflow: hidden;
}

section#show .small::after,
section#show .big::after{
	content:' ';
	position: absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background: rgba(65,65,65,0.5);
	border-radius:15px;
}

section#show .name{
	position: absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	color:#FFF;
	margin:0;
	z-index: 1;
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	font-family: 'Passion One';
	font-size:2.8em;
	letter-spacing: 3px;
}

section#show img{
	width:100%;
	height:100%;
	object-fit: cover;
	border-radius: 15px;
	position: relative;
}



/***ABOUT*****/

section#about{
	padding:30px 0px;
}

section#about #welcome #title{
	font-size:1.8em;
	font-weight: bold;
	margin-bottom: 5px;
}

section#about #welcome img{
	width:100%;
	height:340px;
	border-radius: 10px;
	object-fit: cover;
}

section#about #welcome #tag{
	font-size:1em;
	margin-top: 2px;
	font-weight: bold;
}

section#about #welcome .desc{
	font-size:0.94em;
}

section#about .timeline{
	position:relative;
	margin:20px auto 10px auto;
}

section#about .timeline::after{
	content:'';
	position:absolute;
	width:6px;
	top:0;
	bottom:0;
	left:50%;
	background-color: #000;
	margin-left:-3px;
}

section#about .timeline .tab{
	padding:10px 40px;
	position:relative;
	background-color:inherit;
	width:50%;
}

section#about .timeline .tab img{
    width:100%;
	height:340px;
	border-radius: 10px;
	object-fit: cover;
}

section#about .timeline .tab h2{
	font-size:1.2em;
	font-weight:bold;
	color:#000;
}
section#about .timeline .tab.left{
	text-align:right;
}

section#about .timeline .tab p{
	font-size:0.9em;
	color:#000;
}

section#about .timeline .tab::after{
	content:'';
	position:absolute;
	width:25px;
	height:25px;
	background-color:#FFF;
	border:4px solid #000;
	top:25px;
	right:-13px;
	border-radius: 50%;
	z-index:1;
}

section#about .timeline .tab.left{
	left:0;
}

section#about .timeline .tab.right{
	left:50%;
}

section#about .timeline .tab.right::after{
	left:-13px;
}


/*****COLLECTIONS*****/
section#collections{
	padding-top:10px;
	padding-bottom:20px;
}

section#collections > .row > .col:first-child{
	padding:0px;
}


section#collections #categories{
	margin-top:20px;
}

section#collections #categories .category{
	display:block;
	border:1px solid #000;
	color:#000;
	background:#FFF;
	margin:10px 0px;
	padding:5px 6px;
	font-family: 'Comfortaa';
	font-size:0.95em;
	font-weight: bold;
	cursor: pointer;
}

section#collections #categories .category.active{
	color:#FFF;
	background:#000;
}

section#collections .product{
    width: 30.303%;
    float: left;
    margin: 10px 5px;
    overflow: hidden;
    color: #000;
    border: 5px solid #FFF;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .20);
    transition: all 0.5s;
    background-color: white;
}

section#collections .product.off{
	visibility: hidden;
}

section#collections .product img{
	display:block;
	width:100%;
	height:auto;
	margin-bottom:10px;
}

section#collections .product .name{
	text-align:center;
	font-size:1.1em;
	font-weight: bold;
	text-transform:capitalize;
	letter-spacing: 0.6px;
	margin-top:0px;
}


section#collections .product .category{
	display:none;
}


/**** SHOW PRODUCT****/
section#product #info{
	font-family: 'Comfortaa';
}

section#product #info img{
	width:auto;
	max-width: 100%;
	display: block;
	height:400px;
	margin:10px auto;
	border-radius: 5px;
	box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .20);
    
}

section#product #info #name{
	font-family: 'Montserrat';
	font-size:.1.2em;
	font-weight: bold;
	text-align: left;
	text-transform: uppercase;
}

section#product #info #desc{
	font-size:0.9em;
	text-align: justify;
}

section#product #info #brand,
section#product #info #category{
	font-size:0.99em;
	margin:15px 0px 5px 0px;
	width:49%;
	display:inline-block;
}

section#product #info .title{
	font-weight: bold;
	text-transform: uppercase;
	font-size:0.96em;
	vertical-align: middle;
	display:inline;
}
section#product #info .title::after{
	content:':';
	margin-left:5px;
	margin-right:5px;
}

section#product #info #sizes{
	font-size:1em;
	margin:18px 0px 7px 0px;
}

section#product #info #sizes .title::after,
section#product #info #stores .title::after{
	content:' ';
	margin-left:5px;
	margin-right:5px;
}

section#product #info #sizes ul{
	margin-top:10px;
}

section#product #info #sizes ul li{
	display:inline-block;
	padding:5px 8px;
	border:1px solid #000;
	background: #000;
	color:#FFF;
	font-weight: bold;
	font-size:0.7em;
}

section#product #info #stores{
	margin-top:30px;
}

section#product #info #stores img{
	width:100px;
	height:auto;
	margin:10px 5px 5px 5px;
	box-shadow: none;
}

section#product #info #notes{
	text-transform: uppercase;
	font-weight: bold;
	font-family: 'Montserrat';
	font-size:0.8em;
	margin:40px 0px 10px 0px;
	text-align: right;
}

section#product div#similar{
	margin-top:20px;
	margin-bottom:20px;
}

section#product div#similar .product{
    overflow: hidden;
    width:100%;
    min-height:280px;
    color: #000;
    box-shadow: 0 6px 8px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .20);
    transition: all 0.5s;
    background-color: white;
    margin:10px 0px 20px 0px;
}

section#product div#similar .product img{
	display:block;
	width:100%;
	height:280px;
	margin-bottom:10px;
}

section#product div#similar .product .name{
	text-align:center;
	font-size:1.1em;
	font-weight: bold;
	text-transform:capitalize;
	letter-spacing: 0.6px;
	margin-top:0px;
}

section#product div#similar .title{
	font-family: 'Montserrat';
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
	font-size:1.3em;
}

/*******CONTACT*******/

section#contact{
	padding-top:20px;
	padding-bottom:20px;
	font-family: 'Comfortaa';
}

section#contact #info{
	text-align:center;
}

section#contact #info .col {
	text-align:center;
}

section#contact #info .col .fa{
	font-size:2em;
	color:#000;
	font-weight:bold;
}

section#contact #info .col .data{
	font-size:0.9em;
	font-weight:bold;
}

section#contact #action{
	padding-top:20px;
	padding-bottom:20px;
}

section#contact #action .head-title{
	font-size:1.2em;
	font-weight:bold;
	text-align:center;
	text-transform:uppercase;
}

section#contact #action #map{
	width:100%;
	height:300px;
}

section#contact #action #form button[type="submit"]{ 
	color:#FFF;
	background:#000;
	text-transform:uppercase;
	font-weight:bold;
}

/******FOOTER********/
footer{
	width:100%;
	min-height:200px;	
	background:#000;
	padding-top:10px;
	color:#FFF;
	font-family: 'Comfortaa';
}

footer #name{
	font-size:1.2em;
	font-weight: bold;
	margin-bottom: 2px;
}

footer #tag{
	font-size:0.8em;
	font-weight: bold;
	margin-top:5px;
}

footer #desc{
	font-size:0.9em;
	text-align: justify;
}

footer .tag{
	margin-top:5px;
	margin-bottom:2px;
	text-align: center;
	font-weight: bold;
	font-size:0.9em;
}


footer #logo{
	display: block;
	margin:10px auto 10px auto;
	background: #000;
	width:90px;
	padding:10px;
	height:auto;
	border-radius: 15%;
	position: relative;
	border:4px solid #FFF;
}

footer .col > a{
	background: #FFF;
	display: inline-block;
	border-radius: 50%;
	margin-top:20px;
}

footer #social-tag{
	margin-top:5px;
	font-weight: bold;
	font-size:1em;
}

footer #social{
	text-align: center;
}

footer #social li{
	display: inline-block;
	margin:2px 5px;
}

footer #social li a{color:#FFF;}

footer #nav-tag{
	margin-top:65px;
	font-weight: bold;
	font-size:1em;
}

footer #nav-links{
	text-align: center;
}

footer #nav-links li{
	display: inline-block;
	margin:2px 3px;
	padding:5px;
	border:1.2px solid #FFF;
	font-size:0.8em;
}

footer #nav-links li a{color:#FFF;}