/*-------------------------
	Simple reset
--------------------------*/


@font-face {
    font-family: 'harlow solid italic';
    src: url('harlowsi-webfont.eot');
    src: url('harlowsi-webfont.eot?#iefix') format('embedded-opentype'),
         url('harlowsi-webfont.woff') format('woff'),
         url('harlowsi-webfont.ttf') format('truetype'),
         url('harlowsi-webfont.svg#harlowsi') format('svg');
    font-weight: normal;
    font-style: normal;

}



*{
	margin:0;
	padding:0;
}


/*-------------------------
	General Styles
--------------------------*/

.logoLink:hover .rotate	{
		-webkit-animation: bounce .5s; /* Safari 4+ */
  -moz-animation:    bounce .5s; /* Fx 5+ */
  -o-animation:      bounce .5s; /* Opera 12+ */
  animation:         bounce .5s; /* IE 10+ */
     
}

.rotate	{

     
	
	
	
    overflow:hidden;
}  

@-webkit-keyframes NAME-YOUR-ANIMATION {
	0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes bounce {
    0%   { margin-top: 0px; }
  25%   { margin-top: -10px; }
  50%   { margin-top: 0px; }
  75%   { margin-top: -10px; }
  100% { margin-top: 0px; }
}
@-moz-keyframes bounce {
   0%   { margin-bottom: 0px; }
  25%   { margin-bottom: 20px; }
  50%   { margin-bottom: 0px; }
  75%   { margin-bottom: 20px; }
  100% { margin-bottom: 0px; }
}
@-o-keyframes bounce {
    0%   { margin-bottom: 0px; }
  25%   { margin-bottom: 20px; }
  50%   { margin-bottom: 0px; }
  75%   { margin-bottom: 20px; }
  100% { margin-bottom: 0px; }
}
@keyframes bounce {
    0%   { margin-bottom: 0px; }
  25%   { margin-bottom: 20px; }
  50%   { margin-bottom: 0px; }
  75%   { margin-bottom: 20px; }
  100% { margin-bottom: 0px; }
}
 

.copasiteNavigation	{
	height:	80px;
	width:	100%;
	background:	rgba(0,0,0,.9);
	margin-bottom:	-15px;
	z-index:	1000000000;
	position:	relative;
	overflow:	hidden;
}

.contactContainer	{
	padding:	20px;
}

.contactForm	{
	line-height:	30px;
	padding:	10px;
	font-size:	1.5em;
	color:	#111!important;
	font-family:	'Segoe UI',sans-serif;
	overflow:	hidden;
	margin:	auto;
	clear:	right;
	text-align:	left;
	max-width:	400px;
	
}

.contactForm span	{
	color:	#00a550;
	text-align:right;
	float:	right;
	
}

.contactForm div	{
	color:	#ddd;
	font-weight:	bold;
}

.copasiteNavInner	{
	height:	75px;
	width:	100%;
}

.logoLink	{
	float:	left;
	line-height:	75px;
	color:	#00a550!important;
	font-family:	harlow solid italic;
	font-size:	2em;
	text-decoration:	none!important;
}

.logoLinkText	{
	height:	75px;
	overflow:	hidden;
	color:	#00a550;
}

.contactLinkText	{
	height:	75px;
	overflow:	hidden;
	color:	#ddd;
	font-family:	'Segoe UI',sans-serif;
	background:	transparent;

}



.contactLink	{
	float:	right;
	position:	relative;
	height:	75px;
	line-height:	75px;
	color:	#00a550;
	padding-right:	30px;
	overflow:	hidden;
	font-family:	harlow solid italic;
	font-size:	1.5em;
	text-decoration:	none!important;
	cursor:	pointer;
}


.logoLinkText:hover .text1	{
	margin-top:	-75px;
	-webkit-transition: all 0.6s;
	-moz-transition: all 0.6s;
	transition: all 0.6s;
	text-decoration:	none;
}

.contactLink:hover .text1	{
	margin-top:	-75px;
	-webkit-transition: all 0.6s;
	-moz-transition: all 0.6s;
	transition: all 0.6s;
	text-decoration:	none;
}

.logoLink img	{
	float:	left;
	height:	35px;
	width:	auto;
	padding:	20px;
}

.pageCopaBorder	{
	height:	5px;
	background:	url('../img/copaBorder.jpg');
}


html{
	background:	#dddddd;
	/*background:	#dddddd url('../img/imacMovers.jpg') no-repeat right top;
	background-size:	auto 90%;*/
}

body{
	font:14px/1.3 'Segoe UI',Arial, sans-serif;
}

a, a:visited {
	text-decoration:none;
	outline:none;
	color:#54a6de;
}

a:hover{
	text-decoration:underline;
}

section, footer, header{
	display: block;
}


/*----------------------------
	Styling the timeline
-----------------------------*/


#timeline{
	background:none;
	position:	relative!important;
}

@media (max-width: 700px) {
	#timeline	{
		display:none;
	}
}

.slider .slider-container-mask .slider-container{
	background:none;
}

.slider{
	
}

#timeline div.navigation{
    background: url('../img/timeline_bg.jpg') repeat;
	background:	rgba(0,0,0,.9);
}

#timeline .navigation .timenav .content .marker:hover .line{
	background:	#8cc63e!important;
}

#timeline .navigation .timenav .content .marker.active .line	{
	width:	3px;
	margin-left:	-1.5px;
	height:	152px;
	background:	#00a550;
}

/*
.content .marker .flag	{
	top:	0px!important;
}
*/
/* Creating the 3D effect for the timeline navigation */


/* Adding a darker background to the timeline navigation */

#timeline div.timenav-background{
	background-color:#222 !important;
 	background-color:rgba(0,0,0,0.4) !important;
 	display:	none;
}


#timeline div.navigation:before{
	position:absolute;
	content:'';
	height:5px;
	width:100%;
	left:0;
	top:	-5px;
	background: url('../img/copaBorder.jpg') repeat;
}

#timeline .navigation .timenav-background .timenav-interval-background{
	background:none;
}

#timeline .top-highlight{
	background-color:transparent !important;
}

/* The zoom-in / zoom-out toolbar */

#timeline .toolbar{
	border:none !important;
	background-color: #202222 !important;
}

#timeline .toolbar div{
	border:none !important;
}

/* Styling the timeline numbers on the bottom */

#timeline .navigation .timenav .time .time-interval-minor .minor{
	margin-left:-1px;
}

#timeline .navigation .timenav .time .time-interval div{
	color: #CCCCCC;
}

/* The vertical lines */

#timeline .navigation .timenav .content .marker .line {
	background: #242828;
	box-shadow: 1px 0 0 rgba(255, 255, 255, 0.05);
}

#timeline .navigation .timenav .content .marker .dot {
	background: none repeat scroll 0 0 #FFFFFF;
	border-radius: 3px 3px 3px 3px;
}

/* The previous / next arrows & labels */

.slider .nav-previous .icon {
	background: url("timeline.png") no-repeat scroll 0 -293px transparent;
}

.slider .nav-previous,.slider .nav-next{
	font-family:'Segoe UI',sans-serif;
}

.slider .nav-next .icon {
	background: url("timeline.png") no-repeat scroll 72px -221px transparent;
	width: 70px !important;
}

.slider .nav-next:hover .icon{
	position:relative;
	right:-5px;
}

.slider .nav-previous:hover, .slider .nav-next:hover {
    color: #666;
    cursor: pointer;
}

#timeline .thumbnail {
	border: medium none;
}

/* Color of the headings */

#timeline h1, #timeline h2, #timeline h3, #timeline h4, #timeline h5, #timeline h6{
	color:#ddd;
}

/* The loading screen */

#timeline .feedback {
	background-color: #222222;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.2) inset;
	border:none;
}

#timeline .feedback div{
	color: #AAAAAA;
	font-size: 14px !important;
	font-weight: normal;
}


/*----------------------------
	The Slides
-----------------------------*/


#timeline .slider-item h2,
#timeline .slider-item h3{
	font-family:'Antic Slab','Segoe UI',sans-serif;
}

#timeline .slider-item h2{
	color:#fff;
}

#timeline .slider-item p{
	font-family:'Segoe UI',sans-serif;
}


#timeline .slider-item img,
#timeline .slider-item iframe{
	border:none;
}

/* Customizing the first slide - the cover */

#timeline .slider-item:nth-child(1) h2{
	font:normal 70px/1 'Antic Slab','Segoe UI',sans-serif;
	background:rgba(0,0,0,0.3);
	white-space: nowrap;
	padding:10px 5px 5px 20px;
	position:relative;
	right:-60px;
	z-index:10;
}

#timeline .slider-item:nth-child(1) p i{
	font:normal normal 40px 'Dancing Script','Segoe UI',sans-serif;
	background:rgba(0,0,0,0.3);
	white-space: nowrap;
	padding:5px 20px;
	position:relative;
	right:-60px;
	z-index:10;
}

#timeline .slider-item:nth-child(1) p .c1{
	color:#1bdff0;
}

#timeline .slider-item:nth-child(1) p .c2{
	color:#c92fe6;
}

#timeline .slider-item:nth-child(1) .media-container {
	left: -30px;
	position: relative;
	z-index: 1;
}

#timeline .slider-item:nth-child(1) .credit{
	text-align: center;
}


/*----------------------------
	Back to Tzine header
-----------------------------*/

.nav-container .date	{
	color:	rgba(0,0,0,0);
}

.nav-container:hover .date	{
	color:	rgba(0,0,0,.8);
}

.content-container .date	{
	color:	#666!important;
}

header{
	width:267px;
	height:48px;
	position:fixed;
	top:0;
	left:50%;
	margin-left: -440px;
	z-index: 1000;
	box-shadow: 0 0 2px #000000;
}

header a{
	border:none !important;
	text-indent:-9999px;
	overflow:hidden;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url('../img/download_on_tutorialzine.jpg') no-repeat;
}

.start	{
	font-family:	harlow solid italic!important;
	background:	none!important;
	color:	#00a550!important;
}

.slider .slider-item .content .content-container .media .media-wrapper .media-container	{

}
.c1	{
	padding-left:	100px!important;
	font-size:	30px!important;
}

.c2	{
	font-size:	30px!important;
}

.c3	{
	padding-left:	100px!important;
}

@media (max-width: 600px) {
	.content-container .container	{
		background:	#ddd!important;
	}
}

@media (max-width: 700px) {


	html{
		background:	#dddddd!important;
		background-image:	none!important;
	}
}

.content-container .container	{
	float:	left;
	width:	auto!important;
	padding:	10px!important;
}

.content-container .container p	{
	font-size:	14px!important;
	float:	left;
	clear:	both;
}

.content-container .container h2	{
	float:	left;
	clear:	both;
}

.content-container .container h3	{
	float:	left;
	clear:	both;
}

.slideLink	{
	float:	left;
	clear:	both;
}

.slideLink div	{
	float:	left;
	width:	100px;
	padding:	10px;
	background:	rgba(0,0,0,.9);
	clear:both;
	text-align:	center;
	color:	#00a550;
}

.slideLink img	{
	float:	left;
	clear:both;
	width:	120px;
	height:	3px;
}


#workPage	{
	width:	100%;
	background:	rgba(0,0,0,.2);
	padding-bottom:	50px;
}

#workPage h2	{
	width:	100%;
	text-align:	center;
	font-size:	2em;
	margin-bottom:	40px;
	color:	#222;
	padding:	50px 0px;
	margin:	0px;
	background:	#ddd;
	border-top:	10px solid rgba(0,0,0,.9);
}

.workContainer	{
	margin:	auto;
	width:	100%;
}



.workItem	{
	width:	280px;
	height:	300px;
	float:	left;
	background:	#ddd;
	margin:	10px;
	position:	relative;
	background:	rgba(0,0,0,.8);
	cursor:	pointer;
}

.workItemInfo	{
	position:	absolute;
	bottom:	0px;
	width:	100%;
	text-align:	center;
	line-height:	50px;
	background:	rgba(0,0,0,.9);
	color:	white;
}

#filters	{
	padding-top:	20px;
	max-width:	380px;
	width:	100%;
	margin:	auto;
	min-height:	160px;
}

#filters li	{
	float:	left;
	list-style:	none;
	width:	29.33%;
	margin:	10px 2%;
	background:	#ddd;
	text-align:	center;
	padding:	10px 0px;
	min-width:	100px;
	-webkit-transition: all .4s;
     -moz-transition: all .4s;
      -ms-transition: all .4s;
       -o-transition: all .4s;
          transition: all .4s;
}

#filters li.active	{
	background:	#006738;
}

#filters li a	{
	color:	#00a550;
	width:	100%;
	height:	100%;
}

.workItemTags	{
	height:	0px;
	-webkit-transition: height .4s;
     -moz-transition: height .4s;
      -ms-transition: height .4s;
       -o-transition: height .4s;
          transition: height .4s;
	overflow:	hidden;
}

.workItem:hover span	{
	font-weight:	bold;
}


.workItem:hover .tag1	{
	height:	50px;
}

.workItem:hover .tag2	{
	height:	100px;
}

.workItem:hover .tag3	{
	height:	150px;
}

.workItem:hover .tag4	{
	height:	200px;
}

.workItem:hover .full {
	height:	100%;
}


/**** Isotope Filtering ****/

.isotope-item {
	z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}


/*----------------------------
	  Styling the Blog
-----------------------------*/

.postShort	{
	color:#fff;
	font-size:16px;
	background:none;
	background:	rgba(0,0,0,.3);
}

#blogPostContainer	{
	background:	rgba(0,0,0,.9);
	padding-top:50px;
	padding-bottom:50px;
}

#blogPost	{
	width:50%;
	margin:auto;
	background:#ddd;
	font-size:18px;
	padding:20px;
}

#postEditor	{
	overflow:scroll; 
	max-height:300px;
}