/*///// BLOG PAGE //////*/ 
/*///// BLOG ARTICLE //////*/ 



/*///// BLOG //////*/ 

@media (max-width: 1295px){
.hp-TopNavigation-Tabs.arrow-down.blog-page {display: none;}
}


@media (max-width: 1119px){

.hp-TopNavigation-buttons.blog-page {
    display: none;
	}
	.header-mobile-icon.blog-page{
    display: block;
    z-index: 440;
    margin-top: 20px;
    width: 25px;
	}}

@media (max-width: 870px){

	#hp-TopNavigation-Tabs-Wrapper-Out.blog-page {display: none}}

.blog-logo-container {display: flex}
.blog-logo-container img.blog-terefic-logo {z-index: 3}
.blog-logo-container img.blog-logo {
	height: 50px; 
	position: absolute;
    top: -3px;
    left: -10px;}

img.blog-logo:hover {
border-bottom: 2px solid #ff2ad4;
padding-bottom: 4px;}

#hp-bottom-blog {position: absolute}

.blog-title-container {
	margin-top: 94px;
	height: 100px;
	background-image: linear-gradient(25deg, #021c42 , #0059a9);
	position: relative
}

h1.blog-title {
	font-size: 30px;
    font-weight: 400;
    font-family: Roboto, Arial;
    line-height: 38px;
    -webkit-font-smoothing: antialiased;	
	color: white;
	position: relative;
	display: block;
	text-align:center;
	top:50%;
	transform: translateY(-50%)
}

h4.blog-subtitle {
	max-width: 1170px;
    font-size: 36px;
    font-family: Roboto, Arial;
    margin-bottom: 40px;
    font-weight: 400;
    line-height: 46px;
    -webkit-font-smoothing: antialiased;
    margin: 70px auto 0 auto;
    padding: 0 68px;
}

.diamond-white {
	position: absolute;
	fill: white;
	width: 18px;
	height: 18px;
	}

.diamond10 {top: 5%; left: 1.5%; animation: diamond-animation1 4000ms infinite; animation-timing-function: linear;}
.diamond11 {top: 15%; left: 5%; animation: diamond-animation2 3500ms infinite; animation-timing-function: linear;}
.diamond12 {top: 65%; left: 9%; animation: diamond-animation3 3800ms infinite; animation-timing-function: linear;}
.diamond13 {top: 12%; right: 7%; animation: diamond-animation4 4000ms infinite; animation-timing-function: linear;}
.diamond14 {top: 30%; left: 246px; animation: diamond-animation4 3800ms infinite; animation-timing-function: linear;}
.diamond15 {top: 25%; right: 15%; animation: diamond-animation2 4200ms infinite; animation-timing-function: linear;}
.diamond16 {top: 5%; left: 20%; animation: diamond-animation1 3500ms infinite; animation-timing-function: linear;}
.diamond17 {top: 11%; right: 16%; animation: diamond-animation3 3800ms infinite; animation-timing-function: linear;}
.diamond18 {top: 72%; left: 42%; animation: diamond-animation1 3800ms infinite; animation-timing-function: linear;}
.diamond19 {top: 47%; right: 43%; animation: diamond-animation2 4200ms infinite; animation-timing-function: linear;}
.diamond20 {top: 63%; left: 77%; animation: diamond-animation1 4000ms infinite; animation-timing-function: linear;}
.diamond21 {top: 62%; left: 54%; animation: diamond-animation2 3500ms infinite; animation-timing-function: linear;}
.diamond22 {top: 7%; left: 32%; animation: diamond-animation3 3800ms infinite; animation-timing-function: linear;}
.diamond23 {top: 63%; right: 72%; animation: diamond-animation4 4000ms infinite; animation-timing-function: linear;}
.diamond24 {top: 30%; left: 65%; animation: diamond-animation4 3800ms infinite; animation-timing-function: linear;}



@keyframes diamond-animation1 {
    0% {transform: rotate(20deg) translate(0px, 0px) scale(1)}
	20% {transform: rotate(20deg) translate(2px, 3px) scale(1.2)}
	30% {transform: rotate(20deg) translate(0px, 1px) scale(1)}	
	50% {transform: rotate(20deg) translate(-2px, 0px) scale(1)}
	80% {transform: rotate(20deg) translate(1px, -1px) scale(1.1)}	
    100% {transform: rotate(20deg) translate(0px, 0px) scale(1)}
}


@keyframes diamond-animation2 {
    0% {transform: rotate(0deg) translate(0px, 0px) scale(1.1)}
	20% {transform: rotate(0deg) translate(3px, 1px) scale(0.9)}
	30% {transform: rotate(0deg) translate(1px, 0px) scale(1)}	
	50% {transform: rotate(0deg) translate(-1px, 2px) scale(1.2)}
	80% {transform: rotate(0deg) translate(1px, -1px) scale(1)}	
    100% {transform: rotate(0deg) translate(0px, 0px) scale(1.1)}
}

@keyframes diamond-animation3 {
    0% {transform: rotate(0deg) translate(0px, 0px) scale(1)}
	20% {transform: rotate(0deg) translate(1px, -1px) scale(1.15)}
	30% {transform: rotate(0deg) translate(1px, 0px) scale(1.1)}	
	50% {transform: rotate(0deg) translate(3px, 2px) scale(1)}
	80% {transform: rotate(0deg) translate(1px, -1px) scale(1.2)}	
    100% {transform: rotate(0deg) translate(0px, 0px) scale(1)}
}

@keyframes diamond-animation4 {
    0% {transform: rotate(10deg) translate(0px, 0px) scale(1.5)}
	20% {transform: rotate(10deg) translate(1px, -1px) scale(1.65)}
	30% {transform: rotate(10deg) translate(1px, 0px) scale(1.6)}	
	50% {transform: rotate(10deg) translate(3px, 2px) scale(1.4)}
	80% {transform: rotate(10deg) translate(1px, -1px) scale(1.8)}	
    100% {transform: rotate(10deg) translate(0px, 0px) scale(1.5)}
}


.blog-articles-container {
	max-width: 1170px;
	display: flex;
	flex-wrap: wrap;
    margin: auto;
    margin-top: 30px;
	padding: 0 68px;
	justify-content: space-between
}

.blog-article-box {
	width: 31%;
	max-width: 370px;
	min-width: 310px;
	background-color: aliceblue;
	margin-bottom: 30px;
	cursor: pointer;
	transition: all 0.2s ease-in-out
}

.blog-article-emptybox {
	width: 31%;
	max-width: 370px;
	min-width: 310px;
	background-color: transparent;
}

.blog-article-box.blog-subscribe {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-right: 0;
	min-height: 300px;
	background-image: linear-gradient(25deg, #aed9ff, aliceblue);
	transition: all 0.2s ease-in-out;
	cursor: default
}

.blog-subscribe .blog-box-title {
	text-align: center;
	margin: -45px 30px 35px 30px;
}

.blog-article-box.blog-subscribe:hover {
	box-shadow: none;
	background-image: linear-gradient(25deg, #91cbff, aliceblue);
}

#blog-subscribe-form {transition: 1s all ease-in-out}
#blog-subscribe-confirmed {
	opacity: 0; 
	transition: 1s opacity ease-in-out;
	display: none}

.blog-article-box:hover {
	box-shadow: 0 0 1rem rgb(0 0 0 / 18%);
}

.blog-article-box:active {
	background-color: #dcefff;
}

.blog-article-box:hover .blog-box-cover img {
	filter: brightness(1.3)
}

h3.blog-box-title {
	font-size: 18px;
    font-family: Roboto, Arial;
    font-weight: 500;
    line-height: 26px;
    -webkit-font-smoothing: antialiased;
	margin: 20px 30px 0px 30px;
	
}

h3.blog-box-subtitle {
	font-size: 18px;
    font-family: Roboto, Arial;
    font-weight: 500;
    line-height: 26px;
    -webkit-font-smoothing: antialiased;
	margin: 0px 30px 10px 30px;	
}

h5.blog-box-date {
	font-size: 14px;
    font-family: Roboto, Arial;
    font-weight: 500;
    line-height: 18px;
    -webkit-font-smoothing: antialiased;
	margin: 0px 30px 20px 30px;	
	color: #014e95
}

h4.blog-box-summary {
	font-size: 16px;
    font-family: Roboto, Arial;
    font-weight: 400;
    line-height: 24px;
    -webkit-font-smoothing: antialiased;
	margin: 0 30px
}

.blog-box-btn {
	font-size: 14px;
    font-family: Roboto, Arial;
    font-weight: 400;
	margin: 20px 0 30px 30px;
	padding: 5px 15px 5px 5px;
	background-color: #FFD600;
	display: inline-block;
	color: #212529
}

.hp-next-arrow{
	width: 9px;
    height: 18px;
    position: absolute;
    margin-left: 3px;
	fill: #212529
}

.blog-article-box:hover .blog-box-btn {
	background-color: #ffc933;
	margin: 18px 0 28px 28px;	
	border: 2px solid #ffc933 
}

form input[type="text"].blog-email-field {
	height: 40px;
	margin: 15px 30px;
    width: calc(100% - 60px); 	
}

.hp-subscribe-btn {
	font-size: 17px;
    line-height: 21px;
    font-weight: 400;
    width: calc(100% - 60px); 
    text-align: center;
    margin: 0 30px;
}


.blog-share {
	width: 48px;
	height: 48px;
	left: 0;
	cursor: pointer;
	position: relative;
	display: block;
	transition: all 0.3s ease-in-out;
}

.blog-container{ 
	position: fixed;
	width: 48px;
	height: 48px;
	left: 0;
	transition: all 0.3s ease-in-out;
	z-index: 100
}

.blog-container:hover{width: 112px}
.blog-container:hover .blog-share {margin-left: 5px}
.blog-container:hover .blog-share-text {left: 50px; opacity: 1}

.blog-fb.blog-container{top: 300px}
.blog-twitter.blog-container{top: 348px}
.blog-linkedin.blog-container{top: 396px}



.blog-container.blog-fb {background-color: rgb(59, 89, 152)}
.blog-container.blog-twitter {background-color: rgb(29, 161, 242)}
.blog-container.blog-linkedin {background-color: #0377b5}

.blog-container.blog-fb:hover  {background-color: #26478c}
.blog-container.blog-twitter:hover {background-color: #0e97ea} 
.blog-container.blog-linkedin:hover {background-color: #005f92} 



.blog-share-text {
	position: absolute; 
	line-height: 48px;
	font-size: 16px;
    font-family: Roboto, Arial;
    font-weight: 400;
	color: white;
	left: 0;
	transition: all 0.3s ease-in-out;
	opacity: 0;
}

.hp-ready.hp-polygon.blog-blue {
	background-image: linear-gradient(25deg, #021c42 , #0059a9);
}


@media (max-width: 739px) {
.blog-title-container,
.blog-post-header {margin-top: 81px}	
	
.diamond11,.diamond14, .diamond21 {display: none}	
	
.diamond23 {right: 39%} 
.diamond22 {top: 78%} 	
}

.blog-box-cover {
	height: 210px;
	background-color: aqua;
    box-sizing: border-box;
	text-align: center;
	align-content: center;
	align-items: center;
	position: relative;
	overflow: hidden
}

.blog-post-header .blog-box-cover {height: 160px;}

.blog-box-cover img {
	position: absolute;
	top: 50%;
    left: 0;
    transform: translateY(-50%);
	margin: 0 30px;
	box-sizing: border-box;
}

.blog-post-header .blog-box-cover img {
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	box-sizing: border-box;	
	width: 300px;
	margin: 0
}


.blog-layer {position: absolute; top: 0}

.blog-article-box:hover .blog-layer {
	filter: brightness(1.2)
}

.blog01.blog-box-cover {background-image: linear-gradient(60deg, #180233, #311077)}

.blog01-L1{
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to left, #ff21be, #931b8b);
	clip-path: polygon(100% -10%, 100% 0%, 0% 700px, 0% 450px);
	animation: blog01-animation-L1 15s infinite; 
	animation-timing-function: linear;
	filter: brightness(1.3)
}

@keyframes blog01-animation-L1 {
    0% {clip-path: polygon(100% -10%, 100% 0%, 0% 700px, 0% 450px)}
	60% {clip-path: polygon(90% -10%, 90% 0%, 0% 650px, 0% 180px)}	
    100% {clip-path: polygon(100% -10%, 100% 0%, 0% 700px, 0% 450px);}
}	

.blog01-L2{
	width: 100%;
	height: 100%;
	opacity: 37%;
	background-image: linear-gradient(to right, #f081a9, #ffb9d2);
	clip-path: polygon(100% -10%, 100% 0%, 0% 700px, 0% 450px);
	animation: blog01-animation-L2 15s infinite; 
	animation-timing-function: linear;
	filter: brightness(1.3)
}


@keyframes blog01-animation-L2 {
    0% {clip-path: polygon(100% -10%, 100% 0%, 50% 700px, 10% 450px)}
	50% {clip-path: polygon(90% -10%, 90% 0%, 80% 650px, 20% 380px)}
	80% {clip-path: polygon(95% -10%, 95% 0%, 60% 650px, 18% 280px)}		
    100% {clip-path: polygon(100% -10%, 100% 0%, 50% 700px, 10% 450px);}
}	

.blog-post-header .blog01-L1{
	clip-path: polygon(72% -10%, 73% 0%, 40% 700px, 0% 450px);
	animation: blog01-post-animation-L1 15s infinite; 
}

@keyframes blog01-post-animation-L1 {
    0% {clip-path: polygon(72% -10%, 73% 0%, 60% 700px, 20% 450px)}
	55% {clip-path: polygon(68% -10%, 70% 0%, 58% 650px, 20% 180px)}	
    100% {clip-path: polygon(72% -10%, 73% 0%, 60% 700px, 20% 450px);}
}	


.blog-post-header .blog01-L2{
	clip-path: polygon(73% -10%, 77% 0%, 0% 700px, 0% 450px);
	animation: blog01-post-animation-L2 15s infinite; 
}


@keyframes blog01-post-animation-L2 {
    0% {clip-path: polygon(73% -10%, 76% 0%, 40% 700px, 30% 400px)}
	50% {clip-path: polygon(67% -10%, 71% 0%, 65% 650px, 10% 400px)}
    100% {clip-path: polygon(73% -10%, 76% 0%, 40% 700px, 30% 400px);}
}	


.blog02.blog-box-cover,
.blog03.blog-box-cover,
.blog04.blog-box-cover,
.blog06.blog-box-cover
{background-image: linear-gradient(60deg, #092140, #091019)}


.blog02 .blog-layer{
	width: 30px;
	height: 45px;
	clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%);
	position: absolute;
	animation-timing-function: linear;	
	top: 100%
}

.blog-article-box:hover .blog02 .blog-layer {
	filter: brightness(1.3)
}

@keyframes blog02-animation-right {
    0% {top: 100%}
    40% {top: 60%; transform: translateX(10px)}
    60% {top: 40%; transform: translateX(-7px)}
    100% {top: -45px; transform: translateX(5px)}
}

@keyframes blog02-animation-left {
    0% {top: 100%}
    40% {top: 60%; transform: translateX(15px)}
    60% {top: 40%; transform: translateX(-2px)}
    100% {top: -45px; transform: translateX(3px)}
}

@keyframes blog02-animation-start1 {
    0% {top: 60%}
    100% {top: -45px; transform: translateX(3px)}
}


@keyframes blog02-animation-start2 {
    0% {top: 80%}
    100% {top: -45px; transform: translateX(1px)}
}

.blog02-L1 {
	background-color: #0b54a0;	
	animation: blog02-animation-right 15s infinite; 
	left: 90%;
	opacity: 75%
} 

.blog02-L2 {
	background-color: #0066ff;	
	animation: blog02-animation-left 11s infinite; 
	left: 32%;
	opacity: 80%;
	animation-delay: 8s;
} 

.blog02-L3 {
	background-color: #afdaff;	
	animation: blog02-animation-right 13s infinite; 
	left: 80%;
	opacity: 85%;
	animation-delay: 3s;	
} 

.blog02-L4 {
	background-color: #008eff;	
	animation: blog02-animation-right 9s infinite; 
	left: 80%;
	opacity: 50%;
	animation-delay: 6s;
} 


.blog02-L5 {
	background-color: #80b7f1;	
	animation: blog02-animation-right 12s infinite; 
	left: 85%;
	opacity: 67%;
	animation-delay: 1s;
		
} 

.blog02-L6 {
	background-color: #175aa0;	
	animation: blog02-animation-left 11s infinite; 
	left: 88%;
	opacity: 50%;
	animation-delay: 8s;
} 

.blog02-L7 {
	background-color: #b1d7ff;	
	animation: blog02-animation-left 13s infinite; 
	left: 36%;
	opacity: 85%;
	animation-delay: 9s;	
} 

.blog02-L8 {
	background-color: #ff29d4;	
	animation: blog02-animation-left 4s infinite; 
	left: 53%;
	opacity: 100%;
	animation-delay: 2s;
} 

.blog-post-header .blog02-L8 {left: 60%}

.blog02-L9 {
	background-color: #4ea5ff;	
	animation: blog02-animation-left 7s infinite; 
	left: 24%;
	opacity: 80%;
	animation-delay: 12s;
} 

.blog02 .blog-layer.blog02-L11 {
	background-color: #0678ef;	
	animation: blog02-animation-start1 6s; 
	animation-fill-mode: forwards;	
	animation-timing-function: linear;		
	top: 60%;
	left: 60%;
	opacity: 75%
} 

.blog02 .blog-layer.blog02-L12 {
	background-color: #4b8fd6;	
	animation: blog02-animation-start2 8s; 
	animation-fill-mode: forwards;
	animation-timing-function: linear;		
	top: 80%;
	left: 32%;
	opacity: 75%	
} 

.blog02-L13 {
	background-color: #1f5ea0;	
	animation: blog02-animation-left 11s infinite; 
	left: 15%;
	opacity: 85%;
	animation-delay: 5.5s;	
} 

.blog02-L14 {
	background-color: #4ea5ff;	
	animation: blog02-animation-right 9s infinite; 
	left: 70%;
	opacity: 80%;
	animation-delay: 10s;
} 


.blog02-L15 {
	background-color: #1f5ea0;	
	animation: blog02-animation-left 11s infinite; 
	left: 30%;
	opacity: 85%;
	animation-delay: 4s;	
} 

.blog02-L16 {
	background-color: #4ea5ff;	
	animation: blog02-animation-right 9s infinite; 
	left: 48%;
	opacity: 80%;
	animation-delay: 7s;
} 

.blog02-L17 {
	background-color: #0b54a0;	
	animation: blog02-animation-right 13s infinite; 
	left: 8%;
	opacity: 75%;
	animation-delay: 3s;		
} 

.blog02-L18 {
	background-color: #0066ff;	
	animation: blog02-animation-left 9s infinite; 
	left: 28%;
	opacity: 80%;
	animation-delay: 2.7s;
} 

.blog02-L19 {
	background-color: #afdaff;	
	animation: blog02-animation-right 13s infinite; 
	left: 53%;
	opacity: 85%;
	animation-delay: 3s;	
} 

.blog02-L20 {
	background-color: #008eff;	
	animation: blog02-animation-right 11s infinite; 
	left: 10%;
	opacity: 50%;
	animation-delay: 11s;
} 

.extra.blog02-L1 {left: 58%; animation-delay: 1s;}
.extra.blog02-L2 {left: 68%; animation-delay: 4s;}
.extra.blog02-L3 {left: 65%; animation-delay: 6s;}
.extra.blog02-L4 {left: 21%; animation-delay: 0s;}
.extra.blog02-L5 {left: 73%; animation-delay: 7s;}
.extra.blog02-L6 {left: 43%; animation-delay: 9s;}
.extra.blog02-L7 {left: 38%; animation-delay: 3s;}
.extra.blog02-L8 {left: 73%; animation-delay: 8s;}
.extra.blog02-L9 {left: 80%; animation-delay: 2s;}
.extra.blog02-L10 {left: 40%; animation-delay: 6s;}


.blog03 .blog-layer{
	height: 25%;
	position: absolute;
	background-color: #64e6c8;
	animation-timing-function: linear;	
}

.blog-article-box:hover .blog03 .blog-layer {
	filter: brightness(1.1)
}


.blog03-L1 {
	width: 12.5%;
	animation: blog03-animation-L1 10s infinite; 
	right: 0;
	top: 75%;	
} 

@keyframes blog03-animation-L1 {
    0% {width: 12.5%}
    15% {width: 100%}	
    100% {width: 100%}
}

.blog03-L2 {
	width: 0%;	
	animation: blog03-animation-L2 10s infinite; 
	left: 0;
	top: 50%;	
} 

@keyframes blog03-animation-L2 {
    0% {width: 0%}
    14% {width: 0%}	
    15% {width: 12.5%}	
    30% {width: 100%}	
    100% {width: 100%}
}


.blog03-L3 {
	width: 0%;	
	animation: blog03-animation-L3 10s infinite; 
	right: 0;
	top: 25%;	
} 

@keyframes blog03-animation-L3 {
    0% {width: 0%}
    29% {width: 0%}	
    30% {width: 12.5%}	
    45% {width: 100%}	
    100% {width: 100%}
}


.blog03-L4 {
	width: 0%;	
	animation: blog03-animation-L4 10s infinite; 
	left: 0;
	top: 0;	
} 

@keyframes blog03-animation-L4 {
    0% {width: 0%}
    44% {width: 0%}	
    45% {width: 12.5%}	
    60% {width: 100%}	
    100% {width: 100%}
}


.blog03 .blog-layer.blog03-L5,
.blog03 .blog-layer.blog03-L6 {
	width: 0%;	
	animation: blog03-animation-L5 10s infinite; 
	left: 87.5%;
	top: 0;	
	background-color: #005a10;
	opacity: 0%
} 

.blog03 .blog-layer.blog03-L6 {
	clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%);
	animation: blog03-animation-L6 10s infinite; 
	filter: brightness(1.8);
	width: 12.5%;
	opacity: 0
}

.blog-article-box:hover .blog03 .blog-layer.blog03-L6 {
	filter: brightness(2);}

@keyframes blog03-animation-L5 {
    0% {opacity: 0%}
    57% {opacity: 0%}	
    58% {opacity: 100%; background-color: #005a10; width: 0%}	
    60% {opacity: 100%; background-color: #0aff12; width: 12.5%}	
    64% {opacity: 100%; background-color: #005a10; width: 12.5%}	
    68% {opacity: 100%; background-color: #0aff12; width: 12.5%}			
    72% {opacity: 100%; background-color: #005a10; width: 12.5%}	
    76% {opacity: 100%; background-color: #0aff12; width: 12.5%}	
    80% {opacity: 100%; background-color: #005a10; width: 12.5%}	
    84% {opacity: 100%; background-color: #0aff12; width: 12.5%}	
    88% {opacity: 100%; background-color: #005a10; width: 12.5%}	
    92% {opacity: 100%; background-color: #0aff12; width: 12.5%}
    96% {opacity: 100%; background-color: #005a10; width: 12.5%}	
    100% {opacity: 100%; background-color: #0aff12; width: 12.5%}	
}

@keyframes blog03-animation-smallL5 {
    0% {opacity: 0%}
    57% {opacity: 0%}	
    58% {opacity: 100%; background-color: #005a10; width: 0%}	
    60% {opacity: 100%; background-color: #0aff12; width: 4.5%}	
    64% {opacity: 100%; background-color: #005a10; width: 4.5%}	
    68% {opacity: 100%; background-color: #0aff12; width: 4.5%}			
    72% {opacity: 100%; background-color: #005a10; width: 4.5%}	
    76% {opacity: 100%; background-color: #0aff12; width: 4.5%}	
    80% {opacity: 100%; background-color: #005a10; width: 4.5%}	
    84% {opacity: 100%; background-color: #0aff12; width: 4.5%}	
    88% {opacity: 100%; background-color: #005a10; width: 4.5%}	
    92% {opacity: 100%; background-color: #0aff12; width: 4.5%}
    96% {opacity: 100%; background-color: #005a10; width: 4.5%}	
    100% {opacity: 100%; background-color: #0aff12; width: 4.5%}	
}

@keyframes blog03-animation-L6 {
    0% {opacity: 0%}
    57% {opacity: 0%}	
    58% {opacity: 0%; background-color: #005a10}	
    60% {opacity: 100%; background-color: #0aff12}	
    64% {opacity: 100%; background-color: #005a10}	
    68% {opacity: 100%; background-color: #0aff12}			
    72% {opacity: 100%; background-color: #005a10}	
    76% {opacity: 100%; background-color: #0aff12}	
    80% {opacity: 100%; background-color: #005a10}	
    84% {opacity: 100%; background-color: #0aff12}	
    88% {opacity: 100%; background-color: #005a10}	
    92% {opacity: 100%; background-color: #0aff12}
    96% {opacity: 100%; background-color: #005a10}	
    100% {opacity: 100%; background-color: #0aff12}	
}



.blog04 .blog-layer{
	width: 100px;
	height: 40px;
	clip-path: polygon(0% 10%, 80% 10%, 80% 0%, 100% 50%, 80% 100%, 80% 90%, 0% 90%);	
	position: absolute;
	filter: brightness(1.7);
}

.blog-article-box:hover .blog04 .blog-layer {
	filter: brightness(2)
}

@keyframes blog04-animation {
    0% {right: 100%}
    100% {right: -100px}
}

.blog04-L1 {
	background-color: #001f90;	
	animation: blog04-animation 15s infinite; 
	animation-timing-function: linear;	
	top: 20%;

} 

.blog04-L2 {
	background-color: #2e469e;	
	animation: blog04-animation 10s infinite;
	animation-timing-function: linear;		
	top: 35%;
	right: 100%;
	animation-delay: 8s;

} 

.blog04-L3 {
	background-color: #0035ad;	
	animation: blog04-animation 12s infinite; 
	animation-timing-function: linear;		
	top: 10%;
	right: 100%;
	animation-delay: 3s;

} 

.blog04-L4 {
	background-color: #0a30b9;	
	animation: blog04-animation 10s infinite; 
	animation-timing-function: linear;		
	top: 65%;
	right: 100%;
	
} 

.blog04-L5 {
	background-color: #2961ff;	
	animation: blog04-animation 11s infinite; 
	animation-timing-function: linear;		
	top: 75%;
	right: 100%;
	animation-delay: 4s;
	
} 

.blog04-L6  {
	background-color: #ff21be;	
	animation: blog04-animation 9s infinite; 
	animation-timing-function: linear;		
	top: 45%;
	right: 100%;
	animation-delay: 1s;
} 

.blog04-L1.blog-slow {animation: blog04-animation 24s infinite; animation-timing-function: linear}
.blog04-L2.blog-slow {animation: blog04-animation 19s infinite; animation-timing-function: linear; animation-delay: 8s;} 
.blog04-L3.blog-slow {animation: blog04-animation 21s infinite; animation-timing-function: linear; animation-delay: 3s;} 
.blog04-L4.blog-slow {animation: blog04-animation 22s infinite; animation-timing-function: linear} 
.blog04-L5.blog-slow {animation: blog04-animation 18s infinite; animation-timing-function: linear; animation-delay: 4s;} 
.blog04-L6.blog-slow {animation: blog04-animation 16s infinite; animation-timing-function: linear; animation-delay: 1s;} 



.blog04-L8 {
	background-color: #2951de;	
	animation: blog04-animation 20s infinite;
	animation-timing-function: linear;		
	top: 8%;
	right: 100%;
	animation-delay: 11s;
} 

.blog04-L9 {
	background-color: #0055ad;	
	animation: blog04-animation 20s infinite; 
	animation-timing-function: linear;		
	top: 12%;
	right: 100%;
	animation-delay: 9s;

} 

.blog04-L10 {
	background-color: #0a30b9;	
	animation: blog04-animation 19s infinite; 
	animation-timing-function: linear;		
	top: 60%;
	right: 100%;
	animation-delay: 9s;	
} 

.blog04-L11 {
	background-color: #2961ff;	
	animation: blog04-animation 18s infinite; 
	animation-timing-function: linear;		
	top: 67%;
	right: 100%;
	animation-delay: 17s;
	
} 

.blog04-L12  {
	background-color: #5479ff;	
	animation: blog04-animation 22s infinite; 
	animation-timing-function: linear;		
	top: 30%;
	right: 100%;
	animation-delay: 13s;
} 


.blog04-L13 {
	background-color: #2e469e;	
	animation: blog04-animation 20s infinite;
	animation-timing-function: linear;		
	top: 11%;
	right: 100%;
	animation-delay: 14s;
} 

.blog04-L14 {
	background-color: #0035ad;	
	animation: blog04-animation 20s infinite; 
	animation-timing-function: linear;		
	top: 27%;
	right: 100%;
	animation-delay: 16s;

} 

.blog04-L15 {
	background-color: #0a30b9;	
	animation: blog04-animation 19s infinite; 
	animation-timing-function: linear;		
	top: 63%;
	right: 100%;
	animation-delay: 15s;	
} 

.blog04-L16 {
	background-color: #2961ff;	
	animation: blog04-animation 18s infinite; 
	animation-timing-function: linear;		
	top: 73%;
	right: 100%;
	animation-delay: 13s;	
} 

.blog04-L17  {
	background-color: #0a30b9;	
	animation: blog04-animation 22s infinite; 
	animation-timing-function: linear;		
	top: 33%;
	right: 100%;
	animation-delay: 19s;
} 


.blog04-L18 {
	background-color: #0035ad;	
	animation: blog04-animation-start18 16s; 
	animation-timing-function: linear;		
	top: 15%;
	right: 100%;
} 

.blog04-L19 {
	background-color: #0a30b9;	
	animation: blog04-animation-start19 15s; 
	animation-timing-function: linear;		
	top: 63%;
	right: 100%;
} 

.blog04-L20 {
	background-color: #2961ff;	
	animation: blog04-animation-start20 18s; 
	animation-timing-function: linear;		
	top: 73%;
	right: 100%;	
} 

.blog04-L21  {
	background-color: #345ae2;	
	animation: blog04-animation-start21 14s; 
	animation-timing-function: linear;		
	top: 33%;
	right: 100%;
} 

@keyframes blog04-animation-start18 {0% {right: 80%} 100% {right: -100px}}
@keyframes blog04-animation-start19 {0% {right: 70%} 100% {right: -100px}}
@keyframes blog04-animation-start20 {0% {right: 82%} 100% {right: -100px}}
@keyframes blog04-animation-start21 {0% {right: 64%} 100% {right: -100px}}


.blog05.blog-box-cover {
    background-image: linear-gradient(60deg, #d23636, #bb0b0b);
}

.blog05 .blog-layer{
	width: 30%;
	height: 80%;
	position: absolute;
}

.blog-article-box:hover .blog04 .blog-layer {
	filter: brightness(1.2)
}

@keyframes blog05-animation {
    0% {width: 30%; height: 80%; top: 10%; left: 8%; opacity: 0%}	
    2% {width: 30%; height: 80%; top: 10%; left: 8%; opacity: 100%}
    90% {width: 10%; height: 26%; top: 55% ; left: 82%; opacity: 100%}	
    100% {width: 10%; height: 26%; top: 55% ; left: 82%; opacity: 0%}
}


.blog05-L0.blog-layer {
	background-color: #a20808;	
	width: 12%; 
	height: 80%; 
	top: 10%; left: 8%;
} 

.blog05-L00.blog-layer {
	background-color: #a20808;	
	width: 3%; height: 26%; top: 55% ; left: 89%;
	animation: blog05-animation-exit 20s; 
} 

@keyframes blog05-animation-exit {
    0% {opacity: 0%}	
    90% {opacity: 0%}	
    100% {opacity: 100%}
}

.blog05-L1 {
	background-color: #500000;	
	animation: blog05-animation 8s infinite; 
	animation-timing-function: linear;	
	top: 10%;
} 



@keyframes blog05-animation-small {
    0% {width: 12%; height: 80%; top: 10%; left: 8%; opacity: 0%}	
    2% {width: 12%; height: 80%; top: 10%; left: 8%; opacity: 100%}
    90% {width: 3%; height: 26%; top: 55% ; left: 89%; opacity: 100%}	
    100% {width: 3%; height: 26%; top: 55% ; left: 89%; opacity: 0%}
}

.blog05-L1.blog-small {
	background-color: #500000;	
	animation: blog05-animation-small 20s infinite; 
	animation-timing-function: linear;	
	top: 10%;
} 

.blog06-L1{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #ffb100;
	position: absolute;
    top: 20px;
    right: 57px;
	animation-timing-function: linear;	
	transform: scale(1);
	box-shadow:
		0 0 0 20px #FFB10080,
		0 0 0 40px #FFB10040,
		0 0 0 60px #FFB10020,
		0 0 0 80px #FFB10010,
		0 0 0 100px #FFB10000,
		0 0 40px 100px #FFB10010;
	animation:
		blog06-animation-sunrise 8s infinite linear,
		blog06-animation-rays 8s 8s infinite linear,
		blog06-animation-center 8s infinite linear;
}

@keyframes blog06-animation-sunrise {
	0% {box-shadow: none}
	50% {box-shadow: 
		0 0 0 20px #FFB10080,
		0 0 0 40px #FFB10040,
		0 0 0 60px #FFB10020,
		0 0 0 80px #FFB10010,
		0 0 0 100px #FFB10000,
		0 0 40px 100px #FFB10010}	
	100% {box-shadow: none}
}

@keyframes blog06-animation-rays {
	0% {
		box-shadow: 
		0 0 0 0 #FFB10080,
		0 0 0 20px #FFB10080,
		0 0 0 40px #FFB10040,
		0 0 0 60px #FFB10020,
		0 0 0 80px #FFB10010,
		0 0 40px 100px #FFB10010;
	}
	50% {
		box-shadow: 
		0 0 0 20px #FFB10080,
		0 0 0 40px #FFB10040,
		0 0 0 60px #FFB10020,
		0 0 0 80px #FFB10010,
		0 0 0 100px #FFB10000,
		0 0 40px 100px #FFB10010;
	}
	100% {
		box-shadow: 
		0 0 0 0 #FFB10080,
		0 0 0 20px #FFB10080,
		0 0 0 40px #FFB10040,
		0 0 0 60px #FFB10020,
		0 0 0 80px #FFB10010,
		0 0 40px 100px #FFB10010;
	}
}

@keyframes blog06-animation-center {
    0% {transform: scale(0)}	
    10% {transform: scale(1)}
    90% {transform: scale(1)}	
    100% {transform: scale(0)}
}

.blog06-L2,
.blog06-L3 {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 1px #ffb100 solid;
	position: absolute;
	box-sizing: border-box;
    top: 20px;
    right: 57px;
	animation-timing-function: linear;	
	transform: scale(1)
}

.blog06-L2 {
	animation: blog06-animation-rayL2 8s infinite; 	
	animation-timing-function: linear;		
}

@keyframes blog06-animation-rayL2 {
    0% {transform: scale(0)}	
    5% {transform: scale(1); opacity: 100%}
    50% {transform: scale(20); opacity: 0%}	
    95% {transform: scale(1); opacity: 100%}	
    100% {transform: scale(0)}
}

.blog06-L3 {
	animation: blog06-animation-rayL3 8s infinite; 	
	animation-timing-function: linear;		
}

.blog06-L1.blog06-center,
.blog06-L2.blog06-center,
.blog06-L3.blog06-center {
    top: 10%;
    right: 24%;
}
	
	
@keyframes blog06-animation-rayL3 {
    0% {transform: scale(0)}	
    15% {transform: scale(1); opacity: 100%}
    50% {transform: scale(16); opacity: 0%}	
    85% {transform: scale(1); opacity: 100%}	
    100% {transform: scale(0)}
}


@media ( max-width: 1099px) and (min-width:775px) {
	.blog-article-box {width: 48%}
	h1.blog-title {font-size: 26px}
}

@media ( max-width: 774px) {
	h1.blog-title {font-size: 20px; line-height: 26px; font-weight: 500}
	h4.blog-subtitle {font-size: 28px; line-height: 36px; padding: 0; margin: 30px 7% 20px 7%}
	.blog-title-container {height: 80px}
	.blog-articles-container {width: 86%; margin: auto; padding: 0; flex-direction: column}
	.blog-article-box {width: 100%;}
	.blog-Allshare-container {
	position: fixed;
    display: block;
    bottom: 0;
    height: 48px;
    width: 100vw;
	background-color: #dce8f1;
	z-index: 100
	}
	.blog-fb.blog-container {left: calc(50vw - 92px); top: calc(100% - 48px)}
	.blog-twitter.blog-container {left: calc(50vw - 24px); top: calc(100% - 48px)}
	.blog-linkedin.blog-container {left: calc(50vw + 44px); top: calc(100% - 48px)}
	.blog-container:hover .blog-share {margin-left: 0}
	.blog-container:hover {width: 48px}
	.blog-container:hover .blog-share-text {display: none}
	.blog-container:active {top: calc(100% - 68px); height: 68px}

	.blog-article-box {max-width: 100%}	
	
.blog-box-cover img {
	position: relative;
	margin: 0 20px;
	box-sizing: border-box;
	max-width: 310px;
}
	.diamond16, .diamond17, .diamond18, .diamond20, .diamond22 {display:none}
	
}

@media ( max-width: 739px) {

.blog-logo-container img.blog-logo {
	height: 50px;
    position: fixed;
    top: 12px;
    left: calc(7% + 146px);
	z-index: 450;}
}

@media ( max-width: 429px) {h4.blog-subtitle {text-align: center}}

@media ( max-width: 1300px) {
	.diamond14, .diamond15 {display:none}}


/*///// BLOG ARTICLE //////*/ 

#hp-FixHeader-Wrapper .hp-TopNavigation {width: 74%;}


@keyframes header-animation {
    0% {width: 86%}
    100% {width: 74%}	
}

.blog-post-header {
	margin-top: 94px;
	height: 160px;
	position: relative;
	margin-bottom: 60px
}

.blog-post-header-small {
	height: 100%;
    position: relative;
    margin: auto;
    min-width: 360px;
    max-width: 900px;
}

.blog-post-container {width: 86%; max-width: 900px; margin: auto}

h2.blog-post-title {font-size: 34px; font-weight: 500; line-height: 42px; font-family: Roboto, Arial}
h3.blog-post-title {font-size: 34px; font-weight: 400; line-height: 42px; margin-bottom: 15px; font-family: Roboto, Arial}
h5.blog-post-date {
	font-size: 16px; 
	font-weight: 500; 
	line-height: 20px;     
	display: inline-block;
	margin-bottom: 60px;
	font-family: Roboto, Arial;}

.blog-min-box {
	background-color: #ff74ec;
    padding: 5px 10px;
	margin-right: 5px
}

p.blog-post-text, ol.blog-post-text, ul.blog-post-text {font-size: 18px; font-weight: 400; line-height: 30px; text-align: justify; margin-bottom: 25px; font-family: Roboto, Arial}
p.blog-post-highlight {width: 65%; max-width: 680px; font-size: 21px; font-weight: 400; line-height: 32px; font-style:italic; margin: 35px auto; text-align: center; font-family: Roboto, Arial}
p.blog-post-section-title {width: 65%; max-width: 680px; font-size: 21px; font-weight: 500; line-height: 32px; margin: 35px auto; text-align: center; text-decoration: underline; font-family: Roboto, Arial}


ol.blog-post-text {margin-left: 40px; margin-right: 40px}
ul.blog-post-text {margin-left: 40px; margin-right: 40px}

ol.blog-post-text li {margin-bottom: 10px}
ul.blog-post-text li {list-style-type: square; margin-bottom: 10px}

p.blog-post-text strong,
p.blog-post-highlight strong {color:#085eff}

.blog-post-image {width: 100%; margin-bottom: 30px}


.blog-post-link {
	color: #4d6475;
    text-decoration: underline;
    cursor: pointer;
	font-size: 18px; 
	font-weight: 500; 
	line-height: 30px;
}

.blog-post-link:hover {
    color: #1058aa;
    text-decoration: none;
}

.blog-author-container {
	border-top: 1px solid #B4C2CD;
	border-bottom: 1px solid #B4C2CD;	
	margin: 100px 0;
	position: relative;
	padding: 50px 0;
	display: flex;
	flex-direction: row;
	
}

.blog-author-container img {
	width: 100px; 
	height: 100%;
	border-radius: 100%;
 	}

.blog-author-text-container {
	position: absolute;
	left: 115px;
	top: 50%;
	transform: translateY(-50%)
}

.blog-author-name {
	font-size: 16px; 
	font-weight: 400; 
	line-height: 24px;
}

.linkedin-link {
    background-color: #0377b5;
    width: 24px;
    position: relative;
    height: 24px;
    display: block;
	margin-top: 4px;
	cursor: pointer
}

.linkedin-link:hover {
    background-color: #005f92;	
} 

.linkedin-link:active {
	background-color: #005f92;
	box-shadow: 0 0 0 1.5pt #C0D3F0
}

.linkedin-link svg {position: absolute}


@media ( min-width: 774px) {
.blog03 .blog-post-header-small .blog-layer.blog03-L5 {
	animation: blog03-animation-smallL5 10s infinite;
}


.blog03 .blog-post-header-small .blog-layer.blog03-L5,
.blog03 .blog-post-header-small .blog-layer.blog03-L6 {
    width: 4.5%;
	left: 95.5%
	}}

@media ( max-width: 774px) {
	#hp-FixHeader-Wrapper {height: 60px; padding-top: 15px}
	.blog-post-header {margin: 80px 0 45px 0}
	
	
h2.blog-post-title {font-size: 24px; font-weight: 500; line-height: 30px; text-align: center}
h3.blog-post-title {font-size: 24px; font-weight: 400; line-height: 30px; margin-bottom: 13px;
	text-align: center}
h5.blog-post-date {
	font-size: 14px; 
	line-height: 20px;     
	display: block;
	margin-bottom: 45px;
	text-align: center}

p.blog-post-text, ol.blog-post-text, ul.blog-post-text {font-size: 16px; line-height: 24px; margin-bottom: 25px}
p.blog-post-highlight, p.blog-post-section-title {width: 100%; max-width: 680px; font-size: 18px; line-height: 28px; margin: 30px auto}
.blog-author-container {margin: 50px 0}


ol.blog-post-text {margin-left: 30px; margin-right: 30px}
ul.blog-post-text {margin-left: 30px; margin-right: 30px}


.blog-post-link {font-size: 16px; line-height: 24px}

}



.blog-quote {font-style: italic}


@media ( max-width: 1216px) {
	#hp-FixHeader-Wrapper .hp-TopNavigation {width:86%}}



p.blog-post-text.blog-post-indent {
	width: 90%;
    margin-right: auto;
    margin-left: auto;
	font-style: italic
}
p.blog-post-text.blog-post-indent strong {color: #000000}

.blog-underline::before {
	display: inline-block;
    height: 2px;
	width: 100%;
    background-color: #ff2ad4;
    content: "";
    position: absolute;
    bottom: -2px;
}

.blog07-star1 {fill: #d23636;}
.blog07-star2 {fill: #a20808;}
.blog07-star3 {fill: #500000;}


.blog07-layer {
	width: 150px;
    height: 145px;
    position: absolute;	
}

.blog07-L1 {
	left: 26%;
    top: 53px;
	animation: blog07-animation-L1 8s infinite; 
	animation-timing-function: linear;
	filter: brightness(1.3)
}

@keyframes blog07-animation-L1 {
    0% {transform: scale(0) rotate(45deg)}
    95% {transform: scale(40) rotate(45deg); opacity: 1}	
    100% {transform: scale(40) rotate(45deg); opacity: 0}
}	

.blog07-L2 {
	left: 29%;
    top: 43px;
	animation: blog07-animation-L2 8s infinite; 
	animation-timing-function: linear;
	filter: brightness(1.3)
}

@keyframes blog07-animation-L2 {
    0% {transform: scale(0) rotate(30deg)}
    20% {transform: scale(0) rotate(30deg)}	
    95% {transform: scale(30) rotate(30deg); opacity: 1}	
    100% {transform: scale(30) rotate(30deg); opacity: 0}
}	

.blog07-L3 {
	left: 24%;
    top: 67px;
	animation: blog07-animation-L3 8s infinite; 
	animation-timing-function: linear;
	filter: brightness(1.3)
}

@keyframes blog07-animation-L3 {
    0% {transform: scale(0) rotate(60deg)}
    40% {transform: scale(0) rotate(60deg)}
    95% {transform: scale(20) rotate(60deg); opacity: 1}	
    100% {transform: scale(20) rotate(60deg); opacity: 0}
}