@charset "utf-8";



body {
            margin: 0;
            padding: 0;

            /* make it look decent enough */
            background: white;
            color: white;
            font-family:'Raleway', sans-serif; 
        }

        a,div {
            text-decoration: none;
            color:white;

            transition: color 0.3s ease;
        }

        a:hover {
            color: #DFA959;
        }

h2 {
    font-family:'Corinthia', cursive;
    color:black;
}

p {
    color:black;
    padding: 0 2em 0 2em;
}

h1 {
    color: black;
    margin: auto;
    margin-top: 6em;
    
}

h3 {
    color:black;
    margin:auto;
    padding: 0 1.5em 0 1.5em;
    
}

ul #logo {
    list-style-type:none;
}

/* CONTACT */

#name_input {
    margin: 1em .25em;
}

.col {
    margin: 0 0 1em 0;

}

#email_addr {
    margin: 0 0 0 .4em;
}

#phone_input {
    margin: 0 0 0 .1em;
}

#formbox {
    padding:0 0 1.5em 1.8em;
    background-color: #5FCBDB;
    
}

.input {
    color:black;
}

/*HAMBURGER NAV*/

/*
 * Made by Erik Terwan
 * 24th of November 2015
 * MIT License
 *
 *
 * If you are thinking of using this in
 * production code, beware of the browser
 * prefixes.
 */

        #menuToggle {
            display: block;
            position: relative;
            top: -8em;
            padding-left: 2em;

            z-index: 1;

            -webkit-user-select: none;
            user-select: none;
            width: fit-content;
            
        }

        #menuToggle input {
            display: block;
            width: 40px;
            height: 32px;
            position: absolute;
            top: -7px;
            left: -5px;

            cursor: pointer;

            opacity: 0; /* hide this */
            z-index: 2; /* and place it over the hamburger */

            
        }

        /*
         * Just a quick hamburger
         */
        #menuToggle span {
            display: block;
            width: 33px;
            height: 4px;
            margin-bottom: 5px;
            position: relative;
            left:-12px;

            background: #5FCBDB;
            border-radius: 3px;

            z-index: 1;

            transform-origin: 4px 0px;

            transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
            background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
            opacity 0.55s ease;
        }

        #menuToggle span:first-child {
            transform-origin: 0% 0%;
        }

        #menuToggle span:nth-last-child(2) {
            transform-origin: 0% 100%;
        }

        /*
         * Transform all the slices of hamburger
         * into a crossmark.
         */
        #menuToggle input:checked ~ span {
            opacity: 1;
            transform: rotate(45deg) translate(-2px, -1px);
            background:white;
        }

        /*
         * But let's hide the middle one.
         */
        #menuToggle input:checked ~ span:nth-last-child(3) {
            opacity: 0;
            transform: rotate(0deg) scale(0.2, 0.2);
        }

        /*
         * Ohyeah and the last one should go the other direction
         */
        #menuToggle input:checked ~ span:nth-last-child(2) {
            transform: rotate(-45deg) translate(0, -1px);
        }

        /*
         * Make this absolute positioned
         * at the top left of the screen
         */
        #menu {
            position: absolute;
            width: 300px;
            margin: -100px 0 0 -50px;
            padding: 50px;
            padding-top: 125px;

            background: #3F6A6A;
            list-style-type: none;
            -webkit-font-smoothing: antialiased;
            /* to stop flickering of text in safari */

            transform-origin: 0% 0%;
            transform: translate(-100%, 0);

            transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        }

        #menu li {
            padding: 10px 0;
            font-size: 22px;
        }

        /*
         * And let's slide it in from the left
         */
        #menuToggle input:checked ~ ul {
            transform: none;
        }



        .onclick-menu:focus {
            /* clicking on label should toggle the menu */
            pointer-events: none;
            
        }



        .onclick-menu:focus-within .onclick-menu-content {
            /*  opacity is 1 in opened state (see below) */
            opacity: 1;
            visibility: visible;
            display: inherit;
            /* don't let pointer-events affect descendant elements */
            pointer-events: auto;
        }

        .onclick-menu-content {
           /* use opacity to fake immediate toggle */
            display: none;
            opacity: 0;
            visibility: hidden;
            transition: visibility 0.5s;
        }
        .onclick-menu-content li{
            list-style: none;
        }


.sli {
   display:block;
    width: 80%;
    margin:auto;
    position:relative;
    z-index: 1;

    
}

#quotation {
    position: relative;
    padding-left: 160px;
    margin-top: -20px
}

#mainlogo {
    padding-top:474px;
}

.socials{
    margin: 1em;
}

#socials {
    margin-top: 1em;
    
}

#arrow {
    position:relative;
    margin: 0 0 1em 1em;
}

main {
    padding: 15em 1em 1em 1em;
}

#bpdesign {
    color:#DFA959;
}

footer {
    margin:0 0 0 1em;
}


/* HOME PAGE */

.crossfade > figure {
  animation: imageAnimation 30s linear infinite 0s;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center center;
  color: transparent;
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 0;
  margin:0;
}

.crossfade > figure:nth-child(1){
    background-image: url(../images/slideshow1.jpg);
}

.crossfade > figure:nth-child(2){
    background-image: url(../images/slideshow2.jpg);
    animation-delay: 6s;
}

.crossfade > figure:nth-child(3){
    background-image: url(../images/slideshow3.jpg);
    animation-delay: 12s;
}

.crossfade > figure:nth-child(4){
    background-image: url(../images/slideshow4.jpg);
    animation-delay: 18s;
}

.crossfade > figure:nth-child(5){
    background-image: url(../images/slideshow5.jpg);
    animation-delay: 24s;
}
@keyframes 
imageAnimation {  0% {
 animation-timing-function: ease-in;
 opacity: 0;
}
 8% {
 animation-timing-function: ease-out;
 opacity: 1;
}
 17% {
 opacity: 1
}
 25% {
 opacity: 0
}
 100% {
 opacity: 0
}
}

.imglinks {
    padding-top: 10px;
}

.imglinks img {
    width:80%;
    position: relative;
    display: block;
    margin: 10px auto;
        
}



/* ABOUT */
#about {
    background-image: url("../images/aboutimg.jpg");
    background-repeat: no-repeat;
}

#box {
    width:350px;
    height: 0px;
    border: 5px;
    border-color: black;
    margin: auto;
}

/* PRICING */

#pricing {
    background-image: url("../images/pricingimg.jpg");
    background-repeat: no-repeat;
    
}

#pricingtop {
    margin-top:7em;
}

#multifam {
    color:black;
}

/* CONTACT */

#contact {
    background-image: url("../images/contactimg.jpg");
    background-repeat: no-repeat;
}

/* PORTFOLIO */

.gallery {
        width: 300px;
    margin: auto;
    margin-top: -180px;
}

/* MEDIA QUERIES */

@media screen and (min-width:768px) {
    /* HIDE HAMBURGER NAV */
    
    #menuToggle{
        left:0;
    }
    	#menuToggle span {
		display:none;
	}
	
	#menuToggle input {
		display:none;
	}
	
	ul#menu{
		transform:none;
		padding: .75em 11.5em .75em .75em;
		margin: 0 0 0 17em;
        display: flex;
        background: rgba(255,255,255,.6);
	}
	
	ul#menu li {
		display: flex;
		padding: 0 .5em;
	}

	#menu {
		background-color: rgba(255,255,255,0)
}

	#menuToggle a {
		color:black;
}
    
    .onclick-menu {
        color:black;
        cursor: pointer;
    }
    
    .onclick-menu-content{
        position:fixed;
        background: rgba(255,255,255,.6);
        margin: 11.5px 0 0 30px;
        padding: 1em;
    }
    
    .onclick-menu-content li {
        margin: 1em 0;
    }


    #logo {
        width:60%;
        margin: 1em -1em;
    }
    
    #arrow {
        position: absolute;
        margin: -2em 0 1em 2em;
        right:4em;
    }
    /*end hide hamburger nav*/
    
    .sli {
        margin: inherit;
        width:60%;
    }
    
    #content {
        margin-top:350px;
    }
    
    #mainlogo {
        margin:auto;
    }
    
    #scripture {
        width:80%;
        margin: 1em auto;
    }
    
    #homepagetext {
        width:80%;
        margin:auto;
    }
    
    #socials {
        margin-top: 3em;
    }
    
    #pricingtop {
        margin-top:10em;
    }
    
    .gallery {
        width:610px;
    }
    
    
#formbox {
    margin:auto;
    max-width: 600px;
    margin:3em auto auto auto;
}

#message {
    width:300px;
    height:150px;
    resize: none;
    margin-top: 1em;
}
}
    @media screen and (min-width:992px){
        #menuToggle {
            left: 30em;
            top:-10em;
        }
        
        #menu li {
            font-size: 27px
        }
        
        ul#menu {
           padding: 0.75em 18em 0.75em 0.75em; 
        }
        
        #logo {
            width: 50%;
            margin: 1.5em .5em;
        }
        
        #socials {
            margin: 5em 0 0 1em;
        }
        
        #arrow {
            margin: -2em 0 1em 0;
            right: 2em;
        }
        
        #content {
            margin-top: inherit;
        }
        
        #about {
            background-size:contain;
            background-image:url(../images/aboutimglg.jpg);
            
}
        h1 {
            margin-top:17em;
        }
        
        #pricing {
            background-size:contain;
            background-image: url(../images/pricingimglg.jpg);
        }
        
         #pricingtop {
        margin-top:30em;
    }
        
        #contact {
    background-image: url("../images/contactimglg.jpg");
    background-size:contain;
   
}
        .gallery {
            width:1220px;
        }    

}