/*
* HTML5 Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
body {
font-size: 1em;
line-height:1.4;
}
a {
color: #00e;
}
a:visited {
color: #551a8b;
}
a:hover {
color: #06e;
}
img {
display:block;
vertical-align: middle;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
textarea {
resize: vertical;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
html{width:100%}
body{padding:12px}
/* grid styles */
.grid2,.grid2a,.grid3,.grid4{width:100%;display:inline-block}
.column{float:left;position:relative}
.grid2 .column:first-of-type{width:10%}
.grid2 .column:last-of-type{width:90%}
.grid2a .column{width:49%;padding:2px}
.grid3 .column{width:32%;padding:2px}
.grid4 .column{width:24%;padding:2px}
/* section and article astryles */
section:nth-of-type(1),section:nth-of-type(3){max-width:1920px;margin:0 auto 0 auto}
section:nth-of-type(2){min-width:320px;max-width:1200px;margin:0 auto 0 auto}
article.flex{display:flex;display:-webkit-flex;display:-ms-flex}
/* image styles */
.logo{margin:0 auto 0 auto;width:100%}
.icon{width:100%;margin-left:-12px}
/* heading styles */
h1#top{color:#000;font-family: 'Oswald', sans-serif;font-size:4em;font-weight:700;margin:0;text-align:center}
h1#explore,h1#get,h1#take,h1#visit,h1#check,h1#find,h1#for,h1#further{color:#000;font-family: 'Open Sans', sans-serif;font-size:3em;font-weight:400;margin:0;text-align:left}
/* text styles */
p{color#000;font-family: 'Open Sans', sans-serif;font-weight:300}
/* back to top button */
.goTop{position:fixed;bottom:2em;right:2em;text-decoration:none;color:white;background-color:rgba(0, 0, 0, 0.3);font-size:12px;padding:1em;display:none}s
.goTop:hover{background-color: rgba(0, 0, 0, 0.6)}
/* animations mofos */
.spin{;-webkit-animation-name:spin;-webkit-animation-duration:10000ms;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-name:spin;-moz-animation-duration:10000ms;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;-ms-animation-name:spin;-ms-animation-duration:10000ms;-ms-animation-iteration-count:infinite;-ms-animation-timing-function:linear;animation-name:spin;animation-duration:10000ms;animation-iteration-count:infinite;animation-timing-function:linear;}
@-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.pulse{-webkit-animation-name:pulse;-webkit-animation-duration:5010ms;-webkit-transform-origin:70% 70%;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-name:pulse;-moz-animation-duration:5010ms;-moz-transform-origin:70% 70%;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;-ms-animation-name:pulse;-ms-animation-duration:5010ms;-ms-transform-origin:70% 70%;-ms-animation-iteration-count:infinite;-ms-animation-timing-function:linear;animation-name:pulse;animation-duration:5010ms;transform-origin:70% 70%;animation-iteration-count:infinite;animation-timing-function:linear;
}
@-webkit-keyframes pulse {
0% { -webkit-transform: scale(1); }
30% { -webkit-transform: scale(1); }
40% { -webkit-transform: scale(1.08); }
50% { -webkit-transform: scale(1); }
60% { -webkit-transform: scale(1); }
70% { -webkit-transform: scale(1.05); }
80% { -webkit-transform: scale(1); }
100% { -webkit-transform: scale(1); }
}
@-moz-keyframes pulse {
0% { -webkit-transform: scale(1); }
30% { -webkit-transform: scale(1); }
40% { -webkit-transform: scale(1.08); }
50% { -webkit-transform: scale(1); }
60% { -webkit-transform: scale(1); }
70% { -webkit-transform: scale(1.05); }
80% { -webkit-transform: scale(1); }
100% { -webkit-transform: scale(1); }
}
@-ms-keyframes pulse {
0% { -webkit-transform: scale(1); }
30% { -webkit-transform: scale(1); }
40% { -webkit-transform: scale(1.08); }
50% { -webkit-transform: scale(1); }
60% { -webkit-transform: scale(1); }
70% { -webkit-transform: scale(1.05); }
80% { -webkit-transform: scale(1); }
100% { -webkit-transform: scale(1); }
}
@keyframes pulse {
0% { -webkit-transform: scale(1); }
30% { -webkit-transform: scale(1); }
40% { -webkit-transform: scale(1.08); }
50% { -webkit-transform: scale(1); }
60% { -webkit-transform: scale(1); }
70% { -webkit-transform: scale(1.05); }
80% { -webkit-transform: scale(1); }
100% { -webkit-transform: scale(1); }
}
/* nav styles */
nav{display:inline-block;margin:0 auto 0 auto;font-size:2em}
/* footer styles */
footer{border-top:1px solid #ccc}
/* ==========================================================================
Helper classes
========================================================================== */
.nocallout {
-webkit-touch-callout: none;
}
.pressed {
background-color: rgba(0, 0, 0, 0.7);
}
textarea[contenteditable] {
-webkit-appearance: none;
}
.gifhidden {
position: absolute;
left: -100%;
}
.ir {
background-color: transparent;
background-repeat: no-repeat;
border: 0;
direction: ltr;
display: block;
overflow: hidden;
text-align: left;
text-indent: -999em;
}
.ir br {
display: none;
}
.hidden {
display: none !important;
visibility: hidden;
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
.invisible {
visibility: hidden;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
Theses examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 319px) {
/* Style adjustments for viewports that meet the condition */
}
@media only screen and (min-width: 639px) {
/* Style adjustments for viewports that meet the condition */
}
@media only screen and (min-width: 767px) {
}
@media only screen and (max-width: 1024px) {
.grid2a .column{width:100%}
.grid3 .column{width:100%}
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
/* Style adjustments for viewports that meet the condition */
}