@import url(https://fonts.googleapis.com/css?family=Fjalla+One);

/*=========================================================================
   Browse Happy prompt
   ==========================================================================*/

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==================================================================
   base styles
   ============================================================= */

* {margin: 0; padding: 0;}
body {
    font-family: "Times New Roman", serif;
    font-size: 100%;
    line-height: 1.4em;
    background-color: #547cb0;
    }
img {max-width: 100%; height: auto;}
#wrapper {margin: 0 auto; width: 100%; max-width: 1200px; height: auto; position: relative; background-color: #fff;}

header {width: 100%; height: 0; position: relative; margin: 0 auto; background-color: #fff;}

ul {
	margin: 0;
	padding: 0;
	height: 5%;
    text-decoration:none;
	list-style:none;   
}

li {
	padding:0;
	margin:0;
}

nav {width: 100%;
	overflow:hidden;
    background: none;
    padding: 1.5% 0;
}

nav ul {
    font-size: 1.2em;
    opacity:0;
    display: none;
    margin: auto;
}

nav ul li {
	text-align:center;
	display:inline;
	padding: .4em;
    color: #000;
}

nav ul li a {
	display:inline;
	text-decoration:none;
    color: #000;
/*	transition-property:all .2s linear 0s;
	-moz-transition:all .2s linear 0s;
	-webkit-transition:all .2s linear 0s;
	-o-transition:all .2s linear 0s;*/
}

nav ul li a:hover {font-weight: bold; color: #a4a7cb;}

#current {color: #fff; background-color: #a4a7cb;}

/*styling open close button*/
.button {
	display:inline;
	position:absolute;
	right: 2%;
	top: 10;
	z-index: 999;
	font-size: 180%;
    margin-top: 1%;
}
.button a {
	text-decoration:none;
}
.btn-open:after {
	color: #0faef8;
	content:"\f0c9";
	font-family:"FontAwesome";
	transition-property:all .2s linear 0s;
	-moz-transition:all .2s linear 0s;
	-webkit-transition:all .2s linear 0s;
	-o-transition:all .2s linear 0s;
}
.btn-open:hover:after {
	color:#feea8e;
}
.btn-close:after {
	color:#0faef8;
	content:"\f00d";
	font-family:"FontAwesome";
	transition-property:all .2s linear 0s;
	-moz-transition:all .2s linear 0s;
	-webkit-transition:all .2s linear 0s;
	-o-transition:all .2s linear 0s;
}
.btn-close:hover:after {
	color: #feea8e;
}
/*overlay*/
.overlay {
	display: none;
	position: fixed;
	top: 0;
	height: 100%;
	width: 100%;
	background: #393b6e;
	overflow: auto;
	z-index: 99;
}
.wrap {
	color:#a4a7cb;
	text-align:center;
	max-width:90%;
	margin:0 auto;
}
.wrap ul.wrap-nav {
	text-transform:capitalize;
	padding: 50px 0px 20px;
}
.wrap ul.wrap-nav li {
	font-size: 1.5em;
	display: inline-block;
	vertical-align: top;
	width: 50%;
    padding: 5% 0;
    position: relative;
}
.wrap ul.wrap-nav li#current {background-color: #393b6e;}
.wrap ul.wrap-nav li a {
	color: #a4a7cb;
	display: block;
	text-decoration:none;
	transition-property: all .2s linear 0s;
	-moz-transition: all .2s linear 0s;
	-webkit-transition: all .2s linear 0s;
	-o-transition: all .2s linear 0s;
}
.wrap ul.wrap-nav li a:hover {
	color: #feea8e;
}

#title {width: 100%; float: left; background-color: #365da1;}

#logo {display: none;}

h2 {float: left; font: 1.25em "Fjalla One"; color: #feea8e; padding: 2%;}

main {float: left; width: 100%; background-color: #fff;}

#swap {float: left; width: 100%; background-image: url(../images/talbots_corner_400.jpg); background-repeat: no-repeat; background-size: cover; padding-top: 57%;}
main img {float: left}

#map {margin: auto;}
#location {float: left;margin: auto;  background-color: #feea8e;}
#location div {padding: 0 4% 4% 4%; color: #393b6e;}
#location h3 {margin: 0 0 2% 0;}

.history {margin-top: 8%; padding-bottom: 4%;}
.history h3 {clear: both; font-family: "Fjalla One"; font-size: 1.15em; color: #365da1; text-align: center; margin: 4%;}
.history p {text-align: justify; margin: 4%;}

article {float: left; width: 96%; padding: 2% 2% 4% 2%; background-color: #fff;}
#pic {float: left; width: 42%; margin: 4% 4% 2% 2%;}
article a:link {color: #365da1;}
#pic img {width: 100%;}
figcaption {float: left; text-align: center; width: 100%; color: #365da1;}
        
footer {clear: both; width: 96%; background-color: #365da1; float: left; padding: 2%;}
footer a {float: left; margin: 2% 6%; opacity: .6;}
footer a:hover {opacity: 1;}
footer p {font-size: .8em; color: #feea8e; text-align: left; margin-left: 1%;}
footer span {float: right;}
footer span a {opacity: 1; color: #feea8e; float: none; margin: 0;}
footer span a:hover {color: #fff;}

#contact-area {width: 100%; padding: 1% 0 14% 0; background-color: #feea8e;}

#mail {}

#info {margin: 18% 0 4% 6%;}
#info h5 {font: 100 1.1em "Fjalla One", sans-serif; color: #365da1;}
#info p {margin: 2% 0 3% 0;}
#info a {text-decoration: none; font:  100 1.1em "Fjalla One", sans-serif; color: #365da1;}
#email a {font: 400 1.1em "Times New Roman", 'Times', serif; }

#content {width: 90%; background-color: #365da1; color: #fff; margin: 6% auto 2% auto; padding: 2% 0;}
#content p {width: 80%; margin: 0 auto; font: 400 1em 'Times New Roman', 'Times', serif; text-align: center;}

form {width: 90%; margin: 2% 0;}
table {width: 96%; margin: 4% 2%;}
#contact-area label {margin-right: .25em;}
#contact-area input, #contact-area textarea {
        padding: 2%;
        width: 96%;
        font-family: Helvetica, sans-serif;
        font-size: 1em;
        margin: 2% 2%;
        border: 2px solid #ccc;
        }
#contact-area textarea {height: 12em;}
#contact-area textarea:focus, #contact-area input:focus {
    border: 2px solid #365da1;
    }
#contact-area input.submit-button {
    width: 100px;
    float: right;
    margin-right: 0;
    background-color: #365da1; 
    color: #fff;
    margin-top: -4%;
    }
td.left {
    font-family: 'Sura', serif; 
    text-align: right;
    font-size: 1em;
    }
#pref {
    width: 5em;
    text-align: right;
    font-family: 'Sura', serif; 
    font-size: 1em;
    line-height: 1.2em;
    }
select {width: 40%; margin: 14% 3%; padding: 5px;}

/* ==========================================================================
   Media Queries   ========================================================================== */

@media screen and (min-width: 300px) {
    .history h3 {font-size: 1.2em;}
}

@media screen and (min-width: 320px) {
    .button {font-size: 210%; margin-top: 1%;}
    h2 {font-size: 1.31em;}
    #hist {font-size: 1.22em;}
} 

@media screen and (min-width: 332px) {
    .button {font-size: 240%;}
    .history h3 {font-size: 1.25em;}
}

@media screen and (min-width: 346px) {
    h2 {font-size: 1.4em;}
    #hist {font-size: 1.32em;}
    #pic {width: 38%}
}
 
@media screen and (min-width: 380px) {
    h2 {font-size: 1.45em;}
    #hist {font-size: 1.4em;}
    .history h3 {font-size: 1.3em;}
    #contact-area {padding: 1% 0 12% 0;}
    #info {margin-left: 10%;}
    #content {width: 80%; margin-top: 2%;}
}

@media screen and (min-width: 401px) {
    nav {float: left; text-align:left; background-color: #fff;}
    nav ul {display:inline-block; opacity: 1;}
    .button {display: none;}
    #logo {display:inline; float: left; width: 17%; left: 1.5%; margin: 2.5% 0 2.5% 2%;}
    h2 {float: right; font-size: 1.4em; padding: 2%;}
    #swap {background-image: url(../images/talbots_corner_800.jpg);}
    #location h3 {margin-top: -1%;}
    .history {margin-top: 0;}
    .history h3 {font-size: 1.37em; padding-top: 2%;}
    #pic {width: 32%;}
    #contact-area {padding-top: 8%;}
    #content p {width: 70%;}
    select {margin: 10% 3%;}
}

@media screen and (min-width: 438px) {
    #location p {width: 90%; margin: auto;}
}

@media screen and (min-width: 453px) {
    nav ul {font-size: 1.32em;}
    #logo {top: 53%;}
    h2 {font-size: 1.6em; padding: 2.25% 2% 0 2%;}
    #location p {width: 80%;}
    #contact-area {padding-top: 6%;}
    #content p {width: 90%;}
}

@media screen and (min-width: 500px) {
    #logo {top: 50%;}
    h2 {font-size: 1.75em;}
    #pic {width: 28%; margin: 3% 3% 2% 2%;}
    #location p {width: 92%;}
    #info {margin-left: 20%;}
    #content {width: 70%;}
}

@media screen and (min-width: 555px) {
    #location p {width: 86%;}
    #contact-area {padding: 6% 0 8% 0;}
    select {margin: 6% 3%;}
}

@media screen and (min-width: 560px) {
    #logo {left: 2%; top: 12%;}
    h2 {font-size: 2em;}
    #pic {width: 25%;}
    #location {margin: 0; padding: 0 5%;}
    #location p {width: 92%;}
    .history p {margin: 2%;}
    #content {width: 80%;}
}

@media screen and (min-width: 600px) {
    #logo {top: 11.5%; margin: 2%;}
    #contact-area {padding-top: 2%;}
    #info {margin: 20% 2% 4% 16%;}
    #content {width: 74%;}
    table {width: 86%; margin: 0 0 4% 8%;}
    #contact-area input.submit-button {margin-right: 4%;}
}

@media screen and (min-width: 660px) {
    #logo {width: 15%; top: 10.5%;}
    h2 {padding-top: 2.5%;}
    #location {padding: 0;}
    #map {float: left; width: 64%;}
    #location div {float: right; width: 32%; margin: 4% 2%; padding: 0;}
    #location p {width: 100%;}
    #location h3 { margin-bottom: 4%;}
    #contact-area {float: left; padding-bottom: 4%;}
    #info {float: right; width: 34%; margin: 2%;}
    #info h5 {width: 78%;}
    #mail {float: left; width: 66%; margin-left: -4%;}
    #content {width: 72%;}
    #content p {width: 70%;}
}
    
@media screen and (min-width: 720px) {
    h2 {padding-top: 2.75%;}
    .history {margin-top: 0; padding-bottom: 2%;}
    #pic {width: 20%;}
}

@media screen and (min-width: 800px) {
    nav ul {font-size: 1.5em;}
    #logo {top: 10%;}
    #swap {background-image: url(../images/talbots_corner1200.jpg);}
    h2 {font-size: 2.15em;}
    .history h3 {margin: 2%}
    #content p {width: 80%;}
    #info h5 {width: 100%;}
}

@media screen and (min-width: 835px) {
    #logo {top: 9.7%;}
}
@media screen and (min-width: 900px) {
    #logo {top: 10%;}
    h2 {font-size: 2.5em;}
    .history p {margin: 1%;}
}

@media screen and (min-width: 960px) {
    #logo {top: 9.4%;}  
    #pic {width: 17%;}
}

@media screen and (min-width: 1000px) {
    #logo {top: 9%;}  
}

@media screen and (min-width: 1100px) {
    nav {padding: 1% 0;}
    #logo {top: 7%;}
}

@media screen and (min-width: 1150px) {
    header {padding-bottom: 3.2%;}
    #logo img {top: 7.6%;}
}

@media screen and (min-width: 1200px) {
    header {padding-bottom: 3%;}
    #logo img {top: 7.2%;}
    h2 {font-size: 2.75em;}

}