html { font-family: "Open Sans", sans-serif; font-size: 16px; color: rgb(32, 37, 105); } body { margin: 0; padding: 0; background: #fff; } a { color: rgb(72, 146, 242); text-decoration: none; outline: none; transition: all .3s; } ul { margin: 0; padding: 0; } .page { width: 1100px; margin: 0 auto; position: relative; } .flex { display: flex; justify-content: space-between; }  header { background: #191d54; } header .logo { width: 25%; text-align: center; } header .logo a { display: block; height: 60px; } header .logo a img { height: 100%; } header .top-menu { width: 75%; } header .top-menu li { list-style: none; width: 33.333%; } header .top-menu li a { width: 100%; line-height: 60px; flex-direction: row; align-items: center; justify-content: center; color: #fff; font-weight: bold; } header .top-menu li a:hover { background: #9e3039; } header .top-menu li a img { height: 30px; margin-right: 10px; }  .banner { background: #1f246a; } .banner a { display: block; } .banner a img { width: 100%; }  .top-games { background: #1f246a; padding: 30px 0; } .top-games .title { color: #fff; font-size: 18px; font-weight: bold; text-align: center; margin-bottom: 30px; } .top-games ul li { list-style: none; width: calc((100% / 7) - 10px); margin: 5px; } .top-games ul li a { background: #242a82; display: block; padding: 15px; border-radius: 5px; position: relative; } .top-games ul li a img { width: 100%; margin-bottom: 5px; } .top-games ul li a .name { color: #fff; font-size: 14px; text-align: center; margin-bottom: 20px; font-weight: bold; } .top-games ul li a .play { color: #fff; width: 90%; line-height: 25px; text-align: center; border: 2px solid #4049ca; border-radius: 20px; 	margin: 0 auto; transition: all .3s; } .top-games ul li a:hover .play { background: rgb(64, 73, 202) none repeat scroll 0% 0%; } .top-games ul li a .rating { position: absolute; top: 0; left: 0; background: #9e3039; border-top-left-radius: 5px; border-bottom-right-radius: 30px; 	flex-direction: column; justify-content: center; align-items: center; padding: 5px; } .top-games ul li a .rating span { color: #ddd; font-size: 15px; } .top-games ul li a .rating span.num { color: #fff; font-weight: bold; font-size: 18px; }  .slots { padding: 40px 0; background: #edeffb; } .slots h1 { color: rgb(45, 93, 194); font-size: 28px; line-height: 30px; margin: 0 0 30px; } .slots ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; -webkit-flex-flow: row wrap; justify-content: center; } .slots ul li { list-style: none; width: calc((100% / 6) - 10px); margin: 5px; position: relative; transition: all 0.5s ease 0s; } .slots ul li img { display: block; width: 100%; border-radius: 8px; } .slots ul li p { position: absolute; bottom: 0; left: 0; width: calc(100% - 10px); text-align: center; padding: 5px; color: #111; font-weight: bold; 	margin: 0; background: rgba(255,255,255,.4); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; transition: all 0.5s ease 0s; } .slots ul li:hover { transform: scale(1.05); } .slots ul li:hover p { background: rgba(255,255,255,.7); }  .content { padding: 40px 0; } .content h2 { color: rgb(45, 93, 194); font-size: 24px; line-height: 26px; margin: 0 0 20px; padding: 0; } .content h3 { color: rgb(45, 93, 194); font-size: 22px; line-height: 24px; margin: 0 0 20px; padding: 0; } .content p { line-height: 20px; margin: 0 0 20px; padding: 0; line-height: 24px; } .content ul, .content ol { line-height: 20px; margin: 0 0 20px 30px; padding: 0; line-height: 24px; } .content a:hover { text-decoration: underline; } .content img { max-width: 100%; height: auto; margin: 0 auto 20px; } .content .games-iframe { width: 800px; height: 600px; margin: 0 auto 20px; text-align: center; }  footer { background: #9e3039; padding: 30px 0; } footer .bottom-menu { width: 20%; } footer .bottom-menu li { list-style: none; margin: 5px 0; } footer .bottom-menu li a { color: #ddd; font-size: 15px; } footer .bottom-menu li a:hover { text-decoration: underline; color: #fff; } footer .info { padding: 5px 0; width: 50%; flex-direction: column; color: #ddd; } footer .info .title { font-weight: bold; font-size: 20px; } footer .info p { margin: 0; } footer .info .copyright { margin-top: 10px; }    @media only screen and (max-width: 1200px) { 	.page { width: 960px; } 	.top-games ul li a { padding: 10px; } } @media only screen and (max-width: 992px) { 	.page { width: 740px; } 	header .top-menu li a { line-height: 16px; flex-direction: column; font-size: 15px; height: 100%; } 	header .top-menu li a img { margin: 0 0 5px; height: 25px; } 	.top-games ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; -webkit-flex-flow: row wrap; justify-content: center; } 	.top-games ul li { width: calc((100% / 5) - 10px); } 	.slots ul li { width: calc((100% / 5) - 10px); } 	.slots ul li p, footer .info { font-size: 15px; } 	.content .games-iframe { width: 100%; height: 500px; } 	footer .info { width: 60%; } } @media only screen and (max-width: 768px) { 	.page { width: 620px; } 	header .top-menu li a { font-size: 14px; } 	.top-games ul li { width: calc((100% / 4) - 10px); } 	.slots ul li { width: calc((100% / 4) - 10px); } 	.content .games-iframe { height: 400px; } 	footer .info { width: 70%; } } @media only screen and (max-width: 640px) { 	.page { width: 500px; } 	header { flex-direction: column; align-items: center; }  	header .logo { width: 100%; } 	header .top-menu { width: 100%; } 	header .logo a { height: 50px; margin-bottom: 5px; } 	header .top-menu li a img { padding-top: 5px; } 	header .top-menu li a span { padding-bottom: 5px; } 	.top-games ul li { width: calc((100% / 3) - 10px); } 	.slots ul li { width: calc((100% / 3) - 10px); } 	footer .bottom-menu { width: 100%; text-align: center; margin-bottom: 20px; } 	footer .info { width: 100%; text-align: center; } 	footer .flex { flex-direction: column; align-items: center; } 	footer .info .copyright { margin-top: 20px; } } @media only screen and (max-width: 525px) { 	.page { width: 420px; } 	header .top-menu li a span { padding: 0 5px 5px; text-align: center; } 	.content .games-iframe { height: 300px; } } @media only screen and (max-width: 440px) { 	.page { width: 340px; } 	.top-games ul li { width: calc((100% / 2) - 10px); } 	.slots ul li { width: calc((100% / 2) - 10px); } } @media only screen and (max-width: 360px) { 	.page { width: 300px; } 	header .top-menu li a { font-size: 13px; } }