/* nancysantiques.styles.css */

@font-face {
    font-family: 'great_vibesregular';
    src: url('greatvibes-regular-webfont.woff2') format('woff2'),
         url('greatvibes-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* Color scheme hexadecimal values: 8CB732 D9E76F EB9C2B C73F11 000000 and this is a very pretty dark blue #250B3F  */
 body {
 background-color: #3F250B;
}

#catchphrase {
	font: 30pt/30pt 'Great Vibes', cursive, serif;
 
}

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

#bodyimage1 {
background-image: url(pix2/flowercorner.png) alt="";
float: left;
background-repeat: no-repeat;
 position: relative;
 width: 47%;
margin-left: 0px;
margin-top: 0px;
z-index: 1;
}

#bodyimage2 {
background-image: url(pix2/flowercornerReverse.png) alt="";
background-repeat: no-repeat;
width: 47%;
position: relative;
margin-right: 0px;
float: right;
margin-top: 390px
}

.signin {
float: right;
font-size: 20pt;
 position: absolute;
border: solid 1px #3F250B;
border-radius: 3px;
width: 10%;
margin-left: 950px;
margin-top: 35px;
 padding-top: 3px;
 padding-bottom: 3px;
   font-family: 'Great Vibes', sans serif, serif;
   font-weight: bold;
text-align: center;
color: #250B3F;
background: #632166;
background: -moz-linear-gradient(top, #632166 1%, #ea8b07 100%);
background: -webkit-linear-gradient(top, #632166 1%,#ea8b07 100%);
background: linear-gradient(to bottom, #632166 1%,#ea8b07 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#632166', endColorstr='#ea8b07',GradientType=0 );
   box-sizing: border-box; /* Box sizing for older browsers */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   }

 .signin a {
   color: #250B3F;
   text-decoration: none;
   }

.signin:hover, .signin:active {
color: #250B3F;
background: #42257a;
background: -moz-linear-gradient(top, #42257a 1%, #cedbe9 100%);
background: -webkit-linear-gradient(top, #42257a 1%,#cedbe9 100%);
background: linear-gradient(to bottom, #42257a 1%,#cedbe9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42257a', endColorstr='#cedbe9',GradientType=0 );
opacity:1;
background-size: auto 100%;
box-sizing: border-box; /* Box sizing for older browsers */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   /* Make background image height equal to button height */
   }
   
   .signin a:hover, .signin a:active, .signin a:link, .signin a:visited {
   color: #250B3F;
   text-decoration: none;
   }

   
.signin:link, .signin:visited {
color: #250B3F;
background: #42257a;
background: -moz-linear-gradient(top, #42257a 1%, #cedbe9 100%);
background: -webkit-linear-gradient(top, #42257a 1%,#cedbe9 100%);
background: linear-gradient(to bottom, #42257a 1%,#cedbe9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42257a', endColorstr='#cedbe9',GradientType=0 );
opacity:1;
background-size: auto 100%;
box-sizing: border-box; /* Box sizing for older browsers */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   /* Make background image height equal to button height */
   }
   
   .clear { 
clear: both; 
}
        /* Style for the top bar */
        .top {
            padding: 8px 4px 8px 4px;
            }
            
/* Fixed-position sized to edges of viewport */

#wrapper {
 position: fixed;
 margin-right: 30px;
margin-left: 67px;
margin-top: 50px;
margin-bottom: 40px;
 /* White for older browser, rgba for newer */
 height: 885px;
 background: white;
 background: #8F9630;
 border-radius: 10px;
width: 88%;


}

header {
 position: absolute;
 padding-left: 4%;
 padding-top: 0px;
  
}

nav {
 position: absolute;
 top: 20%;
 left: 0;
 bottom: 15%;
 width: 15%;
 padding: 1%;
}


footer {
font: 18pt/18pt sans serif, serif;
margin-top: 825px;
 right: 2;
padding-top: 0px;
position: fixed;
 height: 10%;
 width: 45%;
 padding-left: 8%;
 color: #250B3F;
 float: right;
}

address {
font: 16pt/16pt sans serif, serif;
color: #3F250B;
padding-left: 10px;
padding-bottom: 15px;
}


article p {
color: #3F250B;
font: 22pt/22pt sans serif, serif;
line-height: 1.5;
padding-left: 10px;
}

article {
 position: absolute;
 top: 19%;
 left: 15%;
 right: 0;
 bottom: 10%;
 padding-left: 20px;
 padding-right: 10px;
 padding-top: .5px;
 overflow: auto;
 background: #DCA143;
 z-index: 1;
 
}

h1 {
   font: 46pt/46pt 'Great Vibes', cursive, serif;
   text-shadow: -3px -3px #777;
   color: #250B3F;
}

h2 {
   font: 18pt/18pt sans serif, serif;
}

h3 {
   font: 27pt/27pt sans serif, serif;
   color: #3F250B;
}

#logo {
<img src="pix2/logon.png" alt"Company Logo" id="logo";
position: fixed;
width: 4%;
height: 40px;
size: 20%;
 padding: 1%;
 z-index: 2;
float: left;
margin-left: 5px;
margin-top: 550px;
}

 /* Style for <a> tags in the nav section */
 .box {
   background: center;
   font-family: 'Great Vibes', cursive, sans serif, serif;
   color: #250B3F;
   font-weight: bold;
   font-size: 20pt;
   outline: none;
   padding: 8%;
   opacity:1;
   display: block;
   border-right: solid 1px #3F250B;
   border-radius: 15px;
   width: 85%;
   text-align: center;
   height: 75px;
   background: #632166;
background: -moz-linear-gradient(top, #632166 1%, #ea8b07 100%);
background: -webkit-linear-gradient(top, #632166 1%,#ea8b07 100%);
background: linear-gradient(to bottom, #632166 1%,#ea8b07 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#632166', endColorstr='#ea8b07',GradientType=0 );
   box-sizing: border-box; /* Box sizing for older browsers */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   }
   
   .box a {
   color: #250B3F;
   text-decoration: none;
   }

/* The following pseudo-class applies to the box class when in a hovered state */
/* Styling for hover and tap */
.box:hover, .box:active {
color: #250B3F;
background: #42257a;
background: -moz-linear-gradient(top, #42257a 1%, #cedbe9 100%);
background: -webkit-linear-gradient(top, #42257a 1%,#cedbe9 100%);
background: linear-gradient(to bottom, #42257a 1%,#cedbe9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42257a', endColorstr='#cedbe9',GradientType=0 );
opacity:1;
box-sizing: border-box; /* Box sizing for older browsers */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}
.box a:hover, .box a:active, .box a:link, .box a:visited {
   color: #250B3F;
   text-decoration: none;
   }

 .box:link , .box:visited {
color: #250B3F;
background: #42257a;
background: -moz-linear-gradient(top, #42257a 1%, #cedbe9 100%);
background: -webkit-linear-gradient(top, #42257a 1%,#cedbe9 100%);
background: linear-gradient(to bottom, #42257a 1%,#cedbe9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42257a', endColorstr='#cedbe9',GradientType=0 );
opacity:1;
background-size: auto 100%;
box-sizing: border-box; /* Box sizing for older browsers */
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   /* Make background image height equal to button height */
   }

#promo2 {
   display: none;
   }
   
#promo {
	font: 13pt/13pt sans serif, serif;
	background: center;
	color: #FFFFFF;
    width: 120px;
    height: 85x;
	padding: 1.5px;
    background-color: #654321;
	border-radius: 20px;
    position: relative;
	text-align: center;
	z-index: 2;
	margin-top: 30%;
	-webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-delay: .5s;
    -webkit-animation-iteration-count: 3;
    -webkit-animation-direction: normal;
	-webkit-animation-fill-mode: backwards;
  animation-name: swing;
   animation-duration: 3s;
    animation-timing-function: ease-out;
    animation-delay: .5s;
    animation-iteration-count: 3;
	animation-direction: normal;
	animation-fill-mode: backwards;
    
}



@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}


@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}