/* @reset */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/**********************************************/
/* @general */
body { margin: 0; padding: 0; width: 100%; text-align: center; }


/**********************************************/
/* @patterns */
p, a, li, blockquote {
    font-family: Lato, Verdana, sans-serif;
    font-weight: 400;
    font-size: 1em;
    line-height: 1.5em;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }
em { font-style: italic; }
strong { font-weight: bold; }
h3 {
    font-size: 2em; font-family: Tinos, Palatino, serif; font-weight: 700;
}
h4 {
    font-size: 1.2em; font-family: Lato, Verdana, sans-serif; font-weight: 700; line-height: 1.6em;
}
blockquote, .credit { padding: 0 2em; color: #666; text-align: justify; font-size: 1rem; line-height: 1.6em; }
.credit { margin: 1em .2em .2em 2.2em; font-size: 0.8em; line-height: 1.6em;}
.c-author { text-transform: uppercase; font-size: 1rem; }
.biglink { color: black; font-size: 1.4em; text-decoration: none; text-transform: uppercase; }
.biglink:hover { text-decoration: underline; }
@media all and (min-width: 320px) {
    .float-right { float: none; text-align: center;}
}
@media all and (min-width: 720px) {
    .float-right { float: right; }
}
.more { clear: both; text-align: right; margin: 2em 0 1em 0; }
.inv { color: white; }



/**********************************************/
/* @structure */
header { 
    margin: 0 auto 3em auto;
    padding: 2em 0 .5em 0;
    width: 100%; height: auto;
    background: url(inc/images/background1.jpg);
}
#header-container { margin: 0 10%; }

header h1 {
    font-family: Tinos, Palatino, serif; font-weight: 400; 
    color: #8b1848;
    margin: 0 auto;
}
header h2 {
    font-family: Tinos, Palatino, serif; font-weight: 400;
    color: #23366f;
    margin: -.1em auto .8em auto;
}
@media all and (min-width: 320px) {
    header h1 { font-size: 2.5em; }
    header h2 { font-size: 1.5em; }
    header p { font-size: .6em; }
}
@media all and (min-width: 600px) {
    header h1 { font-size: 5em; }
    header h2 { font-size: 2.5em; }
    header p { font-size: 1em; }
}

.button { 
    width: 10em;
    background-color: #ffd145;
    color: #000;
    border: .15em solid white;
    border-radius: 1em;
    display: inline-block;
    margin: 0 auto 2em auto;
    padding: .2em; 
    font-size: 1.4em; 
    font-weight: 700;
    text-decoration: none; 
    text-transform: uppercase; 
}
.button:hover {
    background-color: #ddb023;
}

@media all and (min-width: 320px) {
    #cover { display: none; width: 0; height: 0; }
}
@media all and (min-width: 960px) {
    #cover {
    display: block;
    float: right;
    transform: rotate(8deg);
    margin: 0 -30px 0 10px;
    width: auto; height: auto;
/*    position: absolute;
    top: 50px;
    right: 30px;
    height: 200px;
    transform: rotate(8deg);
*/
}
}
#title-info { text-align: center; width: 70%; }


#header-nav { margin: 0; padding: 0; width: 100%; }
    #header-nav ul { padding: 0; display: inline-block; list-style: none; }
    #header-nav ul li {
        display: inline-block;
        margin: 0;
        padding: .5em 1em;
        font-size: .9em;
        text-transform: uppercase;
    }
    #header-nav ul li a {
        color: #8b1848;
        text-decoration: none;
    }
    #header-nav ul li a:hover {
        color: #333;
        text-decoration: underline;
    }

@media all and (min-width: 320px) {
    #header-nav { display: none; }
    nav ul { display: block; }
    nav ul li { display: block; border-bottom: 2px solid white;}
}

@media all and (min-width: 720px) {
    #header-nav { display: inline; }
}

@media all and (min-width: 960px) {
    nav { border-bottom: 1px solid black; }
    nav ul li { display: inline-block; width: auto; border-bottom: none; }
}
            
#reviews { text-align: center; margin: 4em 10% 2em 10%; clear: both; }
#review-123 { padding: 0; width: 100%; display: inline-block; }  
@media all and (min-width: 320px) {
    .review { }
    #review-1 { display: none; }
    #review-2 { display: none; }
}
@media all and (min-width: 720px) {
        .review { 
        width: 40%;
        height: auto;
        margin: 0;
        padding: 0 1em;
        vertical-align: middle;
    }
        #review-1 { display: inline-block; margin-left: 0; border-right: 1px solid grey; }
}
@media all and (min-width: 960px) {
    .review { width: 28%; }
    #review-1 { border-right: none; }
    #review-2 { display: inline-block; border-left: 1px solid grey; border-right: 1px solid grey;    }
    #review-2 img { width: 75%; }
}
#review-3 { display: inline-block; margin-right: 0; border-left: none; }

#content { text-align: center; margin: 4em 10%; }
@media all and (min-width: 320px) {
#content h1 { font: bold 2em Lato, Verdana, san-serif; color: #aaa; margin: 1em auto; }
}
@media all and (min-width: 720px) {
#content h1 { font-size: 2.5em; }
}
#content h2 { font: bold 2em Lato, Verdana, san-serif; color: #aaa; margin: 1em auto; }
#content hr { width: 70%; margin: 4em auto; }
#content p, blockquote {
    margin: 2em auto;
    width: 80%;
    text-align: left;
}
#content img { max-width: 100%; } 
#content a { color: #666; text-decoration: underline; }
#content a:hover { color: #333; }

#content.sample p {
    text-indent: 4em;
    margin: .5em auto;
    max-width: 45em;
}

#content.sample p.tro {
    text-indent: 0;
    margin: 1em auto;
    font-size: 1.2em;
    color: gray;
}

#summary { margin: 1em auto 0 auto; padding: 18% 10% 2% 10%; background-color: black; background-image: url(inc/images/taungeyes.jpg); background-repeat: no-repeat; background-position: top center; background-attachment: scroll; background-size: contain; }
#summary h3, #summary p { color: white; }
#summary h3 { text-align: left; line-height: 1.2em; }
@media all and (min-width: 320px) {
    #summary h3 { width: 100%; }
    #summary p { width: 100%; padding: 1em 0 0 0; }
}
@media all and (min-width: 720px){
    #summary h3 { width: 35%; float: left; } 
    #summary p { width: 65%; padding-left: 40%; }
}
#summary p { text-align: left; font-size: 1.1em; line-height: 1.8em; }

.gallery { clear: both; padding-top: 4em; background: url(inc/images/background1.jpg) repeat; width: 100%; height: 30em; }
#owl-example { margin: 2em auto 0 auto; text-align: center; }
.owl-image { text-align: center; }
.owl-image p { font-size: .8em; }

nav { margin: 0; padding: 0; width: 100%; background-color: #333; border-top: 1px solid black; }
nav ul { padding: 0; display: inline-block; list-style: none; border-left: 2px solid white; }
nav ul li {
    display: inline-block;
    margin: 0;
    padding: .5em 1em;
    background-color: #666;
    border-right: 2px solid white;
}
nav ul li a {
    color: white;
    font-size: 1.2em;
    text-decoration: none;
    text-transform: uppercase;
}
nav ul li:hover {
    background-color: #333;
}
@media all and (min-width: 320px) {
    nav ul { display: block; }
    nav ul li { display: block; border-bottom: 2px solid white;}
}

@media all and (min-width: 960px) {
    nav { border-bottom: 1px solid black; }
    nav ul li { display: inline-block; width: auto; border-bottom: none; }
}

footer { 
    margin: 0;
    padding: 2em 10% ; 
    height: auto; 
    min-height: 350px;
    background-color: #ccc; /*fallback solid background */
    /* will be "on top", if browser supports it */
    background-image: linear-gradient(to bottom, #ccc 80%, #999);
    text-align: left;
}
@media all and (min-width: 320px) {
    #footer-pic img { width: 150px; }
}
@media all and (min-width: 720px) {
    #footer-pic img { width: 100%; }
}
footer h4 { margin-top: 2em; }
footer p { margin: 1em 0; line-height: 1.4em; }
footer a { color: #333; text-decoration: underline; }
.copyright { font-size: .8em; line-height: 1.4em; }

@viewport { width: device-width; }