* {box-sizing: border-box}

/* Set height of body and the document to 100% */
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial;
}

/* Style tab links */
.tablink {
  background-color: #555;
  color: white;
  font-weight: bold;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 25%;
}

.tablink:hover {
  background-color: #777;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: white;
  font-weight: bold;
  display: none;
  padding: 100px 20px;
  height: 100%;
}



 

#Home {
    background-image: url("IMG/Freedom.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: 90% 90%;
    padding-top: 5em;
    display: flex;
    justify-content: center;
  font-size: 20px;
}
.textanime p {
    color: red;
    font-family: monospace;
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid orange; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; 
    letter-spacing: .15em; 
    animation: 
      typing 3.5s steps(30, end),
      blink-caret .5s step-end infinite;
  }
  
  
#About {
    background: #0f0f0f url(IMG/Tanika.png) no-repeat center center fixed; 
	-webkit-background-size: 71%;
	-moz-background-size: 71%;
	-o-background-size: 71%;
	background-size: 90%;
	font-family: 'Barlow', sans-serif;
}
.h2 {text-align: center;
	color: red;

}
.p1 {text-align: center;
  color: red;
  font-size: medium;
  font-weight: bold;
  font-style: inherit;
}

.ul {
	text-align: center;
	color: red;
    font-weight: bolder;
    font-style: italic;
}
.il { 
    text-align: center;
    color:red;
    font-weight: bolder;
    
}
.container {
	width: 180%;
	position: relative;
	overflow: hidden;
}
a {
	text-decoration: none;
}
h1.main, p.demos {
	-webkit-animation-delay: 18s;
	-moz-animation-delay: 18s;
	-ms-animation-delay: 18s;
	animation-delay: 18s;
}
.sp-container {
	position: fixed;
	top: 45px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 0;
	background: -webkit-radial-gradient(rgba(248, 245, 245, 0.1), rgba(0, 0, 0, 0.3) 65%, rgba(0, 0, 0, 0.7));
	background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 65%, rgba(0, 0, 0, 0.7));
	background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 65%, rgba(0, 0, 0, 0.7));
	background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 65%, rgba(0, 0, 0, 0.7));
}
.sp-content {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	z-index: 1000;
}
.sp-container h2 {
	position: absolute;
	top: 50%;
	line-height: 100px;
	height: 90px;
	margin-top: -50px;
	font-size: 60px;
	width: 100%;
	text-align: center;
	color: transparent;
	-webkit-animation: blurFadeInOut 3s ease-in backwards;
	-moz-animation: blurFadeInOut 3s ease-in backwards;
	-ms-animation: blurFadeInOut 3s ease-in backwards;
	animation: blurFadeInOut 3s ease-in backwards;
}
.sp-container h2.frame-1 {
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
	-ms-animation-delay: 0s;
	animation-delay: 0s;
}
.sp-container h2.frame-2 {
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
	-ms-animation-delay: 3s;
	animation-delay: 3s;
}
.sp-container h2.frame-3 {
	-webkit-animation-delay: 6s;
	-moz-animation-delay: 6s;
	-ms-animation-delay: 6s;
	animation-delay: 6s;
}
.sp-container h2.frame-4 {
	font-size: 90px;
	-webkit-animation-delay: 9s;
	-moz-animation-delay: 9s;
	-ms-animation-delay: 9s;
	animation-delay: 9s;
}
 
.sp-globe {
	position: absolute;
	width: 282px;
	height: 273px;
	left: 50%;
	top: 50%;
	margin: -137px 0 0 -141px;
	background: transparent url(http://web-sonick.zz.mu/images/sl/globe.png) no-repeat top left;
	-webkit-animation: fadeInBack 3.6s linear 14s backwards;
	-moz-animation: fadeInBack 3.6s linear 14s backwards;
	-ms-animation: fadeInBack 3.6s linear 14s backwards;
	animation: fadeInBack 3.6s linear 14s backwards;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.3;
	-webkit-transform: scale(5);
	-moz-transform: scale(5);
	-o-transform: scale(5);
	-ms-transform: scale(5);
	transform: scale(5);
}
.sp-circle-link {
	position: absolute;
	left: 50%;
	bottom: 100px;
	margin-left: -50px;
	text-align: center;
	line-height: 100px;
	width: 100px;
	height: 100px;
	background: #fff;
	color: #3f1616;
	font-size: 25px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-webkit-animation: fadeInRotate 1s linear 16s backwards;
	-moz-animation: fadeInRotate 1s linear 16s backwards;
	-ms-animation: fadeInRotate 1s linear 16s backwards;
	animation: fadeInRotate 1s linear 16s backwards;
	-webkit-transform: scale(1) rotate(0deg);
	-moz-transform: scale(1) rotate(0deg);
	-o-transform: scale(1) rotate(0deg);
	-ms-transform: scale(1) rotate(0deg);
	transform: scale(1) rotate(0deg);
}
.sp-circle-link:hover {
	background: #85373b;
	color: #fff;
	
}

 


 
#Skills {background-color: rgb(8, 8, 8);
	background-size: cover;
	height: auto;
	}
  
	.line {
		text-align: center;
		width: 100%;
		height: 4rem;
		overflow: hidden;
		border: 1px solid black;
		padding: 0;
		margin-bottom: 16px;
		font-weight: bold;
	  }

	  .lineUp {
		animation: 2s anim-lineUp ease-out infinite;
		font-weight: bolder;
		font-size: 150%;
		color: #f50303;
	  }
	 
		
	
h3  { text-align: center;
	  text-shadow: #f50303;
	  font-size: larger;
	  font-weight: bolder;
	  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif

}
h4 { text-align: center;
	text-shadow: #f50303;
	font-size: larger;
	font-weight: bolder;
	
}

  
 
  .fromtop {
	animation: 15s anim-fromtop linear infinite;
  }

.slide-container{	
    padding: 0%;
	overflow: auto;
	white-space: nowrap;
	position: relative;
	margin: auto;
 }
 
  




#Contact {background-color: black;
	background-size: 100% 100%;
	height: auto;
}
    input[type=text], select, textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 2px;
        box-sizing: border-box;
        margin-top: 6px;
        margin-bottom: 5px;
        resize: vertical;
      }
      
	 
	 

      input[type=submit] {
        background-color: rgb(252, 7, 7);
        color: white;
        padding: 12px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
      
      input[type=submit]:hover {
        background-color: rgb(165, 7, 7);
      }
	  
	  .social {
		position: fixed;
		top: 20px;
	  }
	  .social ul {
		padding: 0px;
		-webkit-transform: translate(-270px, 0);
		-moz-transform: translate(-270px, 0);
		-ms-transform: translate(-270px, 0);
		-o-transform: translate(-270px, 0);
		transform: translate(-270px, 0);
	  }
	  .social ul li {
		display: block;
		margin: 5px;
		background: #cccf9cfa;
		width: 300px;
		text-align: right;
		padding: 10px;
		-webkit-border-radius: 0 30px 30px 0;
		-moz-border-radius: 0 30px 30px 0;
		border-radius: 0 30px 30px 0;
		-webkit-transition: all 1s;
		-moz-transition: all 1s;
		-ms-transition: all 1s;
		-o-transition: all 1s;
		transition: all 1s;
	  }
	  .social ul li:hover {
		-webkit-transform: translate(110px, 0);
		-moz-transform: translate(110px, 0);
		-ms-transform: translate(110px, 0);
		-o-transform: translate(110px, 0);
		transform: translate(110px, 0);
		background: rgba(199, 1, 156, 0.918);
	  }
	  .social ul li:hover a {
		color: rgb(221, 7, 7);
	  }
	  .social ul li:hover i {
		color: rgb(8, 148, 212);
		background: rgba(53, 7, 39, 0.36);
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
		-webkit-transition: all 1s;
		-moz-transition: all 1s;
		-ms-transition: all 1s;
		-o-transition: all 1s;
		transition: all 1s;
	  }
	  .social ul li i {
		margin-left: 10px;
		color: rgb(241, 20, 20);
		background: #fdec02;
		padding: 10px;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
		width: 20px;
		height: 20px;
		font-size: 18px;
		background: #970197;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	  }
	  

      .container2 {
		width: 40%;
		position: center;
		overflow: hidden;
        border-radius: 25px;
        background-color: #0f0f0f;
        padding: 10px;
      }

	  .h3new {color:#f50303;
		text-align: center;
		font-family: 'Trebuchet MS';

	  }
	  .floatRight{float:right;margin-right:20px}
	  .floatLeft{float:left;margin-left:20px}

	   
	   


/* The typing effect */
 @keyframes typing {
    from { width: 0 }
    to { width: 100% }
  }
  
  /* The typewriter cursor effect */
  @keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange }
  }






	  @-webkit-keyframes blurFadeIn {
		0% {
			opacity: 0;
			text-shadow: 0px 0px 40px #fff;
			-webkit-transform: scale(1.3);
		}
		50% {
			opacity: 0.5;
			text-shadow: 0px 0px 10px #fff;
			-webkit-transform: scale(1.1);
		}
		100% {
			opacity: 1;
			text-shadow: 0px 0px 1px #fff;
			-webkit-transform: scale(1);
		}
	}
	@-webkit-keyframes fadeInBack {
		0% {
			opacity: 0;
			-webkit-transform: scale(0);
		}
		50% {
			opacity: 0.4;
			-webkit-transform: scale(2);
		}
		100% {
			opacity: 0.2;
			-webkit-transform: scale(5);
		}
	}
	@-webkit-keyframes fadeInRotate {
		0% {
			opacity: 0;
			-webkit-transform: scale(0) rotate(360deg);
		}
		100% {
			opacity: 1;
			-webkit-transform: scale(1) rotate(0deg);
		}
	}
	/**/
	
	@-moz-keyframes blurFadeInOut {
		0% {
			opacity: 0;
			text-shadow: 0px 0px 40px #fff;
			-moz-transform: scale(1.3);
		}
		20%, 65% {
			opacity: 1;
			text-shadow: 0px 0px 1px #fff;
			-moz-transform: scale(1);
		}
		100% {
			opacity: 0;
			text-shadow: 0px 0px 50px #fff;
			-moz-transform: scale(0);
		}
	}
	@-moz-keyframes blurFadeIn {
		0% {
			opacity: 0;
			text-shadow: 0px 0px 40px #fff;
			-moz-transform: scale(1.3);
		}
		100% {
			opacity: 1;
			text-shadow: 0px 0px 1px #fff;
			-moz-transform: scale(1);
		}
	}
	@-moz-keyframes fadeInBack {
		0% {
			opacity: 0;
			-moz-transform: scale(0);
		}
		50% {
			opacity: 0.4;
			-moz-transform: scale(2);
		}
		100% {
			opacity: 0.2;
			-moz-transform: scale(5);
		}
	}
	@-moz-keyframes fadeInRotate {
		0% {
			opacity: 0;
			-moz-transform: scale(0) rotate(360deg);
		}
		100% {
			opacity: 1;
			-moz-transform: scale(1) rotate(0deg);
		}
	}
	/**/
	
	@keyframes blurFadeInOut {
		0% {
			opacity: 0;
			text-shadow: 0px 0px 40px #fff;
			transform: scale(1.3);
		}
		20%, 75% {
			opacity: 1;
			text-shadow: 0px 0px 1px #fff;
			transform: scale(1);
		}
		100% {
			opacity: 0;
			text-shadow: 0px 0px 50px #fff;
			transform: scale(0);
		}
	}
	@keyframes blurFadeIn {
		0% {
			opacity: 0;
			text-shadow: 0px 0px 40px #fff;
			transform: scale(1.3);
		}
		50% {
			opacity: 0.5;
			text-shadow: 0px 0px 10px #fff;
			transform: scale(1.1);
		}
		100% {
			opacity: 1;
			text-shadow: 0px 0px 1px #fff;
			transform: scale(1);
		}
	}
	@keyframes fadeInBack {
		0% {
			opacity: 0;
			transform: scale(0);
		}
		50% {
			opacity: 0.4;
			transform: scale(2);
		}
		100% {
			opacity: 0.2;
			transform: scale(5);
		}
	}
	@keyframes fadeInRotate {
		0% {
			opacity: 0;
			transform: scale(0) rotate(360deg);
		}
		100% {
			opacity: 1;
			transform: scale(1) rotate(0deg);
		}
	}
 
 
	@keyframes anim-lineUp {
		0% {
		  opacity: 0;
		  transform: translateY(80%);
		}
		20% {
		  opacity: 0;
		}
		50% {
		  opacity: 1;
		  transform: translateY(0%);
		}
		100% {
		  opacity: 1;
		  transform: translateY(0%);
		}
	  }
	 


	  @keyframes anim-popoutin {
		0% {
		  color: black;
		  transform: scale(0);
		  opacity: 0;
		  text-shadow: 0 0 0 rgba(0, 0, 0, 0);
		}
		25% {
		  color: red;
		  transform: scale(2);
		  opacity: 1;
		  text-shadow: 3px 10px 5px rgba(0, 0, 0, 0.5);
		}
		50% {
		  color: black;
		  transform: scale(1);
		  opacity: 1;
		  text-shadow: 1px 0 0 rgba(0, 0, 0, 0);
		}
		100% {
		  /* animate nothing to add pause at the end of animation */
		  transform: scale(1);
		  opacity: 1;
		  text-shadow: 1px 0 0 rgba(0, 0, 0, 0);
		}
	  }
	  
	 
	  @keyframes anim-fromtop {
		0% { opacity: 0; transform: translateY(-100%);}
		25% { opacity: 1; transform: translateY(0%);}
		50% {
		}
		100% {
		}
	  }