/* HTML5 Template Styles for HTML5Template page */
/* Help older browsers with HTML5 layout elements */
header, nav, aside, article, footer, section, figure, figcaption {
 display: block;
}

/* Google Fonts */

@import url('https://fonts.googleapis.com/css?family=Cormorant');


/* Get rid of white border around browser window */
body {
 margin: 0;
 padding: 0;
 /*background-color: #1D7878;*/
 background-color: #cccdce;
 /* Default font styling */
 font: 10pt Arial, Helvetica, Sans-Serif;
 color: #474747;
}
/* Get rid of large margins on headings */
h1, h2, h3, h4, h5, h6 {
 margin: 0;
}
#wrapper {
 /* Set your own widths, % for fluid, px for fixed */
 width: 70%;
 min-width: 780px;
 max-width: 2560px; /* Vertical margins, and auto to center */
 margin: 1em auto;
 background-color: #6CBABA;
 border: solid 10px #BABABA;
 border-radius: 20px;
 box-shadow: 8px 8px 8px black;
}

/*======== Styling for page header */
header {
 height: 80px; /* Font size, line-height, and family */
 background-color: #6CBABA;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
}
     
#logo {
	 color: #ffd1ec;
	 font-family:'Gabriela', Arial, serif;
	 text-align: center;
	 text-shadow: 3px 3px gray;
	 vertical-align: middle;
	 font-size: 400%;
	 vertical-align: middle;
}
 
  
 /* Style for <a> tags in the nav section */ 
 
#logo a { 
	text-decoration: none; 
	outline: none;
	color: #ffd1ec;
	font-family:'Gabriela', Arial, serif;
	text-align: center;
	text-shadow: 3px 3px gray;
	vertical-align: middle;
	}

/* Unvisited and visited link styling */ 


#logo a:link, #logo a:visited { 

	text-decoration: none; 
	outline: none; 
	color: #ffd1ec;
	font-family:'Gabriela', Arial, serif;
	text-align: center;
	text-shadow: 3px 3px gray;
	vertical-align: middle;

   } 


   /* Styling for hover and tap */ 

   #logo a:hover, #logo a:active { 

	text-decoration: none; 
	outline: none;
	color: white;
	font-family:'Gabriela', Arial, serif;
	text-align: center;
	text-shadow: 3px 3px gray;
	vertical-align: middle;
	 	
	}  
 
   
/*========================= */   


/*======== Styling for the article section */
article {
 padding: 10px;
 background-color: white;
 border-top-left-radius: 20px;
 border-top-right-radius: 20px;
 border-bottom-left-radius: 20px;
 border-bottom-right-radius: 20px;
 
}

article p {
 width: 90%;
 margin: 1em auto;
}

/* Sample styles for 3-column layout */
/* Section containing multiple columns */
.columns {
 display: table;
 border-collapse: collapse;
 width: 100%; /* border is optional, style to taste */
 /*border: solid 1px silver;*/
}


/* Aside columns in columns div */
.columns aside {
 display: table-cell; /* Use any width and padding you like */
 width: 18%;
 padding: 1%;
 background-color: #ffd1ec;
 border-top-left-radius: 20px;
 border-top-right-radius: 20px;
 border-bottom-left-radius: 20px;
 border-bottom-right-radius: 20px;

}
/* Main article in the columns */
.columns article {
 padding: 1%;
 border-top-left-radius: 20px;
 border-top-right-radius: 20px;
 border-bottom-left-radius: 20px;
 border-bottom-right-radius: 20px;
}
/*Optional, style to taste */
.columns .left {
 text-align: right;
 /*
 border-right: solid 1px gray;*/
 
}
.columns .right {
 text-align: left;
 /*border-left: solid 1px gray;*/
}
/*=========Figures==========*/
/* Style rules for formal, captioned figures */
.columns article figure {
 width: 80%;
 max-width: 600px;
 clear: both;
 margin: 1em auto;
 border: solid 1px gray;
 border-radius: 4px;
 box-shadow: 3px 3px 3px 3px silver;
}
.columns article figure img {
 width: 100%;
 display: block;
 border-top-left-radius: 4px;
 border-top-right-radius: 4px;
}

/* Hide the figure caption */
.centerall figcaption {
 font: 10pt/10pt Verdana, Tahoma, Sans-serif;
 padding: 2px 4px;
 display:none;
}

/* Show the figure caption on mouse hover */
.centerall:hover figcaption  {

 font: 10pt/10pt Verdana, Tahoma, Sans-serif;
 padding: 2px 4px;
 display:block;
 margin: 1em auto;
 text-align: center;
}

 figure.show img {
 width: 100%;
 }

 /*=========Cat Figures============*/
 
 /*=========Figures==========*/
/* Style rules for formal, captioned figures */

.cat {
 width: 100%;
 max-width: 75px;
 clear: both;
}

 /*===============Icon Styling in Article Section ======*/
 
 .icon {
 clear: both;
 width: 100%;
 
}

 .icon img {
 max-width: 75px;
 display: inline;
}

/* Unvisited and visited link styling */ 
.icon a, .icon a:link, .icon a:visited { 
	text-decoration: none; 

   } 
/* Styling for hover and tap */ 
.icon a:hover, .icon a:active { 
text-decoration: none;
clear:both; 
box-shadow: 3px 3px 3px 3px silver;
max-width: 100px;
display: inline-block;

 -moz-transform: scale(1.2);
 -ms-transform: scale(1.2);
 -o-transform: scale(1.2);
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
  -moz-transition: all ease-out 1s;
 -ms-transition: all ease-out 1s;
 -o-transition: all ease-out 1s;
 -webkit-transition: all ease-out 1s;
 transition: all ease-out 1s;
   }
   
/*===== Text Links =======*/

 .textlinks {
 clear: both;
 width: 100%;
 display: inline;
 display: inline-block;
 color: black;
}

/* Unvisited and visited link styling */ 
.textlinks a, .textlinks a:link, .textlinks a:visited { 
	text-decoration: none; 
    display: inline-block;
	color: #1e4554;
	text-align: center;
	/*text-shadow: 1px 1px gray;*/
	vertical-align: middle;;
} 

/* Styling for hover and tap */ 
.textlinks a:hover, .textlinks a:active { 
	text-decoration: none; 
	outline: none;
	text-align: center;
	/*text-shadow: 1px 1px #07119b;*/
	vertical-align: middle;
	
	 -moz-transform: scale(1.2);
 -ms-transform: scale(1.2);
 -o-transform: scale(1.2);
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
  -moz-transition: all ease-out 1s;
 -ms-transition: all ease-out 1s;
 -o-transition: all ease-out 1s;
 -webkit-transition: all ease-out 1s;
 transition: all ease-out 1s;
	
   }

   
 
 /* This was a cool image effect for my main photo 
.centerall:hover img {
 -moz-transform: scale(1.5) rotate(720deg) rotatex(360deg) rotatey(360deg);
 -ms-transform: scale(1.5) rotate(720deg) rotatex(360deg) rotatey(360deg);
 -o-transform: scale(1.5) rotate(720deg) rotatex(360deg) rotatey(360deg);
 -webkit-transform: scale(1.5) rotate(720deg) rotatex(360deg) rotatey(360deg);
 transform: scale(1.5) rotate(720deg) rotatex(360deg) rotatey(360deg);
 -moz-transition: all ease-out 1s;
 -ms-transition: all ease-out 1s;
 -o-transition: all ease-out 1s;
 -webkit-transition: all ease-out 1s;
 transition: all ease-out 1s;
 }
*/

/*==================================*/

/* Future Effect for Hovering over Side Bars */
.columns:hover aside {
 
 }

/* Left-floating pictures */
.columns aside figure.floatleft {
 float: left;
 width: 33%;
 max-width: 400px;
 margin: 0 10px 0 0;
}
/* Right-floating pictures */
figure.floatright {
 float: right;
 width: 33%;
 max-width: 400px;
 margin: 0 0 0 10px;
}
/* Pictures with no caption */
figure.nocaption figcaption {
 display: none;
}

/* Pictures in the side columns */

.columns aside img {
 /*display: block;
 width: 100%;
 margin: 0.5em auto;*/
 border: solid 1px gray;
 border-radius: 4px;
 box-shadow: 3px 3px 3px 3px silver;
}


/*======== About - Kittie Photos ======*/

 /* Center the table */
 .columns aside table.thumbs {
 margin: 0 auto;
 }
 /* Style for each table cell */
 .columns aside table.thumbs td {
 position: relative;
 padding: 0 2px;
 }
 /* Small image in each cell */
 .columns aside table.thumbs img.small {
 width: 100px;
 }
 
 /* Large images in left two columns */
 /*
 .columns aside table.thumbs img.left {
 position: absolute;
 top: 10%;
 left: 80%;
 z-index: 10;
 max-width: 300px;
 max-height: 300px;
 visibility: hidden;
 
 }
 */
 /* Large images in right two columns */
 /*
 .columns aside table.thumbs img.right {
 position: absolute;
 top: 10%;
 right: 80%;
 z-index: 10;
 max-width: 300px;
 max-height: 300px;
 visibility: hidden;
 
 }
*/
 
 /* Hover on any table cell */
 /*
 .columns aside table.thumbs td:hover img.left, 
 .columns aside table.thumbs td:hover img.right {
 visibility: visible;
 }
*/
/*====================================*/ 
 


/* ======== Nav Bar Styling ======*/
nav {
	background-color:  #6CBABA; 
}

/* Style for <a> tags in the nav section */ 
nav a { 
   background-color: gray; 
   color: white; 
   text-decoration: none; 
   outline: none; 
   padding: 10px 0; 
   display: block; 
   float: left; 
   border-top-left-radius: 20px;
   border-top-right-radius: 20px; 
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px; 
   border-right: solid 4px #6CBABA;
   border-top: solid 1px #6CBABA; 
   border-bottom: solid 1px #6CBABA; 
   border-left: solid 4px #6CBABA;    
   width: 20%; 
   text-align: center; 
   box-sizing: border-box; /* Box sizing for older browsers */ 
   -moz-box-sizing: border-box; 
   -webkit-box-sizing: border-box; 
   } 
/* Unvisited and visited link styling */ 
nav a:link, nav a:visited { 
   background-color: gray; 
   color: white; 
   } 
/* Styling for hover and tap */ 
nav a:hover, nav a:active { 
   background-color: silver; 
   color: black; 
   }

/* ======== Nav - Here Bar Styling ======*/
#here {
   background-color: silver; 
   color: black; 
   text-decoration: none; 
   outline: none; 
   padding: 10px 0; 
   display: block; 
   float: left; 
   border-top-left-radius: 20px;
   border-top-right-radius: 20px; 
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px; 
   border-right: solid 4px #6CBABA;
   border-top: solid 1px #6CBABA; 
   border-bottom: solid 1px #6CBABA; 
   border-left: solid 4px #6CBABA;    
   width: 20%; 
   text-align: center; 
   box-sizing: border-box; /* Box sizing for older browsers */ 
   -moz-box-sizing: border-box; 
   -webkit-box-sizing: border-box;  
}

/* Style for <a> tags in the nav section */ 
#here a { 
   background-color: silver; 
   color: black; 
   text-decoration: none; 
   outline: none; 
   padding: 10px 0; 
   display: block; 
   float: left; 
   border-top-left-radius: 20px;
   border-top-right-radius: 20px; 
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px; 
   border-right: solid 4px #6CBABA;
   border-top: solid 1px #6CBABA; 
   border-bottom: solid 1px #6CBABA; 
   border-left: solid 4px #6CBABA;    
   width: 20%; 
   text-align: center; 
   box-sizing: border-box; /* Box sizing for older browsers */ 
   -moz-box-sizing: border-box; 
   -webkit-box-sizing: border-box; 

   } 
/* Unvisited and visited link styling */ 
#here a:link, #here a:visited { 
   background-color: silver; 
   color: black; 
   } 
/* Styling for hover and tap */ 
#here a:hover, #here a:active { 
   background-color: silver; 
   color: black; 
   }
   


/* ==== Styling for footer */
footer {
 height: 35px;
 padding: 5px;
 background-color: #6CBABA;
 border-bottom-left-radius: 10px;
 border-bottom-right-radius: 10px;
 font: 12pt Times, "Times New Roman" , Serif;

}
/* Styling for table in footer */
footer table {
 width: 98%;
 margin: 5px auto;
 color: #ffc2e5;
 text-shadow: 1px 1px gray;
 
}

/*==========Contact Form Styling =====*/

#contact-area {
	max-width: 400px;
	margin-top: 25px;
	display: inline-block;
}

#contact-area input, #contact-area textarea{
	padding: 5px;
	width: 200px;
	font-family: Helvetica, sans-serif;
	font-size: 1.2em;
	margin: 0px 0px 10px 0px;
	border: 2px solid #ccc;
}

#contact-area select {
	padding: 5px;
	max-width: 200px;
	font-family: Helvetica, sans-serif;
	font-size: 1.0em;
	margin: 0px 0px 10px 0px;
	border: 2px solid #ccc;
}

#contact-area textarea{
	height: 90px;
}

#contact-area select{
	height: 40px;
}

#contact-area textarea:focus, #contact-area select:focus, #contact-area input:focus {
	border: 2px solid #900;
}

#contact-area input.submit-button {
	width: 75px;
	float: right; 
	font-size: 1.0em;
}

label {
	float: left;
	text-align: right;
	margin-right: 15px;
	width: 100px;
	padding-top: 5px;
	font-size: 1.2em;
}

/*============== FAQ Styline ===================*/

.faqs div:first-letter, .faqs p:first-letter {
 font: bold 1.5em Arial Black, Gadget, sans-serif;
 color: #ffd1ec;
 text-shadow: 2px 2px #ccc;

 }
 
 /* Style of mouse pointer over qa */
 .faqs div {
 cursor: help;
 

 }
 /* Hide the paragraph within each qa div */
 .faqs div p {
 display: none;
 
 }
 /* Show the paragraph when hovering on the qa div */
 .faqs div:hover p {

 
 margin-left: 2em;
 background-color: #cef;
 margin-top: 0;
 
 
text-decoration: none;
clear:both; 
box-shadow: 3px 3px 3px 3px silver;
display: inline-block;

 -moz-transform: scale(1.01);
 -ms-transform: scale(1.01);
 -o-transform: scale(1.01);
 -webkit-transform: scale(1.01);
 transform: scale(1.01);
  -moz-transition: all ease-out 1s;
 -ms-transition: all ease-out 1s;
 -o-transition: all ease-out 1s;
 -webkit-transition: all ease-out 1s;
 transition: all ease-out 1s;
 
 }
 
 .no-touch div:hover p {
 z-index: 99;
 display: block;
		
		 margin-left: 2em;
 background-color: #cef;
 margin-top: 0;
 
 
text-decoration: none;
clear:both; 
box-shadow: 3px 3px 3px 3px silver;


 -moz-transform: scale(1.01);
 -ms-transform: scale(1.01);
 -o-transform: scale(1.01);
 -webkit-transform: scale(1.01);
 transform: scale(1.01);
  -moz-transition: all ease-out 1s;
 -ms-transition: all ease-out 1s;
 -o-transition: all ease-out 1s;
 -webkit-transition: all ease-out 1s;
 transition: all ease-out 1s;
 
    }
 
 /*======== Projects ===========*/
  .projects {  
 width: 90%;
 } 
 
 
.projects h3 {
 font: bold 1.0em Arial Black, Gadget, sans-serif;
 color: #626567;
 margin-left: 1em;
 }
 
 .projects h4 {
 font: bold Arial Black, Gadget, sans-serif;
 color: #626567;
 margin-left: 2em;
 }
 
  .projects div {  
 width: 98%;
 margin-left: 2em;
 background-color: #EBEDEF;
 border: solid 5px #EBEDEF;
 border-radius: 5px;
 border-top-left-radius: 5px;
 border-top-right-radius: 5px;
 } 

 
 /*===============Icon Styling in Project Article Section ======*/
 
 .projects_icon 
{ 

} 
 

/* Unvisited and visited link styling */ 
.projects_icon figure a, .projects_icon figure a:link, .projects_icon figure a:visited 
{ 
	text-decoration: none; 
	border: none;
	display: block;
	margin: 1em auto;
} 

/* Styling for hover and tap */ 
.projects_icon figure a:hover, .projects_icon figure a:active 
{ 
text-decoration: none;
clear:both; 
border:none;
max-width: 100px;
display: block;

 -moz-transform: scale(1.2);
 -ms-transform: scale(1.2);
 -o-transform: scale(1.2);
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
  -moz-transition: all ease-out 1s;
 -ms-transition: all ease-out 1s;
 -o-transition: all ease-out 1s;
 -webkit-transition: all ease-out 1s;
 transition: all ease-out 1s;
}
   
/* Style rules for formal, captioned figures */
.projects_icon figure {
 max-width: 100px;
 margin: 1em auto;
 display:block;
}
.projects_icon figure a img {
 border-top-left-radius: 4px;
 border-top-right-radius: 4px;
 max-width: 75px;
 border: none;
 display:block;
 margin: 1em auto;
}

/* Hide the figure caption */
.projects_icon figcaption {
 font: 10pt/10pt Verdana, Tahoma, Sans-serif;
 padding: 2px 4px;
 display:block;
 margin: 1em auto;
 text-align: center;
}