body{
    padding:0;
    margin:0;
    font-family: 'Lobster', cursive;
    letter-spacing: 0.3px;
    /*min-height:100vh;*/
}

*,
*:before,
*:after{
    box-sizing: border-box;
}

.container{
height:100vh;
display:grid;
grid-template-rows: (auto, 1fr, auto);
grid-template-areas:"header"
                    "weather"
                    "goods"
                    "footer";

}
.header{
    grid-area:header;
    background:url("../../assets/images/banner2.png");
    background-size:100%;
    width:100%;
    height:100px;
    background-color: #57a1f5;
    text-align:center;
    color:#fff;
}

/*Погода*/

#city{
    grid-area:weather;
    display:flex;
    align-items:center;
    width:100%;
    height:80px;
    box-shadow: 2px 2px 2px black;
    font-size:12px;
    overflow: hidden;
}
.icon{
    display:flex;
    align-items: center;
}
img{
    display:block;
}
.weatherBlock{
    width:100%;
    /*overflow: hidden;*/
    animation: roller 50s infinite linear;
    animation-direction: reverse;
}
@keyframes roller{
    from{
        transform:translateX(-100%);
        
      
    }
    
    to{
        transform:translateX(+100%);
       
      
    }
}
/*Окончание погода*/

/*кнопка звонка*/

.callback-bt {
    background:#16690F;
    border:2px solid #16690F;
    border-radius:50%;
    box-shadow:0 8px 10px rgba(101, 107, 11, 0.3);
    cursor:pointer;
    height:68px;
    text-align:center;
    width:68px;
    position: fixed;
    right: 3%;
    top:1%;
    z-index:999;
    transition:.3s;
    -webkit-animation:hoverWave linear 1s infinite;
    animation:hoverWave linear 1s infinite;
}

.callback-bt .text-call{
    height:68px;
    width:68px;        
    border-radius:50%;
    position:relative;
    overflow:hidden;
}

.callback-bt .text-call span {
text-align: center;
color:#16690F;
opacity: 0;
font-size: 0;
    position:absolute;
    right: 4px;
    top: 22px;
line-height: 14px;
    font-weight: 600;
text-transform: uppercase;
transition: opacity .3s linear;
font-family: 'montserrat', Arial, Helvetica, sans-serif;
}

.callback-bt .text-call:hover span {
opacity: 1;
    font-size: 11px;
}
.callback-bt:hover i {
display:none;
}

.callback-bt:hover {
    z-index:1;
    background:#fff;
    color:transparent;
    transition:.3s;
}
.callback-bt:hover i {
    color:#d1f312;
    font-size:40px;
    transition:.3s;
}
.callback-bt i {
    color:#fff;
    font-size:34px;
    transition:.3s;
    line-height: 66px;transition: .5s ease-in-out;
}

.callback-bt i  {
animation: 1200ms ease 0s normal none 1 running shake;
    animation-iteration-count: infinite;
    -webkit-animation: 1200ms ease 0s normal none 1 running shake;
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes hoverWave {
    0% {
    box-shadow:0 8px 10px rgba(22, 105, 15, 0.815),0 0 0 0 rgba(229, 243, 100, 0.836),0 0 0 0 rgba(56,163,253,0.2)
}
40% {
    box-shadow:0 8px 10px rgba(22, 105, 15, 0.815),0 0 0 15px rgba(56,163,253,0.2),0 0 0 0 rgba(56,163,253,0.2)
}
80% {
    box-shadow:0 8px 10px rgba(22, 105, 15, 0.815),0 0 0 30px rgba(56,163,253,0),0 0 0 26.7px rgba(56,163,253,0.067)
}
100% {
    box-shadow:0 8px 10px rgba(22, 105, 15, 0.815),0 0 0 30px rgba(56,163,253,0),0 0 0 40px rgba(56,163,253,0.0)
}
}@keyframes hoverWave {
    0% {
    box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 0 rgba(56,163,253,0.2),0 0 0 0 rgba(56,163,253,0.2)
}
40% {
    box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 15px rgba(56,163,253,0.2),0 0 0 0 rgba(56,163,253,0.2)
}
80% {
    box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 30px rgba(56,163,253,0),0 0 0 26.7px rgba(56,163,253,0.067)
}
100% {
    box-shadow:0 8px 10px rgba(56,163,253,0.3),0 0 0 30px rgba(56,163,253,0),0 0 0 40px rgba(56,163,253,0.0)
}
}

/* animations icon */

@keyframes shake {
0% {
transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
}
10% {
transform: rotateZ(-30deg);
    -ms-transform: rotateZ(-30deg);
    -webkit-transform: rotateZ(-30deg);
}
20% {
transform: rotateZ(15deg);
    -ms-transform: rotateZ(15deg);
    -webkit-transform: rotateZ(15deg);
}
30% {
transform: rotateZ(-10deg);
    -ms-transform: rotateZ(-10deg);
    -webkit-transform: rotateZ(-10deg);
}
40% {
transform: rotateZ(7.5deg);
    -ms-transform: rotateZ(7.5deg);
    -webkit-transform: rotateZ(7.5deg);
}
50% {
transform: rotateZ(-6deg);
    -ms-transform: rotateZ(-6deg);
    -webkit-transform: rotateZ(-6deg);
}
60% {
transform: rotateZ(5deg);
    -ms-transform: rotateZ(5deg);
    -webkit-transform: rotateZ(5deg);
}
70% {
transform: rotateZ(-4.28571deg);
    -ms-transform: rotateZ(-4.28571deg);
    -webkit-transform: rotateZ(-4.28571deg);
}
80% {
transform: rotateZ(3.75deg);
    -ms-transform: rotateZ(3.75deg);
    -webkit-transform: rotateZ(3.75deg);
}
90% {
transform: rotateZ(-3.33333deg);
    -ms-transform: rotateZ(-3.33333deg);
    -webkit-transform: rotateZ(-3.33333deg);
}
100% {
transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
}
}

@-webkit-keyframes shake {
0% {
transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
}
10% {
transform: rotateZ(-30deg);
    -ms-transform: rotateZ(-30deg);
    -webkit-transform: rotateZ(-30deg);
}
20% {
transform: rotateZ(15deg);
    -ms-transform: rotateZ(15deg);
    -webkit-transform: rotateZ(15deg);
}
30% {
transform: rotateZ(-10deg);
    -ms-transform: rotateZ(-10deg);
    -webkit-transform: rotateZ(-10deg);
}
40% {
transform: rotateZ(7.5deg);
    -ms-transform: rotateZ(7.5deg);
    -webkit-transform: rotateZ(7.5deg);
}
50% {
transform: rotateZ(-6deg);
    -ms-transform: rotateZ(-6deg);
    -webkit-transform: rotateZ(-6deg);
}
60% {
transform: rotateZ(5deg);
    -ms-transform: rotateZ(5deg);
    -webkit-transform: rotateZ(5deg);
}
70% {
transform: rotateZ(-4.28571deg);
    -ms-transform: rotateZ(-4.28571deg);
    -webkit-transform: rotateZ(-4.28571deg);
}
80% {
transform: rotateZ(3.75deg);
    -ms-transform: rotateZ(3.75deg);
    -webkit-transform: rotateZ(3.75deg);
}
90% {
transform: rotateZ(-3.33333deg);
    -ms-transform: rotateZ(-3.33333deg);
    -webkit-transform: rotateZ(-3.33333deg);
}
100% {
transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
}
}
/* конец кнопки звонка */

/*Форма заказа звонка*/
.order{
    display:none;
    width:200px;
    height:300px;
    background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
    /*background:#21855C;*/
    margin:0 auto;
    border-radius:5px;
    position:fixed;
    z-index:3000;
    top:25%;
    right:10%;
  
}
.order_form{
    padding:10px;
}
.order_form p{
    font-size:20px;
    text-align: center;
    font-weight:bold;

}
.inputs{
   display:flex;
   flex-direction: column;
   gap:20px;
}
.btn{
   /*background:#D93A02;*/
   background:#07665E;
   border-radius:20px;
   padding:10px;
   color:#fff;
   font-size:15px;
   font-family: 'Roboto', sans-serif;
}

#close{
    color:white;
    position:absolute;
    z-index:5000;
    top:1%;
    right:2%;
}
#close:hover{
    color:black;
}
.footer{
    grid-area:footer;
    background:url("../../assets/images/banner2.png");
  background-size:100%;
    width:100%;
    height:80px;
    background-color: #57a1f5;
    color:#fff;
    margin-bottom:0;
    
}
/*#goods //изначально было так, через айди.*/
.goods{
    grid-area:goods;
    display:flex;
    justify-content: space-around;
    flex-wrap:wrap;
    /*height:80vh;*/
    /*min-height:100vh;*/
}
.single-goods{
    background-color: #57a1f5;
    width:200px;
    height:300px;
    background:url("../../assets/images/cards.png");
   /* border:1px solid black;*/
    margin:10px;
    /*float:left;*/
    font-family: 'Roboto Slab', serif;
    text-align:center;
    box-shadow:2px 2px 2px  grey;
    border-radius:5px;
    color:#fff;
    line-height:1.1;
    position:relative;
    z-index:0;
}
.single-goods:hover{
    box-shadow:5px 5px 5px grey;
}
/*.single-goods button{
    display:block;
    margin:20px auto;
}*/

a{
    font-weight:bold;
    text-decoration:none;
    font-size:19px;
    color:rgb(15, 105, 15);
}
a:hover{
    text-shadow:0.2px 0.2px 0.2px darkgreen;
}
.add-to-cart{
    background-color:yellow;
    color:#09376b;
    font-size:14px;
}

a.tel{
    color:#fff;
    font-size:15px;
    letter-spacing:5px;
}
a.phone{
    font-size:14px;
}
.contacts{
    position:absolute;
    bottom:-5px;
    z-index:1;
}
@media(max-width:1126px){
    .footer{
    font-size:14px;
    }
}

@media(max-width:768px){
    .header{
        font-size:12px;
    }
    .footer{
        height:120px;
        font-size:10px;
        display:flex;
        flex-direction:column;
        justify-content: space-between;
        align-items: center;
    }
  
}