@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&display=swap');
body{padding: 0; margin: 0;}
img{margin: 0; padding: 0;}
.clr{clear: both;}
#landingPage{font-family: 'Quicksand', sans-serif; font-size: 14pt; line-height: 130%; color: #171717; /* font-family: 'Quicksand', sans-serif; */}
#main-row{width: 100%; padding: 40px 0; margin-bottom: 20px; background: url(images/1.jpg) #000; background-size: cover; position: relative; text-align: center;}
#main-row h1{font-family: 'Philosopher', sans-serif; font-size: 35pt; color: #fff; padding: 0; margin: 0 0 40px 0;  text-transform: uppercase; padding-bottom: 20px; position: relative;}
#main-row h1::before{content: ''; display: block; width: 400px; height: 4px; border-radius: 20px; background-color: #ffffff; position: absolute; margin: 0 auto; left: 0; right: 0; bottom: 0;}
div.subRow{padding: 20px 10px; text-align: center;}
div.subRow p{margin: 10px 0;}
#main-row .inner{}
#main-row .inner img, 
#main-row .inner video{max-width: 50%; border: solid 10px #FFF; box-shadow: 5px 5px 20px #000; border-radius: 10px;}
#main-row .inner video{margin-top: 20px;}
#moreThumb{text-align: center;}
#moreThumb img{display: inline-block; width: 500px; height: auto; margin: 10px; border-radius: 10px; border: solid 10px #FFF; box-shadow: 2px 2px 7px #999; vertical-align: top;}

h1.mainTitle{font-family: 'Philosopher', sans-serif; text-transform: uppercase; color: #FFF; font-size: 30pt; padding: 0; margin: 40px 0; line-height: 100%;}
h2.subTitle{font-family: 'Philosopher', sans-serif; text-align: center; color: #d70663; text-transform: uppercase; margin: 0; margin-bottom: 20px; padding-bottom: 15px; position: relative;}
h2.subTitle::before{content: ''; display: block; width: 200px; height: 2px; border-radius: 50px; background-color: #d70663; position: absolute; margin: 0 auto; left: 0; right: 0; bottom: 0;}

div.price{font-family: 'Philosopher', sans-serif; text-align: center; padding: 30px 0; margin-top: 20px; position: relative;}
div.price span.title{display: block; font-size: 30pt; color: #ffffff; padding-bottom: 30px; text-decoration: underline;}
div.price li{font-size: 25pt; color: #ff1818; display: inline-block; padding: 20px 30px; border-radius: 30px; background-color: #fff; margin: 5px 10px;}
div.price .giabo{color: #45ac1d;}
div.price .note{display: block; font-size: 14pt; font-weight: 300; color: #f1e6e6; margin-top: 10px; font-family: 'Quicksand', sans-serif;}

div.buyproduct{text-align: center;}
div.buyproduct a.orderBtn{padding: 20px 40px; display: inline-block; background-color: #c61a6f; color: #FFFFFF; border:solid 4px #ffffff;  border-radius: 50px; font-size: 30pt; font-weight: 300; text-transform: uppercase; text-decoration: none;}
div.buyproduct a.orderBtn:hover{background-color: #1e6b00;}


div.content span.screenshot{padding: 0 !important;}
#productInfo{padding: 30px 0; background: url(images/2.jpg); background-size: cover; text-align: center;}
#productInfo .inner{width: 28%; padding: 1%; height: 400px; margin: 1%; background-color: #fff; display: inline-block; border-radius: 10px; text-align: center; overflow: hidden; box-shadow: 2px 2px 7px #999;}
#productInfo .inner h3{margin:10px 0; padding: 0; font-size: 16pt; color: #000;}
#productInfo .inner p{margin: 0; padding: 0; font-size: 13pt;}
#productInfo .inner .screenshot{height: 200px; overflow: hidden; display: block; text-align: center; margin-bottom: 20px;}
#productInfo .inner .screenshot img{height: 200px; width: auto;}
#productInfo .detail{text-align: left; font-size: 13pt; width: 26%; padding: 1% 2%;}
#productInfo .detail li{display: block; margin: 5px 0;}
#productInfo .detail li red{color: #ff0000;}
#productInfo .detail b{font-weight: 700; text-decoration: underline;}
#productInfo .detail h3{text-decoration: underline; color: #000; margin-bottom: 10px;}
#productInfo .detail h4{text-decoration: underline; margin: 0; margin-top: 20px; color: #017407;}
#productInfo .detail font{text-decoration: underline;}

#feedback{background-color: #fff; padding: 30px 0; text-align: center;}
#feedback ul{margin: 20px 0; padding: 0; list-style: none; float: left;}
#feedback ul li{display: inline-block; width: 40%; padding:20px 10px; height: 400px; overflow: hidden;}
#feedback ul li img{max-width: 100%;}

div.productList{font-family: arial !important; font-size: 12pt !important;}

@media screen and (max-width : 900px){
	#main-row{}
	#main-row h1{font-size: 25pt;}
	#main-row h1::before{width: 60%; height: 3px; border-radius: 50%;}
	#main-row .inner img, #main-row .inner video{max-width: 80%}
	h2.subTitle{font-size: 18pt; font-weight: 300; margin-bottom: 0;}
	div.subRow{text-align: justify; font-size: 13pt; line-height: 150%;}

	#productInfo .inner{width: 80%; height: auto; padding: 5%; margin: 5%; box-shadow: none;}
	#feedback ul li{width: 100%; height: auto; padding: 0; margin: 0; margin-bottom: 20px;}
	#feedback ul li img{max-width: 90%;}
	#feedback .price{margin: 0;}

	div.price p{font-size: 16pt;}
	div.price li{font-size: 16pt;}
	#moreThumb img{max-width: 90%; height: auto;}
	div.relatedProduct{font-family: arial !important; font-size: 12pt !important;}
    
}
