@import url(https://fonts.googleapis.com/css?family=Rokkitt:400,700|Roboto:400,300);@import url(http://weloveiconfonts.com/api/?family=entypo);

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: #2C3E50;
  font-family: 'Rokkitt', serif;
}

.abs-center {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.social {
  margin: 20px auto;
  padding-left: 10px;
  width: 400px;
}

.social h4 {
  margin: 20px 0;
  color: #233140;
  font-size: 30px;
  text-align: center;
  text-shadow: -1px 0px 0 #374D63;
        filter: dropshadow(color=#374D63, offx=0, offy=1);
}

.social a {
  margin-right: 30px;
  text-align: center;
  color: #233140;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-size: 40px;
  font-weight: 300;
  text-shadow: -2px 0px 0 #374D63;
        filter: dropshadow(color=#374D63, offx=1, offy=1);
}

.social a:last-child {
  margin: 0;
}

.text {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 700px;
  height: 60px;
}

h2 {
  position: relative;
  font-size: 48px;
  padding-left: 30px;
  height: 60px;
  color: #FFF;
  width: auto;
  font-weight: 400;  
}

/* Animated Text Effect */

.rw-words{
	display: inline;
}

.rw-words-1 span i {
  color: #FC4349;
  font-size: 38px;
}

.rw-words-1 span{
	position: absolute;
	opacity: 0;
	margin-left: 10px;
  overflow: hidden;
	-webkit-animation: rotateWord 15s linear 0s;
	-moz-animation: rotateWord 15s linear 0s;
	-o-animation: rotateWord 15s linear 0s;
	-ms-animation: rotateWord 15s linear 0s;
	animation: rotateWord 15s linear 0s;
}
.rw-words-1 span:nth-child(2) { 
    -webkit-animation-delay: 2s; 
	-moz-animation-delay: 2s; 
	-o-animation-delay: 2s; 
	-ms-animation-delay: 2s; 
	animation-delay: 2s; 
	color: #6DBCDB;
}
.rw-words-1 span:nth-child(3) { 
    -webkit-animation-delay: 4s; 
	-moz-animation-delay: 4s; 
	-o-animation-delay: 4s; 
	-ms-animation-delay: 4s; 
	animation-delay: 4s; 
	color: #FC4349;	
}
.rw-words-1 span:nth-child(4) { 
    -webkit-animation-delay: 6s;
	-moz-animation-delay: 6s; 
	-o-animation-delay: 6s; 
	-ms-animation-delay: 6s; 
	animation-delay: 6s; 
}
.rw-words-1 span:nth-child(5) { 
    -webkit-animation-delay: 8s; 
	-moz-animation-delay: 8s; 
	-o-animation-delay: 8s; 
	-ms-animation-delay: 8s; 
	animation-delay: 8s; 
}

@-webkit-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -webkit-transform: translateY(-30px); }
	5% { opacity: 1; -webkit-transform: translateY(0px);}
    17% { opacity: 1; -webkit-transform: translateY(0px); }
	20% { opacity: 0; -webkit-transform: translateY(30px); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
@-moz-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -moz-transform: translateY(-30px); }
	5% { opacity: 1; -moz-transform: translateY(0px);}
    17% { opacity: 1; -moz-transform: translateY(0px); }
	20% { opacity: 0; -moz-transform: translateY(30px); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
@-o-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -o-transform: translateY(-30px); }
	5% { opacity: 1; -o-transform: translateY(0px);}
    17% { opacity: 1; -o-transform: translateY(0px); }
	20% { opacity: 0; -o-transform: translateY(30px); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -ms-transform: translateY(-30px); }
	5% { opacity: 1; -ms-transform: translateY(0px);}
    17% { opacity: 1; -ms-transform: translateY(0px); }
	20% { opacity: 0; -ms-transform: translateY(30px); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; transform: translateY(-30px); }
	5% { opacity: 1; transform: translateY(0px);}
    17% { opacity: 1; transform: translateY(0px); }
	20% { opacity: 0; transform: translateY(30px); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
/*@media screen and (max-width: 768px){
	.rw-sentence { font-size: 18px; }
}
@media screen and (max-width: 320px){
	.rw-sentence { font-size: 9px; }
}*/

