@import url('https://fonts.googleapis.com/css2?family=Hurricane&family=Kanit&family=Rajdhani:wght@400;500&family=Square+Peg&family=Whisper&display=swap');

body{
	background-image: url('../images/fluency-azure.png');
  padding-top: .5%;
	color: black;
	font-family: 'Kanit', sans-serif;
	font-size: 19px;
	text-align: left;
	line-height: 1.4em;
	margin: auto;
	width: 100%;
}

header {
	width: 90%;
	margin-bottom: 0%;
}

html {
  	scroll-behavior: smooth;
}

a.free {
	float: right;
	text-decoration: none;
	color: midnightblue;
	background-color: #00f6ff;
	padding: 0% 1%;
	line-height: 1.5em;
	display: none;  /* since the translation practice is not available in this region */
}

a.free:hover {
	float: right;
	text-decoration: none;
	color: white;
	background-color: midnightblue;
	padding: 0% 1%;
	line-height: 1.5em;
	transition: .5s;
}

a.normal {
	text-decoration: none;
	color: midnightblue;
	background-color: #00f6ff;
	padding: 0% 1%;
	line-height: 1.5em;
	margin-right: .5%;
	font-size: 16px;
}

a.normal:hover {
	text-decoration: none;
	color: black;
	background-color: #00FFAE;
	padding: 0% 1%;
	line-height: 1.5em;
	transition: .5s;
	margin-right: .5%;
	font-size: 16px;
}

a.button {
	text-decoration: none;
	color: midnightblue;
	background-color: #00f6ff;
	padding: 0% 1%;
	line-height: 1.5em;
	margin-right: .5%;
}

a.button:hover {
	text-decoration: none;
	color: black;
	background-color: #00FFAE;
	padding: 0% 1%;
	line-height: 1.5em;
	transition: .5s;
	margin-right: .5%;
}

a.cookies {
  color: white;
  background: midnightblue;
  padding: 0% .5%;
  font-size: 12px;
  text-decoration: none;
  line-height: 1em;
}

a.cookies:hover {
  color: midnightblue;
  background: white;
  padding: 0% .5%;
  font-size: 12px;
  text-decoration: none;
  line-height: 1em;
  transition: .5s;
}

a.highlight {
	text-decoration: none;
	color: white;
	background-color: midnightblue;
	padding: 0% 1%;
	line-height: 1.5em;
}

a.highlight:hover {
	text-decoration: none;
	color: midnightblue;
	background-color: white;
	padding: 0% 1%;
	line-height: 1.5em;
	transition: .5s;
}

h1 {
	background-color: #00f6ff;
	width: fit-content;
	border-radius: 5px;
	font-size: 33px; 
	font-weight: 100;
	color: midnightblue;
	padding: 0% 2%;
	margin: 0% 0%;
	line-height: 1em;
	text-align: left;
	white-space: nowrap;
}

h2 {
	background-color: #00f6ff;
	width: fit-content;
	border-radius: 5px;
	font-size: 26px; 
	font-weight: 100;
	color: midnightblue; 
	padding: .3% 1.5%;
	margin: 0% 0%;
	line-height: 1em;
	text-align: left;
}

h3 {
	font-size: 21px; 
	font-weight: 100;
	color: midnightblue; 
	padding: 0% 0%;
	margin: .5% 0%;
	line-height: 1.25em;
	text-align: left;
}

h4 {
	font-size: 20px; 
	font-weight: 100;
	color: midnightblue; 
	padding: 0% 0%;
	margin: 0% 0%;
	line-height: 1em;
	text-align: left;
}

h5 {
	font-size: 17.5px;
	font-weight: 100; 
	color: black; 
	padding: 0% 0%;
	margin: .5% 0%;
	line-height: 1.2em;
	text-align: left;
}

/* Style page articles text */

.text-white {
	color: ghostwhite;
}

.text-yellow {
	color: #00FFAE;
}

.text-white-boxed {
	color: midnightblue;
	background-color: white;
	padding: 0% 1%;
}

.text-red-boxed {
	color: white;
	background-color: indianred;
	padding: 0% 2%;
}

.text-yellow-boxed {
	color: midnightblue;
	background-color: #00f6ff;
	padding: 0% 2%;
}

.text-blue-boxed {
	color: white;
	background-color: midnightblue;
	padding: 0% 2%;
}

.text-super-micro-no-float {
	text-align: left;
	font-size:12.5px;
	line-height: 1em;
	color: black;
}

.text-micro-no-float {
	text-align: left;
	font-size:15px;
	line-height: 1em;
	color: white;
}

.text-tiny {
	float: left;
	text-align: left;
	font-size: 14px;
	line-height: 1.25em;
	color: black;
}

.text-tiny-align-center {
	text-align: center;
	font-size: 14px;
	line-height: 1em;
	color: black;
	display: flex;
  justify-content: center;
  align-items: center;
}

.text-tiny-no-float {
	text-align: left;
	font-size:18px;
	line-height: 1em;
	color: white;
}

.text-tiny-boxed {
	float: left;
	text-align: left;
	font-size:18px;
	line-height: 1em;
	color: midnightblue;
	background-color: #00f6ff;
	padding: 0% 1%;
}

.text-tiny-justify {
	float: left;
	text-align: justify;
	font-size:17.5px;
	line-height: 1.25em;
	color: black;
}

.text-tiny-blue {
	float: left;
	text-align: left;
	font-size:17.5px;
	line-height: 1em;
	color: midnightblue;
}

.text-normal {
	float: left;
	text-align: left;
	font-size:17.5px;
	line-height: 1.3em;
	color: black;
}

.text-normal-blue {
	float: left;
	text-align: left;
	font-size:17.5px;
	line-height: 1em;
	color: midnightblue;
}

.text-highlight {
	font-size:17.5px;
	line-height: 1em;
	color: midnightblue;
	white-space: pre-wrap;
}

.text-highlight-30 {
	font-size:22.5px;
	line-height: 1em;
	color: midnightblue;
	white-space: pre-wrap;
}

.text-email {
	line-height: 1em;
	background-color: midnightblue;
	padding: 0% 2%;
	white-space: nowrap;
	font-size: 22px;
}

.text-headline {
	font-size: 40px;
	font-weight: 800;
	line-height: 1em;
	text-align: left;
	color: midnightblue;
}

.text-headline:hover {
	font-size: 40px;
	font-weight: 800;
	line-height: 1em;
	text-align: left;
	color: black;
	white-space: nowrap;
	transition: .5s;
}

.text-subheadline {
	font-size: 30px;
	font-weight: 500;
	line-height: 1em;
	text-align: left;
	color: midnightblue;
	white-space: nowrap;
}

.text-headline-blog {
	font-size: 40px;
	line-height: 0.9em;
	text-align: left;
	color: midnightblue;
}

.text-subheadline-blog {
	float: left;
	font-size: 18px;
	font-weight: 500;
	line-height: 1em;
	text-align: left;
	color: midnightblue;
}

.generate-order-number {
	float: left;
	font-size: 15px;
	line-height: 1.3em;
	text-align: left;
	color: ghostwhite;
	background-color: midnightblue;
	padding: 0% 3%;
	margin: 0px;
	border-radius: 0px;
	white-space: nowrap;
}

.headline-effect {
	background-image: url(../images/headline-effect.png);
	background-repeat: no-repeat;
	width: fit-content;
}

.text-effect-yellow {
	line-height: 1em;
	color: midnightblue;
	background-color: #00f6ff;
	padding: 0% 2%;
	font-size: 17px;
}

.text-effect-teal {
	line-height: 1em;
	background-color: #00FFAE;
	padding: 0% 2%;
	white-space: nowrap;
}

.text-effect-midnightblue {
	line-height: 1em;
	background-color: #54DDF6;
	padding: 0% 2%;
	white-space: nowrap;
}

.text-effect-midnightblue-2 {
	line-height: 1em;
	background-color: midnightblue;
	padding: 0% 2%;
	white-space: nowrap;
}

.text-effect-royalblue {
	line-height: 1.2em;
	background-color: #94D8FF;
	padding: 0% 4%;
	white-space: nowrap;
}

.text-effect-royalblue-frame {
	float: left;
	border: 3px solid royalblue;
	border-radius: 5px;
	padding: 0% 2%;
}

.text-effect-dodgerblue {
	line-height: 1.2em;
	background-color: dodgerblue;
	padding: 0% 4%;
	white-space: nowrap;
}

.text-effect-skyblue {
	line-height: 1.2em;
	background-color: #8C8CFF;
	padding: 0% 4%;
	white-space: nowrap;
}

.text-effect-white {
	line-height: 1.2em;
	background-color: whitesmoke;
	padding: 0% 4%;
}

.text-effect-blog {
	line-height: 1em;
	background-color: whitesmoke;
	padding: 0% 1%;
	color: midnightblue;
}

.text-effect-blog-dodgerblue {
	line-height: 1em;
	background-color: dodgerblue;
	padding: 0% 1%;
	color: midnightblue;
}


/* flashing headline */

.text-white-blue-flashing {
	font-size: 50px;
	line-height: 0.9em;
	text-align: left;
	animation: color-change-white-blue 5s infinite;
	white-space: nowrap;
}

.text-white-red-flashing {
	font-size: 28px;
	line-height: 0.9em;
	text-align: left;
	animation: color-change-white-red 3s infinite;
	white-space: nowrap;
	margin-left: 2%;
}

.text-white-yellow-flashing {
	font-size: 20px;
	line-height: 0.9em;
	text-align: left;
	animation: color-change-white-yellow 6s infinite;
	white-space: nowrap;
	background-color: midnightblue;
	padding: 0% 3%;
}

/* COOKIE BAR */

.cookies {
  color: white;
  font-size: 12px;
  width: 100%;
  text-align: center;
  margin-bottom: .5%;
}

/* BUTTONS */

.button-center {
	display: flex;
  justify-content: center;
  align-items: center;
}

.button-left {
	display: flex;
  justify-content: left;
  align-items: left;
}

.button-content {
	width: 15%;
	height: 27.5vh;
	float: left;
	font-size: 25px;
	background-color: #A2F5FF;
	border-radius: 5px;
	box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
	padding: 2%;
	margin-bottom: 3%;
	margin-right: 2%;
	transition: transform .2s;
	cursor: pointer;
	text-align: center;
	opacity: 0.9;
}

.button-content:hover {
	float: left;
	font-size: 25px;
	background-color: #00FFAE;
	background-repeat: no-repeat;
	border-radius: 5px;
	box-shadow: rgb(200, 200, 200) 0px 20px 30px -10px;
	padding: 2%;
	margin-bottom: 3%;
	margin-right: 2%;
	transition: transform 1s;
	transform: translateY(-2%);
	opacity: 1;
}

a.blog {
	text-decoration: none;
}


/* CONTAINERS */

.container-text-block {
	float:left;
	width: 100%;
	margin: 2% 0%;
}

.container-40-wide-right {
	float:right;
	width: 40%;
}

.container-30-wide-margin {
	float:left;
	width: 30%;
	margin: 1.5%;
}

.container-40-wide-margin {
	float: left;
	width: 40%;
	margin-left: 5%;
}

.container-15-wide {
	float:left;
	width: 15%;
}

.container-20-wide {
	float:left;
	width: 20%;
}

.container-25-wide {
	float:left;
	width: 25%;
}

.container-25-wide-right {
	float:right;
	width: 25%;
	margin: 0px;
}

.container-30-wide {
	float:left;
	width: 30%;
}

.container-40-wide {
	float:left;
	width: 40%;
}

.container-50-wide {
	float:left;
	width: 50%;
}

.container-50-wide-mobile {
	float:left;
	width: 50%;
}

.container-60-wide {
	float:left;
	width: 60%;
}

.container-70-wide {
	float:left;
	width: 70%;
}

.container-100-wide {
	float:left;
	width: 100%;
	margin-bottom: .5px;
}

.container-100-wide-no-float {
	width: 100%;
	margin-bottom: .5px;
}

.container-margin {
	margin-top: .5%;
}


/* Index backgrounds containers */

#container-fluency-team {
	float: left;
	width: 100%;
	height: 970px;
}

#container-fluency-blue {
	float: left;
	width: 100%;
	height: fit-content;
	padding-top: 5%;
}

#container-fluency-blue-big {
	float: left;
	width: 100%;
	height: fit-content;
	padding-top: 5%;
}


/* CONTAINER HIDDEN FOR SHOWING RANDOM REVIEWS */


.container-hidden-review {
	float:left;
	text-align:left;
	font-size:25px;
	line-height: 1em;
	max-height: content;
	border:1px solid #00FFAE;
	color: black;
	padding:3% 4%;
	transition: 0.2s;
	display: none;
	white-space: pre-wrap;
	margin-right: 2.5%; 
}

/* SMALL COLORED CONTAINERS MAINLY FOR HEROES EXPLANATIONS*/

.container-index-full {
	width:100%; /*This percentage number plus percentage numbers of width and margin of the side navbar must make in total 100 % */
	overflow:hidden;
	margin:auto;
	animation: transitionIn .5s; /*EXCELLENT way how to animate content inside the container appearing fluently on the web*/
}

.container-center {
	margin: auto;
	width: 70%;
}

.container-info {
	margin-left: 15%;
	margin-top: 0%;
	margin-bottom: 0px;
	width: 70%;
}

.container-header {
	margin-left: 15%;
	margin-right: 0%;
	margin-bottom: 0%;
}



/* SEPARATORS */

.container-separator-micro {
	float:left;
	width:100%;
	margin-top:1%;
}

.container-separator-tiny {
	float:left;
	width:100%;
	margin-top:2%;
}

.container-separator-small {
	float:left;
	width:100%;
	margin-top:3%;
}

.container-separator {
	float:left;
	width:100%;
	margin-top:5%;
}

.container-separator-big {
	float:left;
	width:100%;
	margin-top:10%;
}

.container-separator-superbig {
	float:left;
	width:100%;
	margin-top:20%;
}


@keyframes color-change-white-blue {
  0% { color: midnightblue; }
  50% { color: #00FFAE; }
  100% { color: midnightblue; }
}

@keyframes color-change-white-red {
  0% { color: palevioletred; }
  50% { color: white; }
  100% { color: palevioletred; }
}

@keyframes color-change-white-yellow {
  0% { color: #00FFAE; }
  50% { color: white; }
  100% { color: #00FFAE; }
}


/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media (min-device-width : 320px) and (max-device-width : 1000px) {
	img {display: none}
	a {width: 100%; padding: 1% 5%; line-height: 2em;}
	a.normal {width: 100%; font-size: 20px; padding: 3% 4%; margin-top: 3%; line-height: 1.2em; float: left; width: fit-content; border-radius: 2.5px;}
	a.button {width: 100%; font-size: 40px; padding: 4% 15%; margin-top: 3%; line-height: 1.2em; float: left; text-align: center; width: fit-content; border-radius: 2.5px; background-color: #00FFAE; border: solid 2px midnightblue;}
	a.free {width: 100%; font-size: 20px; padding: 3% 4%; margin-top: 3%; line-height: 1.2em; float: left; width: fit-content; border-radius: 2.5px;}
	a.cookies {padding: 0% 1%; margin-left: 0%; width: fit-content;}
	a.highlight {width: 100%; padding: 1% 3%; margin-top: 2%; line-height: 1.2em; float: left; width: fit-content; border-radius: 15px; font-size: 22px;}
	body {background-image: url('../images/fluency-azure.png'); text-align: left; font-size: 17.5px; width: 100%; line-height: 1.25em; color: black;}
	h1 {font-size: 28px; font-weight: 500; white-space: pre-wrap; background-color: #00f6ff; border-radius: 5px; padding: 0% 3%; width: fit-content;}
	h2 {font-size: 24px; font-weight: 300; background-color: #00f6ff; border-radius: 5px; padding: 0% 3%; width: fit-content; margin-top: 20px;}
	h3 {font-size: 22px; float: left;}
	h4 {font-size: 20px;}
	h5 {font-size: 19px;}
	.button-content {padding-top: 5%; padding-bottom: 5%; line-height: 0.7em; height: fit-content; width: 90%; margin-top: 0%; margin-bottom: 7%; margin-left: 0%; margin-right: 0%; opacity: 1; box-shadow: rgb(255, 255, 255) 0px 20px 30px -10px;}
	.container-info {float: left; width: 90%; margin-left: 10%; margin-right: 0%;}
	.container-header {float: left; width: 85%; margin-left: 11%; margin-right: 0%;}
	.cookies {width: 80%; line-height: 1.25em; font-size: 13px; margin-top: 2.5%; margin-left: 10%; margin-right: 10%; text-align: left; white-space: pre-wrap;}
	.cookie-bar {background: lightsteelblue; color: steelblue; font-size: 30px;}
	.cookie-hide {background: lightsteelblue;}
	.container-center {width: 80%; margin-left: 10%; margin-right: 10%;}
	.container-25-wide-right {width: 100%; float: left; white-space: nowrap; overflow: hidden;}
	.container-40-wide-right {width: 100%; float: left; white-space: nowrap; overflow: hidden;}
	.container-20-wide {width: 100%}
	.container-25-wide {width: 100%}
	.container-30-wide {width: 100%}
	.container-30-wide-margin {width: 100%}
	.container-40-wide-margin {width: 100%; margin-left: 0%;}
	.container-40-wide {width: 100%}
	.container-50-wide {width: 100%}
	.container-60-wide {height: fit-content; width: 100%;}
	.container-70-wide {height: fit-content; width: 100%;}
	.container-100-wide {text-align: left; width: 100%;}
	.container-hidden {font-size: 30px; width: 100%; white-space: nowrap; float: left; border: 0px}
	.container-hidden-review {float: left; width: 100%; font-size: 25px; color: black; border: yellow 1px solid;}
	.container-separator-superbig {display: none;}
	.container-margin {float: left; padding: 0% 0%; height: fit-content;}
	.generate-order-number {line-height: 1em; margin: 0px;}
	.text-yellow {font-size: 25px;}
	.text-white {float: left;}
	.text-yellow-boxed {float: left; font-size: 20px; margin-bottom: 2%; padding: 1% 3%;}
	.text-tiny-boxed {float: left; font-size: 19px; letter-spacing: 1px; margin-bottom: 2%;}
	.text-white-yellow-flashing {float: left; font-size: 25px; letter-spacing: 1px; margin-bottom: 2%; padding: 1% 3%;}
	.text-white-blue-flashing {font-size: 60px; white-space: nowrap;}
	.text-highlight {font-size: 17.5px;}
	.text-normal {font-size: 17.5px;}
	.text-effect-blog {font-size: 17.5px; margin-bottom: 25px;}
	.text-effect-blog-dodgerblue {font-size: 17.5px; white-space: nowrap;}
	.text-effect-teal {font-size: 17.5px; white-space: pre-wrap;}
	.text-headline {float: left; background-color: none;}
	.text-headline-blog {font-size: 22.5px; white-space: nowrap;}
	.text-subheadline-blog {font-size: 20px; text-align: center; line-height: 1.1em; background-color: #69FFD6; padding: 0% 3%; margin: 0px;}
	.text-numbering-blog {font-size: 30px; white-space: nowrap;}
	.text-tiny-justify {float: left; text-align: left;}
	.text-micro-no-float {float: left; font-size: 22px; margin-top: 2%; color: black;}
	.text-effect-dodgerblue {margin-bottom: 5%; line-height: 1.5em; font-size: 22.5px;}
	.text-effect-royalblue {margin-bottom: 5%; background-color: #69FFD6; line-height: 1.5em;}
	.text-effect-midnightblue {margin-bottom: 5%; line-height: 1.5em;}
	.text-effect-midnightblue-2 {margin-top: .5%; margin-bottom: .5%; white-space: pre-wrap;}
	.text-effect-skyblue {margin-bottom: 5%; line-height: 1.5em;}
	.text-email {float: left; margin-bottom: .5%; line-height: 1.5em; font-size: 25px;}
	#container-fluency-team {height: fit-content; background-image: url('../images/fluency-team-1-mobile.png');}
	#container-all-reviews {float: left; height: 40vh; width: 100%;}
	#no-mobile-show {display: none;}
	#rating {float: left; height: 40vh;}
}