@import url('https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i');

body{
	font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 400; color: #555555; margin: 0; padding: 0;
}

#page {
	max-width: 1400px; margin: 0 auto; position: relative;
}

/* text - headers, paragraphs, anchor tags  */
h1 {
	margin: 0 0 1em 0; font-size: 2.8em; font-weight: 700; color:#000000;
}
h2 {
	margin: 0 0 .5em 0; font-size: 1.6em; font-weight: 700; line-height: 1.1em; color:#990000;
}
h3 {
	margin: 0 0 .5em 0; font-size: 1.3em; font-weight: 700; color:#990000;
}
h4 {
	margin: 0 0 1.5em 0; font-size: 1em; font-weight: 700; color:#990000;
}
h5 {
    margin: 0 0 .2em 0; font-size: 1.8em; font-weight: 700; color:#990000;
}
h6
{
    color:#555555; font-weight: 700; font-size: 1.4em; margin: 0 0 .2em 0;
}
h7 
{
	color:#000000; font-weight:800; font-size:.7em;
}

p{
	margin: 0 0 1em 0;
}
a {
	color:#0073ff;
}
a:visited {
	color:#00af00;
}

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

a.btn:hover {
	background-color:#FFFFFF;
	color: #000000;
	transition: background-color 1s;
}

a.btnSmall {
    font-size: 1em;
    text-decoration: none;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    padding: 4px 15px;
}

a.btnSmall:hover {
    background-color:#FFFFFF;
    color: #000000;
    transition: background-color 1s;
}


a.btnMain {
    font-size: 1em;
    text-decoration: none;
    color: #000000;
    border: 1px solid #000000;
    padding: 4px 15px;
}

a.btnMain2 {
    font-size: 1em;
    text-decoration: none;
    color: #000000;
    border: 1px solid #000000;
    padding: 10px 10px;
}

a.btnMain:hover {
    background-color:#990000;
    color: #FFFFFF;
    transition: background-color 1s;
}

a.btnMain2:hover {
    background-color:#990000;
    color: #FFFFFF;
    transition: background-color 1s;
}

/* stylings for header area */
header {
	height: 186px; 
	background: #cf0004 url(../images/body_bkgd.png) /*no-repeat*/ center bottom; position: relative;
}

header a.logo {
	position: absolute; display: block; width: 250px; height: 188px;
	/*background: url(../images/dazwierz42m.png) no-repeat 0 0; */
	background: url(../images/newer-logo.png) no-repeat 0 0;
	background-size: contain;
	top: 15px; left: 20px;
	z-index: 1;
}

header a.logo span {
	display: none;
}

header div.hero {
	position: absolute; 
	width: 70%; 
	top: 70px; 
	left: 45%;	
}

header div.hero h1 {
	line-height: 1em; margin: 0 0 20px 0; color:#FFFFFF; 
}

/* styings for all */
section {
	padding: 0 30px;
}

/*psuedo html element*/
section::after {
	content:'';
	display:block;
	clear: both;
}

/* stylings for main section */
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 .content a h3 {
	/*color:#000000;*/
	text-decoration: none;
}

section.main .content a:hover h3  {
	text-decoration: underline;
}

section.main aside .content.android {
	/*background-image: url(../images/android_robot_200.png);*/
	background-image: url(../images/andy.png);	
}

section.main aside .content.apple {
	background-image: url(../images/apple.png);	
}

section.main aside .content.laptop {
	background-image: url(../images/laptop.png);	
}

section.main aside .content.crafting {
    background-image: url(../images/crafting2.png);  
}

section.main aside .content.fun {
    background-image: url(../images/smiley-happy.png); 
}

section.main aside .content.productivity  {
    background-image: url(../images/productivity.png);    
}

section.main aside .content.csfc  {
    background-image: url(../images/icons/cross-stitch-fabric-calculator-192.png);    
}

section.main aside .content.diceroller  {
    background-image: url(../images/icons/roll-the-dice-192.png);    
}

section.main aside .content.lottolite  {
    background-image: url(../images/icons/lotto-picker-lite-192.png);    
}

section.main aside .content.lottopicker  {
    background-image: url(../images/icons/lotto-picker-192.png);    
}

section.main aside .content.buttons  {
    margin: 1px;
    background: no-repeat center top;
    background-size: 25px 25px;
    padding-top: 10px; 
}

section.main aside .content.buttons.info  {
    margin: 1px;
    background: no-repeat center top;
    background-size: 25px 25px;
    padding-top: 1px; 
}

section.main aside .content.buttons.playstore  {
    margin: 1px;
    background: no-repeat center top;
    background-size: 25px 25px;
    padding-top: 10px; 
}



/*new for plugs*/
section.main aside.plug {
    width: 65%;
    float: left;
}

section.main .content.plug {
    margin: 15px;
    background: no-repeat center top;
    background-size: 75px 75px;
    padding-top: 10px;
}    

section.main aside.adsense {
    width: 30%;
    float: right;
}  

section.main .content.plug h3 {
    color: #000000;
    font-size: 1.1em;
}

/* stylings for main section */
section.main-sister {
    margin-top: 20px; margin-bottom: 30px;  
    padding: 0;
}

section.main-sister aside.lefty {
    width: 40%;
    float: left;
    text-align: center;
}

section.main-sister aside.righty {
    margin-top: 10px;
    width: 40%;
    float: left;
    text-align: center;
}

section.main-sister aside.button {
    margin-top: 15px;
    width: 15%;
    float: left;
    text-align: center;
}



/* stylings for atmosphere */
section.atmosphere-sister {
    background-color:#990000;
    padding-top: 10px;
    padding-bottom:10px;
    color:#FFFFFF;
}


/* stylings for atmosphere */
section.atmosphere {
	background-color:#990000;
	padding-top: 30px;
	padding-bottom:30px;
	color:#FFFFFF;
}

section.atmosphere h2 {
	color:#FFFFFF;
}

section.atmosphere img {
    padding: 2px 2px 2px 2px;
}




section.atmosphere article {
	padding: 0 20px 0 250px;
	background: url(../images/phone-tablet.png) no-repeat 0 50px;
	min-height: 220px;
}

section.atmosphere article.baseapp {
    padding: 0 20px 0 20px;
    /*background: url(../images/icons/cross-stitch-fabric-calculator-192.png) no-repeat 0 0px ; */
   background:#990000;
    min-height: 220px;
}


section.atmosphere article.contact {
    padding: 0 20px 0 300px;
    background: url(../images/mail.png) no-repeat 0 0px;
    min-height: 250px;
}


/* stylings for how-to */
section.how-to {
	background-color:#CCCCCC;
	position: relative;
}

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

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

section.how-to aside.content img{
	display: block;
	margin-bottom: 25px;
	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: #000000;
	font-weight: 700;
}

section.how-to .rating {
    padding-left: 70px;
    font-size: 1.4em;
    content: "\2605";
    position: absolute;
}

section.how-to blockquote {
	margin: 0 0 0 0;
	width: 32%;
	color: #000000;
	background-color: #FFFFFF;
	position: absolute;
	bottom: 0;
	right: 4%;
}

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:#666666;
	font-size: .9em;
	margin-top: 0;
	padding-left: 20px;
	line-height: 1.3em;
	position: relative;
}

section.how-to blockquote::before {
	content:'\201c';
	color: #666666;
	position: absolute;
	top:10px;
	left:8px;
	font-size:5em;
	font-family: serif;	
}

section.how-to blockquote p.quote::after {
	content:'\201d';
	font-family:serif;
}

section.how-to blockquote p.credit::before {
	content:'\2014'; position: absolute; top:-1px; left:0;
}

/* stylings for navigation */

nav {
	background-color: #990000;
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 8px 0 0 0;
	width: 100%;	
}

nav::after {
    content:'';
    display:block;
    clear:both;
}

nav ul {
	list-style: none;
	margin: 0;
	padding: 0px;
}

nav ul li:hover {
	background-color:#000000;
}

nav ul li a {
	display:inline-block;
	color: #FFFFFF;
	padding: 10px 20px;
	text-decoration:none;
	width: 180px;
	position: relative;
}

nav ul li a:visited {
	color: #FFFFFF;
}

nav ul li:hover {
	background-color: #000000;
}

nav ul li:hover > ul {
	display: block;
}

nav ul ul {
	position: absolute;
	top: 100%;
	background-color:#990000;
    display:none;
}

nav ul ul li {
	position: relative;
}

nav ul ul ul {
	left: 100%;
	top: 0px;
}

nav ul ul ul li {
	position: relative;
}


/* top level navigation */

nav > ul {
	padding-left: 275px;
} 

nav > ul > li {
	float: left;
}

nav > ul > li > a {
	width: auto;
	padding: 10px 20px 15px 20px;
}

nav a[aria-haspopup="true"]::after {
    content: '';
    display: block;
    width: 0px;
    height: 0px;
    position: absolute;
    top: 16px;
    right: 5px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #FFFFFF;
}

nav > ul > li > a[aria-haspopup="true"]::after {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #FFFFFF;
    left: auto;
    right: 2px;
    bottom: 16px;
    top:auto;
}


/* stylings for footer */
footer {
	font-size: .8em;
	margin: 40px;
}

footer .content {
	display: inline;
}

footer a {
	margin-left: 30px;
	color:#666666;
}

footer a:visited {
	color:#666666;
}
footer a:hover {
	color:#000000;
}

/*NOW we start adjusting for screen sizes - Media Queries*/
/*TODO!!! you are going by HIS example - you've already modified the base so you will have to do so here*/
/*first one is for about when the screen gets to width 1000 pixels*/

@media screen and (max-width:1000px){
	
	h1{
		font-size: 2.4em;
	}
	
	/*header*/
	header div.hero {
	/*already modified this too*/
		left: 40%;
	}
	header div.hero h1 {
		margin-bottom: 20px;
	}
	
	/*section - atmosphere*/
	section.atmosphere article {
		/* took this out, looked better without it
		padding-left: 400px;
		background-size: 200px auto;*/
	}

@media screen and (max-width:900px) {

	h1{
		font-size: 1.8em;
	}
	
	h2{
		font-size: 1.4em;
	}
	
	h3{
		font-size: 1.1em;
	}	
		
	a.btn {
		font-size: 1em;
	}

	/*header*/
	header {
		height: 155px;
	}
	header div.hero {
		top: 50px; 
		left: 32%;	
	}
	
	header a.logo {
		width: 200px;
		height: 50px;
		background: url(../images/newer-logo-sm.png) no-repeat 0 0;
		/*
		position: absolute; display: block; width: 250px; height: 188px;
		background: url(../images/newer-logo.png) no-repeat 0 0;
		background-size: contain;
		top: 15px; left: 20px;
		z-index: 1;*/
	}		
	
	/*section - atmosphere*/
	section.atmosphere article {
		/* took this out, looked better without it
		padding-left: 400px;
		background-size: 200px auto;*/
	}
	
	/*section - how-to*/
	section.how-to blockquote p.quote {
		line-height: 1.2em;
		font-size: 1.1em;
	}		
	
	section.how-to blockquote p.credit {
		font-size: .8em;
	}	
	
	/*section - main*/
	section.main {
		margin-bottom: 10px;
		margin-top: 10px;
	}
	
}












	
}