*{
box-sizing: border-box;
border: 0;
padding: 0;
margin: 0;}
ul,ol,a{
list-style-type: none;
text-decoration: none;}
a{
cursor: pointer;
}
html{
-webkit-tap-highlight-color: rgba(0,0,0,0);
scroll-behavior: smooth;}
body{
min-height: 100vh;
font-family: 'Source Sans Pro', sans-serif;
display: flex;
flex-direction: column;
background: #555;
}
header{
display: flex;
padding: 0% 2%;
background: #1f1f1d;}
.logo{
width: 35%;
display: flex;
justify-content: flex-start;
align-items: center;}
.logo a{
font-size: 24px;
display: flex;
flex-direction: row;
align-items: center;
color: #ddd115;}
.logo span{
padding-right: 20px;}
.search-btns{
width: 65%;
display: flex;
}
.search-TVinstaller{
width: 80%;
display: flex;
}
.search-TVinstaller form{
width: 100%;
display: flex;
align-items: center;}
.search-TVinstaller input{
width: 80%;
height: 35px;
font-size: 22px;
padding: 8px;
border-radius: 0px 0px 15px 0px;}
.search-TVinstaller button{
background: #ddd115;
border-radius: 15px 0px 0px 0px;}
.search-TVinstaller i{
display: flex;}
.search{
width: 50px;
height: 35px;
padding: 8px;
}
.btns-header{
width: 20%;
display: flex;
align-items: center;
}
.menu-open-close{
display: flex;
width: 100%;
justify-content: flex-end;}
.btn-menu{
background: #ddd115;
border-radius: 15px 0px 15px 0px;}
.btn-menu i{
display: flex;
}
.menu-open-close .menu{
width: 50px;
height: 35px;
padding: 6px;
fill: #444338;}
.nav-main{
padding: 0% 15%;
background: #1f1f1d;
z-index: 2;}
nav.fixed {
position: fixed;
box-shadow: 5px 5px 19px 0px rgb(0 0 0 / 50%);
width: 100%;
background: #000;
}
.nav-ul{
display: flex;
flex-direction: row;
justify-content: space-around;
}
.nav-li{
width: 25%;
text-align: center;
}
.button-tv{
font-size: 20px;
display: flex;
flex-direction: column;
color: #fff;
font-weight: bold;
}
.button-tv:after{
content: "\25BE";
font-size: 18px;
}
.up:after{
content: "\25B4";
font-size: 18px;
}
.matkinTv-ul-main{
display: flex;
flex-direction: column;
}
.hide{
display: none;
}
.matkinTv-ul-main li {
padding: 8px;
border-bottom: 1px solid #837b00;
border-radius: 15%;   
}
.matkinTv-link{
color: #fff;
}
.matkinTv-link:hover{
color: #ddd115;
font-weight: bold;
}
.breadcrumb ol{
display: flex;
justify-content: center;
}
.breadcrumb ol li{
background-color: #ddd115;
border-radius: 5px;
letter-spacing: 3px;
transition: all 0.3s ease;
font-size: 18px;
transform: skew(-18deg);
margin: 12px 8px;
padding: 0px 50px;
}
.breadcrumb a,.breadcrumb strong{
color: #000;
}
main{
margin: 0% 3%;
}
h1{
text-align: center;
font-size: 28px;
background: #ddd115;
}
h2{
font-size: 26px;
text-align: center; 
}
h3{
font-size: 24px;
text-align: center;
padding: 2px;
background: #d3c714;
letter-spacing: 3px;
}
.questions{
display: flex;
justify-content: space-around;
background: #e8e8de;
padding: 12px;
}
.questions h2{
text-align: right;
}
.text{
font-size: 18px;
}
.question:nth-child(1){
margin-left: 30px;
}
.about{
background: #fff;
margin: 10px;
padding: 8px;
background-image: url(/icon/192.png);
background-repeat: no-repeat;
background-position: left;
}
.about-list{
position: relative;
}
.about-list p{
font-size: 18px;
text-align: center;
padding: 5px;
}
.about-list p:before{
content: "\2705";
}
.about-list a{
position: absolute;
bottom: 0;
left: 0;
display: flex;
align-items: center;
background: #ddd115;
padding: 0px 20px;
border-radius: 20px 0px 20px 0px;
color: #000;
}
.about-list a span{
font-size: 22px;
font-weight: bold;
}
.about-list svg{
width: 80px;
height: 80px;
padding: 20px;
}
.contact{
background: #e8e8de;
}
.Contact-Information.fixed{
position: fixed;
box-shadow: 5px 5px 19px 0px rgb(0 0 0 / 50%);
width: 100%;
background: #fff;
bottom: 0;
right: 0;
}
.contact h2{
background: #ddd115;
}
.contact p{
text-align: center;
font-size: 18px;
padding: 8px 0px;
}
.Contact-Information{
display: flex;
justify-content: space-around;
}
.Contact-Information a{
display: flex;
align-items: center;
width: 33.3%;
justify-content: center;
color: #fff;
}
.Contact-Information span{
padding: 10px;
font-weight: bold;
font-size: 18px;
}
.Contact-Information .icon{
width: 70px;
padding: 10px;
height: 70px;
}
.Contact-Information a:nth-child(1){
background: #006291;
fill: #dfd314;
}
.Contact-Information a:nth-child(2){
background: #dc890f;
color: #000;
}
.Contact-Information a:nth-child(3){
background: #008800;
fill:#fff;
}
.nav-page{
background: #1f1f1d;
display: flex;
justify-content: center;
margin-top: 8px;
padding: 5px;
}
.nav-page.fixed{
position: fixed;
width: 100%;
top: 0;
margin: 0;
right: 0;
box-shadow: 5px 5px 19px 0px rgb(0 0 0 / 50%);
background: #000;
}
.nav-page a{
width: 20%;
text-align: center;
letter-spacing: 3px;
font-size: 20px;
transform: skew(-18deg);
margin: 4px;
color: #fff;
font-weight: bold;
}
.Type-Tv{
background: #e8e8de;
}
.Type-Tv p{
font-size: 18px;
text-align: center;
padding: 8px;
letter-spacing: 3px;
font-weight: bold;
}
h4{
text-decoration: underline;
font-size: 20px;
text-align: center;
padding: 8px;
letter-spacing: 3px;
}
.Tv-brands ul{
display: flex;
flex-wrap: wrap;
padding: 20px;
}
.Tv-brands ul li{
width: 21%;
font-size: 18px;
padding: 0.5%;
text-align: center;
margin: 0.3% 2%;
}
.mark{
background: #d8d8d8;
font-weight: bold;
}
.TV-bracket{
background: #fff;
}
.TV-bracket p{
font-size: 18px;
text-align: center;
padding: 8px;
letter-spacing: 3px;
font-weight: bold;
}
.img{
display: flex;
flex-direction: column;
align-items: center;
border-bottom: 2px solid #555555;
}
.price{
color: #e30000;
font-weight: bold;
font-size: 22px;
}
footer{
background: #1f1f1d;
margin: 0% 3%;
}
.Service-areas{
margin-bottom: 8%;
}
.Service-areas p{
color: #fff;
text-align: center;
font-size: 20px;
padding: 8px;
}
.List-service-area{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.List-service-area a{
color: #fff;
width: 23%;
text-align: center;
padding: 2px;
font-size: 18px;
border-bottom: 1px solid #d3c714;
margin: 1%;
}
.List-service-area a:hover{
color: #ffef00;
font-weight: bold;
}
th,td{
  color: #fff;
  border: 1px solid;
}
.Copyright{
background: #555555;
padding-bottom: 15%;
}
.Copyright a{
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
}
.Copyright a span{
font-size: 18px;
color: #fff;
margin-right: 10px;
}
.Copyright p{
color: #e1e1e1;
font-size: 18px;
text-align: center;
}
@media screen and (max-width: 1700px) {
.logo{
width: 45%;
}
.logo a{
font-size: 22px;
}
.search-btns{
width: 55%;
}
}
@media screen and (max-width: 1500px){
.questions{
padding: 4px;
}
.question h2{
font-size: 22px;
}
.about h2{
font-size: 24px;
}
.about-list a{
padding: 0px 10px;
}
.about-list svg {
width: 70px;
height: 70px;
padding: 17px;
}
.about-list a span{
font-size: 18px;
}
}
@media screen and (max-width: 1300px){
header{
padding: 0% 1%;
}
.logo span {
padding-right: 10px;
}
.nav-main{
padding: 0% 5%;
}
.button-tv{
font-size: 18px;
}
.menu-open-close .menu{
padding: 8px;
}
main {
margin:0% 1%;
}
.about-list svg {
width: 60px;
height: 60px;
padding: 8px;
}
.about-list p {
text-align: right;
letter-spacing: 1px;
}
}
@media screen and (max-width: 1240px){
header {
padding: 0% 0%;
}
.logo span {
padding-right: 3px;
}
.logo {
width: 50%;
}
.search-btns{
width: 50%;
}
.logo a {
font-size: 20px;
}
.nav-main {
padding: 0% 0%;
}
.about-list p {
padding: 3px;
}
}
@media screen and (max-width: 980px){
header{
display: flex;
flex-direction: column;
padding: 0% 1%;
}
.logo {
width: 100%;
justify-content: center;
}
.search-btns {
width: 100%;
margin: 8px 0px 8px 0px;
}
.search-TVinstaller {
width: 100%;
}
.search-TVinstaller form {
justify-content: center;
}
.search-TVinstaller input {
width: 40%;
height: 28px;
font-size: 18px;
}
.search {
height: 28px;
padding: 6px;
}
.btns-header {
width: 0%;
}
.menu-open-close .menu{
width: 40px;
height: 28px;
}
main {
margin: 0% 0%;
}
h1{
font-size: 22px;
}
.question h2,.text{
text-align: center;
}
.question:nth-child(1) {
margin-left: 0px;
}
.questions{
flex-direction: column;
}
h2,.question h2,.about h2{
font-size: 20px;
}
.text {
font-size: 16px;
line-height: 1.5;
}
h3{
font-size: 18px;
}
.Type-Tv p {
font-size: 16px;
}
h4{
font-size: 18px;
}
.about {
padding: 0px;
}
.about h2 {
font-size: 20px;
}
.about-list p {
font-size: 14px;
font-weight: bold;
}
.about-list a span {
font-size: 16px;
}
.nav-page a {
font-size: 16px;
letter-spacing: 1px;
}
}
@media screen and (max-width: 800px){
.breadcrumb ol li {
letter-spacing: 2px;
font-size: 16px;
}
.button-tv {
font-size: 16px;
}
.button-tv:after,up:after {
font-size: 16px;
}
.matkinTv-link {
font-size: 14px;
}
.about{
background-size: 128px;
margin: 6px;
}
.about-list a{
width: 100%;
text-align: center;
position: relative;
justify-content: center;
border-radius: 20px 20px 0px 0px;
}
.about-list svg {
width: 40px;
height: 40px;
padding: 8px;
}
.contact p {
font-size: 16px;
}
.Contact-Information{
position: fixed;
bottom: 0;
right: 0;
z-index: 2;
width: 100%;
}
.mark{
background: #8bc34a;
}
.Tv-brands ul li {
width: 48%;
font-size: 16px;
padding: 1%;
margin: 1%;
}
.TV-bracket p {
font-size: 16px;
letter-spacing: 1px;
}
footer{
margin: 0% 0%;
background: #1f1f1d;
}
.Service-areas p {
font-size: 16px;
font-weight: bold;
}
.List-service-area a {
width: 48%;
padding: 4px;
font-size: 16px;
}
}
@media screen and (max-width: 600px){
.logo span {
display: none;
}
.search-TVinstaller input {
width: 45%;
height: 24px;
font-size: 14px;
border-radius: 0px 0px 8px 0px;
}
.search-TVinstaller button {
border-radius: 8px 0px 0px 0px;
}
.search {
width: 40px;
height: 24px;
padding: 5px;
}
.btn-menu {
border-radius: 8px 0px 8px 0px;
}
.menu-open-close .menu {
width: 40px;
height: 24px;
padding: 5px;
}
.button-tv {
font-size: 14px;
}
.matkinTv-ul-main li {
padding: 10px;
}
.matkinTv-link{
font-size: 12px;
}
.breadcrumb ol li{
letter-spacing: 3px;
font-size: 14px;
padding: 2px 20px;
}
h1{
font-size: 20px;
}
h2, .question h2, .about h2 {
font-size: 18px;
}
.question{
margin: 4px;
}
.text{
font-size: 14px;
font-weight: bold;
letter-spacing: 0.5px;
}
.about-list a span{
font-size: 14px;
}
.about{
background-image: none;
}
.contact p{
font-size: 14px;
}
.Contact-Information .icon {
width: 50px;
padding: 8px;
height: 50px;
}
.nav-page a{
font-size: 14px;
letter-spacing: 3px;
transform: skew(-10deg);
margin: 8px;
}
h3{
letter-spacing: 2px;
}
h4 {
font-size: 16px;
letter-spacing: 2px;
}
.Type-Tv p{
font-size: 14px;
}
.Tv-brands ul {
padding: 10px;
}
.Tv-brands ul li{
font-size: 14px;
}
.TV-bracket p{
font-size: 14px;
}
.lazy{
width: 50%;
height: 50%;
}
.price {
font-size: 18px;
}
.Service-areas p{
font-size: 14px;
}
.List-service-area a{
font-size: 14px;
}
.Copyright{
padding-bottom: 30%;
}
.Copyright P{
font-size: 16px;
}
}
@media screen and (max-width: 400px){
.button-tv{
letter-spacing: 1px;
}
.matkinTv-ul-main li{
padding: 5px;
}
.breadcrumb ol li{
letter-spacing: 2px;
padding: 2px 10px;
}
.nav-page a{
letter-spacing: 1px;
transform: skew(-8deg);
margin: 4px;
}
.Contact-Information .icon{
width: 40px;
padding: 4px;
height: 55px;
}
.Contact-Information span{
padding: 8px;
font-weight: bold;
font-size: 16px;
}
.Copyright P {
font-size: 14px;
}
}
@media screen and (max-width: 320px){
.search-TVinstaller{
width: 95%;
}
.btns-header{
width: 5%;
}
.search-TVinstaller input{
height: 22px;    
}
.search {
height: 22px;
padding: 6px;
}
.menu-open-close .menu{
height: 22px;
padding: 6px;
}
.about-list svg{
width: 30px;
height: 30px;
padding: 5px;
}
.Contact-Information span{
padding: 4px;
font-size: 14px;
}
.Type-Tv p{
letter-spacing: 1px;
}
.nav-page a{
letter-spacing: 0px;
}
h4 {
letter-spacing: 1px;
}
.price {
font-size: 16px;
}
}