@charset "UTF-8";
/* CSS Document */

/* This top section describes the logo and nav for MOBILE VIEW and also the GLOBAL view */

/* this top section with 0 pad & margin was used for firefox and other browsers ....I might change this */

html,
html * {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: "Helvetica Neue", "Helvetica Neue Bold", "Helvetica Neue Medium", "Helvetica Neue LT Std 53 Extended";
}

/*I did Change this to add a GLOBAL attribute here under HEADER which applies to all versions */
header {
	padding: 30px 24px 5px; /* This One value (28) describes all 4 sides of a div's PADDING*/
}

img { 
	width: 100%;     /* 100% creates a GLOBAL style so images fit the width on MOBILE, TABLET and DESKTOPS overall....BUT NOTE the style.logo image here under MOBILE LINE 58 must NOW get its own Style which becomes a px value instead of a % (percent) value to OVERIDE this*/ 
	
	max-width: 100%; /* this max-width makes them work properly*/
	
	height: auto;  /*NOTICE the images have their own heights with this command*/
	
	vertical-align: middle; /* this centers the images on each BROWSER*/  
}

footer {              /*In PADDING, When you have 2 figures, it means first value is for top and bottom--second value is for left and right*/
	padding: 20px 30px; 
	text-align: center;

}
                /*FINAL VIEW To STOP DEFAULT LEFT...and center and add overall background to the site...ADD this SYNTAX to as a new body tag */
body {
	margin-left: auto;
    margin-right: auto;
	background: #020202;
}

.style-logo {
	margin-left: auto;
	margin-right: auto;
	display: block; /* block is the keyword to position things where you want them*/
	
	/* because the img value above on LINE 22 dictates a global width at 100% (percent), this logo img value at 75px value must overide the 100% value on line 22*/ 
	
	width: 85px; /* OVERIDE the % img width with a (px) value and Create an ABLOLUTE command for the logo img to OVERIDE the GLOBAL img style above.*/ 
}

.style-nav ul {
	list-style-type: none; /* this eliminates the underline in PRISM*/
}

.style-nav ul li a { /* a signifies type styling CSS */
	text-decoration: none; /* this eliminates the underline in the nav buttons or type*/
	color: #6296F8;
	text-align: center;
	display: block;
	text-transform: none;
	padding: 8px;  /* Note-Here using inspect under view in design mode you can see each nav type has equal PADDING all around*/
}

.hero {
	background-image: url(images/hero_copy.jpg); /*the hero can be any picture or bkgrnd you choose*/
	background-size: cover; /* this syntax sizes the image to fit in any browser window (phone, tablet or desktop */
	padding-bottom: 0px; 
	color:#ffffff;
	text-align: center;
}
.art {
	padding: 0px 20px;
	align-content: center;
	margin-bottom: 0px;
}

.mail {
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 36px;
	margin-bottom: 0px;
	margin-top: 10px;
}
.subhead {
	color:#B3D8F8;
	font-weight: 400;
	padding-bottom: 0px;
	margin-top: 0px;
	

}

.arrow { 
	width: 75px;
	padding: 5px 10px;
	margin-bottom: 50px;
		
}

  /* (h) VALUES....All text sizes, weights, appearences or decorations are controlled with this*/

h1 {                 /* h1 etc are predetermined classes and don't need periods*/ 
	font-size: 57px; /* FINAL Video...Adjust font sizesfor TABLET*/
	text-transform: uppercase;
	font-weight: 200;
	margin-bottom: 60px; /* this pushes out the bottom image when added to text placed within it */
}

h2 {
	font-size: 20px;
	text-transform: uppercase;
	font-weight: 200;
	margin-bottom: 23px; /* this pushes out the bottom image when added to text placed within it*/
}

h3 { /* h2 thru h6 apply to different subheads in order of importance for SEO search engines*/ 
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 200;
	margin-top: 0px;/* % numbers 100, 200 etc are used for font weight re: bold medium etc*/ 
	margin-bottom: 20px; /* NOTE--To move the ART closer up to the h3 line I reduced the bottom margin of the line-DIGITAL IMAGING ETC. */
	color: #B0C8F5;
}

h4 {
	font-size: 16px;
	font-weight: 200;
	margin-bottom: 35px;
}
p { /* p represents text paragraphs */ 
	font-size: 15px;
	font-weight: 400;  
	margin-bottom: 5px; /* this pushes out the bottom image when added to text placed within it*/
}

a {
	font-size: 15px;

}

/* here you style the button you just added to the html line 33 and then copy it to the other rows and cols in source code*/
.button {
	padding: 0px;
	border-radius: 30px;
	color: #FFFFFF;
	text-decoration: none;
	display: inline;
	
}

.art-text {
	margin-top: 0px;
	margin-bottom: 50px;
	float: center;
}
/*NEW_In html Grid L/O he created this <div class info-box-tan, then opened styles.css and created this*/
.info-box-tan {
	background-color: #b9a88e;
	color: #FFFFFF;
	padding: 38px 20px 60px;
	text-align: center;
	
}
.info-box-dark {
	background-color: #2D2D35;
	color: #FFFFFF;
	padding: 38px 20px 60px;
	text-align: center;
	
}

.footer-text {
	font-size:13px;
	margin-bottom: 20px;
}
.col {
	width: 100%;  /* FINAL VIEW 3----add this for MOBILE because you're changing the style for col to (col-md-one-half) for TABLET*/
}

/* END of MOBILE VIEW, GLOBAL, logo, nav, h, button, hero, p, text, and special global coding */



/* TABLET VIEW */

/* Here we enter a jquery @media for the TABLET version */
@media (min-width: 768px){
	
	body {
		max-width: 778px;
	}
	
	.style-nav ul li {
		width: 150px;
		
		/* This jquery syntax can be applied to the desktop view to center the logo and the navs.....instead of float left or right*/
		display: inline-block;
	}	
	.style-nav ul {
		text-align: center;
	}                           /*TABLET CHANGES*/
	h1 {
		font-size: 40px;
		margin-bottom: 90px; /* FINAL CHANGE VIEW 1--- Additional changes to h2, h3 etc type will and were added from this point here for TABLET*/
	}
	     
    .col-md-one-half { /* FINAL CHANGE VIEW 2---  trigger for TABLET- created new style.css (col-md-one-half) at 50% then he changed code source view to include this style syntax so it reads (col col-md-one-half) */
	    width: 50%;
    }
	.col {
		float: left;
		padding: 0px 7px 14px;  /* white spaces between images*/ 
    }
}
	

    /* DESKTOP VIEW */
	/* Here we enter a jquery @media for the DESKTOP version */

@media (min-width: 1024px){
	
	body {
		max-width: 1200px;
	}
	
	.style-logo {
		width: 110px;
		
	}
	h3 {
		padding-top: 0px;		
    }
	.mail {
		margin-bottom: 0px;
    }
	
	.art {
		padding: 0px 10px; 
	}
	
	.hero {
		padding-top: 0px;
	}
	
	.col {
		padding-top: 0px;
	}
	.button {
		padding-bottom: 40px;
    }
	
	.arrow {
		width: 110px;
	}
	  /* NOTE--I eliminated the float lef and right syntaxes 12-24-17 in order to center the header and mail logo in     the desktop version*/
        /* This syntax portion forces the logo to float left and the nav to float right on a desktop */