/* CSS Document for Screens Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,700italic,300,700);
body { font-family:'Open Sans',san-serif; font_size: 16px; font-weight: 300; color: #555; margin: 0; padding: 0; }
#page { max-width: 1200px; margin: 0 auto; position: relative; }
/* Test */  /* Margin light clock-Top Right Bottom Left*/

hi { margin: 0 0 1em 0; font_size: 2.8em; font-weight: 700; }
h2 { margin: 0 0 .5em 0; font_size: 1.6em; font-weight: 700; line-height: 1.1em; }
h3 { margin: 0 0 .5em 0; font_size: 1.3em; font-weight: 700; }
h4 { margin: 0 0 1.5em 0; font_size: 1em; font-weight: 700; }

p { margin: 0 0 1em 0; }

a { color: #007eff; }
a:visited {color: #65b1ff; }

a.btn { font-size: 1.2em; text-decoration: none; color: #fff; border: 1px solid #fff; padding: 4px 15px; transition: background-color .5s;}

a.btn:hover {background-color: rgba(0,0,0,.3) }

/* Header */
header { height: 430px; background: #cf0004 url(/images/banner_1200.jpg) no-repeat center bottom; position: relative; }

header a.logo { position:absolute; display: block; width: 160px; height: 66px; background: url(/images/logo.svg) no-repeat 0 0;
background-size: contain; top: 15px; left: 20px; }

header a.logo span {display: none;}
header div.hero {position:absolute; width:42%; top: 130px; left:55%;}
header div.hero h1 {line-height: 1em; margin: 0 0 30px 0; color: #fff;}

/* Section - All */
section { padding: 0 30px; }
section::after { content: ''; display:block; clear:both; }

/* Sectiom - Main */
section.main { margin-top: 20px; margin-bottom: 30px; padding: 0; }
section.main aside {width: 33%; float: left; text-align: center; }

section.main .content {margin: 15px; background: no-repeat center top; background-size: 75px 75px; padding-top: 85px; }
section.main aside .content.trending {background-image: url(/images/icon_star.svg); }

section.main aside .content.find-it {background-image: url(/images/icon_marker.svg); }

section.main aside .content.tools {background-image: url(/images/icon_gear.svg); }

/* Atmosphere */
section.atmosphere {background-color: #cc6633; padding-top: 30px; padding-bottom: 30px; color: #fff; }
section.atmosphere article {padding: 0 20px 0 515px; background: url(/images/photo_lounge.jpg) no-repeat 0 5px}

/* Section - How To */

section.how-to {background-color: #eee9d9; position: relative;}

section.how-to aside {width: 30%; float: left; margin-right: 10px;}

section.how-to aside .content {padding: 30px 30px 20px 0; }

section.how-to aside .content img {display: block; margin: bottom; width: 70%;}

section.how-to aside .content h4 {margin-bottom: 0; }

section.how-to aside .content p {margin-bottom: .5em; }

section.how-to aside .content a {display: inline-block; color: #cc6633; font-weight: 700; }

section.how-to blockquote p { margin: 30px 30px 20px 50px; }

section.how-to blockquote p.quote {font-style: italic; font-size: 1.2em;}
section.how-to blockquote p.credit {color: #777; font-size: 9em; margin-top: 0; padding-left: 20px; line-height: 1.3em; }