﻿* {

    margin:0px;
    padding:0px;
    font-family:'Fauna One', sans-serif;
    font-size:15px;
    color:#000;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
}
#frame {
    /*height: 999px;
    width: 999px;*/
    height: 540px;
    width: 540px;
    margin-left: auto;
    margin-right: auto;
    background: white;
    
    zborder:1px solid black;
}
#navigation{


}
#mainsection {
    
    max-height: 540px;
    width: auto;
    zmargin-top:-10%;
   
}
    #mainsection div {
        display: flex;
        flex-direction: row;
       
    }
        #mainsection div div {
            width: 180px;
            height: 180px;
            background: white;
        }
#FreeGraphic, #Decorative, #GetRed, #Corporate, #LogoandSign, #Typo, #TheBrand, #Empty, #Contact {
    width: 180px;
    height: 180px;
    background: white; 
    cursor: pointer;
    flex-direction: column;
}
#FreeGraphic, #Decorative, #GetRed, #Corporate, #LogoandSign, #Typo, #TheBrand, #Empty, #Contact {
    cursor: pointer;
    flex-direction: column;
}

#mainsection div div#FreeGraphic {
    background-image: url('../img/free_graphic.png');
    background-size: cover;
    
}
    #mainsection div div#FreeGraphic:hover {
        background-image: url('../img/free_graphic_green.png');
        background-size: cover;
    }
#mainsection div div#Decorative {
    background-image: url('../img/decorative.png');
    background-size: cover;
}
    #mainsection div div#Decorative:hover {
        background-image: url('../img/decorative_green.png');
        background-size: cover;
    }
#mainsection div div#GetRed, #mainsection div div#GetRedMobile {
    background-image: url('../img/get_red.png');
    background-size: cover;
}
    #mainsection div div#GetRed:hover, #mainsection div div#GetRedMobile:hover {
        background-image: url('../img/get_red_green.png');
        background-size: cover;
    }
#mainsection div div#Corporate {
    background-image: url('../img/corporate.png');
    background-size: cover;
}
    #mainsection div div#Corporate:hover {
        background-image: url('../img/corporate_green.png');
        background-size: cover;
    }
#mainsection div div#LogoandSign, #mainsection div div#LogoandSignMobile {
    background-image: url('../img/logo_and_sign.png');
    background-size: cover;
}
    #mainsection div div#LogoandSign:hover, #mainsection div div#LogoandSignMobile:hover {
        background-image: url('../img/logo_and_sign_green.png');
        background-size: cover;
    }
#mainsection div div#Typo {
    background-image: url('../img/typo.png');
    background-size: cover;
}
    #mainsection div div#Typo:hover {
        background-image: url('../img/typo_green.png');
        background-size: cover;
    }
#mainsection div div#TheBrand, #mainsection div div#TheBrandMobile {
    background-image: url('../img/the_brand.png');
    background-size: cover;
}
    #mainsection div div#TheBrand:hover, #mainsection div div#TheBrandMobile:hover {
        background-image: url('../img/the_brand_green.png');
        background-size: cover;
    }
#mainsection div div#Empty {
    background: none;
    height: 180px;
    width: 180px;
}
div#Empty a {
    cursor: pointer;
}

    div#Empty a img {
        margin-left: auto;
        margin-right: auto;
        min-height: 180px;
        text-align: center;
        margin-top: 0px;
        height: 180px;
        width: 180px;
        cursor: pointer;
    }
#mainsection div div#Contact {
    background-image: url('../img/contact.png');
    background-size: cover;
}
    #mainsection div div#Contact:hover {
        background-image: url('../img/contact_green.png');
        background-size: cover;
    }
#mainsection div div#GetRedMobile, #mainsection div div#TheBrandMobile, #mainsection div div#LogoandSignMobile, #mainsection div div#WhiteSpaceMobile {
    display: none;
}
div#footer {
    /*margin-left: auto;
    margin-right: auto;
    zbackground: yellow;
    min-height: 333px;
    margin-top: -365px;
    z-index: 2;
    background-image: url('../img/home_button_square.png');
    background-position: center;
    background-repeat: no-repeat;*/
    display:none;
}
div#footermobile {
    display: none;
}
/*CONTACT PAGE*/
#bodycontact {
    box-sizing: border-box;
 
}
.font {
    zfont-family: 'JLR Emeric Web', sans-serif;
    font-family: 'Fauna One', sans-serif;
    font-weight: 200;
    font-style: normal;
    color: #ffe9ed;
    font-size: 17px;
    line-height: 17px;
    text-decoration: none;
    cursor: pointer;
    height: 67px;
}

    .font img {
        height: 50px;
        width: 50px;
        margin-top: 10px;
    }
div#contactcontainer {
    
    background: #DD1A22;
    margin-left: auto;
    margin-right: auto;
    min-width: 300px;
    max-width: 540px;
    width: 100%;
    min-height:540px;
    
    height: auto;
    overflow: hidden;
    
}
div#contactcontainerinformation {
    background: #DD1A22;
    height: auto;
    min-width: 540px;
    max-width: 540px;
    width: 100%;
    /*background-image: url('../img/pages/contact/contact_image_background.png');
    background-repeat: no-repeat;
    background-position: top;*/
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-content: center !important;
    overflow: hidden;
    min-height: 540px;
}
div#contactcontainerinformationauthor {
    min-height: 70px;
    width: 100%;
    background-image: url('../img/pages/contact/contact_image_background_author.png');
    background-position: bottom;
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 100px;
}


    div#contactinformation {
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: column;
        align-content:center;
        margin-top: 0px;
        text-align:left;
        margin-left: 170px;
        min-height:299px;
    }
        div#contactinformation a {
            height:50px;
        }
        div#contactinformation a img {
            width: 40px;
            height: 40px;
        }

        div#contactfooter {
            min-height: 71px;
            min-width: 300px;
            max-width: 540px;
            width: 100%;
            background: #DD1A22;
            margin-left: auto;
            margin-right: auto;
            cursor: pointer;
            margin-left: auto;
            margin-right: auto;
        }
    div#contactfooter a, div#contactfooter a img {
       
        margin-left: auto;
        margin-right: auto;
    }
    div#contactfooter a {
        
        
        width: 100%;
        display: flex;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        bottom: 0px;
    }
        div#contactfooter a img {
            
            width:174px;
            height:61px;
           margin-top:10px;
        }
        /*BRANDPAGE*/
div#theBrandFrame {
    max-width: 540px;
    height: 360px;
    margin-left: auto;
    margin-right: auto;
    zbackground: #DD1A22;
    overflow-y: hidden;
}
div#divTopImagetheBrand {
    /*background: #DD1A22;*/
    height: 360px;
    width: 540px;
   
    background-image: url('../img/pages/TheBrand/brand_image.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    overflow: hidden;
}
div#divRedFrame {
    position: static;
    bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    height: 180px;
    background: #DD1A22;
    max-width: 540px;
    width: 100%;
    /*display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;*/
}
div#divDownloadtheBrand {
    height: 120px;
    background: none;
    max-width: 600px;
    width: 100%;
   
    /*margin-top: 50px;
    margin-left: 125px;*/
}

    div#divDownloadtheBrand a {
        margin-left:-200px!important;
        
        height: 20px;
        text-align: center;
    }
        div#divDownloadtheBrand a img {
        margin-top:17px;
        }


div#divcontactfootertheBrand {
    position: static;
    min-height: 50px;
    min-width: 300px;
    max-width: 540px;
    width: 100%;
    background-image: none;
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 142px 50px;
    cursor: pointer;
}

div#divcontactfootertheBrandLogo {
    min-height: 61px;
    width: 100%;
    background-image: url('../img/pages/TheBrand/home_button_brand.png');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 174px 61px;
    cursor: pointer;
}
/*ENDBRANDSECTION*/