@font-face {
    font-family: 'ATBSerif';
        src: url('//piggzdesign.com/ATBSerif-It.otf');
        src: url('//piggzdesign.com/ATBSerif-It.eot.eot') format('embedded-opentype'),      
            url('//piggzdesign.com/ATBSerif-It.woff.woff') format('woff'),
            url('//piggzdesign.com/ATBSerif-It.woff2.woff2') format('woff2'),
            url('//piggzdesign.com/ATBSerif-It.ttf') format('truetype'),
            url('//piggzdesign.com/ATBSerif-It.svg') format('svg');
}

* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #F1C4D9;
    font-family: Manrope, Lato, Helvetica, Arial, sans-serif;
    cursor: url("my-mouse-pointer.cur") 1 0, auto;
}

a {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    text-decoration: none;
}

html {
    behavior: smooth;
}

title {
    display: none;
}

/*======================================================
                    Navbar dropdown
======================================================*/

.sec-center {
    position: relative;
    max-width: 100%;
    text-align: center;
    z-index: 200;
}

[type="checkbox"]:checked,
[type="checkbox"]:not(:checked){
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

.dropdown:checked + label,
.dropdown:not(:checked) + label{
    position: relative;
    transition: all 200ms linear;
    border-radius: 4px;
    letter-spacing: 1px;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
    text-align: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 12px 35px 0 rgba(255,235,167,.15);
}

.dropdown:checked + label:before,
.dropdown:not(:checked) + label:before{
    position: fixed;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    z-index: -1;
    cursor: auto;
    pointer-events: none;
}

.dropdown:checked + label:before{
    pointer-events: auto;
}

.dropdown:not(:checked) + label .uil {
    font-size: 24px;
    margin-left: 10px;
    transition: transform 200ms linear;
}

.dropdown:checked + label .uil {
    transform: rotate(180deg);
    font-size: 24px;
    margin-left: 10px;
    transition: transform 200ms linear;
}

#dropdown a:hover {
    /* border-bottom: 1px solid rgb(28, 121, 184); */
    color: #010101;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
}

/* Animated Bottom Line */
#dropdown a:before, #dropdown a:after {
    content: '';
    position: absolute;
    width: 0%;
    height: 1px;
    bottom: -1px;
    background: rgb(13, 26, 38);
}

#dropdown a:before {
    left: 0;
    transition: 0.5s;
}

#dropdown a:after {
    background: rgb(13, 26, 38);
    right: 0;
    /* transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); */
}

#dropdown a:hover:before {
    background: rgb(13, 26, 38);
    width: 100%;
    transition: width 0.5s cubic-bezier((0.22, 0.61, 0.36, 1));
}

#dropdown a:hover:after {
    background: transparent;
    width: 100%;
    /* transition: 0s; */
}

/*---------------------------------------------------------------------*/
.section-dropdown {
    position: absolute;
    padding: 5px;
    background-color: #f3f0ec;
    top: 60px;
    left: 5px;
    width: 200px;
    height: 175px;
    border-radius: 10px;
    display: block;
    box-shadow: 0 5px 15px 0 rgba(9,9,12,0.1);
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: all 200ms linear;
}

.dropdown:checked ~ .section-dropdown{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.section-dropdown:before {
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    content: '';
    display: block;
    z-index: 1;
}

.section-dropdown:after {
    position: absolute;
    top: -7px;
    left: 30px;
    width: 0; 
    height: 0; 
    border-left: 8px solid transparent;
    border-right: 8px solid transparent; 
    border-bottom: 8px solid #f3f0ec;
    content: '';
    display: block;
    z-index: 2;
    transition: all 200ms linear;
}

.boxy:hover {
	background-color: #f3f0ec;
	color: #f3f0ec;
}

/*======================================================
                         mobile dropdown
======================================================*/

.second-center {
    display: block;
    position: relative;
    max-width: 100%;
    text-align: right;
    z-index: 9999;
    height: 60px;
}

[type="checkbox"]:checked,
[type="checkbox"]:not(:checked){
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

.dropdown-mobile:checked + label,
.dropdown-mobile:not(:checked) + label{
    position: relative;
    transition: all 200ms linear;
    border-radius: 4px;
    letter-spacing: 1px;
    border: none;
    cursor: pointer;
    box-shadow: 0 12px 35px 0 rgba(255,235,167,.15);
}

.dropdown-mobile:checked + label:before,
.dropdown-mobile:not(:checked) + label:before{
    position: fixed;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    z-index: -1;
    cursor: auto;
    pointer-events: none;
}

.dropdown-mobile:checked + label:before{
    pointer-events: auto;
}

.dropdown-mobile:not(:checked) + label .uila {
    font-size: 20px;
    margin-left: 10px;
    transition: transform 200ms linear;
}

.dropdown-mobile:checked + label .uila {
    transform: rotate(180deg);
    font-size: 24px;
    margin-left: 10px;
    transition: transform 200ms linear;
}

#dropdown-mobile a:hover {
    /* border-bottom: 1px solid rgb(28, 121, 184); */
    color: #010101;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
}

/* Animated Bottom Line */
#dropdown-mobile a:before, #dropdown-mobile a:after {
    content: '';
    position: absolute;
    width: 0%;
    height: 1px;
    bottom: -1px;
    background: rgb(13, 26, 38);
}

#dropdown-mobile a:before {
    left: 0;
    transition: 0.5s;
}

#dropdown-mobile a:after {
    background: rgb(13, 26, 38);
    right: 0;
    /* transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); */
}

#dropdown-mobile a:hover:before {
    background: rgb(13, 26, 38);
    width: 100%;
    transition: width 0.5s cubic-bezier((0.22, 0.61, 0.36, 1));
}

#dropdown-mobile a:hover:after {
    background: transparent;
    width: 100%;
    /* transition: 0s; */
}

/*---------------------------------------------------------------------*/
.section-dropdown-mobile {
    position: absolute;
    padding: 5px;
    background-color: #f3f0ec;
    top: 60px;
    left: 15px;
    width: 215px;
    height: 160px;
    border-radius: 10px;
    display: block;
    box-shadow: 0 5px 15px 0 rgba(9,9,12,0.1);
    z-index: 2;
    opacity: 0;
    font-size: 12px;
    pointer-events: none;
    transform: translateY(20px);
    transition: all 200ms linear;
}

.dropdown-mobile:checked ~ .section-dropdown-mobile{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.section-dropdown-mobile:before {
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    content: '';
    display: block;
    z-index: 1;
}

.section-dropdown-mobile:after {
    position: absolute;
    top: -7px;
    left: 103px;
    width: 0; 
    height: 0; 
    border-left: 8px solid transparent;
    border-right: 8px solid transparent; 
    border-bottom: 8px solid #f3f0ec;
    content: '';
    display: block;
    z-index: 2;
    transition: all 200ms linear;
}

.boxy-mobile:hover {
	background-color: #f3f0ec;
	color: #f3f0ec;
}

/*======================================================
                          Navbar
======================================================*/
#navbar {
    background: #f3f0ec;
    border-bottom: 1px solid black;
    color: rgb(13, 26, 38);
    position: fixed;
    top: 0;
    height: 80px;
    line-height: 60px;
    width: 100vw;
    z-index: 10;
}

.nav-wrapper {
    margin-right: 10px;
    text-align: center;
    width: 98%;
}   
    @media(max-width: 768px) {
        .nav-wrapper {
            width: 98%;
        }
    } 
	    @media(max-width: 638px) {
            .nav-wrapper {
                width: 95%;
            }
        } 

/*-------------------------------------------*/
.logoimg {
	 user-drag: none; 
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/*-------------------------------------------*/
#logo {
    float: left;
    font-size: 1.5em;
    height: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    width: 50px;
    margin-top: -3px;  
    user-drag: none; 
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
} 
    @media(max-width: 768px) {
        #logo {
            /*margin-left: 5px; */
        }
    }

#navbar ul {
    display: inline-block;
    float: left;
    list-style: none;
    padding-top: 10px;
    /* margin-right: 14px; */
    margin-top: -2px;
    margin-left: 100px;
    text-align: right;
} 
    @media(max-width: 900px) {
        #navbar ul {
            display: none;
        }
    } 

#navbar li {
    display: inline-block;   
}

#navbar li a {
    color: #010101;
    display: block;
    font-size: 0.9em;
    height: 50px;
    letter-spacing: 1px;
    margin: 0 20px;
    padding: 0 4px;
    position: relative;
    text-transform: uppercase;
}

/*--------------------------OLD HOVER NAVBAR-------------------------------------------*/
/*#navbar li a:hover {
  /* --border-bottom: 1px solid rgb(28, 121, 184);
  color: #010101;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
}

/* --Animated Bottom Line 
#navbar li a:before, #navbar li a:after {
  content: '';
  position: absolute;
  width: 0%;
  height: 1px;
  bottom: -1px;
  background: rgb(13, 26, 38);
}

#navbar li a:before {
  left: 0;
  transition: 0.5s;
}

#navbar li a:after {
  background: rgb(13, 26, 38);
  right: 0;
  /* --transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); 
}

#navbar li a:hover:before {
  background: rgb(13, 26, 38);
  width: 100%;
  transition: width 0.5s cubic-bezier((0.22, 0.61, 0.36, 1));
}

#navbar li a:hover:after {
  background: transparent;
  width: 100%;
  /* --transition: 0s; 
}
-----------------------------------------------------------------*/
/*======================================================
                   additional flower navbar 
  ======================================================*/
  
/*.adhd {
	list-style: none;
}*/
 
.crazy {
	position: absolute;
	width: 50px;
	object-fit: contain;
	transform: translateX(-50%) translateY(-50%);
	top: 50%;
	left: 50%;
	z-index: 10;
}
 
.item {
	z-index: 1;
	color: #010101;
	display: block;
    font-size: 0.9em;
    height: 50px;
    letter-spacing: 1px;
    margin: 0 20px;
    padding: 0 4px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
 }
  
/*======================================================
                   FORWEB pic fixed 
  ======================================================*/
  
 /*
  
.picfix {
  width: 100%;
  height: 350px;
  */
  /* Important *//*
  position: relative;
  z-index: -1;
}

.picwrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.PIC {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-image: url(FORWEB.png);
  transform: translateZ(0);
  will-change: transform;
  z-index: -1;
  
}

@media(max-width: 740px) {
	.picfix {
		height: 250px;
	}
}
*/
/*======================================================
                   enquier here button
======================================================*/

.button {
    background-color: #ffa748;
    position: flex;
    float: right;
    border-radius: 50px;
    border: 1px solid #101010;
    color: #101010;
    padding: 12px 20px;
    text-align: center;
    font-size: 14px;
    margin: 18px 12px 0px 0px;
    opacity: 0.9;
    transition: 0.3s;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    font-family: Manrope;
	font-weight: 400;
}

.button:hover {
	opacity: 1;
	background-color: #fa97c1;
	color: #101010;
}
    @media(max-width: 900px) {
        .button {
            display: none;
        }
    }

/*======================================================
                    Mobile Menu Menu Icon
======================================================*/
@media(max-width: 900px) {
    .menuIcon {
    	cursor: pointer;
    	display: block;
    	position: fixed;
    	right: 15px;
    	top: 27px;
    	height: 23px;
    	width: 27px;
    	z-index: 12;
    }

    /* Icon Bars */
    .icon-bars {
    	background: #fa84c1;
    	position: absolute;
    	left: 1px;
    	top: 45%;
    	height: 2px;
    	width: 20px;
    	-webkit-transition: 0.4s;
    	transition: 0.4s;
    } 

    .icon-bars::before {
    	background: #fa84c1;
    	content: '';
    	position: absolute;
    	left: 0;
    	top: -8px;
    	height: 2px;
    	width: 20px;
		/*-webkit-transition: top 0.2s ease 0.3s;
    	transition: top 0.2s ease 0.3s; */
    	-webkit-transition: 0.3s width 0.4s;
    	transition: 0.3s width 0.4s;
    }

    .icon-bars::after {
    	margin-top: 0px;
    	background: #fa84c1;
    	content: '';
    	position: absolute;
    	left: 0;
    	bottom: -8px;
    	height: 2px;
    	width: 20px;
		/*-webkit-transition: top 0.2s ease 0.3s;
    	transition: top 0.2s ease 0.3s; */
    	-webkit-transition: 0.3s width 0.4s;
    	transition: 0.3s width 0.4s;
    }

    /* Bars Shadows */
    .icon-bars.overlay {
    	background: #8fd1d8;
    	background: #8fd1d8;
    	width: 20px;
    	animation: middleBar 3s infinite 0.5s;
    	-webkit-animation: middleBar 3s infinite 0.5s;
	} 	
		@keyframes middleBar {
      		0% {width: 0px}
      		50% {width: 20px}
      		100% {width: 0px}
    	} 
			@-webkit-keyframes middleBar {
        		0% {width: 0px}
        		50% {width: 20px}
        		100% {width: 0px}
      		}

  	.icon-bars.overlay::before {
    	background: #8fd1d8;
    	background: #8fd1d8;
    	width: 10px;
    	animation: topBar 3s infinite 0.2s;
    	-webkit-animation: topBar 3s infinite 0s;
  	} 
		@keyframes topBar {
      		0% {width: 0px}
      		50% {width: 10px}
      		100% {width: 0px}
    	} 
			@-webkit-keyframes topBar {
        		0% {width: 0px}
        		50% {width: 10px}
        		100% {width: 0px}
      		}

  	.icon-bars.overlay::after {
    	background: #8fd1d8;
    	background: #8fd1d8;
    	width: 15px;
    	animation: bottomBar 3s infinite 1s;
    	-webkit-animation: bottomBar 3s infinite 1s;
  	} 	
  		@keyframes bottomBar {
    	  	0% {width: 0px}
      		50% {width: 15px}
      		100% {width: 0px}
    	} 
			@-webkit-keyframes bottomBar {
        		0% {width: 0px}
        		50% {width: 15px}
        		100% {width: 0px}
      		}

  	/* Toggle Menu Icon */
  	.menuIcon.toggle .icon-bars {
    	top: 5px;
    	transform: translate3d(0, 5px, 0) rotate(135deg);
    	transition-delay: 0.1s;
    	transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  	}

  	.menuIcon.toggle .icon-bars::before {
    	top: 0;
    	transition-delay: 0.1s;
    	opacity: 0;
  	}

  	.menuIcon.toggle .icon-bars::after {
    	top: 10px;
    	transform: translate3d(0, -10px, 0) rotate(-270deg);
    	transition-delay: 0.1s;
    	transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  	}

  	.menuIcon.toggle .icon-bars.overlay {
    	width: 20px;
    	opacity: 0;
    	-webkit-transition: all 0s ease 0s;
    	transition: all 0s ease 0s;
  	}
}

/*======================================================
                   Responsive Mobile Menu 
======================================================*/

.overlay-menu {
  	background: #f3f0ec;
  	color: #101010;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	position: fixed;
  	top: 0;
  	right: 0;
  	padding-right: 15px;
  	transform: translateX(-100%);
  	width: 100vw;
  	height: 100vh;
  	-webkit-transition: transform 0.2s ease-out;
  	transition: transform 0.2s ease-out;
  	z-index: 3;
  	/*position: -webkit-sticky; 
  	position: sticky;
  	top: 0px;*/
}
	/*@media(max-width: 1050px) {
		.overlay-menu {
  			transform: translateX(-100%);
		}
  	}*/

.overlay-menu ul, .overlay-menu li {
  	display: block;
  	position: relative;
}

.overlay-menu li a {
  	display: block;
  	font-size: 1.8em;
  	letter-spacing: 4px;
	/*opacity: 0; */
  	padding: 10px 0;
  	text-align: right;
  	text-transform: uppercase;
  	-webkit-transition: color 0.3s ease;
  	transition: color 0.3s ease;
	/*-webkit-transition: 0.2s opacity 0.2s ease-out;
  	transition: 0.2s opacity 0.2s ease-out; */
}

.overlay-menu li a:hover,
.overlay-menu li a:active {
  	color: #D781B5;
  	-webkit-transition: color 0.3s ease;
  	transition: color 0.3s ease;
}

/*=======================ICON_MENU===============================*/

.iconu-menu-1 {
	width: 40px;
	position: absolute;
	margin-top: 21px;
	margin-left: 0px;
}
	 
.iconu-menu-2 {
	width: 40px;
	margin-top: -40px;
	margin-left: 141px;
}
	 
.iconu-menu-3 {
	width: 40px;
	position: absolute;
	margin-top: 93px;
	margin-left: 209px;
}
	 
.iconu-menu-4 {
	width: 40px;
	position: absolute;
	margin-top: 282px;
	margin-left: -218px;
}
	 
.iconu-menu-5 {
    width: 40px;
    position: absolute;
    margin-top: 111px;
    margin-left: 14px;
    rotate: 134deg;
}

/*======================================================
                   enquier here button menu
======================================================*/

#enquire {
	background-color: #ffa748;
	position: flex;
    float: right;
    border-radius: 50px;
    border: 1px solid #101010;
    color: #101010;
    padding: 12px 20px;
    margin: 20px -12px 0px 0px;
    font-family: Manrope;
    opacity: 0.9;
    transition: 0.3s;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
	font-weight: 400;
}

#enquire:hover {
	opacity: 1 ;
	background-color: #fa97c1;
	color: #010101;
}


/*======================================================
                   block-heart
======================================================*/

.block-heart {
	background-color: #f3f0ec;
	height: 12px;
	border-bottom: 1px solid black;
}

  /*
  #heart { 
    position: relative;
    width: 100px; 
    height: 90px; 
	top: 50%;
  left: 50%;
  margin: 0 0 0 -10px;
} 

#heart:before, #heart:after { 
    position: absolute; 
    content: ""; 
    left: 9px; 
    top: 0; 
    width: 9px; 
    height: 15px; 
    background: #e9a6ca; 
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg); 
    transform-origin: 0 100%; 
} 

#heart:after { 
    left: 0; 
    transform: rotate(45deg); 
    transform-origin :100% 100%; 
}
*/

.fa.first.fa-heart {     
    padding-right: 20px;
    position: relative;
    top: 5%;
    left: 50%;
}
	@media(max-width: 610px) {
		.fa.first.fa-heart {     
    		left: 48%;
		}
	}
    .fa.first.fa-heart.jedan::before {
        display: block;
        /*  position: absolute;*/
        color: #fa84c1;
		content: "\f004";
        -webkit-text-stroke: 1.2px black;
        height: 0px;  
    }
    .fa.first.fa-heart.dva::before {
        display: block;
        /*  position: absolute;*/
        color: #ffa748;
		content: "\f004";
        -webkit-text-stroke: 1.2px black;
        height: 0px;  
    }
	.fa.first.fa-heart.tri::before {
        display: block;
        /*  position: absolute;*/
        color: #dae087;
		content: "\f004";
        -webkit-text-stroke: 1.2px black;
        height: 0px;  
    }
	.fa.first.fa-heart.cetiri::before {
        display: block;
        /*  position: absolute;*/
        color: #8fd1d8;
		content: "\f004";
        -webkit-text-stroke: 1.2px black;
        height: 0px;  
    }
	.fa.first.fa-heart.pet::before {
        display: block;
        /*  position: absolute;*/
        color: #fa97c1;
		content: "\f004";
        -webkit-text-stroke: 1.2px black;
        height: 0px;  
    }
	.fa.first.fa-heart.sest::before {
        display: block;
        /*  position: absolute;*/
        color: #dae087;
		content: "\f004";
        -webkit-text-stroke: 1.2px black;
        height: 0px;  
    }
	.fa.first.fa-heart.sedam::before {
        display: block;
        /*  position: absolute;*/
        color: #fa97c1;
		content: "\f004";
        -webkit-text-stroke: 1.2px black;
        height: 0px;  
    }
	
/*======================================================
                   TOP-IMG
  ======================================================*/
  
#BLOCK-0 {
	height: auto;
	background-color: #f3f0ec;
	text-align: center;
}

.pattern-grid {
	width: 100%;
	/*margin-left: 1%;*/
	display: grid;
  	grid-template-areas:
    	'img img'
		'title para'
		'button para';
	padding: 90px 0% 100px 0%;
	/*grid-template-rows: 50% 50%;*/
    grid-template-columns: 50% 50%;
	/*grid-gap: 20px;*/
	/*row-gap: 20px;*/
}
  	@media(max-width: 1050px) {
		.pattern-grid {
  			grid-template-areas:
    				'img img'
					'title para'
					'button para';
			/*padding: 40px 5% 10px 5%;*/
			grid-template-columns: 50% 50%;
		}
  	}
	  	@media(max-width: 610px) {
			.pattern-grid {
	    		width: 100%;
	  			display: grid;
  				grid-template-areas:
    				'img'
					'title'
					'para'
					'button';

				padding: 115px 0% 100px 10%;
	   			/*grid-template-rows: 90%;*/
    			grid-template-columns: 90%;
				/*grid-gap: 1%;*/
			}
  		}
 
.top-img-div {
  	/*border: 1px solid black;*/
  	font-size: 30px;
  	text-align: center;
  	grid-area: img;
}

.top-img {
	width: 100%;
	padding-bottom: 40px;
	display: grid;
}
	@media(max-width: 610px) {
		.top-img {
			display: none;
  		}
	}
	
.top-img-phone {
	display: none;
}
	@media(max-width: 610px) {
		.top-img-phone {
			width: 123%;
			margin-left: -12%;
			padding-bottom: 15px;
			display: grid;
  		}
	}


.top-title {
	font-size: 40px;
    font-family: 'ATBSerif';
    font-weight: 100;
    font-style: italic;
	padding-bottom: 20px;
	grid-area: title;
	margin: auto 0px;
	text-align: center;
}  
  	@media(max-width: 715px) {
    	.top-title {
      		font-size: 35px;
    	}
  	}
    	@media(max-width: 490px) {
    		.top-title {
      			font-size: 32px;
    		}
  		}
  
.top-para-div {
	grid-area: para;
	margin: auto 0px;
	width: 70%;
}
 	@media(max-width: 1050px) {
		.top-para-div {
      		width: 80%;
    	}
  	}
  		@media(max-width: 610px) {
    		.top-para-div {
      			width: 100%;
    		}
  		}
  
.top-para {
	text-align: justify;
    font-size: 18px;
}
 
.div-button {
	grid-area: button;
	text-align: center;     
}
   	@media(max-width: 610px) {
    	.div-button {
      		margin-top: 30px;
    	}
  	}
.top-shop {
  	background-color: #8fd1d8;
    border-radius: 50px;
    color: #010101;
    padding: 10px 15px 10px 15px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    font-family: Manrope;
    opacity: 0.9;
    transition: 0.3s;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #101010;
	/*width: 40%;*/
	margin: auto 0px;
	text-align: center;
}  
    @media(max-width: 490px) {
    	.top-shop {
      		font-size: 15px;
    	}
  	}
 
.top-shop:hover {
  	background-color: #fa84c1;
  	color: #f3f0ec;
  	padding: 10px 20px 10px 20px;
}
  
/*=====================================================================
                       SCROLLING-CONTAINER
=======================================================================*/	

#text-scrolling   .scrolling-text--inner {
   	font-size: 18px;
}

#text-scrolling {
	background-color: #fa84c1;
   	/*border: 1px solid white;*/
   	padding:10px;
   	border-top: 1px solid black;
   	border-bottom: 1px solid black;
}
 
.scrolling-text--item span {
   	transition: all 0.25s cubic-bezier(0.104, 0.204, 0.492, 1); 
}

.scrolling-text {
   	background-color: transparent;
   	color: white;
   	position: relative;
   	background-size: cover;
   	display: flex;
   	align-items: center; }
 
.scrolling-text:after {
   	content: "";
   	position: absolute;
   	bottom: 0;
   	left: 0;
   	right: 0;
   	top: 0;
   	z-index: 1;
   	pointer-events: none;
   	background: transparent }
 
.scrolling-text-uppercase--true {
   	text-transform: uppercase; 
}

.scrolling-text--inner {
   	display: flex;
   	align-items: center;
   	white-space: nowrap;
   	font-size: 1.5rem;
   	font-weight: 600;
   	padding: 10px 0;
   	overflow: hidden;
   	position: relative;
   	z-index: 1; 
}
	.scrolling-text--inner.direction-left > div {
   		animation: scrollText-left var(--marquee-speed) linear infinite; 
	}
	
	.scrolling-text--inner.direction-right > div {
   		animation: scrollText-right var(--marquee-speed) linear infinite; 
	}
	
	.scrolling-text--inner > div {
   		display: flex;
   		align-items: center;
   		flex-shrink: 0; 
	}

.scrolling-text--item {
   	display: inline-flex;
   	align-items: center;
   	padding: 0 30px; 
}

.scrolling-text--link {
   	display: inline-flex;
   	align-items: center; 
}
	.scrolling-text--link:hover {
   		color: #000; 
	}

.scrolling-text--link span {
   	transform-origin: left bottom; 
}
	.scrolling-text--link:hover span {
   		transform: skew(-10deg, 0); 
	}

.scrolling-text--image {
   	margin-right: 40px;
   	object-fit: cover; 
}
 
.scrolling-text--image--small {
   	width: 50px;
   	height: 50px; 
}

.scrolling-text--image--medium {
   	width: 100px;
   	height: 100px; 
}

.scrolling-text--image--large {
   	width: 200px;
   	height: 200px; 
}
   	@keyframes scrollText-left {
   		0% {
   			transform: translateX(0%); 
		}
   		100% {
   			transform: translateX(-100%); 
		} 		
	}
   	@keyframes scrollText-right {
   		0% {
   			transform: translateX(-100%); 
		}
   		100% {
   			transform: translateX(0%); 
		}
 	}
 
	/*======================================================
                   BLOCK-1
  ======================================================*/
  
  #BLOCK-1 {
	  height: auto;
	  background-color: #f3f0ec;
	  text-align: -webkit-center; /*<-----AMAZING CENTERING EVEN BLOCKS
	                                           NO NEED FOR TEXT-ALIGN: CENTER;
											   THIS MAKES EVERYTHING CENTERED
											   ITS EVEN ON GOOGLE HOMEPAGE*/
	  /*text-align: center;*/
  }

.grid-jedan {
	width: 100%;
	/*margin-left: 1%;*/
	display: grid;
  	grid-template-areas:
    	'jedan-art jedan';
	padding: 90px 5% 100px 5%;
	/*grid-template-rows: 50% 50%;*/
    grid-template-columns: 50% 50%;
	grid-gap: 20px;
}
  	@media(max-width: 1050px) {
		.grid-jedan {
			width: 70%;
  			grid-template-areas:
    				'jedan'
					'jedan-art';
			/*padding: 40px 5% 10px 5%;*/
			grid-template-columns: 100%;
		}
  	}
	  	@media(max-width: 610px) {
			.grid-jedan {
	    		width: 100%;
	  			display: grid;
  				grid-template-areas:
    				'jedan'
					'jedan-art';

				padding: 40px 10% 100px 10%;
	   			grid-template-rows: auto;
    			grid-template-columns: 100%;
				/*grid-gap: 1%;*/
			}
  		}
		
.img-div {
	grid-area: jedan;
}
  
.img-1 {
	position: relative;
	width: 90%;
	border: 1px solid #101010;
	border-radius: 40px;
}
   	@media(max-width: 1050px) {
		.img-1 {
      		width: 100%;
		}
  	}
			
.article {
  	text-align: justify;
  	text-justify: inter-word;
  	grid-area: jedan-art;
  	margin: auto 0px;
   	width: 90%;
}
 	@media(max-width: 1050px) {
		.article {
   			width: 100%;
		}
	}
  
.h1-block {
	font-size: 40px;
	font-family: 'ATBSerif';
	font-weight: 100;
	font-style: italic;
	padding-bottom: 10px;
}  
 	@media(max-width: 1480px) {
    	.h1-block {
      		font-size: 35px;
    	}
	}
  		@media(max-width: 400px) {
    		.h1-block {
      			font-size: 30px;
    		}
		}
  
.h2-block {
	font-size: 18px;
	font-family: Manrope;
	font-weight: 400;
	padding-bottom: 10px;
}  
  	@media(max-width: 1480px) {
    	.h2-block {
      		font-size: 16px;
    	}
	}
  		@media(max-width: 400px) {
    		.h2-block {
      			font-size: 15px;
    		}
		}
  
.h3-block {
	font-size: 18px;
	font-family: Manrope;
	font-weight: 400;
	padding-bottom: 30px;
	padding-top: 10px;
}  
  	@media(max-width: 1663px) {
    	.h3-block {
      		font-size: 16px;
    	}
	}
  		@media(max-width: 1480px) {
    		.h3-block {
      			font-size: 15px;
    		}
		}
  
.h4-block {
	font-size: 18px;
	font-family: Manrope;
	font-weight: 400;
	padding-bottom: 10px;
}  
  	@media(max-width: 1663px) {
    	.h4-block {
      		font-size: 16px;
    	}
	}
  		@media(max-width: 1480px) {
    		.h4-block {
      			font-size: 15px;
    		}
		}
			@media(max-width: 799px) {
    			.h4-block {
      				padding-bottom: 30px;
    			}
			}
  
.p-block {
	padding-bottom: 30px;
	font-weight: 400;
	font-family: Manrope;
	font-size: 18px;
}  
  	@media(max-width: 1663px) {
    	.p-block {
      		font-size: 16px;
    	}
	}
  		@media(max-width: 1480px) {
    		.p-block {
      			font-size: 15px;
    		}
		}
  
.checkmark {
    display:inline-block;
    width: 22px;
    height:22px;
	margin-left: 15px;
	margin-top: 20px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}
	@media(max-width: 630px) {
    	.checkmark {
	  		margin-left: 10px;
	  		margin-top: 50px;
    	}
	}

.checkmark_circle {
    position: absolute;
    width:40px;
    height:40px;
    background-color: fff;
    border-radius:50px;
    border: 1px solid;
    left:0;
    top:0;
}

.checkmark_stem {
    position: absolute;
    width:2px;
    height:22px;
    background-color:#000;
    left:23px;
    top:7px;
}

.checkmark_kick {
    position: absolute;
    width:10px;
    height:2px;
    background-color:#000;
    left:14px;
    top:27px;
}
  
.p-checkmark {
	margin-top: -21px;
	margin-left: 60px;
	font-size: 24px;
	font-style: Manrope;
	font-weight: 400;
}  
  	@media(max-width: 1713px) {
    	.p-checkmark {
      		margin-top: -18px;
	  		margin-left: 13%;
	  		font-size: 22px;
    	}
	}
  		@media(max-width: 1664px) {
    		.p-checkmark {
      			margin-top: -16px;
	  			font-size: 20px;
    		}
		} 
  			@media(max-width: 1497px) {
    			.p-checkmark {
					margin-top: -15px;
	  				font-size: 18px;
    			}
			}
  				@media(max-width: 1280px) {
    				.p-checkmark {
	  					margin-left: 15%;
    				}
				}
					@media(max-width: 1180px) {
    					.p-checkmark {
	  						margin-left: 10.5%;
    					}
					}
						@media(max-width: 970px) {
    						.p-checkmark {
	  							margin-left: 13%;
    						}
						}
							@media(max-width: 799px) {
    							.p-checkmark {
	  								margin-left: 15%;
    							}
							}
								@media(max-width: 630px) {
    								.p-checkmark {
	  									margin-left: 50px;
    								}
								}
								
/*-----------------------------------------------------------*/
  
.checkmark-2 {
    display:inline-block;
    width: 22px;
    height:22px;
	margin-left: 300px;
	margin-top: 0px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}
	@media(max-width: 1713px) {
    	.checkmark-2 {
	  		margin-left: 58%;
    	}
	}
		@media(max-width: 1347px) {
    		.checkmark-2 {
	  			margin-left: 52%;
    		}
		}
			@media(max-width: 1280px) {
    			.checkmark-2 {
	  				margin-left: 50%;
    			}
			}
				@media(max-width: 1180px) {
    				.checkmark-2 {
	  					margin-left: 58%;
    				}
				}
					@media(max-width: 970px) {
    					.checkmark-2 {
	  						margin-left: 54.5%;
    					}
					}
						@media(max-width: 799px) {
    						.checkmark-2 {
	  							margin-left: 47%;
    						}
						}
							@media(max-width: 630px) {
    							.checkmark-2 {
	  								margin-left: -25px;
	  								margin-bottom: 50px;
    							}
							}

.checkmark_circle-2 {
    position: absolute;
    width:40px;
    height:40px;
    background-color: fff;
    border-radius:50px;
    border: 1px solid;
    left:0;
    top:0;
}

.checkmark_stem-2 {
    position: absolute;
    width:2px;
    height:22px;
    background-color:#000;
    left:23px;
    top:7px;
}

.checkmark_kick-2 {
    position: absolute;
    width:10px;
    height:2px;
    background-color:#000;
    left:14px;
    top:27px;
}
  
.p-checkmark-2 {
	margin-top: -33px;
	margin-left: 385px;
	font-size: 24px;
	font-style: Manrope;
	font-weight: 400;
}  
    @media(max-width: 1713px) {
    	.p-checkmark-2 {
      		margin-top: -29px;
	  		margin-left: 77%;
	  		font-size: 22px;
    	}
  	} 
      	@media(max-width: 1664px) {
    		.p-checkmark-2 {
      			margin-top: -27px;
	  			font-size: 20px;
    		}
		}		
  			@media(max-width: 1497px) {
    			.p-checkmark-2 {
      				margin-top: -24px;
	  				font-size: 18px;
    			}
			}	
  				@media(max-width: 1347px) {
    				.p-checkmark-2 {
	  					margin-left: 72%;
    				}
				}
  					@media(max-width: 1280px) {
    					.p-checkmark-2 {
	  						margin-left: 72%;
    					}
					}
						@media(max-width: 1180px) {
    						.p-checkmark-2 {
	  							margin-left: 74%;
    						}
						}
							@media(max-width: 799px) {
    							.p-checkmark-2 {
	  								margin-left: 69.5%;
    							}
							}
								@media(max-width: 630px) {
    								.p-checkmark-2 {
	  									margin-left: 50px;
	  									margin-top: -75px;
    								}
								}

/*======================================================
                    BLOCK-2
  ======================================================*/
  
#BLOCK-2 {
	height: auto;
	background-color: #f3f0ec;
	text-align: -webkit-center; /*<-----AMAZING CENTERING EVEN BLOCKS
	                                    NO NEED FOR TEXT-ALIGN: CENTER;
									    THIS MAKES EVERYTHING CENTERED
										ITS EVEN ON GOOGLE HOMEPAGE*/
	/*text-align: center;*/
}

.grid-dva {
	width: 100%;
	/*margin-left: 1%;*/
	display: grid;
  	grid-template-areas:
    	'dva dva-art';
	padding: 90px 5% 100px 5%;
	/*grid-template-rows: 50% 50%;*/
    grid-template-columns: 50% 50%;
	grid-gap: 20px;
}
  	@media(max-width: 1050px) {
		.grid-dva {
			width: 70%;
  			grid-template-areas:
    				'dva'
					'dva-art';
			/*padding: 40px 5% 10px 5%;*/
			grid-template-columns: 100%;
		}
  	}
	  	@media(max-width: 610px) {
			.grid-dva {
	    		width: 100%;
	  			display: grid;
  				grid-template-areas:
    				'dva'
					'dva-art';

				padding: 40px 10% 100px 10%;
	   			grid-template-rows: auto;
    			grid-template-columns: 100%;
				/*grid-gap: 1%;*/
			}
  		}

.article-1 {
	text-align: justify;
	text-justify: inter-word;
	grid-area: dva-art;
	margin: auto 0px;
    width: 90%;
	position: relative;
}
  	@media(max-width: 1050px) {
		.article-1 {
      		width: 100%;
		}
  	}
 
.h1-block-1 {
	font-size: 40px;
	font-family: 'ATBSerif';
	font-weight: 100;
	font-style: italic;
	padding-bottom: 10px;
}  
  	@media(max-width: 1480px) {
    	.h1-block-1 {
      		font-size: 35px;
    	}
	}
  		@media(max-width: 400px) {
    		.h1-block-1 {
      			font-size: 30px;
    		}
		}
  
.h2-block-1 {
	font-size: 21px;
	font-family: Manrope;
	font-weight: 400;
	padding-bottom: 10px;
}  
  	@media(max-width: 1480px) {
    	.h2-block-1 {
      		font-size: 19px;
    	}
	}
  		@media(max-width: 400px) {
    		.h2-block-1 {
      			font-size: 17px;
    		}
		}
  
.p-block-1 {
	padding-bottom: 40px;
	font-weight: 400;
	font-family: Manrope;
	font-size: 18px;
	padding-top: 10px;
}  
  	@media(max-width: 1663px) {
    	.p-block-1 {
      		font-size: 16px;
    	}
	}
  		@media(max-width: 1480px) {
    		.p-block-1 {
      			font-size: 15px;
    		}
		}
  
.h3-block-1 {
	font-size: 18px;
	font-family: Manrope;
	font-weight: 400;
	padding-bottom: 10px;
}  
  	@media(max-width: 1663px) {
    	.h3-block-1 {
      		font-size: 16px;
    	}
	}
  		@media(max-width: 1480px) {
    		.h3-block-1 {
      			font-size: 15px;
    		}
		}
		
.img-div-1 {
	grid-area: dva;
	margin: auto 0px;
}
  
.img-2 {
	position: relative;
	width: 90%;
	border: 1px solid #101010;
	border-radius: 40px;
}
   	@media(max-width: 1050px) {
		.img-2 {
      		width: 100%;
		}
  	}

.button-2 {  
   	background-color: #fa84c1;
	border-radius: 50px;
    color: #010101;
    padding: 10px 15px 10px 15px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    font-family: Manrope;
    opacity: 0.9;
    transition: 0.3s;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    margin-top: 15px;
	position: relative;
  	left: 50%;
  	transform: translate(-50%);
	border: 1px solid #101010;
}  
    .button-2:hover {
	  	opacity: 1 ;
   	  	background-color: #f3f0ec;
	  	color: #010101;
	}

/*======================================================
                   BLOCK-3
======================================================*/
  
#BLOCK-3 {
	height: auto;
	background-color: #f3f0ec;
	text-align: -webkit-center; /*<-----AMAZING CENTERING EVEN BLOCKS
	                                    NO NEED FOR TEXT-ALIGN: CENTER;
										THIS MAKES EVERYTHING CENTERED
										ITS EVEN ON GOOGLE HOMEPAGE*/
	/*text-align: center;*/
}

.grid-tri {
	width: 100%;
	/*margin-left: 1%;*/
	display: grid;
  	grid-template-areas:
    	'tri-art tri';
	padding: 90px 5% 100px 5%;
	/*grid-template-rows: 50% 50%;*/
    grid-template-columns: 50% 50%;
	grid-gap: 20px;
}
  	@media(max-width: 1050px) {
		.grid-tri {
			width: 70%;
  			grid-template-areas:
    				'tri'
					'tri-art';
			/*padding: 40px 5% 10px 5%;*/
			grid-template-columns: 100%;
		}
  	}
	  	@media(max-width: 610px) {
			.grid-tri {
	    		width: 100%;
	  			display: grid;
  				grid-template-areas:
    				'tri'
					'tri-art';

				padding: 40px 10% 100px 10%;
	   			grid-template-rows: auto;
    			grid-template-columns: 100%;
				/*grid-gap: 1%;*/
			}
  		}

.article-2 {
	text-align: justify;
	text-justify: inter-word;
	grid-area: tri-art;
	margin: auto 0px;
    width: 90%;
	position: relative;
}
  	@media(max-width: 1050px) {
		.article-2 {
      		width: 100%;
		}
  	}
  
.h1-block-2 {
	font-size: 40px;
	font-family: 'ATBSerif';
	font-weight: 100;
	font-style: italic;
	padding-bottom: 10px;
}  
  	@media(max-width: 1480px) {
    	.h1-block-2 {
      		font-size: 35px;
    	}
	}
  		@media(max-width: 400px) {
    		.h1-block-2 {
      			font-size: 30px;
    		}
		}
  
.h2-block-2 {
	font-size: 21px;
	font-family: Manrope;
	font-weight: 400;
	padding-bottom: 10px;
}  
  	@media(max-width: 1480px) {
    	.h2-block-2 {
      		font-size: 19px;
    	}
	}
  		@media(max-width: 400px) {
    		.h2-block-2 {
      			font-size: 17px;
    		}
		}
  
.h3-block-2 {
	font-size: 18px;
	font-family: Manrope;
	font-weight: 400;
	padding-bottom: 30px;
	padding-top: 10px;
}  
  	@media(max-width: 1663px) {
    	.h3-block-2 {
      		font-size: 16px;
    	}
	}
  		@media(max-width: 1480px) {
    		.h3-block-2 {
      			font-size: 15px;
    		}
		}
  
.h4-block-2 {
	font-size: 18px;
	font-family: Manrope;
	font-weight: 400;
	padding-bottom: 10px;
}  
  	@media(max-width: 1663px) {
    	.h4-block-2 {
      		font-size: 16px;
    	}
	}
  		@media(max-width: 1480px) {
    		.h4-block-2 {
      			font-size: 15px;
    		}
		}
  
.p-block-2 {
	padding-bottom: 30px;
	font-weight: 400;
	font-family: Manrope;
	font-size: 18px;
}  
  	@media(max-width: 1663px) {
    	.p-block-2 {
      		font-size: 16px;
    	}
	}
  		@media(max-width: 1480px) {
    		.p-block-2 {
      			font-size: 15px;
    		}
		}
  
.img-div-2 {
	grid-area: tri;
	margin: auto 0px;
}
  
.img-3 {
  	position: relative;
	width: 90%;
	border: 1px solid #101010;
	border-radius: 40px;
}
   	@media(max-width: 1050px) {
		.img-3 {
      		width: 100%;
		}
  	}
  
.button-3 { 
   	background-color: #ffa748;
	border-radius: 50px;
    color: #010101;
    padding: 10px 15px 10px 15px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    font-family: Manrope;
    opacity: 0.9;
    transition: 0.3s;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    margin-top: 15px;
	position: relative;
  	left: 50%;
  	transform: translate(-50%);
	border: 1px solid #101010;
}  
   	.button-3:hover {
	  	opacity: 1 ;
   	  	background-color: #f3f0ec;
	  	color: #010101;
	}

/*======================================================
                    BLOCK-4
======================================================*/

#BLOCK-4 {
	height: auto;
	background-color: #f3f0ec;
	text-align: -webkit-center; /*<-----AMAZING CENTERING EVEN BLOCKS
	                                    NO NEED FOR TEXT-ALIGN: CENTER;
										THIS MAKES EVERYTHING CENTERED
										ITS EVEN ON GOOGLE HOMEPAGE*/
	/*text-align: center;*/
}

.grid-cetiri {
	width: 100%;
	/*margin-left: 1%;*/
	display: grid;
  	grid-template-areas:
    	'cetiri cetiri-art';
	padding: 90px 5% 100px 5%;
	/*grid-template-rows: 50% 50%;*/
    grid-template-columns: 50% 50%;
	grid-gap: 20px;
}
  	@media(max-width: 1050px) {
		.grid-cetiri {
			width: 70%;
  			grid-template-areas:
    				'cetiri'
					'cetiri-art';
			/*padding: 40px 5% 10px 5%;*/
			grid-template-columns: 100%;
		}
  	}
	  	@media(max-width: 610px) {
			.grid-cetiri {
	    		width: 100%;
	  			display: grid;
  				grid-template-areas:
    				'cetiri'
					'cetiri-art';

				padding: 40px 10% 100px 10%;
	   			grid-template-rows: auto;
    			grid-template-columns: 100%;
				/*grid-gap: 1%;*/
			}
  		}
 
.article-3 {
	  text-align: justify;
	  text-justify: inter-word;
	  grid-area: cetiri-art;
	  margin: auto 0px;
      width: 90%;
	  position: relative;
  }
  	@media(max-width: 1050px) {
		.article-3 {
      		width: 100%;
		}
  	}
  
.h1-block-3 {
	font-size: 40px;
	font-family: 'ATBSerif';
	font-weight: 100;
	font-style: italic;
	padding-bottom: 10px;
}  
  	@media(max-width: 1480px) {
    	.h1-block-3 {
      		font-size: 35px;
    	}
	}
  		@media(max-width: 400px) {
    		.h1-block-3 {
      			font-size: 30px;
    		}
		}
  
.h2-block-3 {
	font-size: 21px;
	font-family: Manrope;
	font-weight: 400;
	padding-bottom: 10px;
}  
  	@media(max-width: 1480px) {
    	.h2-block-3 {
      		font-size: 19px;
    	}
	}
  		@media(max-width: 400px) {
    		.h2-block-3 {
      			font-size: 17px;
    		}
		}
  
.p-block-3 {
	padding-bottom: 40px;
	font-weight: 400;
	font-family: Manrope;
	font-size: 18px;
	padding-top: 10px;
}  
  	@media(max-width: 1663px) {
    	.p-block-3 {
      		font-size: 16px;
    	}
	}
  		@media(max-width: 1480px) {
    		.p-block-3 {
      			font-size: 15px;
    		}
		}
  
.h3-block-3 {
	font-size: 18px;
	font-family: Manrope;
	font-weight: 400;
	padding-bottom: 10px;
}  
  	@media(max-width: 1663px) {
    	.h3-block-3 {
      		font-size: 16px;
    	}
	}
  		@media(max-width: 1480px) {
    		.h3-block-3 {
      			font-size: 15px;
    		}
		}
  
.img-div-3 {
	grid-area: cetiri;
	margin: auto 0px;
}
  
.img-4 {
	position: relative;
	width: 90%;
	border: 1px solid #101010;
	border-radius: 40px;
}
   	@media(max-width: 1050px) {
		.img-4 {
      		width: 100%;
		}
  	}

.button-4 {
    background-color: #dae087;
	border-radius: 50px;
    color: #010101;
    padding: 10px 15px 10px 15px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    font-family: Manrope;
    opacity: 0.9;
    transition: 0.3s;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    margin-top: 15px;
	position: relative;
  	left: 50%;
  	transform: translate(-50%);
	border: 1px solid #101010;
}
    .button-4:hover {
	  	opacity: 1 ;
   	  	background-color: #f3f0ec;
	  	color: #010101; 
	}

/*======================================================
                   BLOCK-5
======================================================*/
  
#BLOCK-5 {
	height: auto;
	background-color: #f3f0ec;
	text-align: -webkit-center; /*<-----AMAZING CENTERING EVEN BLOCKS
	                                    NO NEED FOR TEXT-ALIGN: CENTER;
										THIS MAKES EVERYTHING CENTERED
										ITS EVEN ON GOOGLE HOMEPAGE*/
	/*text-align: center;*/
}

.grid-pet {
	width: 100%;
	/*margin-left: 1%;*/
	display: grid;
  	grid-template-areas:
    	'pet-art pet';
	padding: 90px 5% 100px 5%;
	/*grid-template-rows: 50% 50%;*/
    grid-template-columns: 50% 50%;
	grid-gap: 20px;
}
  	@media(max-width: 1050px) {
		.grid-pet {
			width: 70%;
  			grid-template-areas:
    				'pet'
					'pet-art';
			/*padding: 40px 5% 10px 5%;*/
			grid-template-columns: 100%;
		}
  	}
	  	@media(max-width: 610px) {
			.grid-pet {
	    		width: 100%;
	  			display: grid;
  				grid-template-areas:
    				'pet'
					'pet-art';

				padding: 40px 10% 100px 10%;
	   			grid-template-rows: auto;
    			grid-template-columns: 100%;
				/*grid-gap: 1%;*/
			}
  		}

.article-4 {
	text-align: justify;
	text-justify: inter-word;
	grid-area: pet-art;
	margin: auto 0px;
    width: 90%;
	position: relative;
}
  	@media(max-width: 1050px) {
		.article-4 {
      		width: 100%;
		}
  	}
  
.h1-block-4 {
	font-size: 40px;
	font-family: 'ATBSerif';
	font-weight: 100;
	font-style: italic;
	padding-bottom: 10px;
} 
  	@media(max-width: 1480px) {
    	.h1-block-4 {
      		font-size: 35px;
    	}
	}
  		@media(max-width: 400px) {
    		.h1-block-4 {
      			font-size: 30px;
   			}
		}
  
.h2-block-4 {
	font-size: 21px;
	font-family: Manrope;
	font-weight: 400;
	padding-bottom: 10px;
}  
  	@media(max-width: 1480px) {
    	.h2-block-4 {
      		font-size: 19px;
    	}
	}
  		@media(max-width: 400px) {
    		.h2-block-4 {
      			font-size: 17px;
    		}
		}
  
.h3-block-4 {
	font-size: 18px;
	font-family: Manrope;
	font-weight: 400;
	padding-bottom: 30px;
	padding-top: 10px;
}  
  	@media(max-width: 1663px) {
    	.h3-block-4 {
      		font-size: 16px;
    	}
	}
  		@media(max-width: 1480px) {
    		.h3-block-4 {
      			font-size: 15px;
    		}
		}
  
.h4-block-4 {
	font-size: 18px;
	font-family: Manrope;
	font-weight: 400;
	padding-bottom: 10px;
}  
  	@media(max-width: 1663px) {
    	.h4-block-4 {
      		font-size: 16px;
    	}
	}
  		@media(max-width: 1480px) {
    		.h4-block-4 {
      			font-size: 15px;
    		}
		}
 
.p-block-4 {
	padding-bottom: 30px;
	font-weight: 400;
	font-family: Manrope;
	font-size: 18px;
}  
  	@media(max-width: 1663px) {
    	.p-block-4 {
      		font-size: 16px;
    	}
	}
  		@media(max-width: 1480px) {
    		.p-block-4 {
      			font-size: 15px;
    		}
		}
  
.img-div-4 {
	grid-area: pet;
	margin: auto 0px;
}
  
.img-5 {
	position: relative;
	width: 90%;
	border: 1px solid #101010;
	border-radius: 40px;
}
   	@media(max-width: 1050px) {
		.img-5 {
      		width: 100%;
		}
  	}
		
.button-5 {
   	background-color: #8fd1d8;
	border-radius: 50px;
    color: #010101;
    padding: 10px 15px 10px 15px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    font-family: Manrope;
    opacity: 0.9;
    transition: 0.3s;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    margin-top: 15px;
	position: relative;
  	left: 50%;
  	transform: translate(-50%);
	border: 1px solid #101010;
}  
    .button-5:hover {
	  	opacity: 1 ;
   	  	background-color: #f3f0ec;
	  	color: #010101; 
	}
	
/*======================================================
                    BLOCK-6
======================================================*/

#BLOCK-6 {
	height: auto;
	background-color: #f3f0ec;
	text-align: -webkit-center; /*<-----AMAZING CENTERING EVEN BLOCKS
	                                    NO NEED FOR TEXT-ALIGN: CENTER;
										THIS MAKES EVERYTHING CENTERED
										ITS EVEN ON GOOGLE HOMEPAGE*/
	/*text-align: center;*/
}

.grid-sest {
	width: 100%;
	/*margin-left: 1%;*/
	display: grid;
  	grid-template-areas:
    	'sest sest-art';
	padding: 90px 5% 100px 5%;
	/*grid-template-rows: 50% 50%;*/
    grid-template-columns: 50% 50%;
	grid-gap: 20px;
}
  	@media(max-width: 1050px) {
		.grid-sest {
			width: 70%;
  			grid-template-areas:
    				'sest'
					'sest-art';
			/*padding: 40px 5% 10px 5%;*/
			grid-template-columns: 100%;
		}
  	}
	  	@media(max-width: 610px) {
			.grid-sest {
	    		width: 100%;
	  			display: grid;
  				grid-template-areas:
    				'sest'
					'sest-art';

				padding: 40px 10% 100px 10%;
	   			grid-template-rows: auto;
    			grid-template-columns: 100%;
				/*grid-gap: 1%;*/
			}
  		}

.article-5 {
	text-align: justify;
	text-justify: inter-word;
	grid-area: sest-art;
	margin: auto 0px;
    width: 90%;
	position: relative;
}
  	@media(max-width: 1050px) {
		.article-5 {
      		width: 100%;
		}
  	}
  
.h1-block-5 {
	font-size: 40px;
	font-family: 'ATBSerif';
	font-weight: 100;
	font-style: italic;
	padding-bottom: 10px;
}  
  	@media(max-width: 1480px) {
    	.h1-block-5 {
      		font-size: 35px;
    	}
	}
  		@media(max-width: 400px) {
    		.h1-block-5 {
      			font-size: 30px;
    		}
		}
  
.h2-block-5 {
	font-size: 21px;
	font-family: Manrope;
	font-weight: 400;
	padding-bottom: 10px;
}  
  	@media(max-width: 1480px) {
    	.h2-block-5 {
      		font-size: 19px;
    	}
	}
  		@media(max-width: 400px) {
    		.h2-block-5 {
      			font-size: 17px;
    		}
		}
  
.p-block-5 {
	padding-bottom: 40px;
	font-weight: 400;
	font-family: Manrope;
	font-size: 18px;
	padding-top: 10px;
}  
  	@media(max-width: 1663px) {
    	.p-block-5 {
      		font-size: 16px;
    	}
	}
  		@media(max-width: 1480px) {
    		.p-block-5 {
      			font-size: 15px;
    		}
		}
  
.h3-block-5 {
	font-size: 18px;
	font-family: Manrope;
	font-weight: 400;
	padding-bottom: 10px;
}  
  	@media(max-width: 1663px) {
    	.h3-block-5 {
      		font-size: 16px;
    	}
	}
  		@media(max-width: 1480px) {
    		.h3-block-5 {
      			font-size: 15px;
    		}
		}
  
.img-div-6 {
	grid-area: sest;
	margin: auto 0px;
}
  
.img-6 {
	position: relative;
	width: 90%;
	border: 1px solid #101010;
	border-radius: 40px;
}
   	@media(max-width: 1050px) {
		.img-6 {
      		width: 100%;
		}
  	}

.button-6 {  
   	background-color: #fa97c1;
	border-radius: 50px;
    color: #010101;
    padding: 10px 15px 10px 15px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    font-family: Manrope;
    opacity: 0.9;
    transition: 0.3s;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    margin-top: 15px;
	position: relative;
  	left: 50%;
  	transform: translate(-50%);
	border: 1px solid #101010;
}   
    .button-6:hover {
	  	opacity: 1 ;
   	  	background-color: #f3f0ec;
	  	color: #010101;
	}

/*======================================================
                    BLOCK-6-2
======================================================*/

#BLOCK-6-2 {
	height: auto;
	background-color: #f3f0ec;
	text-align: -webkit-center; /*<-----AMAZING CENTERING EVEN BLOCKS
	                                    NO NEED FOR TEXT-ALIGN: CENTER;
										THIS MAKES EVERYTHING CENTERED
										ITS EVEN ON GOOGLE HOMEPAGE*/
	/*text-align: center;*/
}

.grid-sedam {
	width: 100%;
	/*margin-left: 1%;*/
	display: grid;
  	grid-template-areas:
    	'sedam-art sedam';
	padding: 90px 5% 100px 5%;
	/*grid-template-rows: 50% 50%;*/
    grid-template-columns: 50% 50%;
	grid-gap: 20px;
}
  	@media(max-width: 1050px) {
		.grid-sedam {
			width: 70%;
  			grid-template-areas:
    				'sedam'
					'sedam-art';
			/*padding: 40px 5% 10px 5%;*/
			grid-template-columns: 100%;
		}
  	}
	  	@media(max-width: 610px) {
			.grid-sedam {
	    		width: 100%;
	  			display: grid;
  				grid-template-areas:
    				'sedam'
					'sedam-art';

				padding: 40px 10% 100px 10%;
	   			grid-template-rows: auto;
    			grid-template-columns: 100%;
				/*grid-gap: 1%;*/
			}
  		}

.article-6 {
	text-align: justify;
	text-justify: inter-word;
	grid-area: sedam-art;
	margin: auto 0px;
    width: 90%;
	position: relative;
}
  	@media(max-width: 1050px) {
		.article-6 {
      		width: 100%;
		}
  	}

.h1-block-6 {
	font-size: 40px;
	font-family: 'ATBSerif';
	font-weight: 100;
	font-style: italic;
	padding-bottom: 10px;
}  
  	@media(max-width: 1480px) {
    	.h1-block-6 {
      		font-size: 35px;
    	}
	}
  		@media(max-width: 400px) {
    		.h1-block-6 {
      			font-size: 30px;
    		}	
		}
  
.h2-block-6 {
	font-size: 21px;
	font-family: Manrope;
	font-weight: 400;
	padding-bottom: 10px;
}  
  	@media(max-width: 1480px) {
    	.h2-block-6 {
      		font-size: 19px;
    	}
	}
  		@media(max-width: 400px) {
    		.h2-block-6 {
      			font-size: 17px;
    		}
		}
  
.p-block-6 {
	padding-bottom: 40px;
	font-weight: 400;
	font-family: Manrope;
	font-size: 18px;
	padding-top: 10px;
}  
  	@media(max-width: 1663px) {
    	.p-block-6 {
      		font-size: 16px;
    	}
	}
  		@media(max-width: 1480px) {
    		.p-block-6 {
      			font-size: 15px;
    		}
		}
  
.h3-block-6 {
	font-size: 18px;
	font-family: Manrope;
	font-weight: 400;
	padding-bottom: 10px;
}  
  	@media(max-width: 1663px) {
    	.h3-block-6 {
      		font-size: 16px;
    	}
	}
  		@media(max-width: 1480px) {
    		.h3-block-6 {
      			font-size: 15px;
    		}
		}
  
.img-div-7 {
	grid-area: sedam;
	margin: auto 0px;
}
  
.img-7 {
	position: relative;
	width: 90%;
	border: 1px solid #101010;
	border-radius: 40px;
}
   	@media(max-width: 1050px) {
		.img-6 {
      		width: 100%;
		}
  	}

.button-7 {  
   	background-color: #dae087;
	border-radius: 50px;
    color: #010101;
    padding: 10px 15px 10px 15px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    font-family: Manrope;
    opacity: 0.9;
    transition: 0.3s;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    margin-top: 15px;
	position: relative;
  	left: 50%;
  	transform: translate(-50%);
	border: 1px solid #101010;
}  
    .button-7:hover {
	  	opacity: 1 ;
   	  	background-color: #f3f0ec;
	  	color: #010101; 
	}

/*======================================================
                   BLOCK-7
======================================================*/

#BLOCK-7 {
	height: 650px;
	background-color: #f3f0ec;
	text-align: center;
}
	@media(max-width: 690px) {
    	#BLOCK-7 {
			height: 830px;
    	}
  	}
	
.underline {
	width: 20px;
}
	.underline::after {
  		position: absolute; /* Makes the element position to be certain and not affected by other text. */
  		content:" "; /* Necessary because without this, After/Before Pseudo elements wont work. */
  		background-image: url(freebie-site/pics/squiggly-line.png);
  		background-size: 166px;
  		width: 152px; /* Element width. So set the Image Width */
  		height: 16px; /* Element height. So set the Image Height */
  		margin-left: -150px; /* Image Width again. It's pulling the "after" text to the left to overlap. */
  		margin-top: 37px;
	}
	/*
	@media(max-width: 1281px) {
			.underline::after{
				margin-left: -68px;
  				margin-top: 35px;
			}
		}
		
		
		@media(max-width: 590px) {
			.underline::after{
  				margin-left: -68px; *//* Image Width again. It's pulling the "after" text to the left to overlap. */
  				/*margin-top: 35px;
			}
		}*/
		
.boxy-box {
	padding-top: 80px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	width: 560px;
}	
	@media(max-width: 690px) {
    	.boxy-box {
      		width: 310px;
    	}
  	}
	
.last-block-title {
	text-align: center;
	font-family: 'ATBSerif';
	font-weight: 100;
	font-style: italic;
	font-size: 40px;
}

.list-how-to {
    counter-reset: list-number;
	text-align: left;
	display: inline-block;
	line-height: -10px;
	padding-left: 30px;
}
    .list-how-to .bullet:before {
        counter-increment: list-number;
        content: counter(list-number);
  
        margin-right: 10px;
        margin-bottom: 10px;
        width: 45px;
        height: 35px;
        display: inline-block;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        background-color: #f3f0ec;
	    border: 1px solid #000;
        border-radius: 50%;
        color: #000;
		margin-left: -57px;
		padding-top: 10px;
		text-align: center;
		margin-top: 55px;
    }
		@media(max-width: 690px) {
    		.list-how-to .bullet:before {
	  			width: 37px;
	  			height: 30px;
	  			padding-top: 7px;
	  			margin-left: -40px
    		}
  		}
		
.yes {
	margin-top: -55px;
	margin-left: 10px;
}	
	@media(max-width: 690px) {
    	.list-how-to {
      		padding-left: 40px;
    	}
  	}
  
  
  
/*======================================================
                   footer
======================================================*/

#footer {
  	text-align: right; 
  	padding-top: 20px;
  	padding-bottom: 20px;
  	background-color: #fa84c1;
  	color: #F3F0EC;
}
  	@media(max-width: 559px) {
	 	#footer {
		 	text-align: center;
	 	}
 	}

.copyright {
	float: left;
	margin-top: 25px;
	margin-left: 20px;
}
 	@media(max-width: 559px) {
	 	.copyright {
		 	float: none;
		  	text-align: center;
		  	margin-top: 10px;
		  	margin-left: 0px;
		  	display: block;	
	 	}
 	}
	
.link-p {
	margin-left: 60px;
	margin-top: 5px;
}
@media(max-width: 559px) {
	 	.link-p {
	margin-left: 0px;
	text-align: center;
}
 	}
 
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);

.footericons {
    width: 250px;
    display: inline-block;
    margin: 0px;
	text-align: left;	
}
	@media(max-width: 559px) {
	 	.footericons {
			text-align: center;
	 	}
 	}

.socialiconsul {
    margin-top: 0px;
	padding: 5px 0px;
}

.socialiconsli {
    vertical-align: top;
    display: inline;
    height: 100px;	
}

.socialicon {
    color: #fa84c1;
    text-decoration: none;	
}

.fa-facebook {
   padding:10px 14px;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition: .3s;
    background-color: #F3F0EC;
	border-radius: 50px;
}
	.fa-facebook:hover {
    	background-color: #fa84c1;
		color: #F3F0EC;
	}

.fa-envelope {
    padding:10px 14px;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition: .3s;
    background-color: #F3F0EC;
	border-radius: 50px;
}
	.fa-envelope:hover {
    	background-color: #fa84c1;
		color: #F3F0EC;
	}

.fa-pinterest {
    padding:10px 14px;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition: .3s;
    background-color: #F3F0EC;
	border-radius: 50px;
}
	.fa-pinterest:hover {
    	background-color: #fa84c1;
		color: #F3F0EC;
	}

.fa-behance {
    padding:10px 14px;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition: .3s;
    background-color: #F3F0EC;
	border-radius: 50px;
}
	.fa-behance:hover {
    	background-color: #fa84c1;
		color: #F3F0EC;
	}
	
.fa-instagram {
    padding:10px 14px;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition: .3s;
    background-color: #F3F0EC;
	border-radius: 50px;
}
	.fa-instagram:hover {
    	background-color: #fa84c1;
		color: #F3F0EC;
	}

/*======================================================
                  LOADER
======================================================*/
  
.blob {
	background-color: #F3F0EC;
	overflow: hidden;
	width: 100%;
 	height: 100vh;
}
 
.ball1 {
	width: 30px;
	height: 30px;
	margin-bottom: -30px;
	position: relative;
	top: 45%;
	border-radius: 50%;
	animation: move 3s infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
}

.ball2 {
	width: 30px;
	height: 30px;
	margin-bottom: -30px;
	position: relative;
	top: 45%;
	border-radius: 50%;
	animation: move 3s 500ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
}

.ball3 {
	width: 30px;
	height: 30px;
	margin-bottom: -30px;
	position: relative;
	top: 45%;
	border-radius: 50%;
	animation: move 3s 1000ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
}

.ball4 {
	width: 30px;
	height: 30px;
	position: relative;
	top: 45%;
	border-radius: 50%;
	animation: move 3s 1500ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
}
	@keyframes move {
	 	0% {
		 	left: 0%;
		 	transform: rotate(-70deg);
		}
	 	100% {
		 	left: 100%;
		 	transform: rotate(90deg);
		}
	}
	@media(max-width: 630px) {
 		.ball1 {
	 		animation: move 2s infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
		}
		
 		.ball2 {
	 		animation: move 2s 500ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
		}
 		.ball3 {
	 		animation: move 2s 1000ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
		}
 		.ball4 {
	 		animation: move 2s 1500ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
		}
 			@keyframes move {
	 			0% {
		 			left: 0%;
		 			transform: rotate(-70deg);
				}
	 			100% {
		 			left: 100%;
		 			transform: rotate(90deg);
				}
			}

	}
		@media(max-width: 400px) {
 			.ball1 {
	 			animation: move 1.6s infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
			}
			
 			.ball2 {
	 			animation: move 1.6s 400ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
			}
			
 			.ball3 {
	 			animation: move 1.6s 800ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
			}
			
 			.ball4 {
	 			animation: move 1.6s 1200ms infinite cubic-bezier(0.2, 0.64, 0.81, 0.23);
			}
 				@keyframes move {
	 				0% {
		 				left: 0%;
		 				transform: rotate(-70deg);
					}
	 				100% {
		 				left: 100%;
		 				transform: rotate(90deg);
					}
				}

		}

.ball-heart {
 	object-fit: contain; 
 	width: 40px;
}
 
/*scrollinnggg*/
/* ===== Scrollbar CSS ===== */
  /* Firefox */
*{
   	scrollbar-width: auto;
    scrollbar-color: #fa84c1 #f3f0ec;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 8px;
}

*::-webkit-scrollbar-track {
    background: #f3f0ec;
}

*::-webkit-scrollbar-thumb {
    background-color: #fa84c1;
    border-radius: 10px;
    border: 5px none #ffffff;
}