/*-------------------------------------------------------------------------- 
[Master Stylesheet] 
 
Project:	Bonpet     
Version:	1.0 
Last change:	12/14/16
--------------------------------------------------------------------------*/

@import url(http://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,latin-ext);

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

body { 
	color: #1f1f1f;
	font-size: 16px;
	font-family: Roboto, Arial, Tahoma, Verdana, sans-serif;
}

h1, h2, h3 { font-weight: normal; }

h1 {
	font-size: 36px;
	font-weight: 700;
	line-height: 1.5;
	padding: 1.25em 0 0;
}
.huge {
	font-size: 44px;
	line-height: 1.25;
}
.vecje {
	font-size: 24px;
}
.intro1 .wrap {
	/*background: url(slike/intro.jpg) bottom right no-repeat;*/
}
.vasepodjetje {
	position: absolute;
	bottom: 75px;
	left: 50%;
	margin: 0 0 0 212px;
	z-index: 11;
}
.intro1 {
	background: url(slike/bg-intro.jpg) bottom left repeat-x;
	padding: 0 0 125px;
	position: relative;
}
.smallcaps {
	font-size: 20px;
	font-variant: small-caps;
	letter-spacing: 1px;
	font-weight: 700;

}
h2 {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.5;
	padding: 1.25em 0 0;
}

p { line-height: 1.6; padding-top: 1.5em; }

ul, ol { padding-top: 1.5em; }

.seznam {
	list-style-type: none;
	padding: 0;
}
.seznam p {
	padding: 0;
	margin: 1.5em 0 0;
}
.seznam-large p {
	margin: 0.75em 0 0;
}
.seznam .no-mrg-top {
	margin: 0 0 0;
}
.seznam li {
	background: url(slike/ico-check.png) left 1px no-repeat;
	padding: 0 0 0 27px;
}
.chevron li { background: url(slike/ico-chev.png) left 1px no-repeat; }
.red li { background: url(slike/ico-check-red.png) left 1px no-repeat; }
.seznam-large li { background: url(slike/ico-check-red-large.png) left 12px no-repeat;
	padding: 0 0 0 30px;
}

li { line-height: 1.6; }

a:link, a:visited { color: navy; }

a:hover { text-decoration: none; }

img { display: block; }
a img { border: 0; }

.wrap { width: 960px; margin: 0 auto; padding: 0 0 51px; }

/*--------------------------------------------------------------------------
#header
*/

/*--------------------------------------------------------------------------
#main
*/

.main {
	background: white;
	position: relative;
}
.section { position: relative; }
.logo {
	height: 100px;
	position: absolute;
	
	bottom: 50px;
	right: 50px;
}

.intro {
	position: relative;
	height: 100vh;
	display: table;
	width: 100%;

	background: url(slike/background.jpg) center center no-repeat;

	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

	color: white;
	text-shadow: 0 1px 4px rgba(0,0,0,0.33);
}
#order, .thanks {
	position: relative;
	height: 100vh;
	display: table;
	width: 100%;

	background: url(slike/background.jpg) center center no-repeat fixed;
	background: url(slike/bg-order.jpg) center center no-repeat;

	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

	color: white;
	text-shadow: 0 1px 4px rgba(0,0,0,0.66);
}

.absolute {
	display: table-cell;
	vertical-align: middle;
}

.content {
	width: 623px;
	float: left;
}
.half {
	width: 480px;
	float: left;
}
.clmn {
	width: 286px;
	margin-right: 51px;
	float: left;
}
.clmn-3 {
	width: 320px;
	float: left;
}
.clmn-2 {
	width: 455px;
	margin: 0 50px 0 0;
	float: left;
}
.callus {
	font-size: 24px;
	background: url(slike/ico-phone.png) 13px center no-repeat;
	padding: 0 17px 0 48px;
	border: 1px solid white;
	line-height: 42px;
	display: inline-block;
	border-radius: 50px;
	float: right;
	margin: 22px 22px 0 0;
}
.clmn-4 {
	width: 240px;
	
	float: left;
}
.badge {
	width: 101px;
	margin: 0 auto;
}

.pop { opacity: 0; }

video#bgvid {
	position: fixed; right: 0; bottom: 0;
	min-width: 100%; min-height: 100%;
	width: auto; height: auto; z-index: -100;
	background: url(slike/bg-video.jpg) no-repeat;
	background-size: cover;
}
.full {
	width: 100%;
	padding: 0 0;
	display: table;
	margin: 0;
	max-width: none;
	height: 100vh;
}
.absolute {
	display: table-cell;
	vertical-align: middle;
}
.full-video {
	color: white;
	text-shadow: 0 0 4px rgba(0,0,0,0.66);
	background: url(slike/bg.png) top left repeat;
}
.slide p {
	position: absolute;
	bottom: 23px;
	left: 0;
	padding: 0 17px 0 11px;
	background: white;
	word-spacing: -1px;
}
.bg-order {
	background: #ed1c24;
	padding: 33px 0;
	color: white;

	font-size: 24px;
	font-weight: 700;
	text-align: right;
}
.btn:link, .btn:visited {
	color: #ffffff;
	text-decoration: none;
	padding: 4px 22px;
	display: inline-block;
	border-radius: 50px;
	margin: 0 0 0 11px;

	background: #aebcbf; /* Old browsers */
	background: -moz-linear-gradient(top,  #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); /* IE6-9 */
}
.btn:hover { color: #ED1C24; }
.slikca-top {
	margin: 31px 0 0;
	float: left;
}
.slikca-right { margin-right: 31px; }

/*--------------------------------------------------------------------------
#footer
*/

.arw {
	position: absolute;
	/*
	left: 50%;
	margin: 0 0 0 -25px;
	bottom: 50px;
	*/
	top: 50%;
	left: 50px;
	color: #ed1c24;
	margin: -25px 0 0 0;
}
.arw_intro {
	position: absolute;
	left: 50%;
	margin: 0 0 0 -25px;
	bottom: 50px;
	color: #ed1c24;
}

@keyframes bounce {
  0%, 10%, 25%, 40%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  30% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

.bounce {
  -webkit-animation: bounce 2s infinite;
  animation: bounce infinite 2s;
}

.bounce:hover {
-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
    animation-play-state: paused;
}

.barbara {
	width: 250px;
	margin: 0 23px 0 0;
	float: left;
}

.imglink {
	width: 240px;
	margin: 33px 40px 0 40px;
	padding: 7px;
	border: 1px solid #ED1C24;
	float: left;
}
.imglink:hover {
	background: #ED1C24;
}
.separator {
	padding: 39px 0 0;
	margin: 39px 0 0;
	border-top: 4px dotted silver;
}
#order .separator {
	padding: 33px 0 0;
	margin: 23px 0 0;
	border-top: 4px dotted white;
}
.cena { font-size: 24px; padding: 0.5em 0 0; }

.pogoji { padding: 51px 0 0; }
.pogoji a:link, .pogoji a:visited { color: white; text-decoration: none; }
.pogoji a:hover { color: #ED1C24; }

.thanks .pogoji {
	position: absolute;
	bottom: 50px;
	left: 50px;
}

/*--------------------------------------------------------------------------
#various
*/

.poudarjene {
	/*
	background: white;
	color: black;
	text-shadow: none;
	*/
	background: rgba(0,0,0,0.33);
	padding: 1px 4px;
	  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.velike {
	font-size: 48px;
}
.precrtane { text-decoration: line-through; }

.brand, .alarm { color: #ed1c24; }
.debele, strong { font-weight: 700; }

.tiskane { text-transform: uppercase; }

.align-center { text-align: center; }
.align-right { text-align: right; }

.no-padding-top { padding-top: 0; }
.no-padding-bottom { padding-bottom: 0; }

.no-mrg-top { margin-top: 0; }
.no-mrg-right { margin-right: 0; }

.mrg-top { margin-top: 39px; }

.spacer { clear: both; }	


@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.lightSpeedIn {
  -webkit-animation: lightSpeedIn ease-out 1s;
  animation: lightSpeedIn ease-out 1s;
}

@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px);
  }

  80% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInLeft {
  -webkit-animation: bounceInLeft ease-out 1s;
  animation: bounceInLeft ease-out 1s;
}


@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation: bounceIn 1s;
  animation: bounceIn 1s;
}

.animate1 {
	-webkit-animation: bounceIn 1s;
	animation: bounceIn 1s;
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.animate2 {
	-webkit-animation: bounceIn 1s;
	animation: bounceIn 1s;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.animate3 {
	-webkit-animation: bounceIn 1s;
	animation: bounceIn 1s;
	-webkit-animation-delay: 1.5s;
	animation-delay: 1.5s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.animate4 {
	-webkit-animation: bounceIn 1s;
	animation: bounceIn 1s;
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.fixed { position: fixed; }