/*

CSS for website

*/

@CHARSET "UTF-8";

/* When setting the primary font stack, apply it to the Pure grid units along with `html`, `button`, `input`, `select`, and `textarea`. Pure Grids use specific font stacks to ensure the greatest OS/browser compatibility. */
html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
    /* Set your content font stack here: */
    /*font-family: Georgia, Times, "Times New Roman", serif;*/

    font-family: 'Oswald', sans-serif;
    /*font-family: 'Lato', sans-serif;*/    
    /*font-family: 'Amatic SC', cursive;*/     
    /*line-height: 200%;*/
    /*font-family: 'Josefin Sans', sans-serif;*/
}

/*custom css:*/

.main-wrapper {    
	margin: 0 auto;
	max-width: 1300px;
	padding-left: 7%;
	padding-right: 7%;
    /*max-width: 960px;*/
    /*max-width: 1200px;*/
    
    /*padding-left: 15px;
    padding-right: 15px;*/
    /*border-left: 1px solid gainsboro;
    border-right: 1px solid gainsboro;*/    
    font-size: 36px;
    /*background-image: url('/img/britvulin/background/ruze_v5.jpg');
    background-size: 100%;
    background-repeat: repeat-y;
    background-attachment: fixed;
      */
      background: white;  
  
    
    /* paralax pokusaj:
    background-position: center 0;
	background-repeat: no-repeat;
	background-size: auto auto;
	background-image: url("/img/britvulin/background/ruze_v1.jpg");
	*/
}
.main-wrapper.main-wrapper-homepage {
	max-width: initial;
	padding-left: initial;
	padding-right: initial;
}
/*tablet-must go below desktop styles*/
@media only screen and (max-width: 1024px) {
	.main-wrapper {
		background-size: 200%;	  
	}
}
/*mobile-must go below desktop styles*/
@media only screen and (max-width: 768px) {
	.main-wrapper {
		background-size: 300%;	  
	}
}



/* homepage */

.hp-subtitle-title {
	font-size: 24px;
	margin: 30px;
	text-align: left;
}

.slider-wrapper {
	/*margin-top:125px;*/	
	/*min-height: 900px;*/
}
.slick-hp-slide {
	height: 100vh;
	width: 100%;
	background-repeat: no-repeat;
	background-size: cover;/*cover;*/
	background-position: center;
	/*-webkit-filter: blur(2px);
	filter: blur(2px);
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='2');
	*/
}

.slick-hp-slide-text {
	/*-webkit-filter: none;
	filter: none;*/
	position: relative;
	top: 50vh;		
	z-index: 40000;
	color: white;
	font-size: 60px;
	letter-spacing: 6px;
	text-align: center;
	line-height: 120%;
	-webkit-text-stroke: 0.5px black;
	/* dodat text shadow */
	/* ovaj tekst premjestiti izvan slidera
	   tako da fadeOut-a pri promjeni slide-ova
	 */
}
.hp-slider-view {
	height: 40px;
	z-index: 41000;
	position: relative;
	top:-20vh;
	line-height: 130%;
	text-align: center;
	color:white;
	-webkit-text-stroke: 0.3px #295809;
}
.fa-angle-animate {
	z-index: 45000;
	display: inline-block;
	padding-top: 0px;
	margin-top: 10px;
	animation-name: hp-arrows;
	animation-duration: 1s;
	animation-delay: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in;
}
@keyframes hp-arrows {
	from { margin-top: 0px; }
	to { margin-top: 40px; }
}

.slick-slide {
	/*width: 1600px;*/
}

.slick-prev {
	left: 15%;
	top: 50vh !important;
	height: 80px;
	color:black;
	z-index: 30000;
		
}
.slick-prev:BEFORE {
	font-family: FontAwesome;
	font-size: 60px;
}

.slick-next {
	left: 82%;
	/*top: 600px !important;*/
	top: 50vh !important;
	height: 80px;
	color:black;
	z-index: 30000;
		
}
.slick-next:BEFORE {
	font-family: FontAwesome;
	font-size: 60px;
}
/*tablet-must go below desktop styles*/
@media only screen and (max-width: 1024px) {
	.slick-hp-slide-text {
		font-size: 80px;
		top: 50vh;
	}
	.slick-prev {
		left: 10%;
	}
	.slick-next {
		left: 90%;
	}
	.slider-wrapper {		
	min-height: 600px;
	}
	.hp-slider-view {
		top: -26vh;
	}
}
/*mobile-must go below desktop styles*/
@media only screen and (max-width: 768px) {
	.slick-hp-slide-text {
		top: 35vh;
		font-size: 50px;
	}
	.slick-prev {
		left: 10%;
	}
	.slick-next {
		left: 80%;
	}
	.slider-wrapper {			
		min-height: 600px;
	}
	.hp-slider-view {
		top: -26vh;
	}
}

#hp-cta-decorations {
		margin-top: 70px;
		font-size: 20px;
}
#hp-cta-2 {
		margin-top: 35px;
		font-size: 20px;
}
.button-decorations, .button-contact {
	font-size: 20px;
	color: white;
   	border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-decorations {
	background: #6b688c;
}
.button-contact {
	background: #6b688c;
}

.hp-benefits-wrapper {
	padding-top: 80px;
	margin: 0 auto;
	max-width: 1300px;/*1200px;*/	
	text-align: center;
	padding-bottom: 100px;	
	font-size: 20px;
}
.hp-benefit div {
	padding-top: 30px;
}
.hp-benefit img {
	height: 64px;
	width: 64px;
}

/*tablet-must go below desktop styles*/
@media only screen and (max-width: 1024px) {
	.hp-benefit div {
		padding-top: 15px;
		padding-bottom: 40px;
	}	
}
@media only screen and (max-width: 768px) {
	
	.hp-benefit div {
		padding-top: 15px;
		padding-bottom: 60px;
	}
}
	

/* hp-decorations: */

.hp-decorations-wrapper {
	margin: 0 auto;
	max-width: 1300px;/*1200px;*/	
	text-align: center;
}


.hp-decorations-maintitle {
	text-align: center;
	/*color:black;*/
	color: #454444;
	font-size: 70px;
	letter-spacing: 6px;
	margin: 80px;
	margin-bottom: 80px;
}

.hp-decorations-img {
	/*height: 300px;
	width: 427px;*/
	display: block;
	min-height:300px;		
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 40px;	
}

/* overlay over img tag: */
.hp-decorations-img:before {
	  content: '';
	  position: absolute;
	  z-index:300;
	  top: 0;
      right: 0;
	  bottom: 0; 
	  left: 0;
	  /*background: rgba(77, 7, 84, 0.5); /* ili 0.37 */
	  /*mouseout:*/
	  transition: all 0.5s;
   	  -webkit-transition: all 0.5s;    	 
	  background: rgba(46, 90, 114, 0.53); /* tamno plava */ 
	  /*background: rgba(138, 178, 200, 0.5);*/	 
	  /* rgba(138, 178, 200, 0.5) */ 
}
.hp-decorations-img:hover:before {
	  transition: all 1s;
   	 -webkit-transition: all 1s; 
   	 opacity:0;
   	 cursor: pointer;
   	 content:'';
   	 /*background: linear-gradient(to right, transparent 25%, white);*/
   	 /*background: radial-gradient(circle, transparent, transparent, white);*/
   	 /*background:linear-gradient(transparent 150px, white);*/
}

.hp-decorations-img img {	
	min-height: 300px;
	max-width:100%;
	position: absolute;	
	top:0;
	left:0;		
	z-index:200;	
	cursor: pointer;
	/*mouseout:*/
	transform: scale(1.0);
	transition: all 0.3s ease-out;
}

/*
.hp-decorations-img:HOVER {	
	display: block;	
	z-index:30;	
	opacity:0;
	transition: all 0.5s;
    -webkit-transition: all 0.5s;
	cursor: pointer;
}*/
.hp-decorations-img div {
	position: absolute;
	z-index: 100;
	top: 120px;
	text-align:center;	
	width: 100%;
	left:0px;
	color: white;
	font-size: 25px;
	z-index:350;
	cursor: pointer;
	/*mouseout:*/
	transition: all 1s ease-out;
}

/* http://stackoverflow.com/questions/17393231/css-on-hover-show-and-hide-different-divs-at-the-same-time */
.hp-decorations-img:hover div {
	/*visibility:hidden;*/
	color: rgba(33,33,33,0);
	transition: all 2s ease-out;
}
.hp-decorations-img:hover img {
	transform: scale(1.1);
	transition: all 2s ease-out;
}

/*tablet-must go below desktop styles*/
@media only screen and (max-width: 1024px) {
	.hp-decorations-wrapper {
		margin: 0 auto;
		max-width: 800px;	
	}	
	.hp-decorations-maintitle {
		font-size: 60px;
		margin: 40px;
	}    
}
/*mobile-must go below desktop styles*/
@media only screen and (max-width: 768px) {
	
	.hp-decorations-maintitle {
		font-size: 40px;
		margin: 20px;
		margin-bottom:40px;
	}
	
    .hp-decorations-wrapper {
		margin: 0 auto;
		max-width: 400px;	
	} 	
		
}

/* GENERIC WRAPPER */
.generic-wrapper {
	margin: 0 auto;
	max-width: 1300px;/*1200px;*/	
	text-align: center;
	margin-top: 20px;
}
@media only screen and (max-width: 768px) {
	
}
.generic-maintitle {
	text-align: left;
	/*color:black;*/
	color: #454444;
	font-size: 24px;
	margin-top: 50px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 50px;
}

.post-date-text-wrapper {
	text-align: left;
	font-size: 20px;
	margin-bottom: 20px;	
	margin-left: 10px;
	margin-right: 10px;	
	max-width: 1100px;
}
.post-date {
	font-size: 16px;
}

.generic-subtitle {
	font-size: 24px;
	text-align: left;
	margin-top: 10px;
	margin-bottom: 10px;
}
.generic-text-section {
	font-size: 20px;
	text-align: left;
	margin-left: 10px;
	margin-right: 10px;	
}
.not-last {
	margin-bottom: 20px;
}

.gallery-wrapper {
	margin-bottom: 100px;
}

/* POST BOX */
.postbox-date {
	font-size: 14px;
	margin-top: 142px;
	background-color: #27272e42;
}

/* OUR WORK */

.our-work-wrapper {
	padding-top: 130px;
}
.ourwork-decorations-maintitle {
	text-align: center;
	/*color:black;*/
	color: #454444;
	font-size: 30px;
	margin: 100px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 145px;
}

a.ourwork_gallery_title {
	font-size: 25px;
}

/* ABOUT */
.standard-wrapper {
	margin: 0 auto;
	max-width: 1300px;/*1200px;*/		
	padding-bottom: 100px;
	margin-top: 130px;
	font-size: 16px;
}
.about-decorations-maintitle {
	text-align: center;
	/*color:black;*/
	color: #454444;
	font-size: 30px;
	/*letter-spacing: 6px;*/
	margin-top: 100px;
	margin-bottom: 140px;	
}
.about-desc {	
	/*color:black;*/
	color: #545353;
	font-size: 20px;		
	margin-bottom: 200px;	
	margin-left: 10px;
	margin-right: 10px;	
	text-align: left;
}
@media only screen and (max-width: 1250px) {
	.standard-wrapper {
		padding-left: 10px;
		padding-right: 10px;
	}   
}
@media only screen and (max-width: 766px) {
	.standard-wrapper {
		padding-left: 0px;
		padding-right: 0px;
	}    
}

/* OURWORK_SINGLE */

.ourwork_single-decorations-img {
	/*height: 300px;
	width: 427px;*/
	display: block;
	min-height:150px;		
	position: relative;
	margin: 0 auto;
	overflow: hidden;
		
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 40px;
	min-width: 140px;
}
/* overlay over img tag: */
.ourwork_single-decorations-img:before {
	  content: '';
	  position: absolute;
	  z-index:300;
	  top: 0;
      right: 0;
	  bottom: 0; 
	  left: 0;
	  /*background: rgba(77, 7, 84, 0.5); /* ili 0.37 */
	  /*mouseout:*/
	  /*transition: all 0.5s;
   	  -webkit-transition: all 0.5s;*/    	 
	  background: rgba(46, 90, 114, 0.2); /* tamno plava */ 
	  /*background: rgba(138, 178, 200, 0.5);*/	 
	  /* rgba(138, 178, 200, 0.5) */ 
}
.ourwork_single-decorations-img:hover:before {
	/*  transition: all 1s;
   	 -webkit-transition: all 1s;*/ 
   	 opacity:0;
   	 cursor: pointer;
   	 content:'';
   	 /*background: linear-gradient(to right, transparent 25%, white);*/
   	 /*background: radial-gradient(circle, transparent, transparent, white);*/
   	 /*background:linear-gradient(transparent 150px, white);*/
	cursor: -moz-zoom-in; 
    cursor: -webkit-zoom-in; 
    cursor: zoom-in;
}

.ourwork_single-decorations-img img {	
	min-height: 150px;
	max-width: 100%;
	position: absolute;	
	top:0;
	left:0;		
	z-index:200;	
	cursor: pointer;
	/*mouseout:*/
	/*transform: scale(1.0);
	transition: all 0.3s ease-out;*/
}

.magnific_popup_desc {
	font-size: 20px;
	color: white;
	margin-top: 10px;
	margin-bottom: 20px;
	text-align: center;
}

/*
.ourwork_single-decorations-img:HOVER {	
	display: block;	
	z-index:30;	
	opacity:0;
	transition: all 0.5s;
    -webkit-transition: all 0.5s;
	cursor: pointer;
}*/
.ourwork_single-decorations-img div {
	position: absolute;
	z-index: 100;
	top: 120px;
	text-align:center;	
	width: 100%;
	left:0px;
	color: white;
	font-size: 44px;
	z-index:350;
	cursor: pointer;
	/*mouseout:*/
	/*transition: all 1s ease-out;*/
}

/* http://stackoverflow.com/questions/17393231/css-on-hover-show-and-hide-different-divs-at-the-same-time */
.ourwork_single-decorations-img:hover div {
	/*visibility:hidden;*/
	color: rgba(33,33,33,0);
	/*transition: all 2s ease-out;*/
}
.ourwork_single-decorations-img:hover img {
	/*transform: scale(1.1);
	transition: all 2s ease-out;*/
}

.nav_view_also {
	color: #454444;
	margin-top: 65px;
	margin-bottom: 28px;
	font-size: 25px;
}

.nav_goback {
	color: #454444;
	margin-top: 65px;
	margin-bottom: 0px;
	font-size: 25px;
}
.nav_goback a {
	color: #454444;
	text-decoration: none;
}
.nav_goback a:visited {
	color: #454444;
	text-decoration: none;
} 
.nav_goback a:hover {
	color: black;
	text-decoration: underline;
} 
.fa-chevron-left-ourwork {
	margin-right: 10px;
}
/*mfp popup*/
.mfp-content {
	margin-top: 80px;
}
.mfp-close {
	font-size: 60px;
	/*left: 75px;
	top: 40px;*/
	/*padding-left:75px;
	top:40px;
	*/
	color: #45444d;	
	/*margin-top:30px;*/
}
.mfp-close:ACTIVE {
	top:0;
}
.mfp-arrow-left {
	left:15%;
}
.mfp-arrow-right {
	right:15%;
}


@media only screen and (max-width: 1200px) {
	.mfp-close {
		font-size: 60px;
		left: 0px;		
		color: #45444d;	
	}
	.mfp-arrow-left {
		left:5%;
	}
	.mfp-arrow-right {
		right:5%;
	}
}
/*mobile*/
@media only screen and (max-width: 768px) {
	
}

/* CONTACT */

.contact {
	margin: 0 auto;
	/*max-width: 1200px;*/
	margin-left: 10px;
	text-align: left;
}

.contact-decorations-maintitle {
	text-align: center;
	color: #545353;
	font-size: 30px;
	margin-top: 100px;
	margin-bottom: 140px;	
}
.contact-form {
	text-align: center;
	color: #545353;
	font-size: 20px;
	letter-spacing: 1px;	
	margin-bottom: 100px;
	padding-left: 0px;
	padding-right: 1%;
}

.contact-form-wrapper {
	padding-left: 70px;
}

#map {        
    height: 400px;       
}

.contact-heading {
	margin-bottom: 30px;
	font-size: 24px;
}
.contact-info {
	font-size: 18px;
	margin-bottom: 40px; 
}

.gps_link:HOVER {
	cursor: pointer;
}
      
/*tablet*/
@media only screen and (max-width: 1024px) {
	.contact-form {		
		padding-right: 15%;
	}
	.contact-form-wrapper {
		padding-left: 30px;
	}
	.contact {
		margin-left: 30px;
		margin-right: 20px;
	}
}
/*mobile*/
@media only screen and (max-width: 768px) {
	.contact-form {		
		padding-right: 10%;
	}
	.contact-form-wrapper {
		padding-left: 10px;
	}
	.contact {
		margin-left: 15px;
		margin-right: 10px;
	}
}

#contact-submit-button {
	float: right;
	color: white;
}


/* Preloader: */
.preloader {
	display: none;
	z-index:100000;
	position: fixed; /* absolute */
	background: rgba(0,0,0,1);
	height:100%;
	width:100%;
	margin: 0 auto;
	text-align: center;
	
}
.preloader .preload_1 {
	display:none;
	margin-top: 20%;
    animation-name: spin;
    animation-duration: 1500ms; /*2000ms*/
    animation-iteration-count: 1; /*infinite*/
    animation-timing-function: linear; /*linear*/
}

@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
/*tablet*/
@media only screen and (max-width: 1024px) {
	.preloader img {
		margin-top: 25%;
	}
}
/*mobile*/
@media only screen and (max-width: 768px) {
	.preloader img {
		margin-top: 50%;
	}
}

/*LOGO*/

.main-logo-wrapper {
	line-height: 36px;
    /*margin-bottom: 7px;*/
    float: left;
    letter-spacing: 0.8px;
    font-size: 240%;
    /*margin-left:15px;*/
    margin-top: 7px;
    /*margin-left: 10%;*/
}
.main-logo-wrapper a {	
    text-decoration: none;
    color: white;
}
.main-logo-wrapper a:visited {
    color: white;
}
.main-logo-wrapper a:hover {
    color: white;
}
.main-logo-wrapper a.active {
	color: white;
}

.main_logo {
	width: 56px;
	display: block;
	float: left;	
	/*transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);*/
}
.main_logo_text {
	float: right;
	margin-left:15px;
}

.logo-above {
	font-size: 20px;
}
.logo-below {
	text-align: center;
	font-size: 20px;
}

/*tablet*/
@media only screen and (max-width: 1024px) {
    .main-logo-wrapper {
        margin-left: 0px;
    }
}
@media only screen and (max-width: 768px) {
    .main-logo-wrapper {
        margin-left: 0;
        margin-top: 10px;
    }
    .main_logo_text {
		float: right;
		margin-left:0;
		margin-left: 20px;
	}
    .logo-below {
		text-align: left;
	}
}

.sub-logo {
    font-size: 33%;
	word-spacing: 6px;
	letter-spacing: 4px;
	margin-bottom: 5px;
	padding-left: 3px;
}

/*links:*/
.active a, .active {
    /*font-weight: bold;*/
    color: white;
}

.main-menu {
	padding:0;
	padding-top: 6px;	
}

.main-menu li:HOVER {
	border-bottom: 1px solid white;
}
.main-menu li.active {
	border-bottom: 1px solid white;
}
.main-menu li.active a {
	border-bottom: 1px solid white; /*gainsboro #0093ff;*/
    padding-bottom: /*19px;*/10px;
}
.main-menu li a:HOVER {
    border-bottom: 1px solid white; /*gainsboro #0093ff;*/
    padding-bottom: /*19px;*/10px;
}
@media only screen and (max-width: 1250px) {
	.main-menu {
		padding-top: 10px;
	}
	
}
@media only screen and (max-width: 800px) {
	.main-menu {
		/*padding-top: 100px;*/
		padding-top: 10px;
	}
    .main-menu li:HOVER {
		border-bottom: none;
	}
	.main-menu li.active {
		border-bottom: none;
	}
	.main-menu li.active a {
		border-bottom: 1px solid white; /*gainsboro #0093ff;*/
	    padding-bottom: /*19px;*/10px;
	}
}


/*footer:*/
footer {
	padding-top: 10px;
	font-size: 20px;
    /*max-height: 300px;*/ 
    /*border: 2px solid gainsboro;*/
    border-top:0px solid black; /*67728980*/
   /* border-top: 25px solid #71525233; *//*#a20c0c33;*/
    /*border-top: 1px solid gainsboro;*/
    background-color: #95badf; /*#56575C;*/ /*#324248;*/ /*#D2F6FFB3;*/ /*#F48F8C;*/
/*background: linear-gradient(to top left, #434450, #000500);*/
/*background: linear-gradient(to bottom right, #171515, #2C1709);*/
/*background: linear-gradient(to top, #435089, #362424);*/
/*background: radial-gradient(red, brown, white);*/    
    /* #F48F8C #C8706F- crvenkasta */ 
    /*center footer, add some space:*/
    /*max-width: 992px;*/
    margin: 0 auto;
    /*margin-bottom: 50px;*/
    /*padding-bottom: 5px;*/
    /*margin-top: 80px;*/    
	margin-top: 100px;
}
.footer-search {
    /* margin-left: 33%; */
    margin-left: 3%;   
    margin-top: 15px;
}
.footer-form-search {
    margin-top: 10px;
}
#footer-search {
    width: 70%;
}

.footer-info {
	
    margin: 0 auto;
    max-width: 992px;
}
@media only screen and (max-width: 768px) {
	.footer-info {
		margin-left: 15px;
		margin-right: 15px;
		margin-bottom: 20px;
	}
}
.footer-column {	
    /*line-height: 30px;*/
    color: darkslategrey;  
	margin-bottom: 4px;      
}
.footer-column-second {
	text-align: center;
}
.footer-column ul li.active a {
	border-bottom: 1px solid gainsboro; /*#0093ff;*/
    padding-bottom: /*19px;*/4px;
    color: white;
}
.footer-column ul li a:hover {
	border-bottom: 1px solid gainsboro; /*#0093ff;*/
    padding-bottom: /*19px;*/7px;
    color: white;
}

.footer-column-last {
	text-align: right;
	padding-right: 16px;
}

.footer-column ul {	
    padding-left: 17px;    
    margin-top:0px;
    margin-bottom:0px;
    line-height: 35px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.footer-column ul li{
    list-style: none;
    border-right: 0px solid gainsboro;    
	display: inline;
    margin-right: 23px;
}
.footer-column ul li a {
    text-decoration: none;    
    color: white;
    text-transform: none;
    /*letter-spacing: 1.5px;*/
}
.footer-copyright {
    /*padding-top:10px;*/
    /*padding-bottom: 10px;*/
    color: /*#7a756499;*/white;
    text-align: right;
    margin-top:0px;
	margin-right: 20px;
	padding-bottom: 4px;
    font-size: 12px;
    
}
.footer-copyright div {
	line-height: 130% !important;
}
.footer-copyright-link {	
	font-size: 12px;
}
.footer-copyright-link a:link, .footer-copyright-link a:VISITED {
	color: blue;
	text-decoration: none;
}
.footer-copyright-link a:hover {
	color: white;
	text-decoration: underline;
}
.footer-britvulin-rights {
	font-size: 12px;
}

/*social:*/

.social-icons a {
	margin-right: 12px;		
}
.social-icons a img {
	margin-top: 11px;
}
.facebook {
	width: 30px;
	height: auto;
}
.linkedin {
	width: 37px;
	height: auto;
}

/*other common stuff:*/
.centered {
    margin: auto;
}

/*Libraries css:*/
/* Header by: http://www.jqueryscript.net/menu/jQuery-Plugin-For-Responsive-Sticky-Header-Navigation.html */

.main_h {
    box-sizing: border-box;
    /*position: fixed;*/ /* remove for non-sticky */
    top: 0px;
    max-height: 140px;
    z-index: 51000;
    width: 100%;
   /* padding-top: 12px;*/
   /* background: rgba(44,44,44,0.5); /* 0.8 */   
    overflow: hidden;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    opacity: 0;
    top: -100px;
    /*padding-bottom: 6px;*/
    /*font-family: "Montserrat", sans-serif;*/
}
/*tablet-must go below desktop styles*/
@media only screen and (max-width: 1200px) {
	
}
/*mobile:*/
@media only screen and (max-width: 800px) {

    .main_h {
        box-sizing: border-box;
        max-width: 780px;
        padding-top: 5px; /*25*/
        max-height: 100px;
    }
}

.open-nav {
    max-height: 500px !important;
}

.open-nav .mobile-toggle {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
}

.sticky { 
    /*background-color: white; /* rgba(255, 255, 255, 0.93);
    /*background: linear-gradient(#fff 54%, rgb(239, 235, 245));*/
    opacity: 1;
    top: 0px;   
    /*border-bottom: 1px solid white;*/
    /*border-bottom: 1px solid rgba(17, 74, 238, 0.26);*/
    background: rgba(33,33,33,0.7);
    /*background: #052c60e6; not supported in chrome */
    background: rgba(5,44,96,0.901);
    
    /*sticky shadow:*/
    /*
    -webkit-box-shadow:0px 4px 6px -6px red;
    -moz-box-shadow:0px 4px 6px -6px red;
    box-shadow:0px 4px 6px -6px darkslategray;
    */
    /*text-shadow: -1px -1px 13px rgba(167, 150, 150, 0.45);*/
}
.sticky_bg {		
	background: #324248; 
	background: #45444D; /*#42434B*/
	background: #95badf;	
	/*background: #052c60e6; not supported in chrome */
    background: rgba(5,44,96,0.901);
	/*background-image: url('/img/app_tomislav/nav/DSC05756.jpg');
	background-size: 100%; 
	background-clip: content-box;
	*/
/*	background-size: 60% 80px; */
	/*background: linear-gradient(to bottom right, blue, green);*/
	/*background: linear-gradient(to bottom left, #434450, #000500);*/
	/*background: linear-gradient(to left top, #435089, #362424);*/
	/*border-bottom: 20px gray;*/
}

nav {
    /*letter-spacing: 2px;*/
    /*float: left; */ /*right*/
    /*width: 60%; */ /*60%*/
}
@media only screen and (max-width: 800px) {

    nav {
        width: 100%;
    }
}

nav ul {		
    padding-top: 0px; 
    list-style: none;
    overflow: hidden;
    text-align: right;
    float: right; 
}
@media only screen and (max-width: 800px) {

    nav ul {
        padding-top: 17px; /*10*/
        margin-bottom: 15px;
        /*float: left;*/
        text-align: center;
        width: 100%;
    }
}

nav ul li {
    display: inline-block;
    margin-left: 70px;
    line-height: 1.5;
}

nav ul li a {
	color: white;
}

nav ul a {
    color: white; /*#888888*/
    text-transform: none;
   	font-size: 20px;
    text-decoration: none;
}
nav ul a:hover {
    color: white;
}
nav ul a.active {
    color: white;
}

.mobile-toggle {
    display: none;
    cursor: pointer;
    font-size: 36px;
    position: absolute;
    right: 34px; /*22*/
    top: 26px; /*0*/
    width: 30px;
    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
}
@media only screen and (max-width: 800px) {
	nav ul a {
	    color: white; /*#888888*/
	    text-transform: none;
	   	font-size: 20px;
	    text-decoration: none;
	}	
    .mobile-toggle {
        display: block;
    }
}

.mobile-toggle span {
    width: 40px;
    height: 4px;
    margin-bottom: 11px;
    border-radius: 1000px;
    background: white;/*#8f8f8f;*/
    display: block;
}

.nav_separator {
	margin-left: 140px;
}

.row {
    /*max-width: 960px;*/    
    max-width: 1300px; /* 1200px; */
    margin: 0 auto;
    padding-left: 7%;
    padding-right: 7%;
}

@media only screen and (max-width: 1200px) {

    nav ul li {
        display: inline-block;
	    margin-left: 15px;
	    line-height: 1.5;
    }
}

@media only screen and (max-width: 800px) {

    nav ul li {
        width: 100%;
        padding: 7px 0;
        margin: 0;
    }
}

/*error404*/
/* generic title for other pages: */
.gen-main {
	padding-top: 125px;
    border-bottom: 1px solid gainsboro;
    text-align: center;
    padding-bottom: 35px;
}
.gen-main-title a {
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    color: black;    
}
.gen-main-title a:visited {
    text-decoration: none;
    color: black;
}

/* table style */
#clubrecordstable {
	font-family: Arial, Helvetica, sans-serif;
	border-collapse: collapse;
	width: 100%;
  }
  
#clubrecordstable td, #clubrecordstable th {
border: 1px solid #ddd;
padding: 8px;
}

#clubrecordstable tr:nth-child(even){background-color: #f2f2f2;}

#clubrecordstable tr:hover {background-color: #ddd;}

#clubrecordstable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: rgba(5,44,96,0.901);
color: white;
}