.yt-thumb { position: relative; display: inline-block; cursor: pointer; margin: 30px;} .yt-thumb:before { position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); content: "4"; font-family: Webdings; font-size: 100px; color: #ff0000; opacity: .8; text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5); transition:0.5s; } .yt-thumb:hover:before { color: #00ff00; transition:0.5s; } .row {font-family: "Arial Narrow";font-size:1.5em} h1 {color:#ff6600; font-size:140%; font-family: "Arial Narrow"; font-weight:bold; display:inline;margin:4} h2 {color:#ff6600; font-size:140%; font-family: "Arial Narrow"; font-weight:normal; display:inline;margin:4} h3 {color:#ff6600; font-size:120%; font-family: "Arial Narrow"; font-weight:bold; display:inline;margin:4} h4 {color:#ff6600; font-size:120%; font-family: "Arial Narrow"; font-weight:normal; display:inline;margin:4} h5 {color:#ff6600; font-size:110%; font-family: "Arial Narrow"; font-weight:normal; display:inline;font-style: italic;margin:4} h6 {color:#ff6600; font-size:100%; font-family: Tahoma; font-weight:normal;display: inline;margin:4} p {margin: 0 0 6 0;} #navigation{ margin-top:10px; height:50px; border-top:1px solid orange; border-bottom:1px solid orange; background-color:#fff0c4; padding-left:300px; } .navList{ margin:0 } #navigation li{ display:inline-block; line-height:50px; margin:0 60px 0 0; font-family:'Arial',sans-serif; font-size:14px; color:#333; font-weight:400; text-transform:uppercase } #navigation li:hover,#navigation li a:hover{ text-decoration:underline } #navigation a,#navigation a:visited{ text-decoration:none } img{max-width:100%} #desc ul { display: inline-block; text-align: left; } #menu ul { margin-left:-16px; display: inline-block; text-align: left; } #desc {padding:12 3 3 6} .cont:after,.cont:before,.row:after,.w3:before{content:"";display:table;clear:both} .col{float:left;width:100%} .col.s12{width:99.99999%} @media (min-width:1023px){.col.l3{width:250px}.col.l9{width:70%}#menu{background-color:cornsilk;border-right:1px solid orange;}} #footser {clear:both;} #menu{ float:left; text-align:left; padding:20 20 0 20; font-size:0.8em } #store{ float:left; height:170px; padding-left:20px; display: flex; align-items: center; } #desc { float:right; } #menu a {text-decoration:none;color:orange} #menu a:visited {color:orange} #menu a:hover {color:red} #menu ul > ul > li {font-size:0.9em;line-height:1.2em} @media only screen and (max-width:1023px) { .row {font-size:1em} #header img{ max-width:100% } #navigation{ height:auto; padding-left:0; } .navList{ padding-left:0 } #navigation li{ display:block; padding:0; border-top:1px solid orange; width:100% } #navigation li:first-child{ border-top:0 } #store{display:none} #menu{ float:clear both; padding:0; font-size:1.4em; line-height:1.5em; transform: translate(-50%); margin: 20px -100px 0 50%; } }