html,
body,
.cover {
    height: 100%;
    width: 100%;
    box-sizing: border-box;    
}
.cover.p1 {
     background: url("img/408H-compressed.jpg") top left no-repeat;
    background-size:cover;
    display: table;
    box-shadow: inset 0 0 100px #000;
    margin-bottom: 0;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    max-width: 100%;
 
}
#greetings {
    margin: 20px;
    font-size: 70px;
    font-weight: bolder;
    color: wheat;
    font-family: serif;
    text-shadow: 2px 0px 5px rgb(36, 11, 13),0px 2px 3px #333;
}
.navbar-brand {
    text-transform: uppercase;
    letter-spacing: px;
    font-family: sans-serif;
    color: rgba(36, 11, 13,0.7) !important;

}
.navbar-brand:hover {   
    animation-name: brand;
    animation-duration: 1s;
    animation-delay: ;
    animation-fill-mode: both;
}
@keyframes brand {
    from {text-transform: uppercase;
    letter-spacing: -1.5px;}
    to { text-transform: uppercase;
    letter-spacing: 10px;}
}
.cover-text {
    text-align: center;
    display: table-cell;
    vertical-align:top;
    color: black;
    padding: 0 70px;
    position: relative;
    top: 50px;
    margin: 10px auto;
}
.cover-text h1 {
    font-size: 60px;
    color: wheat;
    text-transform: capitalize;
    font-family:serif;
    background: rgba(36, 11, 13,0.8);       
}
.testimonial h1, .text-center {
    text-align: center;
    font-size: 50px;
    padding: 1% 25px 3%;
}
.testimonial {
    height: 90%;
    background: url(img/86H-compressed.jpg) top left no-repeat;
    box-shadow: inset 0 0 100px #000;
    background-size: cover;
    color: white;
}
.testimonial h1 {
    text-transform: capitalize;
}
.carousel-inner .item {
    text-align: center;
    padding: 100px;
    margin: 70px;    
}
.carousel-inner {
    background: rgba(0,0,0,0.4);
    border: none;
}
.carousel-control.right, .carousel-control.left {
      background-image: none;
      color: #f4511e;
}
.item h4 {
    font-size: 28px;
    font-style: italic;
    font-weight: 100;
}
.item h4 span {
    font-style: normal;
    font-family: helvetica, sans-serif;
    font-weight: 800;
}

blockquote {
    font-size: 32px;
    border-style: none;
}
blockquote cite {
    display: block;
    text-align: right;
    font-size: 20px;
    color: #888;
    margin-top: 40px;
    text-transform: uppercase;
}
#signup {
    text-align: center;
    height: 70%;
    width: 100%;
    display: table;
    background: url(img/pexels-photo-414548-compressed.jpg) top left repeat-x;
    background-size: contain;
    box-shadow: inset 0 0 100px #000;
}
.pullup {
    visibility: hidden;
}
#signup #bg {
    text-transform: capitalize;
    background-color: rgba(36, 11, 13,0.8);
    color: darkgoldenrod;
    text-shadow: 5px 2px 5px #333;
    padding: 5px;
    width: 40%;
    margin: 0px auto 20px;
    box-shadow: 2px 5px 2px #333;
}
#signup .container {
    display: table-cell;
    vertical-align: middle;
}
nav.navbar-inverse{
    background-color: rgba(0,0,0,0.1);
    border: none;
    height: 60px;   
}
.nav a {
     line-height: 30px;
    font-size: 20px;   
}

.navbar-nav li a{
    font-size: 18px;
    line-height: 30px !important;
    color: darkgoldenrod !important;
}
.navbar-nav li a:hover{
    background-color: black !important;
    color: white !important;
}

#project, p {
    text-align: center;
    font-size: 18px;
    }
#project h2 {
    font-size: 50px;
    text-transform: uppercase;
    margin-top: 40px;
    letter-spacing: 10px;
    background: rgba(36, 11, 13,0.8);
    color: darkgoldenrod;
}
#project{
    margin-top: 0;
    background-color: rgba(255, 140, 0,0.1);
    visibility: hidden;
}
.kitten {
    height: 300px;
    border-style: none;
    box-shadow: inset 0 0 20px #333;
    margin-bottom: 50px;
    text-align: center;
}
.col2 {
    background: url('img/implement-2372179_640.jpg')top left no-repeat;
    background-size: cover;

}
.col3 {
    background: url('img/about-compressed.jpg')top left no-repeat;
    background-size: cover;

}
.kittenPara {
    color: darkgoldenrod;
    position: relative;
    top: 220px;
    padding-top: 60;
    background: rgba(36, 11, 13, 0.8);
    border: dashed 1px #fff;
}
#signup.outline {
    outline: none;
}

#textSignup{
    background-color: rgba(200, 7, 17,0.3);
    box-shadow: -3px 2px 5px #333, 3px -2px 5px #888;
}

#textSignup p{
    color: white;  
    text-align:justify;
    font-size: 20px;
}
textarea {
    resize: none;
}
footer {
    text-align: center;
    color: darkgoldenrod;
    background-color: rgb(36, 11, 13);
    padding: 40px;
    }
footer span {
    font-size: 20px;
    margin-bottom: 20px;
    color: goldenrod;
}
.social a {
    font-size: 20px;
    padding: 0 5px;
    color: darkgoldenrod;
}
.social a:hover,  footer span:hover{
    animation-name: social;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    outline: none;
    text-decoration: none;
    
    
}
@keyframes social {
    from {font-size: 20px;
    padding: 0 5px;
    color: darkgoldenrod;}
    to {font-size: 40px; color: #ccc;}
}
#align-left button:hover {
    position: relative;
    top: 2px;
}

/************************ Page2.html *********************************/

.section.p2 {
    margin: 50px auto;
    color: black;
    width: 100%;
    box-sizing: border-box;
}
#project3 h2, #project1 h2, #project5 h2{
    text-align: left;
    padding-left: 20px;
}

#project2 h2, #project4 h2{
    text-align: right;
    padding-right: 90px;
}
.section.p2 p {
    background: rgba(233, 227, 211,0.8);
    padding: 20px;
    font-size: 20px;
}
.section.p2 h2 {
    text-align: center;
    background-color: rgba(36, 11, 13,0.9);
    color: darkgoldenrod;
    padding: 10px;
    letter-spacing: 2px;
    box-shadow: -5px 2px 10px #333;
}
.container.p2 {
    background: url('img/page2bg.jpeg')top left repeat-y;
    width: 100%;
    background-size: contain;
    box-shadow: inset 0 0 100px #000;
}
.container.p2 img {
    margin: 20px;
}

.container.p2 h1 {
    font-size: 60px;
    text-align: center;
    color: #fff;
    background: rgba(0,0,0,0.5);
    padding: 20px;
}
.page-header {
    margin-top: 70px;
    text-transform: uppercase;
    letter-spacing: 3px;
}


/**************************AboutME PAge******************************/
.p3 {
    font-family: "Lato", serif;
    color:#777;
    line-height: 2.0;
}

nav.navbarAbout {
    background: rgba(0,0,0,0.2);
}
.img-1, .img-2 {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img-1 {
    background-image: url('img/StockSnap_NQP6JNLYFI-compressed.jpg');
    min-height: 100%;
}
.img-2 {
    background-image: url("img/StockSnap_ANC5ACJ7V0-compressed.jpg");
    min-height: 400px;
    margin-bottom: 40px;
}
.img-1 h1, .img-2 h1 {
    color: white;   
    text-align: center;    
    letter-spacing: 3px;
    text-transform: uppercase;     
}
#high{
    position: relative;
    top: 300px;
    background: rgba(0,0,0,0.7);
    padding: 1px;
    margin: 0 30% 0;
}
#high1 {
    position: relative;
    top: 180px;
    background: rgba(0,0,0,0.7);
    padding: 1px;
    margin: 0 30% 0;    
}
#rbtn {

    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: 190px;
    margin: 0 auto;
}
.img-margin {
    margin: 20px;
}
.about h2 {
    text-align: center;
}
.italic {
    font-style: italic;
}
.about {
    padding: 30px;
    text-align: center;
}
.padding {
    padding: 20px;
}
.propertyName {
    text-align: left;
}


@media only screen and (max-width: 780px) {
    .cover-text h1,.testimonial h1, #signup h1, #project h2, .p2 h1 {
        font-size: 30px !important;
    }
    #greetings {
    margin: 10px;
    font-size: 30px;    
}
    
    #bg h1 {         
        font-size: 20px;
    }
    #bg, button{
        margin: 10px auto !important;
    }
    #textSignup {
        margin-top: 60px;
    }
    #signup {
    background: url(img/pexels-photo-414548.jpeg) top left repeat-y;
}

    .cover-text p {
        font-size: 18px;
    }
    blockquote, cite {
    font-size: 18px;
}
    
    .carousel-inner .item {
    text-align: center;
    padding: 50px;
    margin: 30px;    
}
.item h4 {
    font-size: 18px;
    font-style: italic;
    font-weight: 100;
}
    .col2, .col3 {
        margin: 10px auto;
        height: 310px;
        width: 310px;
    } 
    
/******************AboutPage****************************/
    .img-1, .img-2 {
        background-attachment: scroll;
        background-size: contain;      

}
    .img-1 h1, .img-2 h1 {
        font-size: 20px;
}
    .img-1 {
        margin: -100px auto 0;
        padding: 0 auto;
    }
    #high{
    position: relative;
    top: 240px;
    background: rgba(0,0,0,0.7);
    padding: 1px;
    margin: 0 20% 0;
}
     .about {
        
        padding: 5px;
        margin-top: -10px;
    }
    
    .container.p2 img {
        margin: 0 auto;
        padding: 10px auto;
        width: 500px;
}
    .section.p2 p {
    padding: 0 45px;
}   
}


@media only screen and (max-width: 430px) {
    .navbar-nav li a{        
        background: black !important;
}
    #bg h1 {
        font-size: 20px !important;
        padding: 0 auto;
        margin: 0 auto;
    }
/*******************IndexPage*********************/
    .cover-text h1,.testimonial h1  {
        font-size: 30px;
    }
    blockquote, cite {
    font-size: 18px;
}
    .col2, .col3 {
        height: 280px;
        width: 300px !important;
        background-size: cover !important;
        margin: 10px auto !important;  
    }  
    .col3 {
        margin-bottom: 35px;
    }
    #bg {
        margin: 0px auto;
        padding: 0 auto;
    }
    #signup #bg h1 {
        font-size: 18px !important;
        padding: 10px;
    }
    #greetings {
    margin: 10px;
    font-size: 30px;    
}
    
.carousel-inner {
    background:rgba(0,0,0,0.0);
    border: none;
}
    .carousel-inner .item {
    text-align: center;
    padding: 20px;
    margin: 20px;    
}
.item h4 {
    font-size: 18px;
    font-style: italic;
    font-weight: 100;
}
    #signup {
    background: url(img/pexels-photo-414548.jpeg) top left repeat-y;
        background-size: contain;
}
    .kittenPara {
    color: darkgoldenrod;
    position: relative;
    top: 190px;
    padding-top: 60;
    background: rgba(36, 11, 13, 0.8);
    border: dashed 1px #fff;
}
    
/*****************************ProjectPage**************************/ 
    .container.p2 h1 {
    font-size: 40px;
}
    .section.p2 h2 {
        text-align: center;
        padding: 0px;
}
    .container.p2 img {
    margin: 0px auto 10px;
}
    
/*********************AboutPage*************************/
    .about {        
        padding: 5px;
        margin-top: -50px;
    }
    .img-margin {
    margin: 0;
}
    .img-1 {
        margin: -150px auto 0;
        padding: 0 auto;
    }
    #high{
        position: relative;
        top: 130px;
        background: rgba(0,0,0,0.7);
        padding: 0px;
        margin: 0 15% 0;
        display: none;
}

}








/*Animation for slide*/

/*
==============================================
slideExpandUp
==============================================
*/


.slideExpandUp{
	animation-name: slideExpandUp;
	-webkit-animation-name: slideExpandUp;	

	animation-duration: 1.6s;	
	-webkit-animation-duration: 1.6s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease -out;

	visibility: visible !important;	
}

@keyframes slideExpandUp {
	0% {
		transform: translateY(100%) scaleX(0.5);
	}
	30%{
		transform: translateY(-8%) scaleX(0.5);
	}	
	40%{
		transform: translateY(2%) scaleX(0.5);
	}
	50%{
		transform: translateY(0%) scaleX(1.1);
	}
	60%{
		transform: translateY(0%) scaleX(0.9);		
	}
	70% {
		transform: translateY(0%) scaleX(1.05);
	}			
	80%{
		transform: translateY(0%) scaleX(0.95);		
	}
	90% {
		transform: translateY(0%) scaleX(1.02);
	}	
	100%{
		transform: translateY(0%) scaleX(1);		
	}
}

@-webkit-keyframes slideExpandUp {
	0% {
		-webkit-transform: translateY(100%) scaleX(0.5);
	}
	30%{
		-webkit-transform: translateY(-8%) scaleX(0.5);
	}	
	40%{
		-webkit-transform: translateY(2%) scaleX(0.5);
	}
	50%{
		-webkit-transform: translateY(0%) scaleX(1.1);
	}
	60%{
		-webkit-transform: translateY(0%) scaleX(0.9);		
	}
	70% {
		-webkit-transform: translateY(0%) scaleX(1.05);
	}			
	80%{
		-webkit-transform: translateY(0%) scaleX(0.95);		
	}
	90% {
		-webkit-transform: translateY(0%) scaleX(1.02);
	}	
	100%{
		-webkit-transform: translateY(0%) scaleX(1);		
	}
}

/*
==============================================
expandUp
==============================================
*/


.expandUp{
	animation-name: expandUp;
	-webkit-animation-name: expandUp;	

	animation-duration: 0.7s;	
	-webkit-animation-duration: 0.7s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;		

	visibility: visible !important;	
}

@keyframes expandUp {
	0% {
		transform: translateY(100%) scale(0.6) scaleY(0.5);
	}
	60%{
		transform: translateY(-7%) scaleY(1.12);
	}
	75%{
		transform: translateY(3%);
	}	
	100% {
		transform: translateY(0%) scale(1) scaleY(1);
	}	
}

@-webkit-keyframes expandUp {
	0% {
		-webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);
	}
	60%{
		-webkit-transform: translateY(-7%) scaleY(1.12);
	}
	75%{
		-webkit-transform: translateY(3%);
	}	
	100% {
		-webkit-transform: translateY(0%) scale(1) scaleY(1);
	}	
}


/*
==============================================
expandOpen
==============================================
*/


.expandOpen{
	animation-name: expandOpen;
	-webkit-animation-name: expandOpen;	

	animation-duration: 1.2s;	
	-webkit-animation-duration: 1.2s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	

	visibility: visible !important;	
}

@keyframes expandOpen {
	0% {
		transform: scale(1.8);		
	}
	50% {
		transform: scale(0.95);
	}	
	80% {
		transform: scale(1.05);
	}
	90% {
		transform: scale(0.98);
	}	
	100% {
		transform: scale(1);
	}			
}

@-webkit-keyframes expandOpen {
	0% {
		-webkit-transform: scale(1.8);		
	}
	50% {
		-webkit-transform: scale(0.95);
	}	
	80% {
		-webkit-transform: scale(1.05);
	}
	90% {
		-webkit-transform: scale(0.98);
	}	
	100% {
		-webkit-transform: scale(1);
	}					
}


/*
==============================================
pulse
==============================================
*/

.pulse{
	animation-name: pulse;
	-webkit-animation-name: pulse;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.9);
		opacity: 0.7;		
	}
	50% {
		transform: scale(1);
		opacity: 1;	
	}	
	100% {
		transform: scale(0.9);
		opacity: 0.7;	
	}			
}

@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scale(0.95);
		opacity: 0.7;		
	}
	50% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}	
	100% {
		-webkit-transform: scale(0.95);
		opacity: 0.7;	
	}			
}