/* -----------------------------------------------
-------------------- Section A -------------------
----------------------------------------------- */

#sectionA {
	height: 736px;
	background-color: white;
}

#imageDiv {
	width: 100%;
	height: 100%;
	background-image: url('../images/gifBigBlue.gif');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 130%;
}

@media only screen and (min-width: 461px) {
  #imageDiv {
	background-size: 600px;
	background-image: url('../images/gifBigBlue.gif');
  }
}

@media only screen and (min-width: 830px) {
  #imageDiv {
	background-size: 120%;
	background-image: url('../images/gifBig.gif');
  }
}

@media only screen and (min-width: 1150px) {
  #imageDiv {
	background-size: 1400px;
	background-image: url('../images/gifBig.gif');
  }
}


/* -----------------------------------------------
-------------------- Work -------------------
----------------------------------------------- */

#work {
	heightx: 500px;	
	width: 100%;
	background-color: yellow;
}

#gridContainer {
	background-color: grey;
	width: 100%;
  	font-size: 0; letter-spacing: 0; word-spacing: 0; /* Step 1/4 to display divs inline-block -apploed to parent element */
  	padding-right: calc(6% - 10px); /* 1/5 to make the blocks fit as 50% size counting for padding and margin in the middle */
	padding-left: calc(6% - 10px); /* 2/5 to make the blocks fit as 50% size counting for padding and margin in the middle */
	padding-top: 55px;
	padding-bottom: 75px;
}

@media only screen and (min-width: 960px) {
  #gridContainer {
	padding-right: 50px; /* to make it align to logo - look at header.css (60px-10px)*/
	padding-left: 50px; /* to make it align to menu - look at header.css (60px-10px)*/
  }
}


.gridBlock {
	background-color: orange;
	margin-top: 20px;
	margin-right: 10px; /* 3/5 to make the blocks fit as 50% size counting for padding and margin in the middle */
	margin-left: 10px; /* 4/5 to make the blocks fit as 50% size counting for padding and margin in the middle */
	width: calc((100% - 40px)/2); /* 5/5 to make the blocks fit as 50% size counting for padding and margin in the middle */
	heightX: 300px; /* URGENT: This is to show the other image divs temporarily, take out when finishing uploading pics */
	display: inline-block; /* Step 2/4 to display dis inline-block */
	font-size: 19px; letter-spacing: normal; word-spacing: normal; /* Step 3/4 to display dis inline-block */
	vertical-align: top; /* Step 4/4 to display divs inline-block */
	overflow: hidden; /* Image Swell 1/2: so when imgs swell, it stays inside the image bounds */
}


@media only screen and (min-width: 960px) {
  .gridBlock {
    width: calc((100% - 80px)/4);
  }
}


.gridBlock:hover img{ /* Image Swell 2/2: Enlarge, and transition*/
	transform: scale(1.05); 
	transition: all 0.5s ease-out;
}

.gridBlockFull {
	background-color: blue;
	margin-top: 20px;
	margin-right: 10px; /* 3/5 to make the blocks fit as 50% size counting for padding and margin in the middle */
	margin-left: 10px; /* 4/5 to make the blocks fit as 50% size counting for padding and margin in the middle */
	width: calc(( 100% - 20px)/1);
	heightX: 300px; /* URGENT: This is to show the other image divs temporarily, take out when finishing uploading pics */
	display: inline-block; /* Step 2/4 to display dis inline-block */
	font-size: 19px; letter-spacing: normal; word-spacing: normal; /* Step 3/4 to display dis inline-block */
	vertical-align: top; /* Step 4/4 to display divs inline-block */
	overflow: hidden; /* Image Swell 1/2: so when imgs swell, it stays inside the image bounds */
}

@media only screen and (min-width: 960px) {
  .gridBlockFull {
    width: calc((100% - 40px)/2);
  }
}


.gridBlockFull:hover img{ /* Image Swell 2/2: Enlarge, and transition*/
	transform: scale(1.05);
	transition: all 0.5s ease-out;
}

#block1 {
  background-color: #5b92e5;
}

#block2 {
  background-color: #5b7be5;
}

#block3 {
  background-color: #5b64e5;
}

#block4 {
  background-color: #693be5;
}

#block5 {
  background-color: #5ba9e5;
}

#block6 {
  background-color: #5bc0e9;
}

#block7 {
  background-color: #5bd7e5;
}

#block8 {
  background-color: #5b92e5;
}

#block9 {
  background-color: #8cbaff;
}

#block10 {
  background-color: #2f68bf;
}

#block11 {
  background-color: #0f4698;
}

#block12 {
  background-color: #002e72;
}

#block13 {
  background-color: #5b92e5;
}

#block14 {
  background-color: #5b7be5;
}

#block15 {
  background-color: #5b64e5;
}

#block16 {
  background-color: #693be5;
}

#blockImages {
	width: 100%;
	display: block;
}

/* -----------------------------------------------
-------------------- Section C -------------------
----------------------------------------------- */

#about {
	heightx: 1000px;
	padding: 150px 15% 80px 15%;
	background-color: white;
	color: gray;
}

#story {
	background-colorx: yellow;
	font-size: 13px; letter-spacing: normal; word-spacing: normal;
}

h1 {
	font-weight: bold;
	color: #F25469;
}

h2 {
	font-style: italic;
}

#boxes {
	background-colorx: blue;
	width: 100%;
  	font-size: 0; letter-spacing: 0; word-spacing: 0; /* Step 1/4 to display divs inline-block -apploed to parent element */
  	padding-top: 40px;
}

#box1 {
	display: inline-block;
	background-colorx: pink;
	width: 100%;
	height: 100%;
	font-size: 13px; letter-spacing: normal; word-spacing: normal;
}

@media only screen and (min-width: 960px) {
  #box1 {
    width: 33.33333%;
  }
}

#box2 {
	display: inline-block;
	background-colorx: blue;
	width: 100%;
	height: 100%;
	font-size: 13px; letter-spacing: normal; word-spacing: normal;
}

@media only screen and (min-width: 960px) {
  #box2 {
    width: 33.33333%;
  }
}

/*#sva {
	text-decoration: none;
	background-colorx: pink;
	color: grey;
	font-size: 13px; letter-spacing: normal; word-spacing: normal;
}*/

#box3 {
	display: inline-block;
	background-colorx: lightblue;
	height: 100%;
	width: 100%;
	font-size: 13px; letter-spacing: normal; word-spacing: normal;
}

#graylink{
	color: gray;
	text-decoration: none;
}

@media only screen and (min-width: 960px) {
  #box3 {
    width: 33.33333%;
  }
}

.gridBox {
	background-colorx: orange;
	margin-top: 20px;
	padding-right: 40px; /* So the text doesn't hit the other div */
	display: inline-block; /* Step 2/4 to display dis inline-block */
	font-size: 13px; letter-spacing: normal; word-spacing: normal; /* Step 3/4 to display dis inline-block */
	vertical-align: top; /* Step 4/4 to display divs inline-block */
}

#contact {
	background-colorx: yellow;
	font-size: 13px; letter-spacing: normal; word-spacing: normal;
	padding-top: 40px;
}

#contactMe {
	font-weight: bold;
	color: #F25469;
	font-size: 13px; letter-spacing: normal; word-spacing: normal;
}


/* -----------------------------------------------
-------------------- Footer -------------------
----------------------------------------------- */

footer {
	height: 100px;
	background-color: grey;
	color: white;
	font-size: 8pt;
	text-align: left;
	padding-left: 6%;
	padding-top: 45pt;
}

@media only screen and (min-width: 960px) {
  footer {
    padding-left: 60px;
  }
}



/* -----------------------------------------------
-------------------- END OF INDEX PAGE -------------------
----------------------------------------------- */




/* -----------------------------------------------
-------------------- Work Pages -------------------
----------------------------------------------- */

.gridBlock2 {
	background-color: orange;
	margin-top: 20px;
	margin-right: 10px; /* 3/5 to make the blocks fit as 50% size counting for padding and margin in the middle */
	margin-left: 10px; /* 4/5 to make the blocks fit as 50% size counting for padding and margin in the middle */
	width: calc((100% - 20px)); /* 5/5 to make the blocks fit as 50% size counting for padding and margin in the middle */
	heightX: 300px; /* URGENT: This is to show the other image divs temporarily, take out when finishing uploading pics */
	display: inline-block; /* Step 2/4 to display dis inline-block */
	font-size: 19px; letter-spacing: normal; word-spacing: normal; /* Step 3/4 to display dis inline-block */
	vertical-align: top; /* Step 4/4 to display divs inline-block */
	overflow: hidden; /* Image Swell 1/2: so when imgs swell, it stays inside the image bounds */
}

.gridBlock3 {
	background-color: orange;
	margin-top: 20px;
	margin-right: 10px; /* 3/5 to make the blocks fit as 50% size counting for padding and margin in the middle */
	margin-left: 10px; /* 4/5 to make the blocks fit as 50% size counting for padding and margin in the middle */
	width: calc((100% - 40px)/2); /* 5/5 to make the blocks fit as 50% size counting for padding and margin in the middle */
	heightX: 300px; /* URGENT: This is to show the other image divs temporarily, take out when finishing uploading pics */
	display: inline-block; /* Step 2/4 to display dis inline-block */
	font-size: 19px; letter-spacing: normal; word-spacing: normal; /* Step 3/4 to display dis inline-block */
	vertical-align: top; /* Step 4/4 to display divs inline-block */
	overflow: hidden; /* Image Swell 1/2: so when imgs swell, it stays inside the image bounds */
}

.gridBlock4 { /* these are not working!!!!!!!!!!! Trying to make this block 1/3 of size*/
	background-color: orange;
	margin-top: 20px;
	margin-right: 10px; /* 3/5 to make the blocks fit as 50% size counting for padding and margin in the middle */
	margin-left: 10px; /* 4/5 to make the blocks fit as 50% size counting for padding and margin in the middle */
	width: calc((100% - 40px)/3); /* 5/5 to make the blocks fit as 33% size counting for padding and margin in the middle */
	height: 550px; /* URGENT: This is to show the other image divs temporarily, take out when finishing uploading pics */
	display: inline-block; /* Step 2/4 to display dis inline-block */
	font-size: 19px; letter-spacing: normal; word-spacing: normal; /* Step 3/4 to display dis inline-block */
	vertical-align: top; /* Step 4/4 to display divs inline-block */
	overflow: hidden; /* Image Swell 1/2: so when imgs swell, it stays inside the image bounds */
}

.gridBlock5 { /* these are not working!!!!!!!!!!! Trying to make this block 2/3 of size*/
	background-color: orange;
	margin-top: 20px;
	margin-right: 10px; /* 3/5 to make the blocks fit as 50% size counting for padding and margin in the middle */
	margin-left: 10px; /* 4/5 to make the blocks fit as 50% size counting for padding and margin in the middle */
	width: calc((100% - 40px)/3*2); /* 5/5 to make the blocks fit as 66% size counting for padding and margin in the middle */
	heightx: 300px; /* URGENT: This is to show the other image divs temporarily, take out when finishing uploading pics */
	display: inline-block; /* Step 2/4 to display dis inline-block */
	font-size: 19px; letter-spacing: normal; word-spacing: normal; /* Step 3/4 to display dis inline-block */
	vertical-align: top; /* Step 4/4 to display divs inline-block */
	overflow: hidden; /* Image Swell 1/2: so when imgs swell, it stays inside the image bounds */
}

.gridText {
	background-color: none;
	margin-top: 20px;
	margin-right: 10px; /* 3/5 to make the blocks fit as 50% size counting for padding and margin in the middle */
	margin-left: 10px; /* 4/5 to make the blocks fit as 50% size counting for padding and margin in the middle */
	width: calc((100% - 20px)); /* 5/5 to make the blocks fit as 50% size counting for padding and margin in the middle */
	heightX: 300px; /* URGENT: This is to show the other image divs temporarily, take out when finishing uploading pics */
	display: inline-block; /* Step 2/4 to display dis inline-block */
	font-size: 19px; letter-spacing: normal; word-spacing: normal; /* Step 3/4 to display dis inline-block */
	vertical-align: top; /* Step 4/4 to display divs inline-block */
	overflow: hidden; /* Image Swell 1/2: so when imgs swell, it stays inside the image bounds */
}

#blockText {
	color: white;
	display: block;
	padding-top: 50px;
	text-align: justify;
}

@media only screen and (min-width: 700px) {
  #blockText {
    width: 80%;
  }
}

@media only screen and (min-width: 1000px) {
  #blockText {
    width: 52%;
  }
}

h3 {
	color: #ff9490;
	font-weight: bold;
	font-size: 13px; letter-spacing: normal; word-spacing: normal;
}

#blurb {
	font-size: 13px; letter-spacing: normal; word-spacing: normal;
}

#whitelink{
	color: white;
}

#pinklink {
	font-weight: bold;
	color: #ff9490;
	font-size: 13px; letter-spacing: normal; word-spacing: normal;
}