/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
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;	}

 

/**MY AREA**/


/**basic**/

html, body {background-color:#242424; height:100%; }
u { text-decoration: underline;} 

h1 {color:#cccccc; text-align:left; font-size:2em; padding: 40px 40px 40px 40px; font-family: 'Open Sans', sans-serif; }
h2 {color:#FF0000; text-align:left; font-size:1.6em; margin:5px 0px; font-family: 'Open Sans', sans-serif; }

p  {color:#909090; text-align:left; font-size:1.3em; line-height: 1.7em; padding: 10px; font-family: 'Open Sans', sans-serif; }
p a {border-bottom: .1em solid #404040; color:red;}
p a:visited {color:#999999;}
p a:hover {color:#444444;}

a {font-size:1.1em;  font-family: 'Open Sans', sans-serif; text-decoration:none; }
a:link {color:#999999;}
a:visited {color:#999999;} 
a:hover {color:#444444;}
 

.section {margin-top:60px;  }


 



/**main template stuff**/


 




.social {width:30px; height:30px; }



.socialshare {position:fixed; top:20%; left:5px; z-index:999;}
.socialshare ul li {display:block; margin-top:10px;}

 




/**content**/


    
    /**Inset gets a shadow inside.  First number is left and right offset so 0.  Second is vertical offset so minus to start from the bottom.  3rd number is blur.  4th use color of background.**/
     


#tutorial  {margin-left:auto; margin-right:auto;   max-width:70%;  height:auto; margin-top:110px;   }
#tutorial img { max-width:100%; }
#tutorial a {text-align:left;   text-decoration:none;  }
#tutorial h1 {margin:60px 0px 20px 0px; text-align:center;}

.pttop {text-align:center;}
.pt {max-width:40%; display:inline-block; vertical-align:top; margin-left:auto; margin-right:auto; text-align:left; padding:0px 4% }
.pt img{max-width:70%;}





    /**start anew here**/
    
         
         
     .fullwidecontainer {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto auto 10vh 10vh;
 
  grid-template-areas: 
    "header header header header header" 
    "content-fullwide content-fullwide content-fullwide content-fullwide content-fullwide " 
    "footer1 footer1    footer1 footer1 footer1"
    "footer2 footer2 footer2 footer2 footer2"
}
    

.middlecontainer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto 10vh 10vh;
 
  grid-template-areas: 
    "header header header header header" 
    "leftside content-middle content-middle content-middle rightside" 
    "footer1 footer1    footer1 footer1 footer1"
    "footer2 footer2 footer2 footer2 footer2"
}




.homepagecontainer {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto auto auto auto;
  
  grid-template-areas: 
    "header header header header header" 
    "index1 index1 index1 index1 index1" 
    "footer1 footer1 footer1 footer1 footer1"
    "footer2 footer2 footer2 footer2 footer2"
}











.index1 {
  grid-area: index1;
  height:90vh;

  background-image: url('../images/stormanalysis-frontpage.jpg'); /* The image used */
  
  
  background-position: center;
  background-repeat: no-repeat;
  background-size:  auto 90% ;
 
}
  

.index1 a {
  
}



.index2 {
width:50%;
grid-area: index1;


place-self: center;


font-size:2em;
  
  

 
}





.header {
  grid-area: header;
  background: black;
  
 

  display: flex;
  justify-content: center;
  flex-wrap: wrap;

 }
 
 .header a {
 
padding:20px 20px;
 
 
}

 
 
 

.footer1 {
  grid-area: footer1;
  background: teal;
  
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  background: black;

}



.footer1 a {
 
padding:20px 20px;
 
 
}




.footer2 {
  grid-area:footer2;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  background: black;

  align-items: center;

}  

.footer2 a {
 
padding:20px 20px;
 
 
}

 








             

  .leftside {grid-area:leftside;

  background-color: green; /* Used if the image is unavailable */
  
   
}
  


  .rightside {grid-area:rightside;

  background-color: transparent; /* Used if the image is unavailable */
  
}

.rightside div {border-bottom: 2px solid grey; border-left: 2px solid grey; padding-top:70px; display:inline-block; text-align:center; margin-left:20px;
	
}



.rightside img {display:inline-block; 
	max-width: 90%; height: auto;
}

.rightside a {font-size:1.5em;
	display:inline-block;
	
}

      
#index h1 {
	text-align:center; 
}




             





}


.linkbreaks ul {margin:0px 5%;}

.linkbreaks li a {margin:10px 20px; display:inline-block; font-size:1.5em; font-weight: bold;}




.content-middle {
 grid-area:content-middle;  

  background: #242424;
  
}

.content-middle img{
	max-width:100%;
}


.middle-styling {display:block;}
.middle-styling img {margin: 70px 5% 0px 5%;   display:block;  max-width:90%; }
.middle-styling video { margin: 70px 5% 0px 5%; max-width:90%;}
.middle-styling p {margin-left: 5%; margin-top: 5px; margin-right:5%;}




.content-fullwide {
 grid-area:content-fullwide;

  background: #242424;
  min-height:90vh;
  padding: 0px;
}

.content-fullwide img{
	max-width:100%;
}



.flexgroup {display:flex; flex-wrap: wrap; justify-content:center;
	
}

.flexgroup div {width:22%; padding:10px; 
	
}

.flexgroup a {
	display:block;
}


.flexgroup img {
	width:100%;
}




             












/**gifs**/
#gifs img {margin:5px; max-width:31%;   display:inline;}



/**lenspages**/

.ads a{ text-decoration:none; }
.ads ul li {display:inline-block; padding:10px 10px;}
.ads img {width:60px; }
.ads ul { margin:5px 0px; width:auto; padding:10px 0px; border-bottom: 1px gray solid;  }



/**youtube**/

.video-container { margin-top:0px; position:relative; padding-bottom:56.25%; padding-top:0px; height:0; overflow:hidden;}

.video-container iframe, .video-container object, .video-container embed {position:absolute; top:0; left:0; width:100%; height:100%;}



/**data**/
 





/**stock plus wallpaper**/

#stock {  grid-column: 1/6;
  grid-row-start: 2;
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 5;  
  ; 
 }
#stock p {text-align:center; font-size:1.2em;}
#stock a {   text-decoration:none; }


.box{ 
			display: inline-block;
			position:  relative;
			width: 19%;
			margin: .5% .5% ;
			float: left;
			
		}
		.box:before{
			content: "";
			display: block;
			padding-top: 75%; /* initial ratio of 2:3*/
		}

.innerbox{ 
			/* Positioning */
			position:  absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;

			/* Styling */
			border:1px black solid;
			background: transparent;
			padding: 15px;
			text-align: center;
			vertical-align: middle;
			text-transform: uppercase;
			color: #fff;
		}
.innerbox img { max-height:85%; max-width:100%;}

.innerbox a {padding:0px 10px;  }



 

/**isolated**/

#buy {margin-top:90px; }

#textpop  {color:#606060; text-align:left; font-size:1em; line-height: 1.3em; padding: 10px 10px 10px 0px; font-family: 'Open Sans', sans-serif; }


#index p  { text-align:center;}


ul.circle {list-style-type:disc;  font-size:1.3em; color:gray; padding: 10px 30px; }
hr {border: 1px #999999 solid; margin:20px 0px;}




#headerconstant {top:0px; padding:15px 0px; height:auto;  width:100%;  background:#111111;  position:fixed; z-index:998; text-align:center;  }
#headerconstant ul {margin-top:0px;}
#headerconstant ul li {padding:10px 20px;  display:inline-block;  }
#headerconstant ul li a { font-size:1em; font-family: 'Open Sans', sans-serif;   text-decoration:none; }








@media all and (max-width: 2000px) {

.box{ width: 24%; margin: .5% .5% ;}
}





@media all and (max-width: 1350px) {



#header {position: absolute;}

#stock p { font-size:.9em;}
#stock a { font-size:.9em;}


#wxdata  {margin-left:10px;    height:auto; margin-top:100px;     }
h1 {font-size:1.5em;}
p {font-size:1em;}
a {font-size:1em}
ul.circle {  }


 
#middle  { margin-left:10%; margin-right:10%;   max-width:70%;  height:auto;    }
#solofullwide {margin-top:10px;}

#tutorial  {max-width:80%;   margin-top:10px;   }
 
.stuff {margin-top:25px;}


#stormpictures  {   }
#stormpictures  ul li {       }


#footer ul li {padding:5px 5px;  }
#footer ul li a { font-size:.8em;}
.social {width:25px; height:25px;}



.box{ width: 32%; margin: .5% .5% ;}





@media all and (max-width:1150px) {

.middlecontainer {

  grid-template-columns: 0fr 2fr 1fr 1fr 1fr;
  grid-template-rows: auto auto 10vh 10vh;
 
 
}


 

}

.rightside a {font-size:1em;
	display:inline-block;







.flexgroup div {width:28%; padding:10px; 
	
}






#stock {width:80%;}

#footer ul li a { font-size:.7em;}
.social {width:20px; height:20px;}


	#menu-icon { z-index:999;
		display:inline-block;

	}
	
		
	
	







 


@media all and (max-width: 1000px) {

.xsidebar a {font-size:.7em;  }

#header ul li a { font-size:.7em;  }

}



@media only screen and (max-width: 980px) {
header{padding:20px 0px;}
#logo{padding:0px;}
input[type=checkbox] {position: absolute; top: -9999px; left: -9999px; background:none;}
input[type=checkbox]:fous{background:none;}
label {float:right; padding:8px 0px; display:inline-block; cursor:pointer; }
input[type=checkbox]:checked ~ nav {display:block;}

nav{display:none; position:absolute; right:0px; top:53px; background-color:#002e5b; padding:0px; z-index:99;}
nav ul{width:auto;}
nav ul li{float:none; padding:0px; width:100%; display:table;}
nav ul li a{color:#FFF; font-size:15px; padding:10px 20px; display:block; border-bottom: 1px solid rgba(225,225,225,0.1);}
nav ul li a i{color:#fde428; padding-right:13px;}
}



@media all and (max-width: 810px) {


.flexgroup div {width:40%; padding:10px; 
	
}



.socialshare {position:static; margin-left:60px;}
.socialshare ul li {display:inline-block; margin-left:15px;}

#stock {width:90%;}

.box{ width: 48%; margin: .5% .5% ;}

 }








@media all and (max-width: 700px){