@charset "utf-8";

@font-face {
    font-family: 'skaterdudesregular';
    src: url('https://www.adirondacksprayfoam.com/_fonts/skaterdudes-webfont.eot');
    src: url('https://www.adirondacksprayfoam.com/_fonts/skaterdudes-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.adirondacksprayfoam.com/_fonts/skaterdudes-webfont.woff2') format('woff2'),
         url('https://www.adirondacksprayfoam.com/_fonts/skaterdudes-webfont.woff') format('woff'),
         url('https://www.adirondacksprayfoam.com/_fonts/skaterdudes-webfont.ttf') format('truetype'),
         url('https://www.adirondacksprayfoam.com/_fonts/skaterdudes-webfont.svg#skaterdudesregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ambleregular';
    src: url('https://www.adirondacksprayfoam.com/_fonts/Amble-Regular-webfont.eot');
    src: url('https://www.adirondacksprayfoam.com/_fonts/Amble-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.adirondacksprayfoam.com/_fonts/Amble-Regular-webfont.woff') format('woff'),
         url('https://www.adirondacksprayfoam.com/_fonts/Amble-Regular-webfont.ttf') format('truetype'),
         url('https://www.adirondacksprayfoam.com/_fonts/Amble-Regular-webfont.svg#ambleregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'amblebolditalic';
    src: url('https://www.adirondacksprayfoam.com/_fonts/Amble-BoldItalic-webfont.eot');
    src: url('https://www.adirondacksprayfoam.com/_fonts/Amble-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://www.adirondacksprayfoam.com/_fonts/Amble-BoldItalic-webfont.woff') format('woff'),
         url('https://www.adirondacksprayfoam.com/_fonts/Amble-BoldItalic-webfont.ttf') format('truetype'),
         url('https://www.adirondacksprayfoam.com/_fonts/Amble-BoldItalic-webfont.svg#amblebold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* set the background image of the page - and set it to cover and fill the viewing window completely - Set the body background to transparent */
html{
  background: url('https://www.adirondacksprayfoam.com/spray_foam_insulation_contractors_saratoga/wp-content/uploads/2014/11/Lake_Moreau_00123.jpg') no-repeat top center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body{
	background:transparent;
}

/* Set the background image of the canvas to show an animation which will act like a pre-loader because it is tiny and will load fast */
#canvas{
	background: url('images/intro_Frame_loadingAnimJAG.gif');
}

/* Set the canvas wrap div which contains the html5 animation created in Flash Pro CC to be flexible and centered on screen  + other styles*/
#canvaswrap{
	display:-webkit-flex;
	display:flex;
	width:571px;
	height:424px;
	margin-top:15px;
	margin-left:auto;
	margin-right:auto;
    box-shadow: 5px 5px 10px #333333;	
}

/* Style the Skip Intro Button */
.orangebutton{
	font-family:skaterdudesregular;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing:grayscale;	
	font-size:18px;
	text-align:center;
	color:#ffffff;
	max-width:500px;
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
	background-color:#ff5b00;
	padding:10px;
	border-radius:8px;
	border: 2px solid #ffffff;
    box-shadow: 5px 5px 10px #333333;	
}

.orangebutton a{
	text-decoration:none;
	color:#ffffff;
}

.orangebutton a:visited{
	text-decoration:none;
	color:#ffffff;
}

/* This code works with a jquery function in the html document to make the entire orange button clickable, not just the text in it */
#skipbutton:hover{
		cursor: pointer;
		text-decoration:none;
		background-color:#00773e;
}

/*The code below styles the white type below the orange button to be centered and white with no text-decoration*/
.white_center{
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	color:#ffffff;
}

.white_center a{
	text-decoration:none;
	color:#ffffff;
}

.white_center a:hover{
	text-decoration:none;
	color:#ffffff;
}

.white_center a:visited{
	text-decoration:none;
	color:#ffffff;
}

/*Style the contact information text*/
#asf_name{
	margin-top:15px;
	font-family:skaterdudesregular;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing:grayscale;	
	font-size:30px;	
    text-shadow: 5px 5px 10px #333333;	
}

#asf_desc{
	margin-top:10px;
	font-family:amblebolditalic;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing:grayscale;	
	font-size:18px;
    text-shadow: 2px 2px 5px #000000;	
	
}

#asf_addr{
	font-family:ambleregular;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing:grayscale;	
	font-size:18px;	
    text-shadow: 2px 2px 5px #000000;
    margin-bottom:20px;		
}


/* -------------------------------------------RESPONSIVE MODE STYLINGS------------------------------------------------ */

/* ----------------------------Max Width - 600 px----------------------------------*/
@media all and (max-width: 600px) {
		#canvas{
			background-size:500px 371px;
		}	

		#canvaswrap{
			width:500px;
			height:371px;
		}
		
		.orangebutton{
			max-width:400px;
		}				
}/* ----------------------------End of Max Width - 600 px----------------------------------*/

/* ----------------------------Max Width - 530 px----------------------------------*/
@media all and (max-width: 530px) {
		#canvas{
			background-size:400px 297px;
		}	

		#canvaswrap{
			width:400px;
			height:297px;
		}
		
		.orangebutton{
			max-width:350px;
		}	
		#asf_name{
			font-size:24px;	
		}				
}/* ----------------------------End of Max Width - 530 px----------------------------------*/

/* ----------------------------Max Width - 420 px----------------------------------*/
@media all and (max-width: 420px) {
		#canvas{
			background-size:300px 223px;
		}	

		#canvaswrap{
			width:300px;
			height:223px;
		}
		
		.orangebutton{
			max-width:220px;
			font-size:13px;
		}
		#asf_name{
			font-size:19px;	
		}					
}/* ----------------------------End of Max Width - 420 px----------------------------------*/