/******** Theme All Major Elements ********

	1: Banner Slider
	2: Search Bar
	3: Slide Menu
	4: Bottons
	5: custom select styles

******** Theme All Major Elements ********/

/******************* Search Bar *******************/
#search { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(0,0,0, 0.8); z-index: 10000; opacity: 0;   
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-webkit-transform: translate(-100%, 0px) scale(0, 0);
-moz-transform: translate(-100%, 0px) scale(0, 0);
-o-transform: translate(-100%, 0px) scale(0, 0);
-ms-transform: translate(-100%, 0px) scale(0, 0);
transform: translate(-100%, 0px) scale(0, 0);}
#search.open { opacity: 1;
-webkit-transform: translate(0px, 0px) scale(1, 1);
-moz-transform: translate(0px, 0px) scale(1, 1);
-o-transform: translate(0px, 0px) scale(1, 1);
-ms-transform: translate(0px, 0px) scale(1, 1);
transform: translate(0px, 0px) scale(1, 1); }
#search input[type="search"] { position: absolute; top: 50%; width: 100%; color: #fff; text-transform: uppercase; background: rgba(0, 0, 0, 0); font-size: 60px;
font-weight: 300; height: 100px; text-align: center; border: 0px; margin: 0px auto; margin-top: -51px; padding-left: 30px; padding-right: 30px; outline: none;}
#search .sm-btn{ position: absolute; top: 50%; left: 44%; padding: 0; margin-top: 61px; display: inline-block; color: #fff!important;}
#search .close{ position: fixed; top: 15px; right: 15px; color: #fff; border-color: #357ebd; opacity: 1; padding: 10px 17px; font-size: 27px; border: 1px solid #fff;}
/******************* Search Bar *******************/

/******************* Slide Menu *******************/
.close-button{ width:1em; height:1em; position:absolute; right:1em; top:1em; overflow:hidden; text-indent:1em; 
font-size:.75em; border:none; background:transparent; color:transparent;}
.close-button::after{ -webkit-transform:rotate(-45deg);transform:rotate(-45deg);}
.close-button::before{ -webkit-transform:rotate(45deg);transform:rotate(45deg);}
.close-button::before,.close-button::after{ content:''; position:absolute; width:3px; height:100%; top:0; left:50%; background:#bdc3c7;}
.responsive-btn{ display:block; margin-top: 10px;}
.responsive-nav{ position:fixed; top:0; left:0; overflow:scroll;z-index:1001; width:300px; height:100%; background:#363636; font-size:1.15em;
-webkit-transform:translate3d(-320px,0,0); 
transform:translate3d(-320px,0,0); 
-webkit-transition:0 .4s; 
transition:transform .4s; 
-webkit-transition-timing-function:cubic-bezier(0.7,0,0.3,1); 
transition-timing-function:cubic-bezier(0.7,0,0.3,1);padding:40px 0;}
.responsive-nav ul li{ float:none;}
.responsive-nav ul li a{ color:#fff!important; width: 100%!important; padding:10px 20px; display: block;}
.show-menu .content::before{ opacity:1;
-webkit-transition:opacity .8s; 
transition:opacity .8s; 
-webkit-transition-timing-function:cubic-bezier(0.7,0,0.3,1);
transition-timing-function:cubic-bezier(0.7,0,0.3,1); 
-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
.show-menu .icon-list a{ -webkit-transition-duration:.9s; transition-duration:.9s;}
.show-menu .responsive-nav,.show-menu .icon-list,.show-menu .icon-list a{ 
-webkit-transform:translate3d(0,0,0); 
transform:translate3d(0,0,0); 
-webkit-transition:0 .8s; 
transition:transform .8s; 
-webkit-transition-timing-function:cubic-bezier(0.7,0,0.3,1);transition-timing-function:cubic-bezier(0.7,0,0.3,1);}
.sub-list{margin:0;padding:0 0 0 15px;}

.responsive-nav .navigation{ margin: 0 0 30px;}
.responsive-nav .aside-search{ position: relative; margin: 0 20px;}
.responsive-nav .aside-search a{ right: 10px; top: 17px;}
/******************* Slide Menu *******************/

/******************* Default custom select styles *******************/
div.tg-select { display: inline-block; vertical-align: middle; position: relative; text-align: left; z-index: 100;width: 100%;
-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
div.tg-select:focus{ outline: none; background: #fff;}
.tg-select select{ display: none;}
.tg-select span{ display: block; position: relative; cursor: pointer; padding: 0 18px; line-height: 48px;
height: 50px white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}
/* Placeholder and selected option */
.tg-select > span{ padding-right: 3em;}
.tg-select > span::after,
.tg-select .tg-selected span::after { speak: none; position: absolute; top: 50%; -webkit-transform: translateY(-50%); 
transform: translateY(-50%); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.tg-select > span::after{ content: '\25BE'; right: 1em;}
.tg-select .tg-selected span::after{ content: '\2713'; margin-left: 1em;}
.tg-select.cs-active > span::after{ -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg);}
div.cs-active{ z-index: 200;}
/* Options */
.tg-select .cs-options{ position: absolute; overflow: hidden; width: 100%; background: #fff; visibility: hidden;}
.tg-select.cs-active .cs-options{ visibility: visible;}
.tg-select ul{ list-style: none; margin: 0; padding: 0; width: 100%;}
.tg-select ul span{ padding: 1em;}
.tg-select ul li.cs-focus span{ background-color: #ddd;}
/* Optgroup and optgroup label */
.tg-select li.cs-optgroup ul{ padding-left: 1em;}
.tg-select li.cs-optgroup > span {cursor: default;}
.tg-select-menu > span { border: 1px solid #999; color: #a7a7a7;}
.tg-select-menu > span::after,
.tg-select-menu .tg-selected span::after{ content: "\f107"; font-family: fontawesome;}
.tg-select-menu ul span::after{ content: ''; opacity: 0;}
.tg-select-menu .tg-selected span::after { content: "\f00c"; font-family: fontawesome; font-size: 1.5em; opacity: 1;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;}
.tg-select-menu.cs-active > span{ background: #fff; border-color: transparent;}
.tg-select-menu .cs-options{ opacity: 0;
-webkit-transition: opacity 0.3s, visibility 0s 0.3s;
transition: opacity 0.3s, visibility 0s 0.3s;}
.tg-select-menu.cs-active .cs-options{ opacity: 1;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;}
.tg-select-menu ul span { padding: 0 30px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;}
.tg-select-menu .cs-options li span:hover,
.tg-select-menu li.cs-focus span{ color: #fff;}
/******************* Default custom select styles *******************/

/******************* Pegination *******************/
.pagination-holder{ text-align: center; float: left; width: 100%;}
.pagination{ display: inline-block; width: 100%; text-align: center; padding: 30px 10px; margin: 0;}
.pagination li{ display: inline-block;}
.pagination li a{ background: #f7f7f7; color: #999; border: 0; border-radius: 0;}
.pagination li a:hover{ color: #fff;}

.pagination li:first-child a, .pagination li:last-child a{ background: #363636; color: #fff; border-radius: 0; position: relative;}
.pagination li:first-child a:hover, .pagination li:last-child a:hover{ color: #363636;}
.pagination li:first-child a::before,
.pagination li:last-child a::before{ width: 0; position: absolute; font-weight: bold; display: none;
top: 0; height: 32px; background: #363636; line-height: 32px; text-align: center;}

.pagination li:first-child a::before{ font-size: 14px; content: "PRIJAŠNJA"; left: 29px;}
.pagination li:last-child a::before{ content: "SLJEDEĆA"; right: 29px;}

.pagination li:first-child a:hover::before,
.pagination li:last-child a:hover::before{ color: #fff; display: block; width: 80px;}
/******************* Pegination *******************/