:root {
  --primary: #e56825;
  --secondary: #858d36;
  --neutral01: #fff;
}

html, body, #page {
    height: 100%;
}

body {
}

/*
body.bg {
    background-color: var(--secondary);
    background: url("../images/jumbo2.png") no-repeat top fixed;
    background-size: contain;
    background-position: center 100px; 
}
*/

/*.secondaryBorderColor {
    border-color: pink;
}*/

h1 {
    color: var(--primary) !important;
    text-shadow: 2px 2px 1px black;
}
h2 {
    text-shadow: 2px 2px 1px black;
    text-shadow: 2px 2px 5px black;

}
footer {
    background-color: var(--secondary);
    margin-top: 200px;
}

#page {
    background-color: #84c7e8;
    height: 100%;
    padding-top: 200px;
    margin-bottom: 200px;
}
.header {
    background-color: var(--neutral01);
/*    opacity: .8;*/
}

a {
    color: var(--primary);
}

ul.list {
/*    font-size: 2em;*/
}

/*
li {
        text-shadow: 2px 2px 1px black;
    text-shadow: 2px 6px 6px black;
}
*/

video, .video {
    opacity: 1;
    background-color: black;
    box-shadow: 0px 0px 12px 2px rgba(229, 104, 37, 1);
/*    box-shadow: 0px 0px 12px rgba(229, 104, 37, 1) inset;*/
    /* h v blur spread color inset*/
    border: solid 3px var(--primary) ;
}

img.cake {
    width: 50%;
    height: auto;
}

img.logo{
        width: 50%;
    height: auto;
}

.bgSolid {
    background-color: var(--secondary);
}

#top {
/*    background-color: var(--neutral01);    */
}

.main-content {
    background-color: var(--neutral01);
    margin-bottom: 200px;
}


.tagline {
    font-size: 1.5em;
}


.title-border {
    height: .75em;
    background-color: var(--secondary);
    box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.4), 0px 2px 3px #000;
}

.sectionBG {
    background-color: rgb(0,0,0,0.7);
/*    opacity: 0.75;*/
}

.navbar-brand {
    color: var(--primary);
    text-shadow: 2px 2px black;
    font-size:  2em;
}
a.navbar-brand:hover {
    color: var(--secondary);
}


.navbar {
    background-color: #eee;
}

#mainContent {
/*
    overflow: scroll;
    width:100%;
    margin-top: 200px;
    height:1080px;
*/
}

.footerImg {
/*
    width: 100%;
    display: block;
  margin-left: auto;
  margin-right: auto;
*/
    background-image: url("../images/jumboBorder.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center bottom;
    background-size: 100%;
    background-color: var(--secondary);
/*    height: 100px;*/
/*    margin-bottom: 100px;*/
    
}

.borderImg {
  width: 100%;
  height: auto;
}

.bi-envelope-fill {
    color:var(--primary);

}

.neutral01 {
    background-color:var(--neutral01);
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 578px) {
body.bg {
    background-color: var(--secondary);
    background: url("../images/bg-small.png") no-repeat top fixed;
    background-size: 100%;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
body.bg {
    background-color: var(--secondary);
    background: url("../images/bg-small.png") no-repeat top fixed;
    background-size: 100%;
    background-attachment: fixed;
    background-position: center; 
    width: 100%;
}    
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

    body.bg {
    background-color: var(--secondary);
    background: url("../images/bg-small.png") no-repeat top fixed;
    background-size: 100%;
    background-position: center 100px; 
}
    
.parallaxHome1 {
  /* The image used */
  background-image: url("../images/abrazar-wedding.png");
    background-size: 100% auto;
  /* Set a specific height */
  min-height: 540px;
/*  max-height: 500px;*/

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center 10px;
  background-repeat: no-repeat;
}

.parallaxHome2 {
  /* The image used */
  background-image: url("../images/abrazarSm.jpg");
    background-size: 100% auto;

  /* Set a specific height */
  min-height: 540px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    body.bg {
    background-color: var(--secondary);
    background: url("../images/jumbo2.png") no-repeat top fixed;
    background-size: cover;
    background-position: center 100px; 
}
}