@font-face {
	font-family: 'impactreg';
	src: url('./impactreg.eot');
	src: local('impactreg'), url('./impactreg.woff') format('woff'), url('./impactreg.ttf') format('truetype');
}

body{ margin: 0; padding: 0; font-family: akrobat, sans-serif; }
*{ box-sizing: border-box; }
p{ color: #505455; font-size: 18px; line-height: 23px; }
img{ max-width: 100%; }


.pretop{ padding: 18px 0; }
.pretop .container{ text-align: right; }
.pretop a{ text-decoration: none; color: #19282f; font-weight: 300; font-style: italic; margin-right: 10px; }


header{ background: #eeeeee; margin-bottom: 50px; }
.container{ max-width: 1100px; margin: 0 auto; position: relative; }
.flex{ display: flex; justify-content: space-between; align-items: center; }
.logo{ position: absolute; top: 0; left: 0; margin: -28px 0 0 0; }


nav{ padding: 35px 0 35px 30%; }
nav a{ text-decoration: none; font-size: 19px; font-weight: 500; font-style: italic; color: #19282f; margin-right: 20px; }
form{ width: 100%; max-width: 300px; padding-top: 0; position: relative; }
form::after{ content: ''; display: block; width: 16px; height: 17px; background: url('/assets/img/search.jpg') no-repeat; position: absolute; top: 0; right: 0; margin: 14px 15px 0 0; }
input{ width: 100%; border: none; padding: 15px 20px; border-radius: 10px; }


div.title{ background: #ab0e05; width: 100%; max-width: 320px; min-height: 361px; color: #FFFFFF; position: relative; }
div.title h1{ position: absolute; top: 50%; transform: translateY(-50%); right: 0; left: 0; margin: 0 auto; max-width: 75%;  font-size: 36px; font-weight: 400; color: #FFFFFF; font-family: 'impactreg', sans-serif; }

.ranking .flex{ align-items: flex-start; }
.ranking .desc{ max-width: 780px; }
.ranking .list{ max-width: 320px; width: 100%; margin-top: 40px; }
.ranking .list .product{ display: flex; align-items: center; padding: 20px; background: #eeeeee; position: relative; }
.ranking .list .product a{ display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; }
.ranking .list .product:nth-of-type(2n){ background: #e6e6e6; }
.ranking .list .product > img{ max-width: 50px; margin: 0 30px 0 10px; }
.ranking .list .product > div{ max-width: 200px; }
.ranking .list h5{ margin: 0 0 5px 0; position: relative; font-size: 20px; }
.ranking .list h5 > span{ position: absolute; top: 0; right: -10px; }
.ranking .desc p{ padding-right: 30px; }


.products .product{ margin: 50px 0 0 0; }
.products .product{ display: flex; justify-content: space-between; margin-bottom: 60px; }
.products .product .img{ width: 100%; max-width: 250px;  }
.products .product .img-back img{ display: block; margin: 0 auto; }
.products .product .desc{ width: 73%; }

.products .product .img-back{ background: #eeeeee; padding: 20px 0; height: 266px; position: relative; }
.products .product .img-back a{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; }
.products .product .img-back img{ position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; max-width: 110px; }
.products .product a{ text-decoration: none; }
.products .product a:hover{ text-decoration: underline; color: #17292d; }
.products .product h3{ margin: 0 20px 0 0;  }
.products .product h5{ margin: 18px 0 10px 0;  }
.products .product .star{ margin-right: 4px; }


h1{ }
h3{ font-size: 33px; font-weight: 400; color: #17292d; font-family: 'impactreg', sans-serif; }
h5{ font-size: 22px; font-weight: 400; color: #17292d; font-family: 'impactreg', sans-serif; }


.compare { overflow-x: scroll; }
.compare h3{ text-align: center; }


.titanodrol{ background: #dadada; padding: 40px 0; }
.titanodrol .img-box{ width: 100%; max-width: 270px; }
.titanodrol .desc{ max-width: 70%; }
.titanodrol p:last-of-type{ font-weight: bold; }
.titanodrol a{ background: #ab0e05; color: #FFFFFF; text-decoration: none; font-size: 20px; font-weight: bold; padding: 10px 0; display: block; margin: 20px auto; max-width: 400px; text-align: center; position: relative; transition: all 0.3s ease; }
.titanodrol a:hover{ transform: scale(1.05); }


.companies{ margin: 50px 0 25px 0; }
.companies .flex{ flex-wrap: wrap; }
.companies picture{ display: block; }
.companies picture:nth-of-type(1){ max-width: 100px; }
.companies picture:nth-of-type(2){ max-width: 100px; }
.companies picture:nth-of-type(3){ max-width: 125px; }
.companies picture:nth-of-type(4){ max-width: 150px; }
.companies picture:nth-of-type(5){ max-width: 175px; }
.companies img{ max-width: 100% }


.testimonials{ padding: 20px 0 60px 0; }
.testimonials h3{ text-align: center; }
.testimonial{ display: flex; justify-content: space-between; max-width: 900px; margin: 0 auto 40px; }
.testimonial .img-box{ width: 100%; max-width: 140px; }
.testimonial .desc{ width: 80%; }
.testimonial .author{ font-weight: bold; }


.compare{ padding-bottom: 80px; }
table{ margin: 0 auto; max-width: 700px; width: 100%; }
table th{ background: #ab0e05; color: #FFFFFF; font-size: 15px; font-weight: 400; font-family: 'impactreg', sans-serif; padding: 13px 0; }
table td{ font-size: 26px; font-weight: 400; font-family: 'impactreg', sans-serif; color: #000000; text-align: center; padding: 30px 0; min-height: 171px; }
table td p{ color: #000000; margin: 0; }
table th.empty{ width: 6%; }
table th.product{ width: 25%; }
table th.price{ width: 20%; }
table th.price1{ width: 20%; }
table th.rating{ width: 30%; }
table td.product{ text-align: center; }
table td.product p{ margin: 5px 0 0 0; }
table td.rating p{ font-size: 26px; margin-bottom: 5px; }
table td.rating img{ max-width: 23px; }
table td.rating span{ font-family: akrobat, sans-serif; font-size: 18px; font-weight: bold; }
.green{ background: #68ae0d!important; color: #FFFFFF!important; }
.icons{ display: block; margin: 17px auto 0; }

table tr:nth-of-type(n) td:nth-of-type(n){ background: #f3f3f3; }
table tr:nth-of-type(n) td:nth-of-type(2n){ background: #ebebeb; }
table tr:nth-of-type(2n) td:nth-of-type(n){ background: #eeeeee; }
table tr:nth-of-type(2n) td:nth-of-type(2n){ background: #e3e3e3; }



footer{ background: #ab0e05; height: 90px; position: relative; }
footer img{ position: absolute; top: 0; left: 0; right: 0; margin: -85px auto 0; }


.buy-now { display: inline-block; background-color: #f14543; color: #ffffff; font-size: 1.2rem; text-align: center; width: 100%; padding: 8px 0; border-radius: 40px; margin-top: 10px; }
.buy-now:hover { text-decoration: none!important; color: #FFFFFF!important; }


@media screen and (min-width: 768px) and (max-width: 1199px)
{
	.banner .flex{ display: block; }
	.banner img{ display: block; }
	div.title{ min-height: auto; max-width: 780px; }
	div.title h1{ position: relative; bottom: 0; max-width: none; text-align: center; padding: 10px 0; top: 0; transform: none; }
	/* div.title{ display: none; } */
	.container{ padding: 0 30px; }
	.products .product .desc{ padding-left: 30px; }
	.titanodrol .desc{ padding-left: 30px; }
	.testimonial .desc{ padding-left: 30px; }
	form{ max-width: 140px; }
}

@media screen and (max-width: 767px)
{
	div.title{ display: none; }
	.container{ padding: 0 30px; }
	.flex{ display: block!important; }
	.ranking .list{ margin: 0 auto; }
	.products .product{ display: block; }
	.products .product .img{ max-width: none; }
	.products .product .desc{ width: 100%; margin-top: 20px; }

	table td.rating img{ max-width: 14px; margin-right: -5px; }

	.companies picture{ margin: 0 auto 30px auto; }
	.companies picture:nth-of-type(1){ max-width: 150px; }
	.companies picture:nth-of-type(2){ max-width: 150px; }
	.companies picture:nth-of-type(3){ max-width: 150px; }
	.companies picture:nth-of-type(4){ max-width: 175px; }
	.companies picture:nth-of-type(5){ max-width: 200px; margin-bottom: 0; }


	.titanodrol .img-box{ max-width: none; }
	.titanodrol .img-box img{ display: block; margin: 0 auto; }
	.titanodrol .desc{ max-width: 100%; }
	.testimonial .desc{ padding-left: 20px; }
	form{ display: none; }
	.logo{ margin: -20px auto 0; right: 0; max-width: 125px; }
	nav{ padding: 75px 0 20px 0; text-align: center; }

	table td.rating span{ font-size: 11px; }
}


#ftb-a { display: none; position: fixed; width: 100%; z-index: 999; cursor: pointer; text-decoration: none; }
#ftb-a.active { display: block; animation: animateFTBshow .5s ease both; }
#ftb-a.inactive { display: block; animation: animateFTBhide .5s ease both; }
#ftb-a:hover { text-decoration: none; }
#floating-top-btn { background: #009a0c; text-align: center; color: white; font-weight: 700; text-transform: uppercase; padding: 15px 0; }

@media (min-width: 576px) {
    #ftb-a { display: none !important; }
}

@keyframes animateFTBshow { 
    0% { transform: translateY(-54px); }
    100% { transform: translateY(0); }
}
@keyframes animateFTBhide { 
    0% { transform: translateY(0); }
    100% { transform: translateY(-54px); }
}