/**********************************
General
***********************************/
body {
margin:0;
background-color: #ededed;
}

img {
  max-width: 100%;
}

/**********************************
Main Header
***********************************/
header {
height:65px;
width:75%;
background-color: #35a4dc;
text-align:center;
border-bottom: 5px solid #0673ba;
margin:0 auto;
padding:5px;
}

#logo {
text-align: center;
padding-top:5px;
padding-left:10px;
position:relative;
float:left;
width:190px;
height:60px;
}

/**********************************
Navigation Bar
***********************************/
nav {
margin: 10px 0 20px 0;
text-align:center;
}

nav ul {
font-family: 'Economica', sans-serif;
font-size:15pt;
  list-style:none;
  padding:0px;
}

nav li {
  display: inline-block;
  width:200px;
  height:50px;
  background-color:#0972ba;
  margin:5px;
}

nav li:hover {
background-color:#09496d;
}

nav a {
  text-align:center;
 display:block;
text-decoration:none;
padding:5px;
margin-top:5px;
}

nav a:visited {
    color:#fff;
}

nav a:link {
    color: #fff;
}

nav li.selected {
background-color:#09496d;
  text-align:center;
}

/**********************************
Social Media Icons within Nav Bar
***********************************/
#socialmedia {
float:right;
margin:0px;
}

#socialmedia ul {
margin:15px;
}

#socialmedia li {
display:inline-block;
padding-right:15px;
margin-top:5px;
margin-right:10px;
height:28px;
width:28px;
}

#socialmedia li a {
display:block;
text-indent:-9999px;
height:28px;
width:28px;
}

#socialmedia li.linkedin {
background:url(../images/smicon1.png) no-repeat center;
background-size:100%;
padding-right:0px;
}

#socialmedia li.linkedin:hover{
background:url(../images/smicon1hover2.png) no-repeat center;
background-size:100%;
padding:0px;
}


#socialmedia li.twitter {
background:url(../images/smicon2.png) no-repeat center;
background-size:100%;
padding-right:0px;
}

#socialmedia li.twitter:hover{
background:url(../images/smicon2hover2.png) no-repeat center;
background-size:100%;
padding-right:0px;
}

#socialmedia li.facebook {
background:url(../images/smicon3.png) no-repeat center;
background-size:100%;
padding-right:0px;
}

#socialmedia li.facebook:hover{
background:url(../images/smicon3hover2.png) no-repeat center;
background-size:100%;
padding-right:0px;
}

/**********************************
Portfolio
***********************************/
#wrapper {
 margin: 0 auto;
  text-align:center;
  max-width: 1250px;
}


#gallery {
text-align:center;
padding:0px;
list-style:none;
margin: 0 auto;
max-width:1550px;
}



#gallery li {
 float:left;
 width: 20%;
 margin:2.5%;	
}


#gallery li a {
  margin:0;
  text-decoration:none;
  font-size:15pt;
  color: #145670;
  padding:0px;
}


li.portitem1 {
position: relative;
-webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
    transition: width 0.5s;
}

.portitem1  {
position: relative;
-webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
    transition: width 0.5s;
}

.titleslide {
font-family: 'Cuprum', sans-serif;
font-size:20pt;
text-align:center;
clear:both;
}


.imgDescription {
font-family: 'Source Sans Pro', sans-serif;
  position: absolute;
  max-height:270px;
  margin:0px;
  top:0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background:rgba(9, 114, 186, 0.75);
  color: #fff;
  font-size: 13pt;
  visibility: hidden;
  opacity: 0;
 transition:  visibility opacity 0.1s ease;
 -webkit-transition: visibility opacity 0.1s ease;
padding:10px;
}

.imgbanner p {
background:black;
}



.portitem1:hover .imgDescription {
font-size:13pt;
  visibility: visible;
    transition: opacity 1s ease-in-out;
 -webkit-transition: visibility opacity 0.5s ease;
  opacity: 1;
   border-color: green;
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
  box-sizing:border-box;
    background:rgba(93, 31, 104, 0.8);
}

li.portitem2 {
position: relative;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 1s;
}

.portitem2:hover .imgDescription {
  visibility: visible;
    transition: opacity 1s ease-in-out;
 -webkit-transition: visibility opacity 0.5s ease;
  opacity: 1;
   border-color: green;
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
  box-sizing:border-box;
  background:rgba(237, 28, 36, 0.8);
}

li.portitem3 {
position: relative;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 1s;
}

.portitem3:hover .imgDescription {
  visibility: visible;
    transition: opacity 1s ease-in-out;
 -webkit-transition: visibility opacity 0.5s ease;
  opacity: 1;
   border-color: green;
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
  box-sizing:border-box;
    background:rgba(9, 114, 186, 0.75);
}

li.portitem4 {
position:relative;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 1s;
}

.portitem4:hover .imgDescription {
  visibility: visible;
    transition: opacity 1s ease-in-out;
 -webkit-transition: visibility opacity 0.5s ease;
  opacity: 1;
   border-color: green;
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
  box-sizing:border-box;
  background:rgba(157, 28, 31, 0.8);
}

li.portitem5 {
position:relative;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 1s;
}

.portitem5:hover .imgDescription {
  visibility: visible;
    transition: opacity 1s ease-in-out;
 -webkit-transition: visibility opacity 0.5s ease;
  opacity: 1;
   border-color: green;
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
  box-sizing:border-box;
  background:rgba(35, 31, 32, 0.8);
}


li.portitem6 {
position:relative;
-webkit-transition: width 0.5s; /* For Safari 3.1 to 6.0 */
    transition: width 0.5s;
}

.portitem6:hover .imgDescription {
  visibility: visible;
    transition: opacity 1s ease-in-out;
 -webkit-transition: visibility opacity 0.5s ease;
  opacity: 1;
   border-color: green;
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
  box-sizing:border-box;
  background:rgba(43, 92, 45, 0.8); 
}


li.portitem7 {
position:relative;
-webkit-transition: width 0.5s; /* For Safari 3.1 to 6.0 */
    transition: width 0.5s;
}

.portitem7:hover .imgDescription {
  visibility: visible;
    transition: opacity 1s ease-in-out;
 -webkit-transition: visibility opacity 0.5s ease;
  opacity: 1;
   border-color: green;
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
  box-sizing:border-box;
  background:rgba(61, 147, 155, 0.8);
}


li.portitem8 {
position:relative;
-webkit-transition: width 0.5s; /* For Safari 3.1 to 6.0 */
    transition: width 0.5s;
}

.portitem8:hover .imgDescription {
  visibility: visible;
    transition: opacity 1s ease-in-out;
 -webkit-transition: visibility opacity 0.5s ease;
  opacity: 1;
   border-color: green;
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
  box-sizing:border-box;
    background:rgba(255, 72, 0, 0.8);
}



/**********************************
Footer
***********************************/
#msfooter  {
font-family: 'Josefin Sans', sans-serif;
color:#636363;
text-align:center;
height:60px;
padding-top:80px;
margin-top:50px;
clear:both;
padding-bottom:0px;
line-height:40%;
}

.reproduce {
font-size:10pt;
}

/**********************************
Portfolio Items
***********************************/

#portcontainer {
margin: 0 auto;
  text-align:center;
  max-width: 650px;
  padding: 0 5%;
}


#portdescription{
text-align:left;
padding:10px;
margin-bottom:10px;
}

#portdescription h1 {
font-family: 'Cuprum', sans-serif;
color:#0f4861;
font-size:20pt;
}

#portdescription p {
font-family: 'Fira Sans', sans-serif;
font-size:10pt;
color:#3c3c3c;
font-weight:500;
line-height:135%;
}

#portdescription a{
color:#35a4dc;
}

#portdescription a:hover{
color:#09496d;
}

#portcontainer img {
padding-bottom:5%;
}


#portitem {
width:90%;
}


#nextprev {
text-align:center;
padding:0px;
margin: 0 auto;
clear:both;
max-width:650px;
}

#nextprev ul {
list-style:none;

text-align:center;
padding:0px;
}

#nextprev li {
background:#c7c7c7;
display:inline-block;
height:30px;
}

#nextprev li:hover {
background-color:#09496d;
color:white;
}

#nextprev a {
display:block;
text-decoration:none;
font-family: 'Economica', sans-serif;
font-size:14pt;
color:#1672a0;
height:30px;

}

#nextprev li a:hover {
color:white;
}

.previous {
text-align:left;
width:46.5%;
padding-left:3%;
padding-top:10px;
}

.next {
text-align:right;
width:46.5%;
padding-right:3%;
padding-top:10px;
}

/**********************************
About Page
***********************************/
#aboutwrapper {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 5%;
}
#aboutsection h3 {
margin: 0 0 1em 0;
font-family: 'Cuprum', sans-serif;
color:#0f4861;
font-size:20pt;
}

#aboutsection {
max-width:600px;
float:right;

}

#aboutsection p{
font-family: 'Fira Sans', sans-serif;
color:#3c3c3c;
}

.profile-photo {
  display: block;
  max-width: 50%;
  margin: 0 auto 20px;
  border-radius:100%;
}

#aboutsection a {
color:#35a4dc;
}

#aboutsection a:hover{
color:#09496d;
}

/**********************************
PAGE: CONTACT
***********************************/

#contactwrapper {
  max-width: 800px;
  margin: 0 auto;
  margin-top:0px;
  
  padding:10px;
}

#contactprimary {
width:50%;
float:left;
}

#contactprimary h3 {
font-family: 'Cuprum', sans-serif;
color:#0f4861;
}

#contactprimary p {
font-family: 'Fira Sans', sans-serif;
color:#3c3c3c;
}

#contactsecondary {
width:40%;
float:right;
}

#contactsecondary {
font-family: 'Fira Sans', sans-serif;
color:#3c3c3c;
}

#contactsecondary h3 {
font-family: 'Cuprum', sans-serif;
color:#0f4861;
}

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height:30px;
  background-repeat: no-repeat;
  background-size: 30px 30px;
  padding: 10px 0 0 50px;
  margin: 0 0 30px;
  color:#0673ba;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../images/emailicon.png');
 }


.contact-info li.mail a:hover {
  background-image: url('../images/emailiconhover.png');
  color:#939597;
}


.contact-info li.twitter a {
  background-image: url('../images/twittercontact.png');
}

.contact-info li.twitter a:hover {
  background-image: url('../images/twittercontacthover.png');
   color:#939597;
}

/**********************************
PAGE: BLOG
***********************************/

#blogcontainer {
max-width:650px;
margin:0 auto;
padding:0px;
}