/*   
        Sunkroft.com | Main Styles | Matt Sansbury
        Last Updated: 11.3.2009
        */
        
        body {
            font-family: verdana, arial, sans-serif;
            margin: 0;
            padding: 0;
            font-size:62.5%;
            background: #6E624C;
        }
        
        /* General Styles*/
        a {
            outline: none;
        }
        
        a img {
            border: none;
        }
        
        
        /* Layout */
        
        #container {
            width: 1000px;
            height: 530px;
            margin: 20px auto;
            padding: 10px 10px 0 10px;
            background: #FFFBF1;
            border-radius: .2rem;
            box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
        }
        
        #content {
            
            background-image: url('/resources/bkground.jpg');
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            height: 454px;
            padding: 0;
            margin: 0;
            position: relative;
            border-radius: .2rem;
            
        }
        
        #header {
            font-family: "League Gothic", serif;
            font-weight: normal;
            padding: 18px 0 40px 5.2rem;
            
        }
        
        #header h1 {
            font-size: 3.8rem;
            margin: 0;
            padding: 0;
            color: #912d22fd;
        }


        #header h2 {
            font-size: 1.8rem;
            margin: 0px 0 0 0;
            font-weight: normal;
            padding: 0;
            color: #4d4d4e;
        }
        
        #contact-form {
            background-color: #FFFBF1;
            font-size: 1.2rem;
            padding: 2rem;
            border-radius: 1rem;
            width: 368px;
            margin: .5rem 0 0 4.2rem;
            float: left; 
            padding: 20px 16px; /*padding around form elements*/
            box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
        }
        
        #contact-form h2 {
            text-align: center;
            margin-top: 0;
            color: #4d4d4e;
        }
        
        #contact-form input,
        #contact-form textarea {
            
            width: 95%;
            font-size: .8rem;
            padding: 0.5rem;
            margin-bottom: 1rem;
            border: 1px solid #ccc;
            border-radius: 0.5rem;
        }
        
        input::placeholder {
            font-family: verdana, arial, sans-serif !important;
        }

        #contact-form textarea::placeholder {
            font-family: verdana, arial, sans-serif !important;
        }


        #contact-form button {
            display: block;
            width: 100%;
            padding: 0.5rem;
            background-color: #4d4d4e;
            color: white;
            border: none;
            border-radius: 0.5rem;
            cursor: pointer;
        }
        
        #contact {
            position: absolute;
            top: 470px;
            clear: relative;
            margin-right: -10px;
            padding: 0 4px 0 0;
            width: 100%;
            text-align: right;
            border: none;
            
        }
        
        #contact p {
            font-size: .8rem;
            margin: 4px 2px 0 0;
            white-space: nowrap;
        }
        
        .g-recaptcha{
            padding-bottom: 14px;
        }

        #success {
            color: white;
            font-size: 1.2rem;
            margin: 60px 0;
            padding: 0;
            text-align: center;
        }
    


        @media screen and (max-width: 768px) {
            #container {
                width: 100%;
                margin: 10px 0;
                padding: 10px 0;
                height: auto;
            }
        
            #content {
                height: auto;
                min-height: 300px;
                background-size: cover;
                background-position: center;
                width: 100%;
                overflow-x: hidden;


                height: auto;
                min-height: 300px;
            }
        
            #header {
                padding: 10px 20px;
            }
        
            #header h1 {
                font-size: 3.2rem;
                font-weight: normal;
            }
        
            #header h2 {
                font-size: 1.8rem;
            }
        
            .contact-form {
                width: auto;
                margin: 1rem;
                float: none;
            }
        
            #contact {
                position: relative;
                top: auto;
                margin: 20px 10px;
                text-align: center;
            }
        }
        
 
        @media screen and (max-width: 480px) {
            #header h1 {
                font-size: 3.2rem;
                font-weight: normal;
            }

            #header h2 {
                font-size: 1.8rem;
            }
        
            .contact-form {
                padding: 1rem;
            }
        }