// global stuff


body {

	color: $colorDarkBlue;
	@include fontFace($meta-light);
	background: $colorWhite;



}

a { outline: none; }



.meta-regular {
    @include meta-regular;
}
.meta-light {
    @include meta-light;
}
.bodoni-book {
    @include bodoni-book;
}


// bootstrap overrides
.container-fluid {
	padding-right: 30px;
    padding-left: 30px;

	&.nospace{
		padding-right: 0;
	    padding-left: 0;
	}


	> .container{
		padding-right: 0;
	    padding-left: 0;
	}

	> .row{
		margin-right: 0;
	    margin-left: 0;
	}
}
.container{
	padding-right: 30px;
    padding-left: 30px;
}

.row{
	margin-right: -30px;
    margin-left: -30px;
}

 div[class^="col"]{
	padding-right: 30px;
    padding-left: 30px;
}

.ov { overflow: visible !important; }
.oh { overflow: hidden !important; }

// major typo stylesheet
p{
	@include fontSize(18);
	@include lineHeight(28,18);
	margin-bottom: 2.8rem;
	+ h2{
		padding-top: 1.2rem;
	}


	}

	@include media-breakpoint-up(md){
		@include fontSize(20);
		@include lineHeight(30,20);
		margin-bottom:3rem;
		+ h2{
			padding-top: 3rem;

	}
}

strong{
	color: $colorPrimaryRed;
	font-weight: 400;
}

p.highlight{
	@include fontSize(24);
	@include lineHeight(34,24);
	margin-bottom: 3rem;
	position: relative;
	padding: 2rem 0;

	&:before, &:after{
		content: "";
		position: absolute;
		left: 0;
		display: block;
		width: 80px;
  		height: 2px;
		background: rgba(64, 149, 216, 0.25);
	}
	&:before{
		top: 0;
	}

	&:after{
		bottom: 0;
	}

	@include media-breakpoint-up(md){
		@include fontSize(36);
		@include lineHeight(46,36);
		margin-bottom: 4rem;
		padding: 2.8rem 0;
	}
}

h2{
	color: $colorPrimaryRed;
	@include fontSize(30);
	@include lineHeight(40,30);
	margin-bottom: 1rem;

	@include media-breakpoint-up(md){
		@include fontSize(36);
		@include lineHeight(46,36);
		margin-bottom: 2rem;
	}
}

.title{
	@include fontSize(48);
	@include lineHeight(54,48);
	@include fontFace($bodoni-book);
	color: $colorDarkBlue;
	margin-bottom: 6rem;
	position: relative;

	@include media-breakpoint-up(md){
		@include fontSize(72);
		@include lineHeight(82,72);
		margin-bottom: 8rem;
	}
}

.sup-title{
	color: $colorPrimaryRed;
	@include fontSize(16);
	@include lineHeight(24,16);
	margin-bottom: 1.2rem;
	letter-spacing: 6px;
	text-transform: uppercase;

	@include media-breakpoint-up(md){
		@include fontSize(20);
		@include lineHeight(26,20);
		letter-spacing: 8.9px;

	}
}

a{
	&:hover{
		color: $colorPrimaryRed;
		text-decoration: none;
	}
}

a.dot-link{
	color: $colorPrimaryBlue;
	@include fontSize(18);
	@include lineHeight(21,18);
	display: inline-block;
	position: relative;
	padding: 3px;
	padding-left: 22px;
	@include transition($transition-base);

	@include media-breakpoint-up(lg){
		@include fontSize(20);
	}

	&:before{
		content: "";
		display: block;
		border-radius: 50%;
		width: 7px; height: 7px;
		background: #B0D4F0;
		// border: 3px solid #CCE4F7;
		box-shadow: 0 0 0 3px #CCE4F7;
		border-spacing: 3px;
		position: absolute;
		top: calc(50% + 0px);
		transform: translateY(-50%);
		left: 3px;
		@include transition($transition-base);

	}

	&:hover, &.hover{
		color: $colorPrimaryRed;
		text-decoration: none;
		&:before{
			background:$colorPrimaryRed;
			box-shadow: 0 0 0 6px #F5D0D4;
		}
	}
}

//fit video
.fluid-width-video-wrapper {
	border-radius: 30px; overflow: hidden;
}

//main article-image

	.main-article{

		padding-top: 4rem;
		padding-bottom: 8rem;



		@include media-breakpoint-up(md){
			padding-top: 8rem;
			padding-bottom: 14rem;
		}

		* {
			@include clearLast;
		}

		.intro-text{

			margin-bottom: 3rem;

			@include media-breakpoint-up(md){
				margin-bottom: 6rem;
			}

			p{
				color: $colorHighlightBlue;
				@include fontSize(24);
				@include lineHeight(34,24);
				margin-bottom: 3.4rem;
				@include clearLast;


				@include media-breakpoint-up(md){
					@include fontSize(30);
					@include lineHeight(42,30);
					margin-bottom: 4.2rem;
				}
			}

		}

		h2{
			@include fontFace($bodoni-book);
		}

		img {
			width: 100%;
			height: auto;
			border-radius: 30px;
		}
	}


//graphics-container

.graphics-container{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	//max-width: 1920px;
	height: 100%;
	overflow: hidden;
	z-index: -2;

	svg{

		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 800px;
	}

	@include media-breakpoint-up(md){

		svg{
			width: 1700px;
			top: 40%;
		}
	}


}


// intro block major styles
.intro-block{
	// padding-top: 6rem;
	padding-bottom: 0;
	position: relative;
	z-index: 100;

	@include media-breakpoint-up(md){
		// padding-top: 0rem;
	}



	.article-image{
		img{
			width: auto;
			max-width: 100%;
		}
	}
}

// scetion main
section#main{

	padding-top: 9rem;
	overflow: hidden;

	@include media-breakpoint-down(md){
		padding-top: 7rem;
	}

	video{
		width: 100%;
		margin-bottom: 2.8rem;

		@include media-breakpoint-up(md){
			margin-bottom: 3rem;
		}
	}

}


//master navigation styles
.master-nav{



	ul{
		list-style-type: none;
		padding: 0;
		margin-bottom: 2.5rem;
		display: none;
		@include media-breakpoint-up(md){
			display: block;
		}

	}

	a{
		display: block;
		color: $colorPrimaryBlue;
		padding: .8rem 4rem;
		text-decoration: none;
		position: relative;
		&:focus, &:visited{
			color: $colorPrimaryBlue;
		}
		&.active, &:hover, &:active{
			color: $colorPrimaryRed !important;
		}

		&.category-link{
			padding: 1.5rem 4rem;
			display: block;
			color: $colorDarkBlue;
			text-transform: uppercase;

			&.active{
				color: $colorPrimaryRed !important;
			}
		}


		@include media-breakpoint-up(lg){

			padding: .8rem 0;
			&.category-link{
				padding: 1.5rem 0;
			}

		}

	}


	.row{
		//justify-content: space-around;
	}
	.col{

		// flex-basis: 100%;
		// padding: 0;
		// max-width: 100%;

		@include media-breakpoint-up(md){
			// flex-basis: 33.33333%;
			// max-width: 33.33333%;
			// padding-right:30px;
			// padding-left: 30px;
		}

		@include media-breakpoint-up(lg){
			// flex-basis: 0;
		}
	}




	.category-link{
		.menu-toggle{


			position: absolute;
			height: 4rem;
			width: 4rem;
			overflow: hidden;
			top: 50%;
			right: 2rem;
			transform: translateY(-50%);
			padding: 1.9rem 1.3rem;

			span{
				display: block;
				position: absolute;
				height: 2px;
				width: 14px;
				background: $colorPrimaryBlue;
				//top: auto;
				transition: all .3s ease-in-out;

				&:nth-child(1) {

				}

				&:nth-child(2) {
					transform: rotateZ(90deg);
					top: 19px;
				}
			}

			@include media-breakpoint-up(md){
				display: none;
			}
		}

		&.active {
			.menu-toggle{
				span{

					&:nth-child(2) {
						transform: rotateZ(90deg);
						top: -20px;
					}
				}

				@include media-breakpoint-up(md){
					display: none;
				}
			}
		}

		&.active, &.hover{
			span{

				background: $colorPrimaryRed;
			}
		}
	}


}


.product-article__message{
	position: relative;
	overflow: hidden;
	.product-article__message-heart{
		width: 100%;
		max-width: 780px;
		margin:0px auto;
		overflow: hidden;

		.product-article__message-heart-side{
			position: absolute;
			top:50%;
			transform:translateY(-50%);

			&.heart-side-left{
				left:-230px;
			}
			&.heart-side-right{
				right:-230px;
			}
			@media (max-width: 1222px) {
				display: none;
			}
		}

		.product-article__message-heart-image{
			background-position:50% 50%;
			background-repeat: no-repeat;

			.product-article__message-heart-image-mask{
				position: relative;
				text-align: center;

				.hearts {
					position: absolute;
					top: 0; left: 0; width: 100%; height: 100%;
					svg { overflow: visible !important; }
				}

				svg#mask {
					position: absolute;
					// display: none;
					top: 0; left: 0; width: 100%; height: 100.1%;
					box-shadow: 0 66px 0 #fff inset, 0 -66px 0 #fff inset, 0 15px 0 #ffcc00, 0 -5px 0 #fff;
				}

				.wrap {
					background: rgb(207,228,244);
					background: -moz-linear-gradient(top, rgba(207,228,244,1) 0%, rgba(233,243,250,1) 100%);
					background: -webkit-linear-gradient(top, rgba(207,228,244,1) 0%,rgba(233,243,250,1) 100%);
					background: linear-gradient(to bottom, rgba(207,228,244,1) 0%,rgba(233,243,250,1) 100%);
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe4f4', endColorstr='#e9f3fa',GradientType=0 );
					@include media-breakpoint-down(sm) {
						position: relative;
						overflow: hidden;
						height: 100vw;
					}
				}

				.product-article__message-heart-image-mask-img{
					position: relative;
					@include media-breakpoint-up(md) {
						top: 150px;
					}
					@include media-breakpoint-down(sm) {
						top: 50%;
						transform: translateY(-50%);
					}
				}
				@include media-breakpoint-down(md) {
					// width: 24vw;
				}
			}
		}
	}
}
.product-article__message__simple {
	padding-top: 10rem;
	padding-bottom: 10rem;
	background-image: linear-gradient(to top, #ffffff, #eff8ff);
	overflow: hidden;

	.product-article__message-top-subtitle {
		@include meta-regular;
		@include fontSize(20);
		@include lineHeight(30,20);
		letter-spacing: 10px;
		margin-bottom: 20px;
		color: #ce1628;
		text-transform: uppercase;
	}
	.product-article__message-top-title {
		color: #303c51;
		margin-bottom: 4rem;
		span { color: #ce1628; }
	}
	.bottle {
		height: 718px; width: 277px; display: block;
		position: relative; left: 50%; transform: translateX(-50%);
		& > div {
			width: 100%; height: 100%;
			background: transparent url($theme-url + 'assets/images/graphics/packshot-voda.png') no-repeat center center;
			transform: translateY(0);
            @include transition($transition-base);
		}
		&:before {
			content: ""; display: block; width: 580px; height: 201px;
			background: transparent url($theme-url + 'assets/images/graphics/brocoli.png') no-repeat center center;
			position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: -1;
		}
		&:after {
			content: "";
			display: block; width: 50%; height: 50px;
			border-radius: 50%; background: #ffcc00;
			opacity: 0;
			position: absolute; bottom: 20px; left: 50%;
			transform: translateX(-50%);
			background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
			background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);
			background: radial-gradient(ellipse at center, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#00000000',GradientType=1 );
			box-shadow: 0 0 20px 0 rgba(0,0,0,.2);
			@include transition($transition-base);
		}
		@media screen and (max-height: 780px) {
			& > div {
				background-size: auto calc(100vh - 95px);
				background-position: top center;
			}
			margin-top: 20px;
		}
		@include media-breakpoint-down(md) {
			height: 586px;
			& > div {
				background-size: 80% auto;
    			background-position: bottom center;
			}
		}
		&:hover, &.hover {
			& > div  { transform: translateY(-10px); }
			&:after {
				opacity: 1;
				width: 60%;
			}
		}
	}
}


.earth-parallax{
	position: relative;
	overflow: hidden;
	min-height: 1000px;
	z-index: 10;
	.hold-my-parallax {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		@include media-breakpoint-up(md) {
			clip: rect(0, auto, auto, 0);
		}
	}
	.item-background{
		min-height: 1000px;
		overflow: hidden;
		background-position: bottom center !important;
		background-size:cover;
		background-repeat: no-repeat;

		bottom: -100px;
		width: 100%;
		@include media-breakpoint-up(md) {
			// position: fixed;
			background-attachment: fixed;
		}
	}
	.item-oblaci-fixed{
		position: absolute;
		top: -180px;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
		pointer-events: none;
		img{
			position: absolute;
			top: 0px;
			width: 100%;
		}


	}
	@keyframes cloud1{
		from{
			left: -28vw;
		}
		to{
			left: 100vw;
		}
	}
	@keyframes cloud2{
		from{
			left: -30vw;
		}
		to{
			left: 100vw;
		}
	}
	.item-oblaci-svi{
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		z-index: 100;
		pointer-events: none;
		.ob1, .ob2 {
			position: absolute;
		}
		.ob1 {
			top: 33%;
			left: -26vw;
			// box-shadow: 0 0 0 5px #ffcc00;
		}
		.ob2 {
			top: 47%;
			left: -28vw;
			// box-shadow: 0 0 0 5px #ff0000;
		}
		&.animateMe {
			.ob1 { animation: cloud1 26s linear infinite; }
			.ob2 { animation: cloud2 24s linear 6s infinite; }
		}
	}
	.earth-parallax__text{
		width:100%;
		height:auto;
		position: fixed;
		bottom:0;
		left:50%;
		transform: translate(-50%, -50%);
		text-align: center;
		h3{
			width:100%;
			max-width: 900px;
			margin:0px auto;
			@include fontFace($bodoni-book);
			@include fontSize(120);
			@include lineHeight(120, 120);
			-webkit-filter: blur(1px);
			filter: blur(1px);
			letter-spacing: 1.7px;
			text-align: center;
			margin-bottom:40px;
			text-shadow: 0 30px 30px rgba(0, 0, 0, 0.5);
			color: #fff;
		}
		.earth-parallax__text-button{
			display: inline-block;
			position: relative;
			z-index: 1000;
			height:60px;
			margin:0px auto;

			a{
				width: 100%;
				height: 100%;
				margin:0;
				padding: 0 40px;
				border:0px;
				@include fontSize(16);
				@include lineHeight(60,16);
				font-weight: 600;
				color: #f2f2f2;
				display: block;
				text-align: center;
				border-radius: 30px;
  				box-shadow: 0 10px 30px 0 rgba(101, 171, 227, 0.3);
				background-image: linear-gradient(to bottom, #3893da, #6fc6ef);
				@include transition($transition-base);
				&.iAmHover {
					box-shadow: 0 10px 30px 0 rgba(206, 22, 40, 0.3), inset 0 10px 30px 0 #c31829;
					background-image: linear-gradient(to top, #ce1628, #ce1628);
				}
				&:hover {
					box-shadow: 0 10px 30px 0 rgba(206, 22, 40, 0.3), inset 0 10px 30px 0 #c31829;
					background-image: linear-gradient(to top, #ce1628, #ce1628);
				}
			}
		}
	}
	.earth-parallax__text_shadow{
		width:100%;
		height:auto;
		position: fixed;
		z-index: 1000;
		bottom:0;
		left:50%;
		transform: translate(-50%, -50%);

		display: none;

		.earth-parallax__text-button{
			display: inline-block;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			z-index: 1000;
			background-color: rgba(0, 0, 0, 0);
			z-index: 1000;
			height:60px;
			margin:0px auto;

			a{
				width: 100%;
				height: 100%;
				margin:0;
				padding: 0 40px;
				border:0px;
				@include fontSize(16);
				@include lineHeight(60,16);
				font-weight: 600;
				color: transparent;
				display: block;
				text-align: center;
				border-radius: 30px;
				background-color: rgba(0, 0, 0, 0);
			}
		}
	}

	.item-birds-1{
		position: absolute;
		height: 100%;
		width: 100%;
		top: 0;
	}

	.birds-1{
		position: absolute;
		left: 20%;
		top: 45%;
		height: 76px;
		width: 79px;
	}

	&.moveOn {
		.earth-parallax__text { position: absolute; }
		.earth-parallax__text_shadow { position: absolute; }
		.item-background{ background-attachment: scroll; }
	}
}

.grootBanner {
	background: #000 url('../../../assets/images/temp-graphics/zagnjurilajebasjefino.png') no-repeat center center;
	background-size: 100% auto;
	position: relative;
	z-index: 1000;
	width: 100%;
	overflow: hidden;
	@include media-breakpoint-up(xl) {
		height: 810px;
	}
	@include media-breakpoint-down(xl) {
		height: 0;
		padding-top: 42.5%;
	}
	@include media-breakpoint-down(md) {
		height: 400px;
		padding-top: 0;
		background-size: auto 100%;
	}
	.holdMyBanner {
		position: absolute;
		top: 0; width: 100%; height: 100%;
		@extend .d-flex;
		@extend .align-items-center;
	}
	.text {
		width: 100%;
		max-width: 1440px;
		margin: 0 auto;
		padding: 60px 40px;
	}
	.sub {
		@include fontSize(18);
		@include lineHeight(24,18);
		letter-spacing: 8px;
		text-align: center;
		color: #eff8ff;
		text-transform: uppercase;
	}
	.title {
		@include fontFace($bodoni-book);
		@include fontSize(72);
		@include lineHeight(80,72);
		text-shadow: 0 0 20px rgba(255, 255, 255, 0.24);
		text-align: center;
		color: #ffffff;
		margin: 0;
		@include media-breakpoint-down(lg) {
			@include fontSize(62);
			@include lineHeight(70,62);
		}
		@include media-breakpoint-down(md) {
			@include fontSize(52);
			@include lineHeight(60,52);
		}
		@include media-breakpoint-down(sm) {
			@include fontSize(42);
			@include lineHeight(50,42);
		}
		@include media-breakpoint-down(xs) {
			@include fontSize(22);
			@include lineHeight(30,22);
		}
	}
}

.goran{
	width:100%;
	height:0;
	padding-top: 56.25%;
	background-image: url($theme-url + 'assets/images/graphics/jana_colak_2.jpg');
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center center;
	position: relative;

	.goran__text{
		width: 100%;
		padding:0px 13rem;
		position: absolute;
		top:50%;
		left:0;
		transform: translateY(-50%);
		display:block;
		text-align: center;
	}

	.overTitle {
		@include fontSize(18);
		@include lineHeight(20,18);
		@include meta-light;
		letter-spacing: 8px;
		color: #fff;
	}

	.title {
		@include fontSize(72);
		@include lineHeight(80,72);
		color: #fff;
		margin: 0;
	}


	@include media-breakpoint-down(md) {
		padding-top: 112.5%;
		background-image: url($theme-url + 'assets/images/graphics/jana_colak_mobile_2.jpg');

		.goran__text {
			padding:0px 3rem;
			top: 40%;
		}
		.overTitle {
			@include fontSize(14);
			@include lineHeight(18,14);
			letter-spacing: 8px;
		}

		.title {
			@include fontSize(52);
			@include lineHeight(60,52);
		}
	}

	@include media-breakpoint-down(xs) {
		.title {
			@include fontSize(32);
			@include lineHeight(40,32);
		}
	}

}

.varnesa{
	width:100%;
	height:0;
	padding-top: 48.61111111111111%;
	background-image: url($theme-url + 'assets/images/kampanja/zvijezde-u-dubini/varnesa-banner-dex.jpg');
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center center;
	position: relative;

	.varnesa__innerWrapper  {
		position: absolute;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		& > .row { min-height: 100%; }
	}

	.varnesa__text{
		width: 100%;
		padding: 0 35.76388888888889% 0 8.888888888888889%;
		text-align: center;
	}

	.overTitle {
		@include fontSize(72);
		@include lineHeight(80,72);
		@include bodoni-book;
		letter-spacing: 2px;
		color: #fff;
		text-shadow: 8px 8px 10px rgba(4,67,111,.15);
	}

	.title {
		display: inline-block; text-indent: -9999em;
		width: 566px; height: 236px;
		background: url($theme-url + 'assets/images/kampanja/zvijezde-u-dubini/varnesa-potpis-mir.png') no-repeat center center / cover;
		margin: 0;
	}

	@include media-breakpoint-down(lg) {
		.overTitle {
			@include fontSize(52);
			@include lineHeight(60,52);
		}
	}

	@include media-breakpoint-down(md) {
		.overTitle {
			@include fontSize(38);
			@include lineHeight(44,38);
		}
		.title {
			width: 100%; height: 0; padding-top: 41.69611307420495%; overflow: hidden;
		}
	}


	@include media-breakpoint-down(sm) {
		padding-top: 89.72222222222222%;
		background-image: url($theme-url + 'assets/images/kampanja/zvijezde-u-dubini/varnesa-banner-mob.jpg');

		.varnesa__text{
			padding: 13.88888888888889% 32px 0;
		}

		.overTitle {
			@include fontSize(28);
			@include lineHeight(34,28);
			margin-bottom: 12px;
		}

		.title {
			width: 60%;
			padding-top: 28%;
			background-size: 100% auto;
		}



	}

	@include media-breakpoint-down(xs) {
		// .title {
		// 	@include fontSize(32);
		// 	@include lineHeight(40,32);
		// }
	}

}






//classic media query (min)
@include media-breakpoint-up(xs) {  }
@include media-breakpoint-up(sm) {  }
@include media-breakpoint-up(md) {  }
@include media-breakpoint-up(lg) {  }
@include media-breakpoint-up(xl) {  }

//classic media query (max)
@include media-breakpoint-down(xs) {  }
@include media-breakpoint-down(sm) {  }
@include media-breakpoint-down(md) {  }
@include media-breakpoint-down(lg) {  }

//from to media query
@include media-breakpoint-only(xs) {  }
@include media-breakpoint-only(sm) {  }
@include media-breakpoint-only(md) {  }
@include media-breakpoint-only(lg) {  }
@include media-breakpoint-only(xl) {  }