@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap");


* {
  transition-duration: 0.5s;
}
.clear {
	clear: both;
}
.bmicalcaulator {
      font-family: 'Oswald', sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  text-align: center;
	vertical-align: top;
  box-sizing: border-box;
  position: relative;
  color: rgba(255, 255, 255, 0.7);
  padding: 0;
  margin: 0px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bmicategories {
	color: rgba(255, 255, 255, 0.7);
	width: 100%;
	max-width: 500px;
	background-color: #080B1C;
	font-family: 'Oswald', sans-serif;
	font-size: 12px;
	margin: 0px auto;
	border-top: 5px solid #fff;
}
.bmicategorieitem.bmicategorieshead div {
	background-color: #E81D58;
	font-weight: 800;
}


.bmicategorieitem div  {
	border-bottom: 1px solid rgba(255,255,255,.5);
}
.bmicategorieitem.highlight div  {
	border-bottom: 1px solid #E81D58;
	color: #E81D58;
}


.bmicategorieitem div:first-child {
	float: left;
	width: calc(70% - 20px);
	padding: 10px;

}
.bmicategorieitem div:last-child {
	float: left;
	width: calc(30% - 20px);
	padding: 10px;

}




@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

.highlight {
    animation: blink 1s infinite;
}
.poweredby {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V256c0 17.7 14.3 32 32 32s32-14.3 32-32V32zM143.5 120.6c13.6-11.3 15.4-31.5 4.1-45.1s-31.5-15.4-45.1-4.1C49.7 115.4 16 181.8 16 256c0 132.5 107.5 240 240 240s240-107.5 240-240c0-74.2-33.8-140.6-86.6-184.6c-13.6-11.3-33.8-9.4-45.1 4.1s-9.4 33.8 4.1 45.1c38.9 32.3 63.5 81 63.5 135.4c0 97.2-78.8 176-176 176s-176-78.8-176-176c0-54.4 24.7-103.1 63.5-135.4z' fill='%23E81D58'/%3E%3C/svg%3E");
	background-size: 15px auto;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: #080B1C;
	color: rgba(8,11,28,1);
	animation: backgroundSizeAnimation .5s ease-in-out infinite;
	cursor: pointer;
}

@keyframes backgroundSizeAnimation {
  0% {
	background-size: 15px auto;
  }
  25% {
	background-size: 16px auto;  }
  50% {
	background-size: 17px auto;  }
  75% {
	background-size: 16px auto;  }		
  100% {
	background-size: 15px auto;
  }
}
.tigamanwebdesign {
	display: inline-block;
	position: relative;
	width: max-content;
	color: rgba(8,11,28,1);
	cursor: pointer;
}

.fade-text {
	position: absolute;
	background-color: rgba(8,11,28,1);
	opacity: 0;
	animation: fade 8s infinite;
	color: rgba(255,255,255,1);
	width: calc(100% - 10px);
	padding: 0 0 0 10px;
	left: 0px;
}

@keyframes fade {
  0%, 100% {
    opacity: 0;
  }
  10%, 30% {
    opacity: 1;
  }
  40%, 100% {
    opacity: 0;
  }
}

.fade-text:nth-child(2) {
  animation-delay: 2s;
}

.fade-text:nth-child(3) {
  animation-delay: 4s;
}

.fade-text:nth-child(4) {
  animation-delay: 6s;
}


.bmicard {
	width: 100%;
	background-color: #080B1C;
	border-radius: 5px;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
	overflow: hidden;
	position: relative;
	color: rgba(255, 255, 255, 0.7);
	margin: 0 auto;
	max-width: 500px;
}

.screen_1 {
  right: 0px;
}

.screen_2 {
  width: 100%;
  height: 456px;
  position: absolute;
  left: 100%;
  bottom: 75px;
  background-color: #080B1C;
}
.title h2, .resultTitle h2 {
	margin: 10px 0;
	font-weight: 400;
	letter-spacing: 2px;
	text-transform: uppercase;	
}
.resultTitle {
	margin: 35px 0px 0 0;
}

.blockOutside {
  padding: 5px 30px;
}

.blockInside {
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.15);
  padding: 25px 0px 15px 0px;
}

.resultBMI {
  font-size: 40px;
  font-weight: 700;
  color: #E81D58;
}

.suggestBMI {
  padding: 20px 0px;
}
.suggestBMI span {
  color: #FFFFFF;
}
.suggestTitle {
	margin: 0;
	padding: 0;
}
.suggestion {
  padding: 5px;
  color: #FFFFFF;
}

.genderBlock {
	display: inline-block;
	width: 120px;
	height: 80px;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.15);
	margin: 10px auto;
	padding: 10px;
	border: solid 2px transparent;
	position: relative;
}
.genderBlock:hover {
  border-color: #E81D58;
  cursor: pointer;
}

.male  {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M289.8 46.8c3.7-9 12.5-14.8 22.2-14.8H424c13.3 0 24 10.7 24 24V168c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-33.4-33.4L321 204.2c19.5 28.4 31 62.7 31 99.8c0 97.2-78.8 176-176 176S0 401.2 0 304s78.8-176 176-176c37 0 71.4 11.4 99.8 31l52.6-52.6L295 73c-6.9-6.9-8.9-17.2-5.2-26.2zM400 80l0 0h0v0zM176 416a112 112 0 1 0 0-224 112 112 0 1 0 0 224z' fill='white'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center 15px;
	background-size: 50px auto;
}
.female {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M80 176a112 112 0 1 1 224 0A112 112 0 1 1 80 176zM224 349.1c81.9-15 144-86.8 144-173.1C368 78.8 289.2 0 192 0S16 78.8 16 176c0 86.3 62.1 158.1 144 173.1V384H128c-17.7 0-32 14.3-32 32s14.3 32 32 32h32v32c0 17.7 14.3 32 32 32s32-14.3 32-32V448h32c17.7 0 32-14.3 32-32s-14.3-32-32-32H224V349.1z' fill='white'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center 15px;
	background-size: 45px auto;
}


.genderBlock .genderText {
	top: 80px;
	position: absolute;
	left: 50%;
transform: translateX(-50%);
}

.genderClicked {
  background-color: #E81D58;
}

.blockText {
  margin-bottom: 5px;
}

.heightBlock,
.weightBlock,
.ageBlock
 {
  max-width: 275px;
  height: auto;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.15);
  margin: 10px auto;
  padding: 10px;
}
.heightBlock .heightInput,
.heightBlock .weightInput,
.heightBlock .ageInput
 {
	background-color: transparent;
	font-size: 30px;
	font-weight: 700;
	color: #FFFFFF;
	width: 100%;
	border-color: transparent transparent #FFFFFF transparent;
	border-width: 1px;
	text-align: center;
}

.weightBlock, .ageBlock {
  width: 100px;
  height: auto;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.15);
  margin: 10px auto;
  padding: 10px;
  display: inline-block;
}

.weightNum, .ageNum {
  font-size: 30px;
  font-weight: 700;
  color: #FFFFFF;
}

.circleBtn {
  width: 35px;
  height: 35px;
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.15);
  font-size: 25px;
  font-weight: 300;
  border-radius: 100%;
  margin-top: 10px;
}
.circleBtn:hover {
  background-color: #E81D58;
  user-select: none;
  cursor: pointer;
}

.calculateBtn {
	padding: 20px 0px;
	margin-top: 20px;
	background-color: #E81D58;
	color: #FFFFFF;
	text-transform: uppercase;
}
.calculateBtn:hover {
  cursor: pointer;
  background-color: #FFFFFF;
  color: #E81D58;
}
@media screen and (max-width: 980px) {.mnone{
	display: none;
}}

/* CSS Document */

#twd_cookie_bar {
	font-size: 14px;
	padding: 10px;
	position: fixed;
	animation: name-of-animation 2000ms 1;
	bottom: 0px;
	width: calc(100% - 20px);
	text-align: center;
	z-index: 10000000;
	display: inline;
}
@-webkit-keyframes name-of-animation {
  0% {bottom:-200px;opacity:0}
  90% { bottom:0px;opacity:1}  
  95% { bottom:0px;opacity:.6}   
  100% { bottom:0px;opacity:1}
}
.twd_cookie_bar_button.both:before,
.twd_cookie_bar_button.both:after {
  left: 0;
  width: 100%;
  height: 2px;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}
.twd_cookie_bar_button.both .inner:before,
.twd_cookie_bar_button.both .inner:after {
  top: 0;
  width: 2px;
  height: 100%;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
}
.twd_cookie_bar_button.both .inner:before {
  left: 0;
}
.twd_cookie_bar_button.both .inner:after {
  right: 0;
}
.twd_cookie_bar_button.both .inner:hover:before,
.twd_cookie_bar_button.both .inner:hover:after {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}
.twd_cookie_bar_button.both:before {
  top: 0;
}
.twd_cookie_bar_button.both:after {
  bottom: 0;
}
.twd_cookie_bar_button.both:hover:before,
.twd_cookie_bar_button.both:hover:after {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.twd_cookie_bar_button.both:hover .inner:before,
.twd_cookie_bar_button.both:hover .inner:after {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}
.twd_cookie_bar_button.both.clockwise .inner:before {
  -webkit-transform-origin: top center;
  transform-origin: top center;
}
.twd_cookie_bar_button.both.clockwise .inner:after {
  -webkit-transform-origin: bottom center;
  transform-origin: bottom center;
}
.twd_cookie_bar_button.both.clockwise:before {
  -webkit-transform-origin: right center;
  transform-origin: right center;
}
.twd_cookie_bar_button.both.clockwise:after {
  -webkit-transform-origin: left center;
  transform-origin: left center;
}
.twd_cookie_bar_button.both.clockwise:hover .inner:before {
  -webkit-transform-origin: bottom center;
  transform-origin: bottom center;
}
.twd_cookie_bar_button.both.clockwise:hover .inner:after {
  -webkit-transform-origin: top center;
  transform-origin: top center;
}
.twd_cookie_bar_button.both.clockwise:hover:before {
  -webkit-transform-origin: left center;
  transform-origin: left center;
}
.twd_cookie_bar_button.both.clockwise:hover:after {
  -webkit-transform-origin: right center;
  transform-origin: right center;
}
.twd_cookie_bar_button_area {
	margin: 10px 0 0 0;
}
.twd_cookie_bar_button {
	position: relative;
	cursor: pointer;
	padding: 10px 10px;
	width: calc(40% - 24px);
	margin: 10px 5%;
	float: left;
	text-transform: uppercase;
	font-size: 12px;
}
.twd_cookie_bar_button:hover {
  border: 2px solid transparent;
}
.twd_cookie_bar_button .inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.twd_cookie_bar_button:before, .twd_cookie_bar_button:after, .twd_cookie_bar_button .inner:before, .twd_cookie_bar_button .inner:after {
  position: absolute;
  content: "";
  display: block;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.twd_cookie_bar_button.both:before,
.twd_cookie_bar_button.both:after {
  left: 0;
  width: 100%;
  height: 2px;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}
.twd_cookie_bar_button.both .inner:before,
.twd_cookie_bar_button.both .inner:after {
  top: 0;
  width: 2px;
  height: 100%;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
}
.twd_cookie_bar_button.both .inner:before {
  left: 0;
}
.twd_cookie_bar_button.both .inner:after {
  right: 0;
}
.twd_cookie_bar_button.both .inner:hover:before,
.twd_cookie_bar_button.both .inner:hover:after {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}
.twd_cookie_bar_button.both:before {
  top: 0;
}
.twd_cookie_bar_button.both:after {
  bottom: 0;
}
.twd_cookie_bar_button.both:hover:before,
.twd_cookie_bar_button.both:hover:after {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.twd_cookie_bar_button.both:hover .inner:before,
.twd_cookie_bar_button.both:hover .inner:after {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}