/*                                                          
                                                        ,::::                                                        
                                                       ,::::::                                                       
                                                      ,::::::::                                                      
                                                     ,:::::::::,                                                     
                                                    .:::::::::::,                                                    
                                                   .:::::::::::::,                                                   
                                                  .:::::::::::,:;;:`                                                 
                                                 .:::::::: .:,+#########'.                                           
                                                `::::::::   .:::,,:;########`                                        
                                               `::::::::     ,:::::::. ,######`                                      
                                              `::::::::       ,:::::::,   ;####:                                     
                                             `::::::::         ,:::::::.    '###;     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;
}


/*--MEDIA RULE--*/

/* MOBILE*/

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

section#flavor-container{
	width: 100%;
	margin: 0 auto;
	padding-top: 5%;
	position: static;
	text-align: center;
}

figure#flavor{
		width: 100%;
		margin: 0 auto;
		padding-top: 2em;
		padding-bottom: 2em;
		text-align: center;
		float: left;
		color: #937737;
		font-size: 1.5em;
		letter-spacing: 2px;
	}

section#name-container{
	
	width: 100%;
	padding-top: 1%;
	padding-bottom: 3%;
	text-align: center;
	float: left;

}

figure#icon1{
	display: none;
}

figure#icon2{
	display: none;
}

section#menu-container{
	width: 100%;
	float: left;
}

article#menu-list {
	width: 80%;
	height: auto;
	margin: 5% 0 0 5.5%;
	padding: 4%;
	text-align: center;
	float: left;
	border: 3px solid #937737;
}

figure#chocolate-box {
		width: 100%;
		float:left;
		padding: 30% 0 30% 0;
		margin-bottom: 5%;
		background-image: url(../img/chocolate-box.png);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;

	}

section#name-coffee-container{
	width: 100%;
	float: left;
	text-align: center;
}

section#name-tea-container{
	width: 100%;
	padding-bottom: 7%;
	float: left;
	text-align: center;
}


article#coffee-list {
	width: 80%;
	height: auto;
	margin: 0 0 2% 5.5%;
	padding: 4%;
	text-align: center;
	float: left;
	border: 3px solid #937737;
}

article#tea-list {
	width: 80%;
	height: auto;
	margin: 0 0 2% 5.5%;
	padding: 4%;
	text-align: center;
	float: left;
	border: 3px solid #937737;
}

section#jump-location{
	
	width: 100%;
	padding-bottom: 5%;
	text-align: center;
	float: left;
	font-size: 1em;
}

	section#footer {
		width: 100%;
		clear: both;
		text-align: center;
		padding: 2em 0 5em 0;
	}

	figure#twitter {
		margin: 1em 0.5em 0 0.5em;
		padding: 1em;
		clear: both;
		text-align: center;
		display: inline-block;
		background-image: url(../img/twitter.png);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	figure#insta {
		margin: 1em 0.5em 0 0.5em;
		padding: 1em;
		clear: both;
		text-align: center;
		display: inline-block;
		background-image: url(../img/insta.png);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	figure#fb {
		margin: 1em 0.5em 0 0.5em;
		padding: 1em;
		clear: both;
		text-align: center;
		display: inline-block;
		background-image: url(../img/fb.png);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}


}

/* TABLET*/

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

section#flavor-container{
	width: 100%;
	margin: 0 auto;
	padding-top: 5%;
	position: static;
	text-align: center;
}

figure#flavor{
		width: 50%;
		margin: 0 auto;
		padding-top: 2em;
		padding-bottom: 2em;
		text-align: center;
		float: left;
		color: #937737;
		font-size: 1.5em;
		letter-spacing: 2px;
	}

section#name-container{
	
	width: 100%;
	padding-top: 1.5em;
	padding-bottom: 5%;
	text-align: center;
	float: left;

}

figure#icon1{
	width: 10%;
	clear: both;
	float: left;
	margin-left: 45%;
	margin-top: 0.25%;
}

figure#icon2{
	clear: both;
	float: left;
	margin-left: 48%;
}

section#menu-container{
	width: 100%;
	float: left;
}

article#menu-list {
	width: 35%;
	height: auto;
	margin: 0 3% 2% 3%;
	padding: 4%;
	text-align: center;
	float: left;
	border: 3px solid #937737;
}

figure#chocolate-box {
		width: 100%;
		float:left;
		padding: 23% 0 23% 0;
		margin-bottom: 5%;
		background-image: url(../img/chocolate-box.png);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;

	}

section#name-coffee-container{
	width: 100%;
	padding-bottom: 3%;
	float: left;
	text-align: center;
}

section#name-tea-container{
	width: 100%;
	padding-bottom: 6%;
	float: left;
	text-align: center;
}


article#coffee-list {
	width: 80%;
	height: auto;
	margin: 3% 0 0 5.5%;
	padding: 4%;
	text-align: center;
	float: left;
	border: 3px solid #937737;
}

article#tea-list {
	width: 80%;
	height: auto;
	margin: 3% 0 0% 5.5%;
	padding: 4%;
	text-align: center;
	float: left;
	border: 3px solid #937737;
}

section#jump-location{
	
	width: 100%;
	padding-bottom: 5%;
	text-align: center;
	float: left;
	font-size: 1em;
}


	section#footer {
		width: 100%;
		clear: both;
		text-align: center;
		padding: 2em 0 5em 0;
	}

	figure#twitter {
		margin: 1em 0.5em 0 0.5em;
		padding: 1em;
		clear: both;
		text-align: center;
		display: inline-block;
		background-image: url(../img/twitter.png);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	figure#insta {
		margin: 1em 0.5em 0 0.5em;
		padding: 1em;
		clear: both;
		text-align: center;
		display: inline-block;
		background-image: url(../img/insta.png);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	figure#fb {
		margin: 1em 0.5em 0 0.5em;
		padding: 1em;
		clear: both;
		text-align: center;
		display: inline-block;
		background-image: url(../img/fb.png);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}


}

/* LAPTOP*/

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

section#flavor-container{
	width: 100%;
	margin: 0 auto;
	padding-top: 5%;
	position: static;
	text-align: center;
}

figure#flavor{
		width: 20%;
		margin: 0 auto;
		padding-bottom: 2em;
		text-align: center;
		float: left;
		color: #937737;
		font-size: 1em;
		letter-spacing: 2px;
		transition: transform 0.5s;

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

		figure#flavor:hover{
			transform: scale(1.4);

				-moz-transform: scale(1.4);
				-ms-transform: scale(1.4);
				-o-transform: scale(1.4);
				-webkit-transform: scale(1.4);
		}

section#name-container{
	width: 100%;
	padding-top: 2em;
	float: left;
	text-align: center;
}

section#menu-container{
	width: 100%;
	float: left;
}

article#menu-list {
	width: 35%;
	height: auto;
	margin: 0 3% 2% 3%;
	padding: 4%;
	text-align: center;
	float: left;
	border: 3px solid #937737;
}

figure#chocolate-box {
		width: 30%;
		float:left;
		padding: 20% 4% 20% 4%;
		margin: 0 2% 2% 7%;
		background-image: url(../img/chocolate-box.png);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;

	}

section#name-coffee-container{
	width: 50%;
	padding-top: 1.5em;
	padding-bottom: 2%;
	float: left;
	text-align: center;
}

section#name-tea-container{
	width: 50%;
	padding-top: 1.5em;
	padding-bottom: 2%;
	float: right;
	text-align: center;
}

article#coffee-list {
	width: 80%;
	height: auto;
	padding: 4%;
	margin:5%;
	text-align: center;
	float: left;
	border: 3px solid #937737;
}

article#tea-list {
	width: 80%;
	height: auto;
	padding: 4%;
	margin:5%;
	text-align: center;
	float: right;
	border: 3px solid #937737;
}

section#jump-location{
	
	width: 100%;
	padding-top: 5%;
	padding-bottom: 3%;
	text-align: center;
	float: left;
}

	section#jump-location:hover{
		text-decoration: underline;
	}

	section#footer {
		width: 100%;
		clear: both;
		text-align: center;
		padding: 2em 0 5em 0;
	}

	figure#twitter {
		margin: 1em 0.5em 0 0.5em;
		padding: 1em;
		clear: both;
		text-align: center;
		display: inline-block;
		background-image: url(../img/twitter.png);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	figure#insta {
		margin: 1em 0.5em 0 0.5em;
		padding: 1em;
		clear: both;
		text-align: center;
		display: inline-block;
		background-image: url(../img/insta.png);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	figure#fb {
		margin: 1em 0.5em 0 0.5em;
		padding: 1em;
		clear: both;
		text-align: center;
		display: inline-block;
		background-image: url(../img/fb.png);
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}


	figure#icon1{
	width: 10%;
	clear: both;
	float: left;
	margin-left: 45%;

			animation-name: spin;
			animation-iteration-count: infinite;
			animation-timing-function: linear;

				-moz-animation-name: spin;
				-moz-animation-iteration-count: infinite;
				-moz-animation-timing-function: linear;

				-ms-animation-name: spin; 
				-ms-animation-iteration-count: infinite;
				-ms-animation-timing-function: linear;

				-o-animation-name: spin;
				-o-animation-iteration-count: infinite;
				-o-animation-timing-function: linear;

				-webkit-animation-name: spin;
				-webkit-animation-iteration-count: infinite;
				-webkit-animation-timing-function: linear;
	}

	figure#icon2{
		clear: both;
		float: left;
		margin-left: 48%;

				animation-name: spin;
				animation-iteration-count: infinite;
				animation-timing-function: linear;

						-moz-animation-name: spin;
						-moz-animation-iteration-count: infinite;
						-moz-animation-timing-function: linear;

						-ms-animation-name: spin; 
						-ms-animation-iteration-count: infinite;
						-ms-animation-timing-function: linear;

						-o-animation-name: spin;
						-o-animation-iteration-count: infinite;
						-o-animation-timing-function: linear;

						-webkit-animation-name: spin;
						-webkit-animation-iteration-count: infinite;
						-webkit-animation-timing-function: linear;
	}

	figure#icon1 {
		animation-duration: 8s;

				-moz-animation-duration: 8s;
				-ms-animation-duration: 8s;
				-o-animation-duration: 8s;
				-webkit-animation-duration: 8s;
	}

	figure#icon2 {
		animation-duration: 10s;

				-moz-animation-duration: 10s;
				-ms-animation-duration: 10s;
				-o-animation-duration: 10s;
				-webkit-animation-duration: 10s;
	}


	/*--CSS3 Keyframes--*/


	@keyframes spin {
		0%		{transform: rotate(0deg);}
		100%	{transform: rotate(360deg);}
	}


	@keyframes spin-and-expand {
		0%		{transform: rotate(0deg)scaleX(1);}
		50%		{transform: rotate(180deg)scaleX(4);}
		100%	{transform: rotate(360deg)scaleX(1);}
	}

}