/* Scss Document */

/* imports */
@import "bootstrap.min.css";
@import "mdb.min.css";
@import "mixins";
@import "variables";
@import url('https://fonts.googleapis.com/css?family=Covered+By+Your+Grace&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,700&display=swap');

/* SELECTORS */

body {
	font-family: $font-stack-primary;
	@include responsive-font-size(1rem);
	font-weight: $light;
}

h1, h2 {
	font-family: $font-stack-accent;
	//font-weight: $bold;
	@include text-shadow;
}

h3, h4, h5, h6 {
	font-family: $font-stack-primary;
}

h1 {
	@include responsive-font-size(3rem);
}

h2 {
	@include responsive-font-size(2.75rem);
}

h3 {
	@include responsive-font-size(2.5rem);
}

h4 {
	@include responsive-font-size(2.25rem);
}

h5 {
	@include responsive-font-size(2rem);
}

h6 {
	@include responsive-font-size(1.25rem);
}

#countdown {
	@include responsive-font-size(5.5rem);
	color: $malachite-light;
	text-shadow: $text-shadow;
	font-family: $font-stack-primary;
	font-weight: 800;
}

.subhead {
	font-family: $font-stack-accent;
}



//OVERRIDES//

.navbar-brand {
	font-family: $font-stack-accent;
	@include responsive-font-size(2.5rem);
	color: $green;
	@include text-shadow;
	margin-right: 0;
	margin-bottom: -10px;
}

.navbar-dark .navbar-brand {
	color: $malachite-light;
}

footer i {
	color: $malachite-light;
}

footer h6{
	font-weight: $bold;
}

//page sections//

#index {
	background-color: $funnel-gold;
}

#hero-text {
	margin-top: 15rem;
	margin-bottom: 150px;
	color: white;
	text-shadow: $text-shadow;
}

#about {
	background-color: white;
	margin-top: -50px;
	color: $funnel-green;
	
	img {
		margin-bottom: 2rem;
		border-radius: 50%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	
	@include skew;
	
	h6 {
		font-weight: $bold;
	}
	
}




#cta {
	background-image: linear-gradient($gold, $gold);
	color: $funnel-green;
	@include skew;
	
}


#app {
	background-image: linear-gradient($sunglow, $funnel-gold);
	color: $funnel-green;
	@include skew;
	
	img {
	display: block;
		
	// Small devices (landscape phones, 576px and up)
		@media (max-width: 1000px) {
			margin-right: auto;
			margin-left: auto;
		}
		
		@media (min-width: 1001px) and (max-width: 3500px) {
			float: right;
			display: block;
		}
		
	}
	
}

#thankyou {
	background-color: white;
	text-align: center;
	color: $funnel-green;
	
	h1 {
		font-weight: $bold;
		font-family: $font-stack-primary;
		
	}
	
	
}


.top-nav-collapse {
            background-color: $funnel-green !important; 
        }
        .navbar:not(.top-nav-collapse) {
            background: transparent !important;
        }
        @media (max-width: 768px) {
            .navbar:not(.top-nav-collapse) {
                background: $funnel-green !important;
            } 
        }
        @media (max-width: 740px) {
            .full-height,
            .full-height body,
            .full-height header,
            .full-height header .view {
                height: 700px; 
            } 
        }
        footer.page-footer {
            background-color: $funnel-green;
        }  

//COLOR SHIFT//

.color-shift {
animation: colorchange 15s ease infinite; 
-webkit-animation: colorchange 15s ease infinite; 
-moz-animation: colorchange 15s ease infinite;	
    }

    @keyframes colorchange
    {
      0%   {background: $sunglow;}
      25%  {background: $mustard;}
      50%  {background: $funnel-gold;}
      75%  {background: $saffron;}
      100% {background: $sunglow;}
    }

    @-webkit-keyframes colorchange 
    {
      0%   {background: $sunglow;}
      25%  {background: $mustard;}
      50%  {background: $funnel-gold;}
      75%  {background: $saffron;}
      100% {background: $sunglow;}
    }

	@-moz-keyframes colorchange 
    {
      0%   {background: $sunglow;}
      25%  {background: $mustard;}
      50%  {background: $funnel-gold;}
      75%  {background: $saffron;}
      100% {background: $sunglow;}
    }

//BUTTON OVERRIDES//
.btn-green {
    color: $funnel-green !important;
    background-color: $malachite-light !important;
	text-shadow: none !important;
}

.btn-green:hover {
    color:$funnel-green !important;
    background-color: $malachite-dark !important;
	text-shadow: none !important;
}

.btn-green:focus,
.btn-green.focus {
    -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15)
}

.btn-green:focus,
.btn-green:active,
.btn-green.active {
    background-color: $nt-green;
}

.btn-green.dropdown-toggle {
    background-color: $malachite-dark !important
}

.btn-green.dropdown-toggle:hover,
.btn-green.dropdown-toggle:focus {
    background-color: $malachite-light !important
}

.btn-green:not([disabled]):not(.disabled):active,
.btn-green:not([disabled]):not(.disabled).active,
.show>.btn-green.dropdown-toggle {
    background-color: $nt-green !important;
    -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15)
}

.btn-green:not([disabled]):not(.disabled):active:focus,
.btn-green:not([disabled]):not(.disabled).active:focus,
.show>.btn-green.dropdown-toggle:focus {
    -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15)
}

.btn-outline-green {
    color: $funnel-green !important;
    background-color: transparent !important;
    border: 2px solid $funnel-green !important
}

.btn-outline-green:hover,
.btn-outline-green:focus,
.btn-outline-green:active,
.btn-outline-green:active:focus,
.btn-outline-green.active {
    color: $funnel-green !important;
    background-color: transparent !important;
    border-color: $funnel-green !important
}

.btn-outline-green:not([disabled]):not(.disabled):active,
.btn-outline-green:not([disabled]):not(.disabled).active,
.show>.btn-outline-green.dropdown-toggle {
    background-color: transparent !important;
    border-color: $funnel-green !important;
    -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15)
}

.btn-outline-green:not([disabled]):not(.disabled):active:focus,
.btn-outline-green:not([disabled]):not(.disabled).active:focus,
.show>.btn-outline-green.dropdown-toggle:focus {
    -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15)
}