nav{
    width: 100%;
    box-sizing: border-box;
    background: black;
    padding: 9px;
    position: fixed;
    top: 0;
    z-index: 999;
}

.whatifnav{
    background: #C69CF4
}
nav a {
        color:white;
    font-size: 10;
margin-right: 15px;
    font-weight: 10;
        text-decoration: none;

    
    /* works copy: */
font-family: Arial;
}
.link {
        color:white;
    font-size: 10;
margin-right: 15px;
    font-weight: bold;
        text-decoration: none;
font-style: italic;
    
    /* works copy: */
font-family: Arial;
}
.navul1{
    margin-left: 15px;
}

.linkedin{
 position:absolute;
    right:15px; 
    font-size: 15px;
}

.navcenter{
/* NIKA LOHRASBI AZAR Copy: */
font-family: Arial-BoldMT;
font-size: 0.2em;
color: #fff;
    text-align: center;
margin-left: 30%;
}

.resume{
 position:absolute;
    right:85px; 
        font-size: 15px;

}
.circle {
  width: 10px;
	height: 10px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
    background: white;
}

#ref {
    font-family: helvetica;
    color: 676767;
    margin: 20px 0;
    font-size: 16px;
    width: 100%;
    max-width: 100%;
    font-weight: 300;
    line-height: 1.7;
}
.center{
        text-align: center;

}


h1{
/* NIKA LOHRASBI AZAR: */
font-family: Arial-BoldMT;
    font-family: Wremena, Icons;
    font-style: normal;
    font-weight: 900;
font-size: 48px;
color: #000000;
line-height: 10px;
margin-top: 5%;
text-align: center;
text-rendering: optimizeLegibility;
}

h2{  
/* works copy: */
font-family: helvetica;
font-size: 14px;
color: #000000;
font-weight: 100;
margin-left: 2.7%;
text-align: left;
}

h4{
    
/* works copy: */
font-family: Arial-BoldMT;
font-size: 24px;
color: #000000;
line-height: auto;
letter-spacing: -0.04em;
text-align: left;
}

.intro{
    /* thinker, designer, d: */
font-family: SavoyeLetPlain;
font-size: 20px;
color: #000000;
line-height: 14px;
        text-align: center;
}

.about{
/* Design is invisible.: */
font-size: 38px;
color: #000000;
letter-spacing: 0px;
    text-align: center;
    font-family: helvetica /*!Persona*/;
    font-style: normal;
    font-weight: 200;
}

ind{
/* Design is invisible.: */
font-size: 38px;
color: #000000;
letter-spacing: 0px;
    text-align: center;
font-family: Arial-BoldMT;
    font-style: normal;
    font-weight: 200;
}



body{
    background: #ffffff;
     margin: 0px;
      max-width: 100%;
        overflow-x: hidden;
}
.main{
    background: #fff;
    display: block;
    padding-bottom: 10px;
    padding:10px; 
    margin-top:50px; 
    height:auto; 
}
.main img{
  display: block;
    margin-left: auto;
    margin-right: auto
}
.mainbottom{
    background: #eeeeee;
    min-width: 100%;
    padding:10px; 
    padding-bottom: 50px;
    margin:auto;
    margin-top: 50px;
    height:auto; 
    float: left;
    display: block;
}

.mainbottom img {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.link {
 /* more about me: */
font-family: Arial-ItalicMT;
font-size: 14px;
color: #000000;
letter-spacing: 0px;  
}

.pics{
    width: 95%;
    margin: auto;
    height: auto; 
    text-align: center;
}

.aboutdiv{
   margin: auto;
    margin-top: 30px;
    width: 70%; 
}

.aboutdiv a{
   text-align: center;
}

.about{
font-size: 18px;
color: #000000;
letter-spacing: 0px;
    text-align: center;
    max-width: 60%;
    margin: auto;
}
/*  ---- IMGS ---- */

.snip1273 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  display: inline-block;
  margin: 10px 1%;
  width: 30%;
  color: #fff;
  text-align: left;
  background-color: #000;
  font-size: 16px;
  overflow: hidden;
}

.bigger{
  width: 45%;
}
/*
.largepic {
 
} */
.snip1273 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;

}
.snip1273 img {
  position: relative;
  max-width: 100%;
  vertical-align: bottom;
}
.snip1273 figcaption {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  padding: 40px 20px;
}
.snip1273 figcaption:before,
.snip1273 figcaption:after {
  width: 1px;
  height: 0;
}
.snip1273 figcaption:before {
  right: 0;
  top: 0;
}
.snip1273 figcaption:after {
  left: 0;
  bottom: 0;
}
.snip1273 h3,
.snip1273 p {
  line-height: 1em;
  text-align: bottom;
  vertical-align: bottom;
}
.snip1273 h3 {
  margin: 0 0 3px;
  font-weight: 700;
  text-transform: uppercase;
     font-size: 0.7em;
}
.snip1273 p {
  font-size: 0.7em;
  font-weight: lighter;
  margin: 0 0 15px;
    color: white;
     font-size: 0.7em;
}
.snip1273 a {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
}
.snip1273:before,
.snip1273:after,
.snip1273 figcaption:before,
.snip1273 figcaption:after {
  position: absolute;
  content: '';
  background-color: #000;
  z-index: 1;
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
  opacity: 1;
}
.snip1273:before,
.snip1273:after {
  height: 1px;
  width: 0%;
}
.snip1273:before {
  top: 0;
  left: 0;
}
.snip1273:after {
  bottom: 0;
  right: 0;
}
.snip1273:hover img,
.snip1273.hover img {
  opacity: 0.4;
}
.snip1273:hover figcaption,
.snip1273.hover figcaption {
  opacity: 1;
}
.snip1273:hover figcaption:before,
.snip1273.hover figcaption:before,
.snip1273:hover figcaption:after,
.snip1273.hover figcaption:after {
  height: 100%;
}
.snip1273:hover:before,
.snip1273.hover:before,
.snip1273:hover:after,
.snip1273.hover:after {
  width: 100%;
}
.snip1273:hover:before,
.snip1273.hover:before,
.snip1273:hover:after,
.snip1273.hover:after,
.snip1273:hover figcaption:before,
.snip1273.hover figcaption:before,
.snip1273:hover figcaption:after,
.snip1273.hover figcaption:after {
  opacity: 0.1;
}

@media (max-width: 1000px) {
  .snip1273 {
        width: 100%;
    }

    h1{
        font-size: 36px;
        
    }
    .pics{
        width: 95%;
        max-width: 95%;
    }
    .resume{
        right:120px;
    }
}

.aboutpic{
    border-radius: 50%;
    width: 20%;
}
