/*                                                          
                                                        ,::::                                                        
                                                       ,::::::                                                       
                                                      ,::::::::                                                      
                                                     ,:::::::::,                                                     
                                                    .:::::::::::,                                                    
                                                   .:::::::::::::,                                                   
                                                  .:::::::::::,:;;:`                                                 
                                                 .:::::::: .:,+#########'.                                           
                                                `::::::::   .:::,,:;########`                                        
                                               `::::::::     ,:::::::. ,######`                                      
                                              `::::::::       ,:::::::,   ;####:                                     
                                             `::::::::         ,:::::::.    '###;     This Page was                               
                                            `::::::::           ,:::::::.    ,###.    Designed by                              
                                            ::::::::`            ,:::::::.    '##+    Kris C.                               
                                           ::::::::`              ::::::::`   `###`  /                                
                                          ::::::::`                ::::::::`   ###,                                  
                                         ::::::::`                  ::::::::` `###,                                  
                                        ::::::::`                    :::::::: ;###.                                    
                                       ,:::::::.                      :::::::,####`                                  
                                      ,:::::::.                        :::::,'###+                                   
                                     ,:::::::.          ..`            `:::::####:                                   
                                    ,:::::::.       :@########'`        `:::#####                                    
                                   ,:::::::.     `################:      `:#####',                                   
                                  .:::::::,     #####################.    ######:::                                  
                                 .:::::::,    '########################, ######',::,                                 
                                .:::::::,   `@#################################,::::,                                
                               .:::::::,   .@#################################;,:::::,                               
                              `:,,::::,   :###################################.:::::::,                              
                        ###################################################### ,:::::::,                             
                        :#####################################################  ,:::::::,                            
                         .####################################################.  ,:::::::.                           
                         ,;###################################################:   ,:::::::.                          
                       +######################################################;    ,:::::::.                         
                        .'####################################################,     ::::::::.                        
                        ::;###################################################`      ::::::::`                       
                       ::::###################################################        ::::::::`                      
                      ::::,'#################################################,         ::::::::`                     
                     ::::::,'#################################+ .###########+           ::::::::`                    
                    ,:::::::.:##########'###################@`  `@#########@`            ::::::::`                   
                   ,:::::::. :#######@: `@#################+    `##########@              ::::::::`                  
                  ,:::::::.    ;++;:`    .#################      ##########@.             `::::::::                  
                 ,:::::::,                `###############,      ;##########;              `::::::::                 
     AHHHH      ,:::::::,                  .@############@.      `@##########               `:::::::,                
      \        .:::::::,                    :############@,       ;##########:               `::::::::               
          '###+,::::::,                     `@############;        ;##########                .:::::::,              
         ;#####',:;'+##@`                   `@############'         :#########'                .:::::::,             
         :##############'                   :#############'          :########@`                .:::::::,            
          `+#########+###`                  +######+:#####+          `@########:                 .:::::::,           
          `::#######:`@##'                 .@#####+ .@####+          ,####`@####                  ,:::::::,          
         `:::#########.@@.                 '######   #####+          ####. :###@`                  ,:::::::,         
        `::,:##########;                   #####@    ;####'         :###+   +###:                   ,:::::::.        
       `::,####@.'######`                 '#####`    .####'        `@##@.   `@##+                    ,:::::::.       
       :,'#####` ;######`                `#####,      ####;        ####+     :###                     ::::::::.      
      ::,;##+,` +###+###.                '####;       +###:       +####.     `##@`                     ::::::::.     
     :::::,,:` +###:`@###':.            .####+        ###@.     ,@####'      ###@`                      ::::::::`    
    ::::::::` `@##;  @#######+         ,@####       ,@###@     :#####.      :##@,                        ::::::::`   
   ::::::::,,,.+###.,,'+#####;,,,,,,,+######,,,,,,,@#####+.,,,,:##;.,,,,,,,,,..,,,,,,,,,,,,,,,,,,,,,,,,,,,::::::::`  
  ,:::::::::::,;###:::::::::::::::,;#######:::::::,+#++':::::::::::::::::::::::::::::::::::::::::::::::::::::::::::` 
`,::::::::::::::###',::::::::::::::::;;;;:,:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::`
`,:::::::::::::,;##:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::`
  `,::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.                                                                                                              
*/

/*--CSS RESET--*/

* {
	padding: 0;
	margin: 0;
	text-decoration: none;
	list-style-type: none;
	font-family: 'quicksand', sans-serif;
}

/*--CSS COLOR CLASS--*/

.pink {
	background-color: #E2BEFD;
}

.coral {
	background-color: #F08F80;
}

.cream {
	background-color: #FEEDE5;
}

.gold {
	background-color: #937737;
}

.brown {
	background-color: #552502;
}

.white {
	background-color: white;
}


/*--HTML5 SEMANTIC TAGS---*/


h1 {
	font-family: 'Lobster Two', cursive;
	font-size: 4em;
	margin-top: 1em;
	margin-bottom: 0.3em;
	color: #937737;
}

h2 {
	font-family: 'quicksand', sans-serif;
	font-weight: 700;
	font-size: 1.5em;
	margin-bottom: 1em;
	color: #F08F80;
}

h3{
	font-family: 'quicksand', sans-serif;
	font-weight: 400;
	font-size: 1.5em;
	margin-bottom: 1em;
	color: #F08F80;
}

h4 {
	font-family: 'quicksand', sans-serif;
	font-weight: 400;
	font-size: 1.2em;
	margin-top: 1em;
	margin-bottom: 1em;
	color: #552502;
}

a {
	font-family: 'quicksand', sans-serif;
	font-weight: 400;
	font-size: 1em;
	color: #ffffff;
}

p {
	font-family: 'quicksand', sans-serif;
	font-weight: 400;
	font-size: 1em;
	color: #552502;
	margin-top: 1em;
}


/*--buttons--*/

div.button {
	width: 10em;
	height: auto;
	margin: 0 auto;
	padding: 1em;
	text-align: center;
	color: white;
	background-color: #F08F80;
	border: none;
	display: inline-block;
	font-size: 1.2em;
}

div.button:hover{

	background-color: #E2BEFD;
}

/*--responsive properties--*/


.responsive-full {
  width: 80%;
  height: auto; 
}

.responsive-half {
	width: 40%;
	height: auto;
}

.responsive-small {
	width: 25%;
	height: auto;
}


/*--center--*/
.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
}

/*--MEDIA RULE--*/

/* MOBILE*/

@media screen and (max-width: 767px){

	header {
		width: 100%;
		height: auto;
		position: fixed;
		display: inline-block;
		padding-left: 15%;
		background-color: #FEEDE5;
	}

		#logo-t {
			display: none;
		}

		#logo-l {
			display: none;
		}

	/*HAMBERGER NAV*/

	button#hamburger-icon {
		z-index: 2;
		position: fixed;
		padding: 0.5em;
		border: 0.25em solid #937737;
		background-color: transparent;
	}

		button div {
			transition: transform 0.5s;

				-moz-transition: transform 0.5s;
				-ms-transition: transform 0.5s;
				-o-transition: transform 0.5s;
				-webkit-transition: transform 0.5s;
		}

			.close-button-one {
				transform: rotate(45deg) translateX(0.75em) translateY(0.8em);

						-moz-transform: rotate(45deg) translateX(0.75em) translateY(0.8em);
						-ms-transform: rotate(45deg) translateX(0.75em) translateY(0.8em);
						-o-transform: rotate(45deg) translateX(0.75em) translateY(0.8em);
						-webkit-transform: rotate(45deg) translateX(0.75em) translateY(0.8em);
			}

			.close-button-two {
				transform: scaleX(0);

						-moz-transform: scaleX(0);
						-ms-transform: scaleX(0);
						-o-transform: scaleX(0);
						-webkit-transform: scaleX(0);
			}

			.close-button-three {
				transform: rotate(-45deg) translateX(0.75em) translateY(-0.8em);

						-moz-transform: rotate(-45deg) translateX(0.75em) translateY(-0.8em);
						-ms-transform: rotate(-45deg) translateX(0.75em) translateY(-0.8em);
						-o-transform: rotate(-45deg) translateX(0.75em) translateY(-0.8em);
						-webkit-transform: rotate(-45deg) translateX(0.75em) translateY(-0.8em);
			}

	div.hamburger-div{
		width: 3em;
		height: 0.5em;
		margin: 0.6em;
		background-color: #937737;
	}

	nav {
		position: fixed;
		width: 100%;
		top: 57px;
		left:-100vw;
		border-top: 3px solid #937737;
		background-color: #F08F80;
		transition: left 0.5s;

				-moz-transition: left 0.5s;
				-ms-transition: left 0.5s;
				-o-transition: left 0.5s;
				-webkit-transition: left 0.5s;
	}

	ul {
		margin:8vw;
	}

	li {
		background-color: white;
		margin: 5vw;
		padding: 2vw 0 3vw 0;
		border: 0.5vw solid #937737;
		text-align: center;
	}

	li a#menu {
		font-size: 5vw;
		font-weight: 400;
		color: #937737;
	}

	li a#logo-l {
		display: none;
	}

	.slide-the-drawer {
		left: 0px;
	}

	section#mainlogo{
		clear: both;
		width: 100%;
		padding: 25% 0 40% 0;
		background-image: url(../images/main-logo.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 50%;
		position: static;
	}

	section#main-image {
		width: 100%;
		text-align: center;
		padding: 50% 0 50% 0;
		background-image: url(../images/main-image.png);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		font-family: 'Lobster Two', cursive;
		font-size: 3em;
		color: white;
	}

	section#main-quote {
		width: 100%;
		padding: 2em 0 2em 0;
		text-align: center;
		color: #937737;
		font-size: 1.2em;
	}

	div#slick-slider{
		width: 100%;
		margin: 0 auto;
		padding-left: 10%;
		border: 0.3vw solid #937737;
		text-align: center;
		padding-bottom: 1em;
		position: relative;
		z-index: -1;
	}

	article.left{
		width: 95%;
		height: auto;
		text-align: center;
		float: left;
		padding: 0 0 10% 3%;
	}


	figure#chocolate {
		width: 100%;
		float:right;
		padding: 40% 0 40% 0;
		background-image: url(../images/chocolates.png);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	article.right {
		width: 100%;
		height: auto;
		padding-bottom: 10%;
		text-align: center;
		float: right;
		clear: both;
	}

	figure#storefront {
		width: 100%;
		float:left;
		padding: 40% 0 40% 0;
		background-image: url(../images/store-front.png);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;

	}

	section#form {
		width: 100%;
		float:left;
		padding: 5% 0 5% 0;
		background-color: #FEEDE5;
		text-align: center;
	}

		.textbox-xs {
			width: 80%;
			border: 1px solid #937737;
			text-align: center;
			padding: 1%;
			margin: 8% 1% 8% 1%;
			font-size: 1.1em;
			color: #552502;
		}

		.textbox-s {
			width: 80%;
			border: 1px solid #937737;
			margin: 1% 1% 6% 1%;
			text-align: left;
			padding: 1.5% 5% 1.5% 5%;
			font-size: 1.2em;
			color: #552502;
		}

		.textbox-l {
			width: 80%;
			height: 20vh;
			border: 1px solid #937737;
			margin: 1% 1% 6% 1%;
			text-align: left;
			padding: 5%;
			font-size: 1.2em;
			color: #552502;
		}

	section#subs {
		width: 100%;
		clear: both;
		text-align: center;
		font-size: 1.2em;
		padding: 3em 0 2em 0;
		color: #937737;
		}

}

/* TABLET*/

@media screen and (min-width: 768px) and (max-width: 1365px){

	header {
		width: 100%;
		height: auto;
		position: fixed;
		display: inline-block;
		padding-left: 15%;
		background-color: #FEEDE5;
	}

		#logo-m {
			display: none;
		}

		#logo-l {
			display: none;
		}

	/*HAMBERGER NAV*/

	button#hamburger-icon {
		z-index: 2;
		position: fixed;
		padding: 1em;
		border: 0.25em solid #937737;
		background-color: #FEEDE5;
	}

		button div {
			transition: transform 0.5s;

					-moz-transition: transform 0.5s;
					-ms-transition: transform 0.5s;
					-o-transition: transform 0.5s;
					-webkit-transition: transform 0.5s;
		}

			.close-button-one {
				transform: rotate(45deg) translateX(0.75em) translateY(0.8em);

						-moz-transform: rotate(45deg) translateX(0.75em) translateY(0.8em);
						-ms-transform: rotate(45deg) translateX(0.75em) translateY(0.8em);
						-o-transform: rotate(45deg) translateX(0.75em) translateY(0.8em);
						-webkit-transform: rotate(45deg) translateX(0.75em) translateY(0.8em);
			}

			.close-button-two {
				transform: scaleX(0);

						-moz-transform: scaleX(0);
						-ms-transform: scaleX(0);
						-o-transform: scaleX(0);
						-webkit-transform: scaleX(0);
			}

			.close-button-three {
				transform: rotate(-45deg) translateX(0.75em) translateY(-0.8em);

						-moz-transform: rotate(-45deg) translateX(0.75em) translateY(-0.8em);
						-ms-transform: rotate(-45deg) translateX(0.75em) translateY(-0.8em);
						-o-transform: rotate(-45deg) translateX(0.75em) translateY(-0.8em);
						-webkit-transform: rotate(-45deg) translateX(0.75em) translateY(-0.8em);
			}

	div.hamburger-div{
		width: 3em;
		height: 0.5em;
		margin: 0.6em;
		background-color: #937737;
	}

	nav {
		position: fixed;
		top: 66px;
		left:-100vw;
		width: 100%;
		border-top: 4px solid #937737;
		background-color: #F08F80;
		transition: left 0.5s;

				-moz-transition: left 0.5s;
				-ms-transition: left 0.5s;
				-o-transition: left 0.5s;
				-webkit-transition: left 0.5s;
	}

	ul {
		margin:1vw;
	}

	li {
		background-color: white;
		margin: 5vw;
		padding: 2vw 0 3vw 0;
		border: 0.5vw solid #937737;
		text-align: center;
	}

	li a#menu {
		font-size: 5vw;
		font-weight: 400;
		color: #937737;
	}

	li a#logo-l {
		display: none;
	}


	.slide-the-drawer {
		left: 0px;
	}

	section#mainlogo{
		clear: both;
		width: 100%;
		padding: 30vw 0 15vw 0;
		background-image: url(../images/main-logo.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 30vw;
		position: static;
	}

	section#main-image {
		width: 100%;
		text-align: center;
		padding: 20% 0 20% 0;
		background-image: url(../images/main-image.png);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		font-family: 'Lobster Two', cursive;
		font-size: 5vw;
		color: white;
	}

	section#main-quote {
		width: 100%;
		padding: 4vw 0 4vw 0;
		text-align: center;
		color: #937737;
		font-size: 1em;
	}

	div#slick-slider{
		width: 100%;
		margin: 0 auto;
		border: 0.3vw solid #937737;
		text-align: center;
		padding-bottom: 1em;
		position: relative;
		z-index: -1;
	}

	article.left{
		width: 90%;
		height: auto;
		text-align: center;
		float: left;
		padding: 0 0 3% 5%;
	}


	figure#chocolate {
		width: 100%;
		float:right;
		padding: 25% 0 25% 0;
		background-image: url(../images/chocolates.png);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	article.right {
		width: 100%;
		height: auto;
		padding-bottom: 5%;
		text-align: center;
		float: right;
		clear: both;
	}

	figure#storefront {
		width: 100%;
		float:left;
		padding: 25% 0 25% 0;
		background-image: url(../images/store-front.png);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;

	}

	section#form {
		width: 100%;
		float:left;
		padding: 5% 0 5% 0;
		background-color: #FEEDE5;
		text-align: center;
	}

		.textbox-xs {
			width: 80%;
			border: 1px solid #937737;
			text-align: center;
			padding: 1%;
			margin: 4% 1% 4% 1%;
			font-size: 1em;
			color: #552502;
		}

		.textbox-s {
			width: 80%;
			border: 1px solid #937737;
			margin: 1% 1% 3% 1%;
			text-align: left;
			padding: 1.5% 5% 1.5% 5%;
			font-size: 1em;
			color: #552502;
		}

		.textbox-l {
			width: 80%;
			height: 20vh;
			border: 1px solid #937737;
			margin: 1% 1% 3% 1%;
			text-align: left;
			padding: 5%;
			font-size: 1em;
			color: #552502;
		}

	section#subs {
		width: 100%;
		clear: both;
		text-align: center;
		font-size: 1.2em;
		padding: 3em 0 2em 0;
		color: #937737;
	}
}

/* LAPTOP*/

@media screen and (min-width: 1366px) and (max-width: 1919px){

	header {
		display: none;
	}

	#logo-m {
			display: none;
		}

	#logo-t {
			display: none;
		}

	button#hamburger-icon {
		display: none;
	}

	nav {
		width: 100%;
		position: fixed;
		background-color: #FEEDE5;
	}

	ul {
		width: 100%;
		margin-left:5%;
		padding-bottom: 1vw;
		background-color: #FEEDE5;
	}

	li {
		display: inline-block;
	}

	li a#menu {
		background-color: #FEEDE5;
		font-size: 1vw;
		font-weight: 400;
		color: #937737;
		padding: 1vw 3vw 1vw 3vw;
		margin: 0 3vw 0 3vw;

	}

	li a#menu:hover {
		background-color: #E2BEFD;
		color: white;
	}

	section#mainlogo{
		width: 100%;
		padding: 15vw 0 15vw 0;
		background-image: url(../images/main-logo.png);
		background-position: center;
		background-repeat: repeat-x;
		position: relative;
	}


	section#main-image{
		width: 100%;
		text-align: center;
		padding: 25% 0 25% 0;
		background-image: url(../images/main-image.png);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		font-family: 'Lobster Two', cursive;
		font-size: 5vw;
		color: white;
	}

	section#main-quote{
		width: 100%;
		padding: 4vw 0 4vw 0;
		text-align: center;
		color: #937737;
		font-size: 1.2em;
		clear: both;
	}

	div#slick-slider{
		width: 100%;
		margin: 0 auto;
		padding-bottom: 1em;
		border: 0.3vw solid #937737;
		text-align: center;
		position: relative;
		z-index: -1;

	}

	article.left{
		width: 40%;
		height: auto;
		text-align: center;
		float: left;
		padding: 2% 5% 0 5%;
	}


	figure#chocolate {
		width: 40%;
		float:right;
		padding: 20% 5% 20% 5%;
		background-image: url(../images/chocolates.png);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	article.right {
		width: 40%;
		height: auto;
		padding: 0 5% 0 5%;
		text-align: center;
		float: right;
		clear: both;
	}

	figure#storefront {
		width: 40%;
		float:left;
		padding: 20% 5% 20% 5%;
		background-image: url(../images/store-front.png);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;

	}

	section#form {
		width: 40%;
		float:left;
		padding: 2% 5% 1% 5%;
		background-color: #FEEDE5;
	}

		.textbox-xs {
			width: 80%;
			border: 1px solid #937737;
			text-align: center;
			padding: 1%;
			margin: 1% 2% 2% 0;
			font-size: 1em;
			color: #552502;
		}

		.textbox-s {
			width: 90%;
			border: 1px solid #937737;
			margin-bottom: 5%;
			text-align: left;
			padding: 1.5% 5% 1.5% 5%;
			font-size: 1em;
			color: #552502;
		}

		.textbox-l {
			width: 90%;
			height: 20vh;
			border: 1px solid #937737;
			margin-bottom: 5%;
			text-align: left;
			padding: 5%;
			font-size: 1em;
			color: #552502;
		}

	section#subs {
		width: 100%;
		clear: both;
		text-align: center;
		font-size: 1.2em;
		padding: 3em 0 2em 0;
		color: #937737;
	}

}