@import url(http://fonts.googleapis.com/css?family=Raleway:400,500,700,900|Dosis:800|Playfair+Display:400,400italic,900italic|Lora:700|Syncopate:700|Roboto+Condensed:300italic|Oswald:700);

@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'codropsicons';
	src:url('../fonts/codropsicons/codropsicons.eot');
	src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
		url('../fonts/codropsicons/codropsicons.woff') format('woff'),
		url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
		url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}

@font-face {
    font-family: 'myname';
    src: url('../fonts/georgia.ttf');
}


*, *:after, *:before { box-sizing: border-box; }
.clearfix:before, .clearfix:after {display: table;  content: ''; }
.clearfix:after { clear: both; }

body {
	background: #ED7274;
	color: #1e1a1b;
	font-weight: 500;
	font-size: 1em;
	font-family: 'Raleway', Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	animation: colorchange 120s; /* animation-name followed by duration in seconds*/
         /* you could also use milliseconds (ms) or something like 2.5s */
     -webkit-animation: colorchange 120s; /* Chrome and Safari */
}

    @keyframes colorchange
    {
      0%   {background: #35B5C2;}
      10%  {background: #ED7274;} /*here*/
      20%  {background: #976AC5;}
      30%  {background: #00B491;}
      40%  {background: #FFBC3D;}
      50% {background: #7572DC;}
      60%   {background: #35B5C2;}
      70%  {background: #ED7274;}/*here*/
      80%  {background: #976AC5;}
      90%  {background: #00B491;}
      100%  {background: #FFBC3D;}
      90%   {background: #35B5C2;}
      80%  {background: #ED7274;}/*here*/
      70%  {background: #976AC5;}
      60%  {background: #00B491;}
      50%  {background: #FFBC3D;}
      40% {background: #7572DC;}
      30%   {background: #35B5C2;}
      20%  {background: #ED7274;}/*here*/
      10%  {background: #976AC5;}
      0%  {background: #00B491;}
      10%  {background: #ED7274;} /*here*/
      20%  {background: #976AC5;}
      30%  {background: #00B491;}
      40%  {background: #FFBC3D;}
      50% {background: #7572DC;}
      60%   {background: #35B5C2;}
      70%  {background: #ED7274;}/*here*/
      80%  {background: #976AC5;}
      90%  {background: #00B491;}
      100%  {background: #FFBC3D;}
      90%   {background: #35B5C2;}
      80%  {background: #ED7274;}/*here*/
      70%  {background: #976AC5;}
      60%  {background: #00B491;}
      50%  {background: #FFBC3D;}
      40% {background: #7572DC;}
      30%   {background: #35B5C2;}
      20%  {background: #ED7274;}/*here*/
      10%  {background: #976AC5;}
      0%  {background: #00B491;}
     }

    @-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
    {
      0%   {background: #35B5C2;}
      10%  {background: #ED7274;} /*here*/
      20%  {background: #976AC5;}
      30%  {background: #00B491;}
      40%  {background: #FFBC3D;}
      50% {background: #7572DC;}
      60%   {background: #35B5C2;}
      70%  {background: #ED7274;}/*here*/
      80%  {background: #976AC5;}
      90%  {background: #00B491;}
      100%  {background: #FFBC3D;}
      90%   {background: #35B5C2;}
      80%  {background: #ED7274;}/*here*/
      70%  {background: #976AC5;}
      60%  {background: #00B491;}
      50%  {background: #FFBC3D;}
      40% {background: #7572DC;}
      30%   {background: #35B5C2;}
      20%  {background: #ED7274;}/*here*/
      10%  {background: #976AC5;}
      0%  {background: #00B491;}
      10%  {background: #ED7274;} /*here*/
      20%  {background: #976AC5;}
      30%  {background: #00B491;}
      40%  {background: #FFBC3D;}
      50% {background: #7572DC;}
      60%   {background: #35B5C2;}
      70%  {background: #ED7274;}/*here*/
      80%  {background: #976AC5;}
      90%  {background: #00B491;}
      100%  {background: #FFBC3D;}
      90%   {background: #35B5C2;}
      80%  {background: #ED7274;}/*here*/
      70%  {background: #976AC5;}
      60%  {background: #00B491;}
      50%  {background: #FFBC3D;}
      40% {background: #7572DC;}
      30%   {background: #35B5C2;}
      20%  {background: #ED7274;}/*here*/
      10%  {background: #976AC5;}
      0%  {background: #00B491;}
    }





a {
	outline: none;
	color: #fff;
	text-decoration: none;
}

a:hover {
	color: rgba(255,255,255,0.5);
}

 a:focus {
 	outline: none;
 }

.hidden {
	height: 0;
	width: 0;
	overflow: hidden;
	position: absolute;
}

.text-now{
	    position: relative;
    bottom: 242px;
    font-size: 0.6em;
    margin: 6em;
    text-align: center;
}

.objects{
    width: 100%;
    min-height: 300px;
    min-width: 300px;
    height: 100vh;}

.center_objects{width: 70vw;
       height: 70vh;}
   
.me{
	margin-top: 10%;
    height: 30%;
    
}

.intro{}
.intro h1{
	font-size: 1.1em;
    text-align: center;
    width: 80%;
    margin-left: 10%;
    color:white;
    font-weight: 100;
}

.buttons{
	margin-top: 5%;
    width: 80%;
    margin-left: 10%;
        cursor: pointer;
}

.click{float: left;
        border: 1px solid white;
    width: 40%;
    height: 10%;
    min-height: 50px;
margin-left: 5%;}

.click h4{text-align: center;
    font-size: 0.9em;
color:white;
font-weight: 500}

.click:hover{background-color: rgba(225,225,225,0.4);}

.centerit{
	 position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);}
}

.link {
	outline: none;
	text-decoration: none;
	position: relative;
	font-size: 8em;
	line-height: 1;
	color: #9e9ba4;
	display: inline-block;
}

.nav{
	color:white;
    float: right;
    position: absolute;
    right: 0px;
    z-index: 100;
    top:2em;
}
.nav li{
	display: inline-block;
	list-style: none;
	padding-right: 3em;
	
}

.mynamenav{
    position: absolute;
    top: 2em;
    left: 5em;
}
.mynamenav .link--yaku{
  font-size: 2em;

}

img.linkedin{
	height: 1.5em;
    position: relative;
    top: 0.4em;
}

a:hover img.linkedin{
	opacity: 0.5;
}


.content{
          width: 80%;
    position: relative;
    top: 10em;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 1200px;
}

    .left_space{
    width: 30%;
    margin-right:8%; 
    float: left;
    }


    .right_space{
      width: 62%;
      color:white;
    float: left;
    }

    .right_space h3{    
      font-family: georgia;
    font-size: 1.2em;
    line-height: 1.2em;
    margin-bottom: 0px;
    margin-top: 0px;
  }

    .right_space p{
          font-size: 0.9em;
    }

    img.aboutme_pic {width: 100%;max-width: 250px;}

    hr{    background-color: white;
    border-style: none;
    height: 1px;}


  h2{    margin-bottom: 0px;
    margin-top: 1em;
    }


.nomargintop{    margin-top: 0px;}


.about_me_contact .buttons {
    width: 100%;
    height: 100%;
    margin-bottom: 5em;
    margin-top: 0px;
    margin-left: 0px;}

.about_me_contact .buttons .click{
    width: 100%;
    margin-left: 0;

  }




.contactme{
     background-color: RGBA(255,255,255,0.9);
    width: 40%;
    min-width: 350px;
}



#contact-area {
      margin-top: 25px;
    width: 80%;
    margin: 10%;
    position: relative;

}

#contact-area input, #contact-area textarea {
  padding: 5px;
  width: 100%;
  font-size: 1em;
  margin: 3px 0px 10px 0px;
  border: 1px solid #fff;
}

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

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

#contact-area input.submit-button {
  width: 100%;
  float: right;
  background-color: RGBA(255,255,255,0.9);
}

#contact-area input.submit-button:hover{
  background-color: #2E3649;
  color:white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  animation: colorfast 4s; 
  -webkit-animation: colorfast 4s; /* Chrome and Safari */
} 

@-webkit-keyframes colorfast /* Safari and Chrome - necessary duplicate */
    {
      0%   {background: #35B5C2;}
      20%  {background: #ED7274;} /*here*/
      40%  {background: #976AC5;}
      60%  {background: #00B491;}
      80%  {background: #FFBC3D;}
      100% {background: #7572DC;}
}
    @keyframes colorfast{
      0%   {background: #35B5C2;}
      20%  {background: #ED7274;} /*here*/
      40%  {background: #976AC5;}
      60%  {background: #00B491;}
      80%  {background: #FFBC3D;}
      100% {background: #7572DC;}
    }

label {
    text-align: right;
    margin-right: 15px;
    width: 100%;
    padding-bottom: 1em;
    font-size: 1em;
    color: #2E3649;
}

.close{
    text-align: center;
    position: relative;
    bottom: 22px;
    cursor: pointer;
}

.close:hover{
  color:#2E3649;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  animation: colorhover 4s; 
  -webkit-animation: colorhover 4s; /* Chrome and Safari */
} 

@-webkit-keyframes colorhover /* Safari and Chrome - necessary duplicate */
    {
      0%   {color: #35B5C2;}
      20%  {color: #ED7274;} 
      40%  {color: #976AC5;}
      60%  {color: #00B491;}
      80%  {color: #FFBC3D;}
      100% {color: #7572DC;}
}
    @keyframes colorhover{
      0%   {color: #35B5C2;}
      20%  {color: #ED7274;} 
      40%  {color: #976AC5;}
      60%  {color: #00B491;}
      80%  {color: #FFBC3D;}
      100% {color: #7572DC;}
    }




/*------------------------ M E D I A Q U E R I E S --------------------------*/

@media screen and (max-width: 60em) {



}


@media screen and (max-width: 53em) {
	
	.grid__item {
		width: 100%;
	}
	.click h3{text-align: center;
    font-size: 0.8em;
color:white;}


}



@media screen and (max-width: 40em) {
	.codrops-header h1 {
		font-size: 1.85em;
	}

  .mynamenav{
        top: 3em;
        left: 50%;
        transform: translate(-50%, -50%);
  }

.mynamenav .link--yaku{
  font-size: 2em;

}

.nav{
      top: 6em;
          left: 50%;
        transform: translate(-50%, -50%);

}

.nav li {
    padding-right: 1em !important;
    padding-left: 2em;
  }

  .center_objects {
    top:40%;
  }
  .nav li a{
    font-size: 0.9em;
  }

  .homenav{
    top: 2em;
    width: 60%;
    left: 55%;
  }

.right_space {
    width: 80%;
    margin-left: 15%;
}

.left_space {
    width: 60%;
    margin-left: 20%;
    margin-bottom: 5%;
    }

}

/*40em*/
@media screen and (max-width: 36em) {
.nav li {
    padding-right: 1em !important;
    padding-left: 1.5em;
  }

}
@media screen and (max-width: 33em) {
.nav li {
    padding-right: 1em !important;
    padding-left: 0.8em;
  }

}

@media screen and (max-width: 29em) {
.nav li {
    padding-right: 0.5em !important;
    padding-left: 0.6em;
  }

  .nav li a{
    font-size: 0.9em;
  }

  }/*30em*/