/*--Common Elements--------------------------------------------------------*/

:root {
    --custom-clientprimary: #2a2925;
    --custom-clientsecondary: #e1e1e1;    
    --custom-clienttertiary: #58554c; 
    --custom-clientwhite: #ffffff;  
    --custom-clientblack: #000000;  
}

.homepagecontainer { 
    display: flex;
    align-content: center;  
    justify-content: center;
    flex-direction: column;
    max-width: 1920px;
    width: 100%;
    height: auto;
    margin: 35px auto 0;
    padding: 0 1em;
}

.homepageimage {    
    width: 100%;
    height: auto;   
    padding-bottom: 10px;                
}

.image2up {
    max-width: 960px;
    width: 100%;
    height: auto;        
}

.image2uprounded {
    width: 100%;
    height: auto;
    border-radius: 15px;
}

.homepagebuttonwhite {   
    display: flex;      
    align-items: center;
    justify-content: center;  
    text-decoration: none;  
    max-width: 250px;    
    height: auto;     
    padding: 20px 20px;  
    text-align: center;
    line-height: 1.2;      
    text-transform: uppercase;         
    background-color: var(--custom-clientwhite);    
    color: var(--custom-clientprimary);
}

.homepagebuttonwhite:hover {    
    transition: background-color 0.3s ease;        
    background-color: var(--custom-clientsecondary);    
}

.homepagebuttondark {   
    display: flex;      
    align-items: center;
    justify-content: center;  
    text-decoration: none;  
    max-width: 250px;    
    height: auto;     
    padding: 20px 20px;  
    text-align: center;
    line-height: 1.2;      
    text-transform: uppercase;  
    color: var(--custom-clientwhite);       
    background-color: var(--custom-clientprimary);           
}

.homepagebuttondark:hover {    
    transition: background-color 0.3s ease;        
    background-color: var(--custom-clienttertiary);    
}

.button_large {      
    max-width: 750px;  
    padding: 20px 40px;
}

/*--Hero Image-----------------------------------------------------------*/

.homepagehero { 
    display: flex;   
    align-content: center;    
    text-decoration: none;       
    width: 100%;
    height: auto;   
    position: relative;        
}

.homepageherobackground {                    
    width: 100%;       
    height: auto;
    margin-top: 15px;       
}

.homepageherocopy {
    max-width: 600px; 
    z-index: 2; 
    position: absolute; 
    line-height: 1.2;
    padding-left: 6em; 
    bottom: 20%;    
    color: var(--custom-clientwhite);    
 }

.homepagehero  h1 {    
    letter-spacing: -0.25px;
    color: var(--custom-clientwhite);
}

.homepagehero  p {
    padding: 20px 0 35px; 
    font-weight: 300; 
    font-size: 1.25em;
}

.homepageherobutton {
    display: flex;      
    align-items: center;
    justify-content: center;  
    text-decoration: none;  
    width: 350px;    
    height: auto;     
    padding: 20px 20px;  
    text-align: center;
    line-height: 1.2;      
    text-transform: uppercase;         
    background-color: var(--custom-clientprimary);    
    color: var(--custom-clientwhite);
}  

.homepageherobutton:hover {    
    transition: background-color 0.3s ease;        
    background-color: var(--custom-clienttertiary);    
}

/*--Hero Image Center Copy----------------------------------------------*/

.centercopyhero {
    display: flex;   
    align-items: center; 
    justify-content: center;   
    flex-direction: column;
    text-decoration: none;        
    width: 100%;
    height: auto;   
    position: relative;   
}

.centerherocopy {   
    display: flex;   
    align-items: center;  
    justify-content: center;  
    flex-direction: column;   
    text-transform: uppercase;  
    text-align: center;         
    padding: 0 2em;  
    position: absolute;
    z-index: 2;                
 }

.centerherocopy h1 {
    font-size: 6.5em;
    line-height: 1.2;
    padding-bottom: 10px;
    color: var(--custom-clientwhite);   
}

.centerherocopy h2 {
    font-size: 2em;
    line-height: 1.2;
    color: var(--custom-clientwhite);   
}

.centerherocopy p {
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1.2;
    padding-bottom: 2em;
    color: var(--custom-clientwhite);   
}

/*--Promotions------------------------------------------------------------*/

.promohero { 
    display: flex;   
    align-content: center;    
    text-decoration: none;       
    width: 100%;
    height: auto;     
}

/*--Callouts-----------------------------------------------------------*/

.homepagecallouts {    
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); 
    gap: 5px;   
    width: 100%;      
    padding: 5px 0;      
}  

.hompagecalloutscontent {
    position: relative;   
    text-align: center; 
}

.homepagecalloutscopy {      
    position: absolute;   
    bottom: 7%;
    left: 7%;
    
}

.homepagecalloutscopy h2 {
    font-size: 45px;    
    text-decoration: none;
    color: var(--custom-clientwhite);
   /* text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);*/
}

/*--Callouts Center Button------------------------------------------*/

.calloutbutton {
    display: flex;      
    align-items: center;
    justify-content: center;  
    text-decoration: none;  
    width: 350px;    
    height: auto;     
    padding: 20px 20px;  
    text-align: center;
    line-height: 1.2;      
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;         
    background-color: var(--custom-clientprimary);    
    color: var(--custom-clientwhite);
    cursor: pointer;
}  

.calloutbutton:hover {    
    transition: background-color 0.3s ease;        
    background-color: var(--custom-clienttertiary);    
}

/*--4up-----------------------------------------------------------*/

.homepage4upcontainer { 
    display: flex;
    align-content: center;  
    justify-content: center;
    flex-direction: column;   
    width: 100%;
    height: auto;
    margin: 5% auto;
    padding: 0 6em;        
}

.homepage4upcontainer h2 {
    margin-bottom: 0.5em;
}

.homepage4up {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
    gap: 10px;     
    width: 100%;  
    height: auto;                
}

.homepage4upimage {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    background-position: center;
    background-size: cover;
    text-decoration: underline;    
    width: 100%;
    height: auto;     
    border-radius: 15px;   
}

.homepage4upimage p {
    text-transform: uppercase;                       
    padding: 100% 1em 1em;
    color: var(--custom-clientprimary);  
}

/*--Partner-----------------------------------------------------------*/

.partner {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4em;        
    margin: 2% auto 3%;  
    max-width: 900px;   
}

.partner_header h2{
    text-transform: uppercase;
    font-size: 4em;
    text-align: right;
    line-height: 1.2;
    font-weight: 700;
}

.partner_content {
    display: flex;    
    flex-direction: column; 
    align-items: flex-start;
    text-align: left;       
}

.partner_content h4 {
    font-weight: 700;    
}

.partner_content p {
    padding-bottom: 1em;
}

.reveal_hidden {   
    opacity: 0;
    transform: translateY(20px);
    transition: 1.5s ease;
}

.visible {
    opacity: 1;
    transform: translateY(0);    
}

.benefits_button {   
    display: flex;      
    align-items: center;
    justify-content: center;  
    text-decoration: none;      
    min-width: 250px;           
    height: auto;     
    padding: 20px 20px;  
    text-align: center;    
    line-height: 1.2;  
    margin-top: 1em;    
    text-transform: uppercase;  
    color: var(--custom-clientwhite);       
    background-color: var(--custom-clientprimary);           
}

.benefits_button:hover {    
    transition: background-color 0.3s ease;        
    background-color: var(--custom-clienttertiary);    
}

/*--Tradeshow-----------------------------------------------------------*/

.tradeshowblock {
    display: flex;      
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;   
    margin: 4em auto 3em;     
}

.tradeshowblock h2 {
    font-weight: 600; 
    padding-bottom: 1em;
}

.tradeshowgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4em;
    margin: 2% auto 3%;  
    max-width: 1300px; 
}

.tradeshowgrid-item {
    display: flex;      
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;    
}

.tradeshowgrid-item img {
    width: 100%;
    height: auto;    
    padding-bottom: 2em;
}

.tradeshowgrid-item h3 {        
    font-size: 1.5em;
}

.tradeshowbutton {   
    display: flex;      
    align-items: center;
    justify-content: center;  
    text-decoration: none;  
    width: 70%;    
    height: auto;  
    margin-top: 20px;   
    padding: 15px 20px;  
    text-align: center;
    line-height: 1.2;      
    text-transform: uppercase;  
    color: var(--custom-clientwhite);       
    background-color: var(--custom-clientprimary);           
}

/*--Story-----------------------------------------------------------*/

.homepagestory2up {
    display: grid; 
    grid-template-columns: 70% 30%; 
    gap: 5px; 
    margin-top: 5px;   
}

.story2upimage {     
    background-position: center;
    background-size: cover;                
    text-decoration: none;
    min-height: 660px;
    border-radius: 15px;
}

.story2upimage p {
    max-width: 550px;
    height: auto;
    font-weight: 600;
    font-size: 2em;
    line-height: 1.2;
    color: var(--custom-clientwhite); 
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);    
    margin: 1.5em 1em;     
}

.story2upcopycontainer {
    display: flex;
    align-items: center;
    justify-content: center; 
    max-width: 99%;      
    border-radius: 15px;    
    background-color: var(--custom-clientsecondary);    
}

.story2upcopy {
    display: flex;    
    flex-direction: column;              
    padding: 2em;
    text-align: left;
    margin: 1em auto auto 1em; 
}

.story2upcopy h3 {
    font-size: 2em;  
    font-weight: 600;      
    color: var(--custom-clientprimary);
}

.story2upcopy p {
    padding: 20px 0px 40px;    
    color: var(--custom-clientprimary); 
}

/*--2Up-----------------------------------------------------------*/

.homepage2upcontainter {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 5px;
    margin: 5px auto 5px;
}

.content2up {
    display: flex;
    align-items: center;
    justify-content: center;       
    max-width: 960px;
    width: 100%;
    max-height: 960px;
    height: auto;
    border-radius: 15px;
    background-color: var(--custom-clientprimary);     
}

.copy2up {    
    display: flex;
    align-items: left;
    justify-content: space-around;
    flex-direction: column;              
    padding: 2em;
    text-align: left;  
    max-width: 750px;   
}

.copy2up h3 {    
    font-size: 2.2em;           
    color: var(--custom-clientwhite);
}

.copy2up p {
    padding: 20px 0px 40px;    
    color: var(--custom-clientwhite);   
}

/*--Social-----------------------------------------------------------*/

.homepagesocial {
    display: flex;     
    align-items: center; 
    justify-content: center; 
    width: 100%;    
    height: auto;
    position: relative;   
    border-radius: 15px;
    overflow: hidden;    
}

.socialbutton {
    position: absolute; 
    z-index: 2;
    margin: auto;
    bottom: 10%;
}

/*--Book Appointment-----------------------------------------------------------*/

.showroomimage {  
    display: flex;
    align-items: center;   
    background-image: url("https://web.giftcraft.net/icontact/umbraco/bookappointment_1920x1200.jpg");
    background-position: center;
    background-size: cover;                
    text-decoration: none;                        
    min-height: 1200px;
    border-radius: 15px;
}

.showroomform {
    width: 750px;
    height: auto;
    padding: 20px; 
    margin-left: 40px;   
    background-color: var(--custom-clientwhite); 
    border-radius: 15px;
}

.showroomform h2{
    font-size: 2em;
    padding-bottom: 20px;
}

/*--Signup Form-----------------------------------------------------------*/

.signupimage {  
    display: flex;
    justify-content: center;
    align-items: center;   
    position: relative;
    background-image: url("https://web.giftcraft.net/icontact/umbraco/signup_image_1920x800.jpg");
    background-position: center;
    background-size: cover;                
    text-decoration: none;                        
    min-height: 900px;
    border-radius: 15px;
}

.signupform {
    display: flex;
    justify-content: center;
    align-items: center;   
    position: absolute;    
    left: 8%;
    max-width: 650px;
    height: auto;    
    padding: 20px;
    border-radius: 15px;
    background-color: rgba(42, 41, 37, 0.6);
}

/*--Form Submitted-----------------------------------------------------------*/

.submittedblock {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    padding: 20px;
}

.submittedimage {
    max-width: 440px;
    width: 100%;
    height: auto;
    border-radius: 15px;
}

.submittedcopy {
    padding-top: 40px;
    text-align: center;
}

/*--Contest Page-----------------------------------------------------------*/

.contesthero { 
    display: flex;       
    flex-direction: column;    
    text-decoration: none;            
    max-width: 1600px;
    width: 100%;
    height: 600px;  
    margin: auto;      
    position: relative;                
    background-size: cover;
    background-position: right center;
    border-radius: 15px;
    background-image: url('https://web.giftcraft.net/icontact/umbraco/tradeshowcontest_hero_desktop_1920x600.jpg');
}

.contestherocopy {   
    position: absolute;          
    line-height: 1.2;
    left: 5%; 
    bottom: 10%;    
    color: var(--custom-clientwhite);     
}

.contestherocopy h1 {
    font-size: 7em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--custom-clientwhite);  
}

.contestherocopy h3{
    color: var(--custom-clientwhite);  
}

.contestawardscontainer { 
    display: flex;
    align-content: center;  
    justify-content: center;
    flex-direction: column; 
    text-align: center;  
    max-width: 1200px;
    width: 100%;
    height: auto;
    margin: 7% auto 3%;        
}

.contestawardscontainer h2{ 
    font-size: 3.5em;
    line-height: 1.2;
}

.contestawards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 3em 10px;    
    width: 100%;
}

.contest_grid-item {    
    display: flex;
    align-items: center;
    justify-content: center;  
    width: 100%;  
    height: auto;
    text-align: center;    
    border-radius: 15px;
    height: 600px;
}

.contest_griditem_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3em 1em;
}

.contest_griditem_content h3 {
    color: var(--custom-clientwhite);  
}

.contest_griditem_content img {
    max-width: 90%;
    height: auto;
    margin-top: 10px;
}

.contestfaq {
    display: flex;
    align-content: center;  
    justify-content: center;
    flex-direction: column; 
    text-align: left;  
    max-width: 1400px;
    width: 100%;
    height: auto;
    margin: 5% auto;   
}

.contestfaq h3 {
    font-size: 1.5em;
}

.contanetfaq_content {
    padding: 2em;
    margin: 5px 0;
    border-radius: 15px;
    width: 100%;
    height: auto;
}

.content_background_a{    
    background-color: #f1f1f1;
}

.content_background_b{
    color: var(--custom-clientwhite);
    background-color: var(--custom-clientprimary);   
}

.content_background_b h3{
    color: var(--custom-clientwhite);
}

/*--Category Banner-----------------------------------------------------------*/

.clientcategorybanner { 
    display: flex;       
    flex-direction: column;    
    text-decoration: none;            
    max-width: 1920px;
    width: 100%;
    height: 540px;  
    margin: auto;      
    position: relative;                
    background-size: cover;
    background-position: right center;
    border-radius: 15px;    
}

.clientcategorybannercopy {   
    position: absolute;          
    line-height: 1.2;
    left: 5%; 
    bottom: 10%;    
    color: var(--custom-clientwhite);     
}

.clientcategorybannercopy h1 {
    font-size: 7em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--custom-clientwhite);  
}

.clientcategorybannercopy h3{
    color: var(--custom-clientwhite);  
}

/*--Tables------------------------------------------------------------------*/

.clienttable {
    border-spacing: 35px;
    margin-top: 3em;    
}

.clienttable td {
    padding: 15px;
}

.clienttable tr:nth-child(odd) {
    background-color: var(--custom-clientsecondary);
}

/*--Media Queries-----------------------------------------------------------*/

@media screen and (min-width: 840px) { 

    /*--Hero Image--------------------------*/

    .homepageheroimagedesktop {             
           width: 100%;
           height: auto;
           border-radius: 15px;  
       }
       
       .homepageheroimagemobile {
           display: none;
       }

       .promoheroimagedesktop {             
        width: 100%;
        height: auto;
        border-radius: 15px;  
    }
    
    .promoheroimagemobile {
        display: none;
    }
}

@media screen and (max-width: 840px) { 

    /*--Hero Image--------------------------*/

    .homepageheroimagemobile {                    
        width: 100%;
        height: auto;
        border-radius: 15px;  
    }

    .homepageheroimagedesktop {
        display: none;        
    }   

    .homepagehero {
        align-items: center;
        justify-content: center;
    }

    .homepageherocopy {                       
        bottom: 5%; 
        text-align: center;         
        padding: 0px 10px;   
    }  

    .homepageherocopy p {
        padding: 15px 0;
        line-height: 1.2;
    }

    .homepageherobutton {
        font-size: 1em;
        margin: auto;
    }

    .hdgridrow1 {
        grid-row: 1;
    }

    .hdgridrow2 {
        grid-row: 2;
    }

    .hdgridrow3 {
        grid-row: 3;
    }   

    /*--Hero Image Center Copy----------------------------------------------*/

    .centerherocopy h1 {
        font-size: 2.5em;
    }

    .centerherocopy h2 {
        font-size: 1em;
    }

    .centerherocopy p {
        font-size: 0.75em;
    }

    .button_large {      
        max-width: auto;  
        padding: 20px 20px;
    }
    
    /*Promotions--------------------------*/

    .promoheroimagemobile {                    
        width: 100%;
        height: auto;
        border-radius: 15px;  
    }

    .promoheroimagedesktop {
        display: none;        
    }   

    .promohero {
        align-items: center;
        justify-content: center;
    }

    .promofineprint {
        padding: 0 15px;          
        text-align: center;
        bottom: 1%;  
        right: initial;  
    }

    .promofineprint p {
        font-size: 12px;    
    }

    /*--Callouts--------------------------*/

    .homepagecallouts {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));               
    }   

    .homepagecalloutscopy h2 {
        font-size: 35px;        
    }

    /*--4up--------------------------*/

    .homepage4upcontainer {
        padding: 0;
    }

    .homepage4up { 
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);                     
    }

    /*--Partner------------------------*/

    .partner {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2em; 
        margin: 1em auto 2em;
        width: 90%;
    }

    .partner_header h2{      
        font-size: 2.5em;  
        text-align: center;       
    }   

    .partner_content { 
        text-align: center;           
        align-items: center;     
    }    

    /*--Tradeshow----------------------*/

    .tradeshowgrid {        
        grid-template-columns: 1fr;        
    }

    /*--Story--------------------------*/

    .homepagestory2up {
        display: grid; 
        grid-template-columns: 1fr; 
        grid-template-rows: repeat(2, 1fr);                      
    }  

    .story2upimage {          
        min-height: 450px;
    }

    .story2upimage p {          
        margin: 1em;    
    }

    .story2upcopycontainer {  
        max-width: 100%;      
        min-height: 450px;
        padding: 0 0 1em;       
    }
    
    /*--2up--------------------------*/

    .homepage2upcontainter {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

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

    .content2up {        
        height: auto;       
    } 

    .gridrow2up {
        grid-row: 3;
    }
    
    /*--Showroom--------------------------*/

    .showroomform {
        width: auto;
        height: auto;
        min-width: 400px;        
        padding: 20px; 
        margin: 0;
    }

    /*--Signup Form-----------------------------------------------------------*/

    .signupimage {                                
        min-height: 870px;       
    }

    .signupform {
        left: 0; 
        width: 100%;
        height: auto;
        padding: 10px;       
    }

    /*--Contest Page-----------------------------------------------------------*/

    .contesthero { 
        align-items: center;  
        justify-content: center;
        text-align: center; 
        background-image: url('https://web.giftcraft.net/icontact/umbraco/tradeshowcontest_hero_mobile_840x600.jpg');
    }

    .contestherocopy {
        position: static;        
        left: unset;        
        bottom: unset;   
        width: 450px;                    
        padding: 10px;        
    }

    .contestherocopy h1 {        
        overflow-wrap: break-word;
        font-size: 4em;
    }

    .contestawardscontainer h2{ 
        padding-top: 1em;
        font-size: 2.5em;
        line-height: 1;
    }

    .contestawards {
        grid-template-columns: 1fr;        
    }

    .contest_grid-item {                
        width: 100%;            
        height: auto;        
    }

    .contest_griditem_content img {
        max-width: 70%;
    }

}