* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    --site-color: #074887;
    --left-color: #f5f5f5;
    --bottom-color: #eeeeee;
    --border-color: #eeeeee;
}


html {
    font: 11pt 'Helvetica';
    
    line-height: 1.8em;
    text-rendering: optimizeLegibility;
}

body {
    display: grid;
    grid-template-areas:
    'header article'
    'nav article'
    'footer legal';
    grid-template-rows: auto 1fr;
    grid-template-columns: 380px 1fr;
    grid-gap: 0px;
    height: 100vh;
    margin: 0;
    #background: url("/i/images/tesla.jpg") no-repeat;
}

ul, ol {
    padding-bottom: 20px;
    padding-left: 20px;
}

a {
    color: var(--site-color);
    text-decoration: none;
    border-bottom: 1px solid;
}

    a:hover {
        color: #000000;
        text-decoration: none;
        border-bottom: none;
    }



#pageHeader {
    grid-area: header;
    border-right: 1px inset var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: var(--left-color);
    padding: 0px;
    padding-left: 20px;
    padding-right: 20px;
}
#pageFooter {
    grid-area: footer;
    border-top: 1px solid lightgrey;
    border-right: 1px inset var(--border-color);
    background: var(--bottom-color);
    padding:10px;
    display: flex; 
    align-items: center; 
    flex-flow: row;  
    justify-content:center;
}

#unicart
{
    padding: 0px;
    padding-top: 0px;
}

#pageLegal {
    grid-area: legal;
    border-top:1px solid lightgrey;
    background: var(--bottom-color);
    font-size: 8pt;
    padding:10px;
    display: flex; 
    align-items: center; 
    flex-flow: row;  
    justify-content:center;
}

#mainArticle {
    grid-area: article;
    overflow: auto;
    background: #ffffff;
    padding: 60px;
    padding-top: 40px;
    border-left: 1px solid lightgrey;
}
    #mainArticle ul {
        padding-left: 40px;
    }
	
#mainArticle2 {
    grid-area: article;
    overflow: auto;
    background: #ffffff;
    padding: 60px;
    padding-top: 40px;
    border-left: 1px solid lightgrey;
}
    #mainArticle2 ul {
        padding-left: 40px;
    }

#mainNav {
    grid-area: nav;
    overflow: auto;
    #transform: scaleX(-1);
    border-right:1px inset var(--border-color);
    #background-image: linear-gradient(to bottom, rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.9) 50%,rgba(255,255,255,0.8) 100%);
    background-color: rgba(255,255,255, 0.9);
    
    #padding: 20px;
}

    .nav {
        text-transform: uppercase;
        #transform: scaleX(-1);
        list-style-type: none;
        padding: 0px;
    }

    .nav li {
        list-style-type: none;
        padding: 0px;
    }

    .nav a {
        #text-shadow: 0px 0px 1px #fff;
        #background: #ffffff;
        display: block;
        padding: 10px;
        padding-left: 40px;
        text-decoration: none;
        font-size: 10pt;
        font-weight: bold;
        border-bottom: 1px solid lightgrey;
    }
    .nav li:last-of-type a {
        border-bottom: none;
    }
    
         .nav li a:hover {
            color: #ffffff;
            background: var(--site-color);
            text-decoration: none;
            #border-bottom: 1px solid;
            transition: 0.3s;
        }

    .yoarehere {
        background: var(--site-color) !important;
        color: #ffffff;
    }


/* Наш CSS */



.logo {
    width: 100%;
    height: auto;
}


    .not-underline {
        text-decoration: none;
        border-bottom: none;
    }
    
        
    
/* */ 

h1, h2 {
    padding-top: 0em;
    padding-bottom: 1em;
    padding-left: 10px;
    color: var(--site-color);
}

h2 {
    font-size: 12pt;
}

p {
    text-indent: 0em;
    padding-bottom: 1em;
    padding-left: 20px;
}

figure {
    //max-width: 240px;
    max-height: none;
    float: left;
    padding: 0px;
    padding-right: 20px;
    padding-bottom: 20px;
    text-align: center;
}

.floatleft {
    max-width: 100%;
    max-height: 240px;
}

figcaption {
    font-style: italic;
    font-size: 0.8em;
}

.price_table {
    width: 100%;
    border: 1px solid var(--border-color);
    padding: 20px;
}

input, option {
    padding: 5px;
}

select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 10px;
}

  /* Таблица услуг */
  .uslugi-table {border-spacing: 1px; background: #cccccc; text-shadow: none;}
  .uslugi-table tr{ background: #ffffff; font-weight: bold; color: #cccccc; text-align: left;}
  .uslugi-table td{ background: #ffffff; padding: 10px; font-weight: normal; color: #000000;}
  .uslugi-table th{ background: #eeeeee; padding: 10px; color: #000000; }

  /* breadcrumbs */
.breadcrumbs {
    border: 0px;
    font: 11pt Helvetica;
    color: #000000;
    background: #ffffff;
    padding: 10px;
    text-decoration: none;
    border-bottom: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


  /* Каталог товаров/статей */
.tovar_td {
    display: flex;
    flex-flow: row nowrap;
    vertical-align: top;
    background: white;
}

    .tovar_image_div {
        align-items: center;
        justify-content: center;
        padding: 5px 5px 5px 5px;
        background: white;
        display: flex;
        flex-flow: column nowrap;
    }
        .t_pic {
            align-self: center;
            height: auto;
            width: auto;
            max-width: 225px;
            max-height: 225px;
        }

        .tovar_image_div_small {
            align-items: center;
            justify-content: center;
            padding: 5px 5px 5px 5px;
            background: white;
            display: flex;
            flex-flow: row nowrap;
        }
            .t_small_pic {
                align-self: center;
                height: auto;
                width: auto;
                max-width: 64px;
                max-height: 64px;
            }

    .tovar_price_div {
        align-self: center;
        padding: 40px;
        text-align: center;
    }
        .tovar_price_span {
            font-size: 18pt;
            font-weight: bold;
            color: #074887;
        }

    
    .learn_time {
        font: 14pt Helvetica;
        font-weight: bold;
        clear: both;
    }

    .main_div_1 {
        display: flex;
        flex-direction: row;
        align-items: center;
        border: 0px;
        border-bottom: 1px solid lightgrey;
        border-top: 0px;
    }
    .main_div_3{
        background: #ffffff;
        height:auto;
        align-self: center;
        padding: 20px;
        border: 0px;
    }

/* Экраны среднего размера */
    @media screen and (max-width: 1024px) {
        body {
            display: grid;
            grid-template-areas:
            'header'
            'nav'
            'footer'
            'article'
            'legal';
            grid-template-rows: auto;
            grid-template-columns: auto;
            grid-gap: 0px;
            height: auto;
        }
        #mainArticle {
            padding: 40px;
        }
        .tovar_td {
            flex-flow: column nowrap;
        }
        .tovar_image_div {
            flex-flow: column nowrap;
        }

        /* добавляем горизонтальную прокрутку ко всем таблицам на узких экранах*/
        table {
            overflow-x: auto;
            display: block;
        }

        .main_div_1 {
            flex-direction: column;
        }
        .main_div_3 {
            border: 0px;
            padding-left: 0px;
            padding-right: 0px;
        }
 
    }
 


a.tarif {
    color: var(--site-color);
    text-decoration: none;
    border-bottom: 1px none;
    font: 14pt 'Helvetica';
}
    
    a.tarif:hover {
        color: #000000;
        text-decoration: none;
        border-bottom: none;
    }

.fotorama__html div,
.fotorama__html a {
    display: block;
    height: 100%;
    /* Transparent links are not clickable in IE,
        but non-existent background fixes this.
        (Put an empty 1×1 image here to avoid
        errors in console.) */
    background: url(1px.gif);
}

.whatsapp-button {
    position: fixed;
    right: 13px;
    bottom: 90px;
    transform: translate(-50%, -50%);
    background: #25D366; /*цвет кнопки*/
    border-radius: 50%;
    width: 55px; /*ширина кнопки*/
    height: 55px; /*высота кнопки*/
    color: #fff;
    text-align: center;
    line-height: 53px; /*центровка иконки в кнопке*/
    font-size: 35px; /*размер иконки*/
    z-index: 9999;
}
.whatsapp-button a {
    color: #fff;
}
.whatsapp-button:before,
.whatsapp-button:after {
    content: " ";
    display: block;
    position: absolute;
    border: 50%;
    border: 1px solid #25D366; /*цвет анимированных волн от кнопки*/
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    #animation: animate 1.5s linear infinite;
    opacity: 0;
    backface-visibility: hidden; 
}
 
.whatsapp-button:after{
    animation-delay: .5s;
}

@media (max-width : 800px) {  
.whatsapp-button {   
    bottom: 5px; /*отступ кнопки снизу от экрана*/
    left: 70px; /*отступ кнопки слева от экрана(right - справа)*/
  }
}
 
@keyframes animate
{
    0%
    {
        transform: scale(0.5);
        opacity: 0;
    }
    50%
    {
        opacity: 1;
    }
    100%
    {
        transform: scale(1.2);
        opacity: 0;
    }
}

#pageHeader a {
    color: var(--site-color);
    text-decoration: none;
    border-bottom: none;
    background: none;
}

a:not(#pageHeader a) {
    border-bottom: 1px solid;
}

.form-wrapper{
	border-top:5px solid #ff6600;
	border-bottom:5px solid #ff6600;
	background-color:#f1f1f1;
	text-align: center;
	
    #width:800px;
	padding: 20px 20px 20px 20px;
}
.form-wrapper input{
	margin-right: 10px;
}
.form-wrapper input::placeholder{
	color: black;
}
.form-wrapper ::-webkit-input-placeholder{
	color: black;
}
.form-wrapper input[type='submit']{
	background-color:#ff6600;
	color: white;
	font-weight: bolder;
	border: 1px solid orange;
	padding: 10px 20px;
}
.form-wrapper h2{
	padding: 0;
}
.form-wrapper p{
	padding: 0;
	margin-bottom: 20px;
}
.form-wrapper form{
	#display: flex;
	#justify-content:flex-start;
}
.orange-sale{
	font-weight: bold;
	color:#ff6600 ;
}
@media (max-width:1000px){
	.form-wrapper{
   text-align: center;
	#width:80%;

}
.form-wrapper form{
	flex-direction:column;
	align-items: center;
}
.form-wrapper input{
	margin-bottom: 10px;
	max-width:50%;
}
}
@media (max-width:600px){
	.form-wrapper input{
	margin-bottom: 10px;
	max-width:100%;
}
}
@media (max-width:300px){
	.form-wrapper input{
	margin-bottom: 10px;
	max-width:100%;
	font-size:8px;
}
}