@font-face
{
font-family: gotham_rounded;
src: url(../fonts/Gotham_rounded/GothamRnd-Light.otf);
}


@font-face
{
font-family: gotham_light;
src: url(../fonts/Gotham/Gotham-Light.otf);
}


@font-face
{
font-family: gotham_bold;
src: url(../fonts/Gotham/Gotham-Medium.otf);
}


html,
body {
  font-size: 100%;
  font-family: gotham_light;
  text-align: center;
/*  color: rgba(210,60,90,.8);*/
  background-color: rgba(253,  249, 247     ,1);
}

body {
    font-size: 16px;
    margin: 0;
    padding: 0;
    position: relative;
}
::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}
::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*=HTML5 Boilerplate Helpers
--------------------------------------------------------------------------------------- */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}

#welcome {
  margin: 0 auto;
  margin-bottom: 36px;
  position: relative;
  color: rgba(210,60,90,.8);
  text-transform: uppercase;
  font-size: 13px;
  top: 1.5em;
/*  height: 610px;*/
  height: auto;
  width: 100%;
/*  border: 1px solid red;*/
}

 .welcome-photo{
  position: relative;
  display: block;
  margin: 0 auto;
  height: 372px;
  width: 372px;
  margin-bottom: -6px;
  background-image: url('../images/images_1x_2x/welcome_images/joshua_by_well.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 2px;
  background-position: center;
 }

 .photography-photo, .hobby-photo{
  position: relative;
  display: inline;
  margin: 0 auto;
  height: 470px;
  width: 372px;
  margin-bottom: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 2px;
 }

  img{
    border-radius: 2px;
    max-width: 100%;
  }

#hobby-block{
  max-width: 1400px;
  position: relative;
  margin: 0 auto;
  background-color: rgba(68, 107, 114  ,.06);
}

.thisHobby{

}

.protector{
  background-color: rgba(253,  249, 247     ,1);
}

.nav-list li{
  position: relative;
  margin-left: 6px;
  left: -3px;
}

.nav-list-hobbies li{
  position: relative;
  margin-left: 6px;
  left: -3px;
}


#main-nav{
  position: relative;
  display: inline;
  height: 40px;
  width: 496px;
  margin: 0 auto;
/*  border: 1px solid blue;*/
}

#main-profile{
  position: relative;
  display: inline;
  height: 80px;
  width: 1200px;
  margin: 0 auto;
/*  border: 1px solid blue;*/
}

.colorTime{
  background-color: rgba(109 ,189, 217, .08 );
  max-width: 1400px;
  position: relative;
  margin: 0 auto;
}


.colorTime2{
  background-color: rgba(247,  37,  87, .03  );
  max-width: 1400px;
  position: relative;
  margin: 0 auto;
}

/*img:hover
{
opacity:0.55;
filter:alpha(opacity=55);
}*/

#hOpener{
  padding-top: 30px;
  margin-top: 14px;
  font-size: 29px;
}

#img1:hover{
    opacity:1;
    filter:alpha(opacity=1); /* For IE8 and earlier */
}

article, #hobbies, #about-me, #favourite-things {
max-width: 496px;
padding: 10px;
margin: 0 auto;
position: relative;
text-align: center;
}


#portfolio {
max-width: 1400px;
padding: 10px;
margin: 0 auto;
position: relative;
text-align: center;
}

a:-webkit-any-link {
color: rgb(101 , 101 ,108 );
text-decoration: none;
cursor: auto;
}

a:link, a:visited, a:active { color: rgb(101 , 101 ,108 ); }

a:hover { color: rgba(210,60,90,.8); }

.photography:hover, .krav-maga:hover, .beard:hover, .hiv-prevention:hover, .song-writing:hover, .sports:hover { color: rgba(210,60,90,.8); cursor: pointer;}



h1 {
  color: rgb(101 , 101 ,108 );
  font-weight: normal;
}

h2 {
  color: rgb(101 , 101 ,108 );
  font-weight: normal;
  text-transform: none;
  font-size: 16px;
  padding: 0px 0px 0px 0px;
  margin: 0px;
}


#email{
  font-size: 15px;
}

h5 {
  color: rgb(101 , 101 ,108 );
  font-weight: normal;
  text-transform: none;
  font-size: 14px;
  padding: 0px 0px 0px 0px;
  margin: 0 auto;
}

h3 {
  color: rgb(101 , 101 ,108 );
  text-transform: none;
  font-weight: normal;
  font-size: 12px;
  padding: 0px 0px 15px 0px;
  margin: 30px;
}

p {
  font-size: 14px;
  color: rgb(101 , 101 ,108 );
  text-align: left;
  margin-right: 5px;
  margin-left: 5px;
  margin-top: 24px;
  font-weight: normal;
}

.contain-me{
  display: inline-block;
  vertical-align: top;
  background-position: center;
  width: 390px;
}

.contain-me-portfolio{
  vertical-align: top;
  background-position: center;
  max-width: 90%;
  position: relative;
}

.contain-me-portfolio-photos{
  vertical-align: top;
  max-width: 1400px;
  position: relative;
}

.contain-me-portfolio-photo{
  vertical-align: top;
  max-width: 510px;
  height: 462px;
  position: relative;
  display: inline;
}

.in-a-line {
  display: inline-block;
}

.photos-portfolio {
  cursor: pointer;
  font-size: 12px;
  border: 1px solid rgba(127,  98,  124, .1 );
  font-weight: normal;
  width: 502px;
  height: 302px;
  max-width: 502px;
  padding: 0;
  margin: 10px;
}

.back-to-top{
  cursor: pointer;
  background-color: rgba(90, 111 ,186   ,1);
  font-size: 16px;
  margin-top: 14px;
  border-radius: 3px;
  color: rgba(200, 200, 200, 1);
  letter-spacing: .2em;
}

.back-to-top:hover{
  background-color: rgba(235 , 106, 129  ,1);
  color: rgba(33,33,33,1);
}

.photos {
  cursor: cell;
  font-size: 12px;
  border: 1px solid rgba(127,  98,  124, .1 );
  font-weight: normal;
  width: 372px;
  height: 372px;
  max-width: 372px;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
}


.skinny-hr{
  max-width: 33%;
}

.wide-hr{
  max-width: 80%;
}

.photo-descr-kid{
  height: 62px;
}

.photo-descr-kidz{
  display: inline;
}

.p2 {
  font-size: 12px;
  text-align: left;
  font-weight: normal;
  width: 372px;
  overflow: scroll;
  max-width: 372px;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
}


.p3 {
  font-size: 12px;
  text-align: center;
  font-weight: normal;
  width: 715px;
  overflow: scroll;
  max-width: 715px;
padding: 0;
margin: 0 auto;
display: inline-block;
}


#pOpener {
  color: rgb(101 , 101 ,108 );
  font-size: 14px;
  text-align: center;
  margin: 0 auto;
  margin-top: -2px;
  margin-bottom: -8px;
  font-weight: normal;
}

ul {
/*max-width: 496px;*/
margin: 0px auto;
padding: 14px 0px 0px 0px;
margin-left: 4px;
}

li {
font-size: 13px;
text-transform: none;
text-decoration: none;
display:inline-block;
padding: 0px 4px 0px 4px;
margin-right: 6px;
}




@media only screen and (max-width: 590px) {

h1 {
font-size: 30px;
padding: 5px;
}

.p3 {
  max-width: 75%;
  width: 75%;
  display: block;
}

li {
padding: 3px;
display: block;
}

.photos-portfolio {
  max-width: 312px;
  height: 188px;
  width: 312px;
}

}


@media only screen and (max-width: 330px) {


html,
body {
  max-width: 100%;
}

  .welcome-photo{
    max-width: 90%;
    max-height: 90%;
  }

#hobby-block{
  max-width: 100%;
  position: relative;
}


.photos-portfolio {
  width: 252px;
  height: 152px;
  max-width: 252px;
}


  #welcome{
    width: 100%;
  }

  #hOpener{
    margin: 0 auto;
    padding: 0 auto;
    margin-bottom: 15px;
    font-size: 2em;
  }

.photos {
  width: 272px;
  height: 272px;
  max-width: 272px;
  display: inline-block;
}


.contain-me{
  display: block;
  width: 300px;
}


.p2 {
  width: 262px;
  max-width: 262px;
  display: block;
}


.p3 {
  width: 300px;
  max-width: 300px;
  display: block;
}


article, #hobbies, #about-me, #favourite-things, #portfolio {
max-width: 296px;
padding: 10px;
}

.skinny-hr{
  max-width: 86%;
}

}




@media only screen and (max-width: 800px) {

html,
body {
  max-width: 100%;
}

.welcome-photo{
    max-width: 90%;
  }

  #welcome{
    width: 100%;
    height: 100%;
  }

  #hOpener{
    margin: 0 auto;
    padding: 0 auto;
    margin-bottom: 15px;
    font-size: 2em;
  }

#hobby-block{
  max-width: 100%;
}


.photos {
  width: 300px;
  height: 300px;
  max-width: 300px;
}

.contain-me{
  width: 320px;
}

.p2 {
  width: 296px;
  max-width: 296px;
  display: inline-block;
}


.p3 {
  width:  85%;
  max-width: 85%;
  display: inline-block;
}


article, #hobbies, #about-me, #favourite-things, #portfolio {
max-width: 320px;
padding: 10px;
}


.skinny-hr{
  max-width: 60%;
}



}