* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;

  margin: 0; padding: 0;
}


* { 
	margin: 0; 
	padding: 0;
	outline: 0;
	box-sizing: border-box;
}

html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
}

body {
	display: table;
	font-family: "Raleway", sans-serif;
	font-style: normal;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-feature-settings: "liga", "kern";
	-moz-font-feature-settings: "liga", "kern";
	color: #f4f4f4;

	background-size: cover;
}

html, body {
	width: 100%;
	height: 100%;
}

h1 {
	font-size: 2.375rem;
	font-weight: 700;
	-webkit-transform: translate3d(0, -25px, 0);
	transform: translate3d(0, -25px, 0);
	-webkit-animation: moveInUp 1.425s cubic-bezier(.63, .12, .29, .92) forwards; 
	animation: moveInUp 1.425s cubic-bezier(.63, .12, .29, .92) forwards;
}

p {
	-webkit-transform: translate3d(0, 25px, 0);
	transform: translate3d(0, 25px, 0);
	-webkit-animation: moveInDown 1.425s cubic-bezier(.63, .12, .29, .92) forwards; 
	animation: moveInDown 1.425s cubic-bezier(.63, .12, .29, .92) forwards;
}

h1, p {
	opacity: 0;
}
.title {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	line-height: 2.2em;
}
.header {
  height: 25px;
  background: #111;
  color: #fff;
  text-align: center;
  font: 11px/25px Helvetica, Arial, sans-serif;
}

.header a {
  color: #eee;
}

.header a:hover {
  text-decoration: none;
}

ul.linkler {
    width: 1000px;
	height :75px;
    border-radius: 4px;
    padding: 0;
    margin: auto;
    text-align: center;
}
 
ul.linkler li {
    font-size: 55px;
    line-height: 75
    font-family: Calibri;
    list-style: none;
    display: inline-block;
    padding: 0 1px;
}

ul.picme {
    width: 1000px;
	height :200px;
    border-radius: 4px;
    padding: 0;
    margin: auto;
    text-align: center;
}
 
ul.picme li {
    font-size: 55px;
    line-height: 100px;
    font-family: Calibri;
    list-style: none;
    display: inline-block;
    padding: 0 15px;
}

	
ul.linkler li2 {
    font-size: 14px;
    line-height: 100px;
    font-family: Calibri;
    list-style: none;
    display: inline-block;
    padding: 0 15px;
}	

 ul.linkler li3 {
    font-size: 14px;
    line-height: 400px;
    font-family: Calibri;
    list-style: none;
    display: inline-block;
    padding: 0 15px;
}
/*PIC*/
.pic {
  height: 35px;
  width: 35px;
  overflow: hidden;
  margin: 10px;
  border: 0px solid #bbb;

  -webkit-box-shadow: 0px 0px 0px #111;
  box-shadow: 0px 0px 0px #111;
  float: left;
}

.pic:hover {
  cursor: pointer;
}

/*PIC*/
.pic2 {
  height: 200px;
  width: 200px;
  overflow: hidden;
  margin: 10px;
  border: 5px solid white;

  -webkit-box-shadow: 0px 0px 0px #111;
  box-shadow: 0px 0px 0px #111;
  float: left;
}
.pic2:hover {
  cursor: default;
}

/*MORPH*/
.morph {
  border-radius: 30%;  
  -webkit-transition: all 0.7s ease;
     -moz-transition: all 0.7s ease;
       -o-transition: all 0.7s ease;
      -ms-transition: all 0.7s ease;
		  transition: all 0.7s ease;
}

.morph:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
		  transform: rotate(360deg);
}
/*TILT*/
.tilt {
	  border-radius: 30%;  
  -webkit-transition: all 0.1s ease;
     -moz-transition: all 0.1s ease;
       -o-transition: all 0.1s ease;
      -ms-transition: all 0.1s ease;
          transition: all 0.1s ease;
}

.tilt:hover {
  -webkit-transform: rotate(10deg);
     -moz-transform: rotate(10deg);
       -o-transform: rotate(10deg);
      -ms-transform: rotate(10deg);
          transform: rotate(15deg);
}

/*blur2*/
.blur2 {
	  border-radius: 30%;  
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 1.0s ease;
}
.blur2 img{
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 2s ease;	
}
.blur2:hover {
  -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
       -o-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);


		  }
.blur2 img:hover		  
{
  -webkit-filter: blur(5px);	
}
/*GROW*/
.grow img {
  height: 300px;
  width: 300px;

  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.grow img:hover {
  width: 400px;
  height: 400px;
}

/*SHRINK*/
.shrink img {
  height: 100px;
  width: 100px;

  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.shrink img:hover {
  width: 80px;
  height: 80px;
}

/*BLUR*/
.blur img {
	
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.blur img:hover {
  -webkit-filter: blur(5px);
}



/*SIDEPAN*/
.sidepan {
  border-radius: 15%;  
  }
.sidepan img {
  margin-left: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}

.sidepan img:hover {
  margin-left: -120px;
}

/*VERTPAN*/
.vertpan img {
  margin-top: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}

.vertpan img:hover {
  margin-top: -200px;
}

/*FOCUS*/
.focus {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.focus:hover {
  border: 70px solid #000;
  border-radius: 50%;
}

/*B&W*/
.bw {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.bw:hover {
  -webkit-filter: grayscale(100%);
}

/*DARKEN*/
.brighten img {
  -webkit-filter: brightness(-65%);
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.brighten img:hover {
  -webkit-filter: brightness(0%);
}