/*Style Sheet for Stephan's Sugar Shack Responsive Page

Submitted for Dr. Smith's Web Programming I Course

Responsive Assignment
March 27, 2016
References: http://www.responsivegridsystem.com was used to
obtain ideas on how to make the 3 columns responsive*/

/*Logo Styling for mobile*/

#stephanslogo{background-color:#00AEEC;
max-width:480px;
padding-top:3%;
padding-bottom:3%;
padding-right:5%;
padding-left:5%;
display:block;
}

.logomobile {width:100%;
height:25%;
background-color:white;
display:block;
}
.logomobile img{width:100%;
display:block;
}

/* Sections for Banner */

.banner {
clear: both;
padding: 0px;
margin: 0px;
}

/* Column Setup for Banner */

.coln {
display: none;
float:left;
margin: 1% 0 1% 1.6%;
}
.coln:first-child { margin-left: 0; }

/* Grouping for Banner */

.groupn:before,
.groupn:after { content:""; display:table; }
.groupn:after { clear:both;}
.groupn{ zoom:1; /* For IE 6/7 */ }

.span_2n_of_2n {display:none;}
.span_1n_of_2n { width: 100%;}

.span_1n_of_2n img{
max-width:100%;
max-height:100%;
}
.coln {
margin: 1% 0 1% 0%;
}

.nav{display:none;}

/* Section for Mobile Option */

.section {
clear: both;
padding: 0px;
margin: 0px;
}

#container {
width: 100%;
overflow: hidden;
margin: 10px auto;
background: white;
display:none;
}

/* 3 Columns for Mobile Option */

.col {
display: block;
float:left;
 margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/* Grouping for Mobile Option */

.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

.col { margin: 1% 0 1% 0%; }

.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%;
}

/*Ensures image fills column*/

.span_1_of_3 img{
width: 300px;
height: 200px;
padding: 5% 10%;
}

#footer {
font-size:18px;
height:10%;
}

#footer li {
text-align: center;
float: left;
width: 100%;
position: relative;
color:white;
font-family: Avenir, cursive, sans-serif;
}

ul {
list-style-type: none;
margin:auto;
padding: 5% 8%;
overflow: hidden;
 background-color: #00AEEC;
text-align: center;
width: 100%;
}

h1{
background-color: #00AEEC;
font-family: Avenir, cursive, sans-serif;
color: white;
text-align: center;
display:block;
padding: 5% 8%;
}

h2{
background-color: white;
font-family: Avenir, cursive, sans-serif;
color: #00AEEC;
text-align:left;
display:block;
padding: 5% 8%;
font-size: 18px;
}
h4{
background-color: #00AEEC;
font-family: Avenir, cursive, sans-serif;
color: white;
text-align: center;
display:block;
padding: 5% 8%;
}

#wraph {
padding: 4% 4%;
margin: 10px;
}
#column1h {
width: 100%;
 font-family: Arial, Helvetica, sans-serif;
float: left;
}

#column2h {
width: 100%;
float: left;
font-family: Arial, Helvetica, sans-serif;
}

#column3h {
width: 100%;
float: left;
}

#column4h {
width: 100%;
float: left;

}
#title2{
padding-top: 5px;
width 90%;
background-color: #00AEEC;
font-family: Avenir, cursive, sans-serif;
color: white;
text-align: center;
}
/* Worked off of W3Schools Site http://www.w3schools.com/
css/tryit.asp?filename=trycss_image_gallery for hovering
over images and images*/

div.img:hover {
border: 1px solid #777;
box-shadow: 10px 10px 5px grey;
}

div.img img {
box-shadow: 10px 10px 5px grey;
}
div.description{
font-family: Arial, Helvetica, sans-serif;
color: #00AEEC;
text-align: center;
text-shadow: 1px 1px 1px #000000;
}
div.icecream img{
width:200px;
height:150px;
}
/*Tablet Design*/

@media only screen and (min-device-width : 490px) and (max-

device-width :768px)
{

#stephanslogo{background-color:#00AEEC;
max-width:480px;
padding-top:3%;
padding-bottom:3%;
padding-right:5%;
padding-left:5%;
display:none;

.logomobile {width:100%;
height:25%;
background-color:white;
display:none;
}
.logomobile img{width:100%;
display:none;
}

/* Sections for Banner */

.banner {
clear: both;
padding: 0px;
 margin: 0px;
}

/* Column Setup for Banner */

.coln {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.coln:first-child { margin-left: 0; }

/* Grouping for Banner */

.groupn:before,
.groupn:after { content:""; display:table; }
.groupn:after { clear:both;}
.groupn{ zoom:1; /* For IE 6/7 */ }

.span_2n_of_2n {display:none;}
.span_1n_of_2n { width: 100%;}

.span_1n_of_2n img{
max-width:100%;
max-height:100%;
}
.coln {
margin: 1% 0 1% 0%;
}

/*Two Column Widths for Banner for the Tablet Option*/

.span_2n_of_2n {
width: 100%;
}
.span_1n_of_2n {
width: 49.2%;
}

/*Ensures image fills the column*/

.span_1n_of_2n img{
max-width:100%;
max-height:100%;
}

/* Navigation Menu Styling*/

.nav{display:block;}

.nav ul {
list-style-type: none;
margin:auto;
padding: 2% 5%;
overflow: hidden;
background-color: #00AEEC;
text-align: center;
width: 100%;
}

.nav li {
display: inline-block;
list-style: none;
padding: 2px;
width:15%;
margin: auto;
}

.nav li a {

color: white;
text-align: center;
padding: 2% 5%;
text-decoration: none;
position:relative;
}

/* Change the link color to dark blue on hover */

.nav li a:hover {
background-color: #0063e1;
}

#container {
width: 100%;
overflow: hidden;
 margin: 10px auto;
background: white;
display: none;

/* Three Columns Widths for the Tablet Option */

.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.13%;
}
.span_1_of_3 {
width: 32.26%;
}
/*Ensures image fills column*/
.span_1_of_3 img{
max-width:100%;
max-height:100%;

}
#welcome{
background-color: white;
font-family: Avenir, cursive, sans-serif;
color: #00AEEC;
text-align: left;
display:block;
padding: 5% 8%;
}

#icecreamselection{
background-color: #00AEEC;
font-family: Avenir, cursive, sans-serif;
color: white;
text-align: center;
display:none;
padding: 5% 8%;
}
#hourslocation{
background-color: #00AEEC;
font-family: Avenir, cursive, sans-serif;
color: white;
text-align: center;
display:none;
padding: 5% 8%;
}
#hourslocationinfo{
background-color: white;
font-family: Avenir, cursive, sans-serif;
color: #00AEEC;
text-align: left;
display:none;
padding: 5% 8%;
}

h1{
background-color: #00AEEC;
font-family: Avenir, cursive, sans-serif;
color: white;
text-align: center;
display:none;
padding: 5% 8%;
}

h2{
background-color: white;
font-family: Avenir, cursive, sans-serif;
color: #00AEEC;
text-align:left;
display:none;
padding: 5% 8%;
font-size: 18px;
}
h4{
background-color: #00AEEC;
font-family: Avenir, cursive, sans-serif;
color: white;
text-align: center;
 display:block;
padding: 5% 8%;
}
#wraph {
padding: 4% 4%;
margin: 10px;
}
#column1h {
width: 50%;

font-family: Arial, Helvetica, sans-serif;

float: left;
}

#column2h {
width: 50%;
float: left;
font-family: Arial, Helvetica, sans-serif;
}

#column3h {
width: 50%;
float: left;
}

#column4h {
width: 50%;
float: left;

}
}
/*Desktop Design*/

@media only screen and (min-width: 769px) {

#stephanslogo{background-color:#00AEEC;
max-width:480px;
padding-top:3%;
padding-bottom:3%;
padding-right:5%;
 padding-left:5%;
display:none;

.logomobile {width:100%;
height:25%;
background-color:white;
display:none;
}
.logomobile img{width:100%;
display:none;
}

/* Sections for Banner */

.banner {
clear: both;
padding: 0px;
margin: 0px;
}

/* Column Setup for Banner */

.coln {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.coln:first-child { margin-left: 0; }

/* Grouping for Banner */

.groupn:before,
.groupn:after { content:""; display:table; }
.groupn:after { clear:both;}
.groupn{ zoom:1; /* For IE 6/7 */ }

.span_2n_of_2n {display:none;}
.span_1n_of_2n { width: 100%;}

.span_1n_of_2n img{
max-width:100%;
max-height:100%;
}
.coln {
margin: 1% 0 1% 0%;
}

/*Two Column Widths for Banner for the Desktop Option*/

.span_2n_of_2n {
width: 100%;
}
.span_1n_of_2n {
width: 49.2%;
}

/*Ensures image fills the column*/

.span_1n_of_2n img{
max-width:100%;
max-height:100%;
}

/* Navigation Menu Styling*/

.nav{display:block;}

.nav ul {
list-style-type: none;
margin:auto;
padding: 2% 5%;
overflow: hidden;
background-color: #00AEEC;
text-align: center;
font-size: 22px;
width: 100%;
}

.nav li {
display: inline-block;
list-style: none;
padding: 2px;
width:15%;
margin: auto;
}

.nav li a {

color: white;
text-align: center;
padding: 2% 5%;
text-decoration: none;
position:relative;
}

/* Change the link color to dark blue on hover */

.nav li a:hover {
background-color: #0063e1;
}

#container {
width: 100%;
overflow: hidden;
margin: 10px auto;
background: white;
}

/* Three Columns Widths for the Desktop Option */

.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.13%;
}
.span_1_of_3 {
width: 32.26%;
}
/*Ensures image fills column*/
.span_1_of_3 img{
max-width:100%;
max-height:100%;

}
#welcome{
 background-color: white;
font-family: Avenir, cursive, sans-serif;
color:#00AEEC;
text-align: left;
display:left;
padding: 5% 8%;
}

#icecreamselection{
background-color: #00AEEC;
font-family: Avenir, cursive, sans-serif;
color: white;
text-align: left;
display:none;
padding: 5% 8%;
}
#container {
width: 100%;
overflow: hidden;
margin: 10px auto;
background: white;
display:block;
}
/*The coding ideas for the scrolling banner was obtained
from http://designshack.net/articles/css/
infinitephotobanner/ */

.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 0px;
}

/*keyframe animations*/
.first {
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
-o-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}

@keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}

@-moz-keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}

@-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}

@-ms-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}

@-o-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}

}
h1{
background-color: #00AEEC;
font-family: Avenir, cursive, sans-serif;
color: white;
text-align: center;
display:none;
padding: 5% 8%;
}

h2{
background-color: white;
font-family: Avenir, cursive, sans-serif;
color: #00AEEC;
text-align:left;
display:none;
padding: 5% 8%;
font-size: 18px;
}
h4{
background-color: #00AEEC;
font-family: Avenir, cursive, sans-serif;
color: white;
text-align: center;
display:block;
padding: 5% 8%;
}

#footer {
}
#footer li {
text-align: center;
float: left;
width: 100%;
color:white;
font-family: Avenir, cursive, sans-serif;
font-size:22px;
display:inline-block;
margin:auto;
}
ul {
list-style-type: none;
margin:auto;
padding: 2% 5%;
overflow: hidden;
background-color: #00AEEC;
text-align: center;
width: 100%;
}

#wraph {
padding: 4% 4%;
margin: 10px;
}
#column1h {
width: 25%;

font-family: Arial, Helvetica, sans-serif;

float: left;
}

#column2h {
width: 25%;
float: left;
font-family: Arial, Helvetica, sans-serif;
}

#column3h {
width: 25%;
 float: left;
}

#column4h {
width: 25%;
float: left;