body {font-family: 'Segoe UI'; background: #cdcdcd}
.all {margin: 0 10px}
/*top menu section*/
#top-menu {position: relative; height: 30px; background: #00adee}
#top-menu a {color: white; font-weight:bold;}
#top-menu a:hover {text-decoration: none}
#top-menu a:focus {text-decoration: none}
#top-menu .create {font-weight:bold; margin: 0; position: absolute; transform: translateY(-50%); top: 50%}
#top-menu .social {padding-top: 15px}
.social-icon {display:inline-block; background: #555; border-bottom-left-radius: 7px; border-top-right-radius: 7px; padding: 5px 10px}
.icon {padding: 5px 10px}
#top-menu li {padding-right: 15px}
#top-menu li .home-label {color: black;}
.top-right-nav {padding-top: 5px}
/*toggle menu for mobile screens*/
.hamburger-menu {display: none}
.navbar-toggle {margin-top: 0}
.navbar-toggle .icon-bar {background: white}

/*second header*/
#second-header {background: white; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px}
.logo {padding: 25px;}
label.dd-selected-text, label.dd-option-text {line-height: 18px !important}
.choose-search {margin-top: 10px}
#ddslick-select {display:inline-block !important; float: right}
.styled-button {float: right; margin-left: 5px; height: 46px; line-height: 27px; background: #00adee !important; border:none; width: 80px; font-size: 16px; font-weight: bold; color: white !important}
.search {float: right; clear: both; border: 1px solid #ccc; background-color: #eee; color: #333; width: 260px; height: 46px; margin-top: -45px; margin-right: 85px; padding-left: 5px}
.cart {float: right; margin-left: 5px; height: 46px; line-height: 27px; background: #00adee !important; border:none; width: 80px; font-size: 16px; font-weight: bold; color: white !important; clear: both; margin-top: 5px}

/*side navigation*/
.side-nav {padding-left: 0; padding-right: 0; background: white; margin-top: 5px; border-top-left-radius: 21px; border-bottom-left-radius: 21px}
#side-navigation {display: inline-block; margin-top: 5px; padding-bottom:10px; background: white; width: 100%; border-top-left-radius: 14px; border-bottom-left-radius: 14px; padding-right: 10px}
#side-navigation h5 {padding: 10px 10px 0 10px}
#side-navigation p {padding: 0 10px; margin-bottom: 10px}
.shopping-basket {margin-top: 5px; margin-bottom: 5px; padding: 15px; background: #00adee; width: 100%; border-top-right-radius: 7px; text-align:center}
.shopping-basket a {color: white;}
.shopping-basket a:hover {text-decoration: none}
.mobile-apps {margin-top: 20px}
.mobile-apps h4 {text-align:center;}
.mobile-apps img {width: 100%}
.appstore-img {margin-bottom: 2px}
a:hover, a:focus {text-decoration: none}
#side-nav-accordion .ui-state-focus {outline: none;}
#side-nav-accordion h3 {padding: 10px 5px; margin-bottom: 0px; margin-top: 5px; font-size: 2rem}
/*#side-nav-accordion h3 a {color: black}*/
#side-nav-accordion h3:hover {background: #313233;}
#side-nav-accordion h3:hover a {color: white}
#side-nav-accordion ul {list-style-type: none;}
#side-nav-accordion .ul-container {background:#f0f0f0; border: 1px solid #cccccc;}
.small {height: 195px !important}
#side-nav-accordion li {border-bottom: 1px dashed #777; padding-bottom: 7px; padding-top: 7px}
#side-nav-accordion li a {color: black}
.design {background: #313233;}
.ul-container a:hover {color: #00adee !important}
.ul-container li:hover {border-bottom-color: #00adee !important}
.ul-container input, .ul-container button {margin-left: 10px; width: 60%}
.ul-container button {background: #00adee; color: white; border-radius: 5px; line-height: 24px}
.ul-container input {margin-top: 3px}
.ul-container p {width: 60%}
.ul-container select {width: 110%}
.ui-state-default {background: white}
.ui-state-active {background: #313233; border: none}

/*main slider*/
.sliders {background: white; margin-top: 5px; border-top-right-radius: 21px; padding-left: 0; border-left: 1px solid #ccc; box-shadow: -1px 0px 10px #aaa; border-bottom-right-radius: 21px}
.main-slider {margin-top: 35px;padding-left: 10px; padding-bottom: 10px}
.image-title {position: relative}
.main-slider img {width: 100%}
.main-slider h3 {position: absolute; top: 50px; color: white; right: 100px; text-shadow: 2px 2px 2px #00adee}
.buy-button {position: absolute; top: 100px; background: #00adee; border:none; width: 90px; font-size: 16px; font-weight: bold; color :white; padding: 5px; right: 100px; margin-top: 5px}

/*second slider- owl carousel showing one photo*/
.second-slider {padding: 50px; position: relative}
.owl-carousel img {width: 100%}
.owl-theme .owl-nav {display: none}
.second-slider:hover .owl-nav {display: block}
.second-slider:hover .owl-nav {position: absolute; left: -4%; bottom: 70%}
.second-slider:hover .owl-next {position: absolute; left: 3250%}

/*Third slider-zaccordion slider*/
#z-slider {bottom:0; left:0; position:absolute; width:100%; height: 400px;border: 1px solid #eee; box-shadow: 0 1px 2px 1px rgba(0,0,0,.3)}
#z-slider .slider-closed {width:100px;}
.zaccordion-platform {position: relative;padding-left: 10px}
.zaccordion-platform h2 {color: #313233; margin-bottom: 10px; font-size: 21px}
.platform-logo {position: absolute; top: 40px}
.content {position: absolute; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.35); background: darkgrey; top:0; padding-left: 20px; padding-top: 40px; font-size: 24px; height: 100%; width: 388px; left: 520px; opacity: 0.95; }
.content ul {list-style-type: none}
.content a {color: white}
.content a:hover {color: black}
.platform-img {height: 100%}

/*Best selling owl carousel*/
.best-selling-container {margin: 5px 0; padding-left: 30px; padding-right: 30px}
.best-selling-container h2 {color: #313233; margin-bottom: 20px}
/*.best-selling .owl-theme .owl-nav {display: none}*/
.best-selling-container:hover .owl-nav {display: block}
.best-selling-container:hover .owl-nav {position: absolute; left: -3%; bottom: 50%}
.best-selling-container:hover .owl-next {position: absolute; left: 3320%}
.game {height: 185px; width: 100px; border: 5px solid transparent; text-align:center}
.game:hover {border-bottom-color: #00adee}

/*coming soon owl carousel*/
.coming-soon-container {margin: 5px 0; padding-left: 30px;}
.coming-soon-container h2 {color: #313233; margin-bottom: 20px}
.coming-soon img {height: 120px !important; width: 94px !important}
.coming-soon .owl-theme .owl-nav {display: none}
.coming-soon-container:hover .owl-nav {display: block}
.coming-soon-container:hover .owl-nav {position: absolute; left: -3%; bottom: 50%}
.coming-soon-container:hover .owl-next {position: absolute; left: 3320%}
.new-game {width: 94px; border: 5px solid transparent; text-align:center}
.new-game:hover {border-bottom-color: #00adee}

/*top selling owl carousel*/
.top-selling-container img {height: 120px}
.top-selling-container {margin: 5px 0; padding-left: 30px;}
.top-selling-container h2 {color: #313233; margin-bottom: 20px}
.top-selling .owl-theme .owl-nav {display: none}
.top-selling-container:hover .owl-nav {display: block}
.top-selling-container:hover .owl-nav {position: absolute; left: -3%; bottom: 50%}
.top-selling-container:hover .owl-next {position: absolute; left: 3350%}

/*footer*/
footer {background: white; margin-top: 5px; border-top-left-radius: 21px; padding: 20px 0 20px 40px; border-top-right-radius: 21px}
footer ul {list-style-type: none}
footer h4 {color: #007399; font-weight: bold}
footer a, footer p, footer span {color: #727272}
footer span {margin-left: 2px}
footer a:hover {color: black}
.bottom {color: white; margin-bottom: 5px; width: 28px;}
footer .social-icon:hover {background: #333; color: white}
.media ul {padding-left: 10px}
.bottom-footer {background: #262626; padding: 3px 10px}
.bottom-footer span, .bottom-footer span a {color: white}
.egv span {float: right}

@media (max-width: 1366px) {
.content {left: 370px}
.platform-logo {top: 20px}
}

@media (max-width: 1024px) {
.content {left: 117px}
.platform-logo {top: 13px; width: 70px}
}

@media (max-width: 768px) {
.social, .top-right-nav, .side-nav {display: none}
.hamburger-menu, .navbar-toggle {display: block}
#mobileNav ul li a {font-size: 20px !important}
.change-height {height: 161px}
.choose-search {margin-top: 20px}
.search {margin-top: -130px; margin-right: 85px}
.cart {position: relative; top: -85px;}
.side-nav, #side-navigation {display: none}
.main-slider {padding-top: 10px; margin-top: 15px}
.sliders {border-top-left-radius: 21px; border-bottom-left-radius: 21px}
.slick-list {width: 100%}
footer ul {padding-left: 5px}
.media {margin-top: 0}
.media span {display: none}
}

@media (max-width: 736px) {
#mobileNav ul li a {font-size: 18px !important}
.search {margin-top: -105px}
.cart {top: -60px}
.sliders {border-top-left-radius: 21px}
.main-slider h3 {top: 0; right: 70px}
.buy-button {top: 50px; right: 70px}
.content {font-size: 20px}
.best-selling-container h2, .coming-soon-container h2, .top-selling-container h2 {font-size: 22px}
.media {display: none}
footer p {margin-bottom: 0}
}

@media (max-width: 667px) {
#mobileNav ul li a {font-size: 16px !important}
.main-slider h3 {right: 15px}
.buy-button {right: 15px}
.content {font-size: 20px}
.content ul li {padding-bottom: 10px}
.platform-logo {top: -5px}
.best-selling-container h2, .coming-soon-container h2, .top-selling-container h2 {font-size: 20px}
}

@media (max-width: 568px) {
.main-slider h3 {right: 15px; font-size: 20px}
.content {padding-left: 0px; font-size: 11px}
.platform-logo {width: 55px; top: 2px}
footer h4 {font-size: 17px}
}

@media (max-width: 414px) {
#mobileNav ul li a {font-size: 14px !important}
#top-menu a {font-size: 10px}
.change-height {height: 220px}
.test {width: 100%}
.search {margin-top: -40px}
.cart {top: 5px}
.logo {text-align: center; padding-bottom: 10px; padding-top: 10px}
.logo img {width: 20%;}
.main-slider h3 {font-size: 14px; top: -15px}
.buy-button {padding: 2px; font-size: 14px; top: 20px}
.second-slider {padding: 20px}
.content {font-size: 11px; padding-top: 10px; left: 90px}
.content ul {padding-left: 10px}
.platform-logo {width: 38px}
.best-selling-container h2, .coming-soon-container h2, .top-selling-container h2 {font-size: 16px}
.contact {display: none}
.change-width {width: 50%}
.bottom-footer span {font-size: 10px}
.egv span {padding-top: 3px}
}

@media (max-width: 375px) {
    #top-menu a {font-size: 9px}
    #ddslick-select {width: 256px !important}
    .styled-button{width: 64px}
    .search {margin-right: 66px}
    .change-height {height: 200px}
    .cart {width: 64px}
    .main-slider h3 {font-size: 12px}
    .buy-button {font-size: 12px; top: 35px; width: 55px}
    .content {left: 55px}
    .platform-logo {width: 34px}
    .best-selling-container h2, .coming-soon-container h2, .top-selling-container h2 {font-size: 12px}
    .copyrights {width: 100%; text-align: center}
    .company {width: 100%; right: 100px}
}

@media (max-width: 320px) {
    #top-menu a {font-size: 8px}
    #ddslick-select {position: relative; top: -35px}
    .search {margin-right: -4px; top: 0; margin-top: -75px}
    .styled-button {float: none; position: relative; left: 8px; top: 125px; width: 125px}
    .cart {top: 28px !important; right: -5px; width: 125px}
    .logo {padding-bottom: 0px;}
    .choose-search {margin-top: 0px}
    .change-height {height: 250px}
    .sliders {border-top-left-radius: 21px}
    .main-slider h3 {font-size: 10px; top: -10px}
    .buy-button {width: 60px; top: 20px; font-size: 10px}
    .platform-logo {width: 26px}
    .content {font-size: 8px}
    .content ul {padding-left: 2px}
    footer {padding-left: 10px}
    .company {right: 75px}
}