@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Extra+Condensed:ital,wght@0,1..1000;1,1..1000&family=Sofia+Sans:ital,wght@0,1..1000;1,1..1000&display=swap');

:root 
    {
        --blacklight: #807774;
        --blackregular:  #595351;
        --blackdark:  #1A1818;
        --whitelight: #FFFBF2;
        --whiteregular: #F2EEE6;
        --whitedark: #D9D5CE;
        --meatlight: #FFC2A3;
        --meatregular: #F0B699;
        --meatdark: #D99882;
        --redlight: #FF5242;
        --redregular: #E64A3C;
        --reddark: #BF3E32;
    }
    
a
    {
        transition: all 0.3s ease-out 0s;
    }    

body, html
    {
        margin: 0;
        padding: 0;
        min-height: 100vh;
        color: var(--blackdark);
        background-color: var(--whitelight);
        overflow-x: hidden;
        max-width: 100vw;
    }
    
body, body *
    {
        font-size: 16px;
        font-family: "Sofia Sans", serif;
        font-optical-sizing: auto;
        font-weight: normal;
        font-style: normal; 
        box-sizing: border-box;       
    }  
    
#page-container
    {
        max-width: 100vw ;
    }    
    
@media only screen and (min-width:1200px)
    {    
        #page-container
            {                
                margin: auto;
            }
    }
    
.pointer
    {
        cursor: pointer;
    }    
    
.clear
    {
        display: block;
        clear: both;
    }    
    
ul 
    {
        list-style-position: inside;
    }    
    
button
    {
        cursor: pointer;
    }    
    
.centerP
    {
        text-align: center;
    }                 
    
nav
    {
        width: 100%;
        height: 192px;    
        position: sticky;
        top:0; 
        z-index: 100;           
    }   
@media only screen and (min-width:576px)
    {
        nav
            {
                height: 256px;
                position: relative;
            }
    } 
    
footer
    {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: left top;
        background-image: url( 'img/footer-bg.jpg');
        width: 100%;
        height: 460px;
        overflow: hidden;         
    }  
@media only screen and (min-width:576px)
    {
        footer
            {
                height: 354px;
            }
    } 
    
#main
    {
        min-height: calc( 100vh - 660px ); 
    }
@media only screen and (min-width:576px)
    {
        #main
            {
                min-height: calc( 100vh - 546px ); 
                padding-bottom:  80px;
                max-width: 1168px;
                margin: auto;
            }
    } 
    
#header
    {
        background-image: url( 'img/header-bg.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: left top;      
        height: 96px;
    } 
@media only screen and (min-width:576px)
    {
        #header
            {
                height: 128px; 
            }
    }      
    
    
#menu
    {
        background-color: #000000;      
        height: 64px;
        position: relative;        
    } 
    
#menu1 , #menu2
    {
        display: none;
    }  
@media only screen and (min-width:576px) 
    {
        #menu1
            {
                display: block;
                width: calc( 50% - 110px );
                float:left;
                height:64px;
                line-height: 64px;
                text-align: right;
            }
        #menu2
            {
                display: block;
                width: calc( 50% - 110px );
                float:right;
                height:64px;
                line-height: 64px;
                text-align: left; 
            }            
    }
@media only screen and (min-width:1168px) 
    {
        #menu1
            {
                width: calc( 50% - 151px );
            }
        #menu2
            {
                width: calc( 50% - 151px ); 
            }            
    }    
    
#menuL
    {
        position: absolute;
        left: calc( 50% -  60px );
        height: 120px;
        width: 120px;
        top: -28px;
        z-index: 100;
    } 
@media only screen and (min-width:576px)
    {
        #menuL
            {
                left: calc( 50% -  96px );
                height: 192px;
                width: 192px;
                top: -66px;
            
            }         
    }
    
#menu1 a
    {
        color: #FFFFFF;
        display: inline-block;
        padding-left: 16px;
        font-weight: bold;
        text-transform: uppercase;
        text-decoration: none;
    } 
@media only screen and (min-width:1168px)
    {    
        #menu1 a
            {
                padding-left: 64px;
            }
    }    
    
#menu2 a
    {
        color: #FFFFFF;
        display: inline-block;
        padding-right: 16px;
        font-weight: bold;
        text-transform: uppercase;
        text-decoration: none;
    } 
@media only screen and (min-width:1168px)
    {    
        #menu2 a
            {
                padding-right: 64px;
            }
    }     
    
@media only screen and (min-width:576px)
    {    
        #menuM
            {
                display: none;
            }
    }        
                       
      
#menuH
    {
        width: 30px;
        top: 17px;
        position: absolute;
        right: 24px;
        cursor: pointer;
        background-image: url('img/list.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
    }
#menuH:active
    {
        background-image: url('img/list-1.svg') !important;
    }      
    
#menu a:hover, #menu a:active , #menu0 a:active , #menu0 a:hover
    {
        color: var(--meatlight);
    } 
    
    
.icon
    {
        width: 32px;
        height: 32px;
        display: inline-block;  
        transition: all 0.3s ease-out 0s;
    }  
.icon:hover, .icon:active
    {
        opacity: 0.8;
    }       
    
#social
    {
        display: none;
    } 
@media only screen and (min-width:576px)
    {    
        #social
            {
                display: block;
                float: left;
                line-height: 128px;
                padding-left: 32px;
            }
        #social a
            {
                display: inline-block;
                padding-right: 16px;
            }            
    } 

#mobileMenu
    {
        display: none;
        transition: all 0.3s ease-out 0s;
        background-color: var(--whitelight);
    }    
    
.mobileMenuA
    {
       display: block !important;
	   min-height: calc( 100% - 96px );
	   position: absolute;
	   left: 0;
	   top: 96px;
	   background-color: var(--blackdark) !important;
	   width: 100%;
    }  
@media only screen and (min-width:576px)
    {
        .mobileMenuA
            {
                display: none !important;
            }                        
    }        
    
#menuX
    {
        position: absolute;
        right: 26px;
        top: 18px;
        cursor: pointer; 
        background-image: url('img/x-lg.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center; 
        width: 30px;       
    }
#menuX:active
    {
        background-image: url('img/x-lg-1.svg') !important;
    }     
    
#menu0
    {
        padding-top: 125px;
        text-align: center;
        min-height: 100vh;
    } 
    
#socialM
    {
        text-align: center;
        padding-top: 24px;       
    }  
    
#buyMenu
    {
        display: block;
        float: right;
        line-height: 96px;
        padding-right: 32px;
    }
@media only screen and (min-width:576px)
    {
        #buyMenu
            {
                line-height: 128px
            }                
    }       
    
#buy1 , #buy2
    {
        display: flex; 
        align-items: center;
        position: relative;
        padding-left: 24px;
        color: var(--whitelight);
        font-size: 14px;
        line-height: 96px;
        float:left;   
        text-decoration: none;     
    } 
@media only screen and (min-width:576px)
    {
        #buy1 , #buy2
            {
                line-height: 128px;
            }                
    }   

#littleBasket
    {
        display: inline-block;
        padding-left: 8px;
    }         

#buy1 span , #littleBasketText
    {
        display: none;
    }
@media only screen and (min-width:576px)
    {    
        #buy1 span , #littleBasketText
            {
                padding-left: 8px;
                display: inline-block;
            } 
    }
    
#buy1 img , #buy2 img
    {
        cursor:pointer;        
    }   
    
.profileMenuButton
    {
        cursor: pointer;
    }                                     
    
#profileMenu 
    {
	   position: absolute;
	   background-color: var(--blackdark);
	   padding: 16px;
       padding-bottom: 8px;
	   text-align: left;
	   line-height: 100%;
	   top: 54px;
	   z-index: 200;
       display: none;
    } 
@media only screen and (min-width:576px)
    { 
        #profileMenu 
            {
                top: 70px;
            }                                
    }        
    
.profileMenuA
    {
        display: block !important;
    }       
    
#profileMenu a
    {
        display: block;
        padding-bottom: 16px;
        font-size: 16px;
        color: var(--whitelight);
        text-decoration: none; 
    }    
#profileMenu a:hover , #profileMenu a:active
    {
        color: var(--meatlight);
    }     
    
#menu0 a
    {
        font-size: 24px;
        line-height: 48px;
        color: var(--whitelight);
        text-decoration: none;
        display: block;
        text-transform: uppercase;
    }       
    
#footerL
    {
        width: 124px;
        display: block;
        margin: 32px auto 32px auto;
    } 
@media only screen and (min-width:576px)
    {
        #footerL
            {
                margin: 40px auto 32px auto;
            }         
    }        
    
#socialF
    {
        text-align: center;
    }
    
#socialF a
    {
        display: inline-block;
        margin:  0 8px;
    }    

#menuF
    {
        text-align: center;
    }
    
#menuF a
    {
        display: block;
        margin: 24px 0;
        color: var(--whitelight);
        text-decoration: none;
        text-align: center;
        width: auto; 
    }
@media only screen and (min-width:576px)
    { 
        #menuF a
            {
                display: inline-block;
                margin: 32px 8px;
            }                        
    } 
    
#menuF a:hover , #menuF a:active
    {
        color: var(--whitedark);    
    }           
    
#copyr
    {
        display: block;
        margin-top: 8px;
        text-align: center;
        color: var(--whitelight);
        font-size: 12px;
    }   
    
.form
    {
        width: 368px;
        display: block;
        margin: auto;
        max-width: calc( 100vw - 32px );
    } 
    
.formSection
    {
        width: calc( 100vw - 32px );
        display: block;
        margin: auto;
    }  
@media only screen and (min-width:576px)
    {
        .formSection
            {
                width: 568px;
                display: block;
                margin: auto;
            }          
    }        
    
.inputDiv label
    {
	   display: block;
	   font-size: 12px;
	   color: var(--blacklight);   
       line-height: 24px;   
    }
            
.inputDiv input[type="text"] , .inputDiv input[type="email"] , .inputDiv input[type="number"],  .inputDiv input[type="password"]
    {
        border: 1px solid var(--blackdark);
        font-size: 16px;
        padding: 0 16px;
        width: 368px;
        line-height: 36px;
    }  
    
.inputDiv button, .blackButton    
    {
        border: 1px solid var(--blackdark);
        font-size: 16px;
        padding: 0 16px;
        width: 368px;
        line-height: 36px;        
        background-color: var(--blackdark);
        color: var(--whitelight); 
        font-family: "Sofia Sans Extra Condensed", serif;
        font-weight: bold;     
        margin: 0; 
        text-transform: uppercase;         
    }
    
.inputDiv button[type="submit"]
    {
        margin: 24px 0 48px 0;    
        padding: 8px 0;
        font: normal normal 800 24px/32px Sofia Sans Extra Condensed; 
    }   
     
.inputDiv button:hover , .blackButton:hover
    {
        background-color: var(--blackregular);
        color: var(--whitelight);         
    } 
    
.inputDiv button:active , .blackButton:active
    {
        background-color: var(--whitedark);
        color: var(--blacklight);         
    } 
       
       
.blackButton 
    {
    	position: absolute;
    	top: 28px;
    	right: 16px;
    	width: auto;
    	padding: 4px;
    	line-height: 100%;
    }                
    
section , .addressP
    {
        background-color: var(--whiteregular);
        border: 1px solid var(--blackdark);
        padding: 0 16px;
        position: relative;
    }
    
section .inputDiv input[type="text"] , section .inputDiv input[type="email"] , section .inputDiv input[type="number"], section  .inputDiv input[type="password"] , .formSection  .inputDiv button
    {
        max-width:  100%;
        width: 100%;
    }             
    
h1
    {
        font-size: 40px;
        line-height: 48px;
        text-transform: uppercase;
        text-align: center;
        display: block;
        margin-bottom: 24px;
        color: var(--blackdark);
        font: normal normal 900 40px/48px Sofia Sans Extra Condensed;       
    }
    
h2
    {
        font-size: 32px;
        line-height: 40px;
        text-transform: uppercase;
        text-align: center;
        display: block;
        margin-bottom: 24px;
        color: var(--blackdark);
        font: normal normal 800 32px/40px Sofia Sans Extra Condensed;
    }           
    
p
    {
        color: var(--blacklight);
    }    
    
p a
    {
        color: var(--blackdark);
    } 
    
p a:hover
    {
        color: var(--blackregular);
    }
    
p a:active
    {
        color: var(--blacklight);
    }             
    
#rememberDiv
    {
        display: none;
    }    
    
.bigLabel
    {
        cursor: pointer;
        display: inline-block !important;
        font-size:16px !important;
    }    
    
input[type="radio"] 
    {
      appearance: none;
      -webkit-appearance: none;
      width: 32px;
      height: 32px;
      border: 1px solid var(--blackregular);
      border-radius: 50%;
      background-color: transparent;
      cursor: pointer;
      position: relative;
      margin-left: 16px;
    }

input[type="radio"]:checked::after 
    {
      content: '';
      width: 16px;
      height: 16px;
      background-color: var(--blackdark);
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
.inputDiv select
    {
    	width: 100%;
    	border: 1px solid var(--blackdark);
    	background-color: white;
    	padding: 8px 0 8px 8px;
    	color: var(--blacklight);
    }       
    
@media only screen and (min-width:576px)
    {    
        .idl
            {
                width: 168px;
                margin-bottom: 8px;
                margin-top: 0;
                display: inline-block           
            }
        .idss
            {
                width: 120px;
                margin-bottom: 8px;
                margin-top: 0;
                display: inline-block;
                padding: 0 !important;           
            }            
        .idb
            {
                width: calc( 100% - 180px);
                margin-right: 8px;
                margin-bottom: 8px;
                margin-top: 0;
                display: inline-block           
            } 
        .idbs
            {
                width: calc( 100% - 295px);
                margin-right: 8px;
                margin-bottom: 8px;
                margin-top: 0;
                display: inline-block;
                padding-right: 4px !important;
                margin-right: 0;           
            }            
        .idhl
            {
                width: calc( 50% - 6px);
                margin-bottom: 8px;
                margin-top: 0;
                display: inline-block;
                margin-right: 4px;           
            }
        .idhr
            {
                width: calc( 50% - 6px);
                margin-bottom: 8px;
                margin-top: 0;
                display: inline-block  ;
                margin-left: 4px;         
            }                                       
    }            
        
        
.inputError
    {
        color: var(--redregular);
        border: 1px solid  var(--redregular) !important;
    }        
    
#mainError 
    {
	   color: var(--redregular);
    } 
    
.addressP
    {
        padding: 16px !important;
    }       
    
.addressP .name, .addressP .address  
    {
        display: block;
        color: var(--blacklight);
        max-width: calc(100% - 50px);
    } 
    
.addressSelectA
    {
        color: var(--blackdark) !important;    
    }      
    
.addressP .name
    {
        font-weight:  bold;        
    }
    
    
    
.addressSelect
    {
        position: absolute !important;
        top: 22px;
        right: 16px;
    }        
    
#main p
    {
        color: var(--blackdark);
        padding: 0 32px;
        line-height: 24px;
        font-size: 16px;
    }
    
#main h2
    {
        text-align: left;
        padding: 0 32px;
    } 
    
#productConent
    {
        padding: 16px;
    }   
@media only screen and (min-width:576px)
    {
        #productConent
            {
                padding: 32px;
            }          
    }        
@media only screen and (min-width:576px)
    {
        #floatLeft
            {
                float: left;
                width: 40%;
            }
        #floatRight
            {
                float: right;
                width: calc(60% - 32px);
                padding-left: 32px;
            }
        #floatRight h1
            {
                text-align: left;
            }                        
    }        
    
#floatLeft img
    {
        width: 100%;
        display: block;
    } 
    
.priceD
    {
        color: var(--blackdark);
        font-family: "Sofia Sans Extra Condensed", serif;
        font-weight: bold; 
        font-size: 40px;
        padding: 32px 0 0 0;
    }         
    
.priceD span
    {
        display: inline-block;
        padding-left: 8px;
        font-weight: bold;
        color: var(--blackdark);
        font-family: "Sofia Sans Extra Condensed", serif;
    }             

.basketQ 
    {
    	border: 1px solid var(--blackregular);
    	line-height: 56px;
    	margin: 16px 0;
        height: 56px;
        box-sizing: border-box;
    }
@media only screen and (min-width:576px)
    {
        .basketQ 
            {
                width: 168px;
                display: inline-block;
                float:left;
            }                                
    }     
    
.changeQ-1 
    {
    	width: 48px;
    	display: inline-block;
    	font-size: 32px;
    	text-align: center;
    	line-height: 56px;
        cursor: pointer;
    }  
    
.changeQ1 
    {
    	width: 48px;
    	display: inline-block;
    	font-size: 32px;
    	text-align: center;
    	line-height: 56px;
        cursor: pointer;
    } 
    
.changeQIA
    {
        color: var(--blacklight) !important;
        cursor: default !important;
    }      
    
.productQ
    {
    	display: inline-block;
    	width: calc(100% - 96px);
    	text-align: center;
    	font-size: 24px;
    	line-height: 56px;
    }        
    
.basketB button
    {
        line-height:56px;
        height: 56px;
        display: block;
        width:100%;
        background-color: var(--blackdark);
        color: var(--whitelight);
        border: none;
        margin: 16px 0;
        font-family: "Sofia Sans Extra Condensed", serif;
        font-size: 24px;
        text-transform: uppercase;
    }
.basketB button:hover
    {
        background-color: var(--blackregular);
    } 
.basketB button:active
    {
        background-color: var(--whitedark);
        color: var(--blacklight);
    }       
@media only screen and (min-width:576px)
    {
        .basketB 
            {
                width: calc(100% - 194px);
                display: inline-block;
                float:right;
            }                                
    }   
    
.productsc
    {
        display: grid;
        gap: 32px;
        padding: 0 32px;
        grid-template-columns: repeat(2, 1fr);      
    } 
@media (min-width: 1024px) 
    {
        .productsc
            {
                grid-template-columns: repeat(4, 1fr);
            }
    }
    
#products h2
    {
        font-size: 40px;
        text-align: center;
        text-transform: uppercase;
        font-family: "Sofia Sans Extra Condensed", serif;
        font-weight: bold;
        margin-top: 40px !important;        
    } 
    
#products h3
    {
        font-size: 16px;
        text-align: center;
        text-transform: uppercase;
        font-family: "Sofia Sans Extra Condensed", serif;
        font-weight: bold;       
    }  
@media only screen and (min-width:576px)
    {
        #products h3
            {
                font-size: 32px;      
            }        
    }        
    
.categoryNote
    {
        text-align: center;
        padding: 24px 0;
    }          
    
.productBlock
    {
       text-decoration: none; 
    }                          
    
.productBlockImg
    {
        width: 100%;
        display: block;
    }    

    
.productBlock div
    {
        height: 120px;
        background-color: var(--whiteregular);   
        padding: 54px 8px 0 8px; 
        text-align: center;
        position: relative;            
    } 
@media (min-width: 576px) 
    {
        .productBlock div
            {   
                height: 219px;         
            }        
    }        
@media (min-width: 1024px) 
    {
        .productBlock div
            {   
                padding: 76px 8px 0 8px;           
            }        
    }        
    
.productBlock div h3
    {
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        font-size: 24px;
        line-height: 110%;
        color: var(--blackdark);
    }  
.productBlock div h3:hover
    {
        color: var(--blackregular);
    } 
.productBlock div h3:active
    {
        color: var(--blacklight);
    }          
@media (min-width: 1024px) 
    {
        .productBlock div h3
            {   
                font-size: 32px;         
            }        
    }     
    
.productLogo 
    {
        position: absolute;
        top: -40px;
        height: 60px;
        left: 50%;
        transform: translateX(-50%);       
    }     
@media (min-width: 1024px) 
    {    
        .productLogo 
            {
        	   top: -60px;
        	   height: 120px;
            }    
    }               
     
.basketProduct , .basketProductSum , .cashLink
    {
        background-color: var(--whiteregular);
        display: block;
        margin: 16px;
    }
    
.basketProductSum
    {
        font-size: 24px;
        text-align: center;
        text-transform: uppercase;
        font-family: "Sofia Sans Extra Condensed", serif;
        font-weight: bold;
        line-height: 40px;        
    }     
    
.cashLink
    {
        background-color: var(--blackdark);
        color: var(--whitelight);
        text-align: center;
        font-size: 24px;
        text-transform: uppercase;
        font-family: "Sofia Sans Extra Condensed", serif;
        font-weight: bold;
        text-decoration: none;
        line-height: 40px;        
    } 
.cashLink:hover
    {
        background-color: var(--blackregular);        
    }   
.cashLink:active
    {
        background-color: var(--whitedark);
        color: var(--blacklight);        
    }            
@media only screen and (min-width:576px)
    {
        .basketProduct , .basketProductSum , .cashLink
            {
                width: 568px;
                margin: 0 auto 40px auto;
            }                
    }        
    
.basketProduct .productPic
    {
        width: 100%;
        display: block;
    }              
@media only screen and (min-width:576px)
    {
        .basketProduct .productPic
            {
                width: 180px;
                float: left;
            }                   
    } 
    
.basketProductRight
    {
        padding: 0 8px;
    } 
@media only screen and (min-width:576px)
    {  
        .basketProductRight
            {
                float: right;
                width: calc(100% - 196px);
                padding: 0;
            }                  
    }        
    
.basketProduct h2
    {
        text-align: center !important;        
        display: block;
        font-size: 24px;
        padding: 0 !important;   
        margin: 16px 0 16px 0 !important; 
        line-height: 100% !important;
    }              
@media only screen and (min-width:576px)
    {
        .basketProduct h2
            {
                text-align: left !important;  
                       
            }         
    }   
    
.basketProduct h2 a
    {
        font-size: 24px;
        color: var(--blackdark);   
        text-transform: uppercase;
        font-family: "Sofia Sans Extra Condensed", serif;
        font-weight: bold;
        text-decoration: none;         
    }  
.basketProduct h2 a:hover
    {
        color: var(--blackregular); 
    }
.basketProduct h2 a:active
    {
        color: var(--blacklight); 
    }                 
    
.basketQ2 
    {
    	border: 1px solid var(--blackregular);
        background-color: var(--whitelight);
    	line-height: 40px;
    	margin: 16px auto;
        height: 40px;
        box-sizing: border-box;
        width: 98px;
    }
@media only screen and (min-width:576px)
    {
        .basketQ2 
            {
                margin: 16px 0;
            }                                
    }     
    
.changeQ2-1 
    {
    	width: 32px;
    	display: inline-block;
    	font-size: 24px;
    	text-align: center;
    	line-height: 40px;
        cursor: pointer;
    } 
    
.changeQ2-1 img 
    {
	   height: 27px;
	   border-top: 10px solid transparent;
	   display: inline-block;
    }     
    
.changeQ21 
    {
    	width: 32px;
    	display: inline-block;
    	font-size: 24px;
    	text-align: center;
    	line-height: 40px;
        cursor: pointer;
    } 
    
.changeQ2IA
    {
        color: var(--blacklight) !important;
        cursor: default !important;
    } 
    
.productQ2
    {
    	display: inline-block;
    	width: calc(100% - 64px);
    	text-align: center;
    	font-size: 24px;
    	line-height: 40px;
    }   
    
.basketProductPrice
    {
        text-align: center;
        font-size: 32px;
        font-family: "Sofia Sans Extra Condensed", serif;
        font-weight: bold;        
    }  
@media only screen and (min-width:576px)
    {
        .basketProductPrice
            {
                text-align: left;
            }                        
    } 
    
.basketProductPrice span
    {
        font-family: "Sofia Sans Extra Condensed", serif;
        font-weight: bold;        
        display: inline-block;
        padding-left: 4px;
        padding-bottom: 16px;
    }           
    
.basketProductSum1
    {
        float: left;
        padding: 8px 0;
        font-family: "Sofia Sans Extra Condensed", serif;
        font-weight: bold;
        font-size: 24px !important;        
    }   
    
.basketProductSum2
    {
        float: right;
        padding: 8px 0;
        font-family: "Sofia Sans Extra Condensed", serif;
        font-weight: bold;  
        font-size: 24px !important;      
    } 
    
.basketProductSum2 span
    {
        display: inline-block;
        padding-left: 4px;
        font-family: "Sofia Sans Extra Condensed", serif;
        font-weight: bold;          
    }        
    
#animalDiv
    {
        display: grid;
        gap: 32px;
        padding: 0 32px;
        grid-template-columns: repeat(2, 1fr);     
    } 
@media(min-width: 576px) 
    {
        #animalDiv 
            {
                grid-template-columns: repeat(3, 1fr);
            }
    }   
@media (min-width: 1024px) 
    {
        #animalDiv 
            {
                grid-template-columns: repeat(6, 1fr);
            }
    }
    
#animalDiv a
    {
        display: block;
        text-align: center;
        text-decoration: none;
        color: var(--blackdark);
        font-size: 24px;
        font-family: "Sofia Sans Extra Condensed", serif;
        text-transform: uppercase;               
    }
#animalDiv a:hover
    {
        color: var(--blackregular);
    }
#animalDiv a:active
    {
        color: var(--blacklight);
    }        
    
    
#animalDiv a img
    {
        display: block;
        height: 70px;
        margin: 0 auto 16px auto;
    }
@media only screen and (min-width:576px)
    {
        #animalDiv a img
            {
                height: 128px;
            }        
    }        
    
#formid66 h2
    {
        margin-top: 60px;
        padding-left: 0;
    }       
    
.inputDiv 
    {
        padding: 0 !important
    }    
    
.regSelect
    {
        display: block;
        line-height: 40px;
        padding: 8px 0;
    }
    
.regSelect input
    {
        float: right;
    }  
    
.regSelect label
    {
        color: var(--blacklight);
    }       
        
#regNow .inputDiv 
    {
        padding: 0 !important;
    } 
    
#cashSumSection
    {
        padding: 16px;
    }           

#cashSum
    {
        width: 100%;    
    }   
          
#cashSum *
    {
        color: var(--blacklight);
        font-size: 16px;
    } 
    
#cashSum td:nth-child(2) 
    {
        text-align: right; 
    }       
    
.cashSumBig
    {
        font: normal normal bold 24px/24px Sofia Sans Extra Condensed;
        font-size: 24px !important;
        color: var(--blackdark) !important;
    }  
    
#cashSum td span 
    {
        display: inline-block;
        padding-left: 4px;
        font-size: 16px !important;
    }    
    
.cashSumBig span
    {
        font: normal normal bold 24px/24px Sofia Sans Extra Condensed;
        font-size: 16px !important;
        color: var(--blackdark) !important;
        display: inline-block;
        padding-left: 4px;
    }       
    
.padding0
    {
        padding: 0 !important;
    }    
    

input[type="checkbox"] 
    {
      appearance: none;
      -webkit-appearance: none;
      width: 32px;
      height: 32px;
      padding: 0;
      border: 1px solid var(--blackregular);
      background-color: transparent;
      cursor: pointer;
      position: relative;
    }

input[type="checkbox"]:checked::after 
    {
      content: "✔";
      font-size: 24px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }   
    
.checkboxLabel
    {
        color: var(--blacklight);
        display: inline-block;
        cursor: pointer;
        display: inline-block;
        max-width: calc(100% - 50px);
        box-sizing: border-box;
    }      
    
.checkboxDiv 
    {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 16px 0;
    }
    
.checkboxDiv a
    {
        color: var(--blackdark);
    } 
.checkboxDiv a:hover
    {
        color: var(--blackregular);
    } 
.checkboxDiv a:active
    {
        color: var(--blacklight);
    }  
    
input[type="checkbox"]:checked + .checkboxLabel
    {
        color: var(--blackdark);
    }                  
    
#formid59 h2
    {
        padding-left: 0 !important;
    }    
    
.bold
    {
        font: normal normal 800 24px/32px Sofia Sans Extra Condensed; 
    }    
    
.animatedDiv 
    {
        position: absolute;
        width: 150px;
        height: 200px;
        opacity: 1;
        transition: transform 1s ease-in-out, opacity 1s ease-in-out, width 1s ease-in-out, height 1s ease-in-out;
    }   
    
.animatedDiv img
    {
        width: 100%;
    }     
    
#pstd
    {
        
    }    
    
#pst
    {
        padding: 0 !important;
        color: var(--blacklight) !important;
        cursor: pointer;
    }
    
#pst:hover
    {
        padding: 0 !important;
        color: var(--blackregular) !important;
    }      
    
.pstA
    {
        color: var(--blackdark) !important;
    } 
    
#pstt
    {
        display: none;
        color: var(--blacklight) !important;
        position: relative;
    }
    
#pstt
    {
        display: none;
        color: var(--blacklight) !important;
        position: relative;
    } 
    
#pstt input
    {
        display:inline-block;
        width:20px;
        height:20px;
        position: absolute;
    }                 
    
.noteDiv
    {
        background-color: var(--whiteregular);
        border: 1px solid var(--blackdark);
        padding: 10px !important;
    }    
    
#note 
    {
        border: 1px solid var(--blackdark);
   	    width: 100%;
        resize: none;
    	height: 70px;
        padding: 5px;
    }    
    
strong
    {
        font-weight: bold;
    }    
    
em
    {
        font-style: italic;
    }