/*Обложка сайта+навигация+шапка*/
body {
    margin: 0 auto;
    padding: 0;
    background: silver url(pic/e-shem1.png) no-repeat 0 0 fixed;
    font-family:sans-serif;
}

/*.break-word {
    word-wrap: break-word;
}*/
.header, .contacts, .nav {
    display:flex;
    flex-wrap: wrap;
}
.header {
    align-items: flex-start;
}

h1, .contacts, .logo, .nav a {
    margin: 1%;
}

.logo {
    width:100px;
    height: 100px;
    min-width: 8%;
    background: url(pic/diod-150x150.png) no-repeat -20px -20px;
}
h1 {
    margin: auto;
}
.contacts ul {
    flex-wrap: nowrap;
    align-items: flex-start;
    list-style-type: none;
    margin: 0;
    padding: 10px 15px;
}

.contacts li:first-child, .story li:first-child {
    font-weight: bold;
    font-size:1.2em;
    font-family: serif;
}
.contacts li {
    font-size:0.8em;
}
.contacts, .nav a {
    background-color: #420b8b;
    border:3px solid #efefef;
    box-shadow:0 0 80px -10px #efefef;
    border-radius: 20px;
}
.contacts, .nav a:hover, .main .nav a:first-child, .price .nav a:nth-child(2), .about .nav a:nth-child(4),
.socialNets b {
    color: #efefef;
}

h1, .contacts a,  .nav a, .priceLoad a {
    color:#82afff;
}
.contacts a,  .nav a, .priceLoad a{
    text-decoration:none;
}
.priceLoad a:hover {
    text-decoration: underline;
}
.nav {
    justify-content: center;
    margin-bottom:50px;
}
.nav a {
    font-size:1.2em;
    padding:10px 15px;

}
.main .nav a:first-child, .price .nav a:nth-child(2), .about .nav a:nth-child(4) {
    border:3px solid red;
}



/*Обложка сайта+навигация+шапка*/
/*Главная страница наполнение*/
.catalog-items {
    margin:10px;
    padding:0;
}
.item {
    display:inline-block;
    width:200px;
    height: 300px;
    background-color: #efefef;
    margin:10px 20px;
    padding:10px;
    vertical-align:top;
    text-align:center;
    text-decoration:none;
}
.item:hover {
    background-color: #cbc9db;
}
.item .title {
    color:#420b8b;
    font-size:1.3em;
}
.item .image {
    width:180px;
    height:180px;
    margin:10px auto 30px;
    border: 1px solid #420b8b;
    background-size: contain;
    background-repeat: no-repeat;
}
.item .station {
    background-image: url(pic/pstation.png);
}
.item .bormashin {
    background-image: url(pic/bormashin.png);
}
.item .diodLent {
    background-image: url(pic/svetdiodlent.png);
}
.item .multim {
    background-image: url(pic/Multim2.png);
}
.item .lamp {
    background-image: url(pic/lamp.png);
}
.item .components {
    background-image: url(pic/components.png);
}
.item .powerAdapter {
    background-image: url(pic/bp.png);
}
/*Главная страница наполнение*/

/*Нижняя часть главной страницы*/
/*
.socialNets {
    margin:0 auto;
    width: 260px;
    height:100px;
    background:linear-gradient(#1a1b48, #efefef);
}
.socialNets b {
    margin:5px;
    font-size: 1.3em;
}
.social {
    display:inline-block;
    width:50px;
    height:50px;
    margin:10px 5px;
    background:url(pic/Sprite.png);
}
.social-fb {
    background-position:-10px -10px;
}
.social-fb:hover {
    background-position:-10px -85px;
}
.social-tw {
    background-position:-610px -10px;
}
.social-tw:hover {
    background-position:-610px -85px;
}
.social-in {
    background-position:-310px -10px;
}
.social-in:hover {
    background-position:-310px -85px;
}
.social-yt {
    background-position:-765px -10px;
}
.social-yt:hover {
    background-position:-765px -85px;
}
.bottom .banner {
    display:inline-block;
    background-color: #420b8b;
    color: #ff9900;
}
/*Нижняя часть главной страницы*/
/*price*/
.priceLoad {
    display:inline-block;
    width:300px;
    height:50px;
    background-color: #420b8b;
    border-radius: 20px;
    vertical-align: middle;
}
.priceLoad .excel-logo {
    display:inline-block;
    background:url(pic/excel-logo.png);
    background-size:contain;
    width:30px;
    height:30px;
}

/*price*/
/*Контакты*/
.about section div {
    display:inline-block;
    vertical-align: top;
}

.story {
    background: linear-gradient(#efefef, #1a1b48);
    width: 500px;
    padding: 10px;
    opacity: 0.95;
}
.story h2, .map, .priceLoad {
    text-align:center;
}
.story ul {
    display:inline-block;
    vertical-align: top ;
}
.story li {
    list-style-type: none;
    font-weight: bold;
}
.story li:last-child a {
    color: black;
}
.story li:last-child a:hover {
    color: blue;
}
.map {
    font-weight: bold;
    background-color:#efefef;
}
.map, .story {
    color:black;
    margin:10px 20px;
}
.map span {
    color:red;
}
/*Контакты*/

.nav-button {
    display:none;
}
@media (max-width: 768px) {

    .contacts {
        display:none;
    }
}

@media (max-width: 640px) {

    .nav, .nav a, .contacts {
        display:none;
    }
    .nav-button {
        display: flex;
        width:50px;
        height:50px;
        margin:5px;
        background: #cbc9db url(pic/proc6.png);
        background-size:cover;
        border-radius: 5px;
    }
    .nav-button:hover {
        background-color: red;
    }
}
@media (max-width: 376px) {

    h1 {
        font-size: 1.2em;
    }
    .logo {
        width:50px;
        height:50px;
        background-size: contain;
        background-position: 50% 50%;
    }
}