/* column properties */

body {background: whitesmoke; padding: 0; margin: 0; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;}

.responsive-video {max-width: calc(100% - 0px);height: auto; margin-bottom:50px; margin-top: 0px;}


#preloader {display:none; opacity:0; width:0; height:0; overflow:hidden; position:fixed; top:0; left:0;}
#preloader-curtain {display:block; background: whitesmoke; width:100%; height:100%; position:fixed; top:0; left:0; z-index:9999999999999999998;}
#preloader-curtain.fadeaway {animation: fadeaway 1000ms; animation-fill-mode: forwards; animation-delay: 2500ms;}
#loading-black {position: fixed; top: calc(50% - 15px); left: calc(50% - 15px); width:30px; height:30px; border-radius:100%; background: #fff; display:block;}
#loading-white {width:30px; height:30px; background: #000; animation: btw 1.9s infinite; animation-fill-mode: forwards; display:block; border-radius:100%;}

#container {width: 100%; position:relative;}



#collapse-expand {position:fixed; left: 25px; bottom: 25px; z-index:11; cursor:pointer;}
#collapse-expand .border {border-bottom: 1px solid #FFD617; display:inline-block;}
#collapse-expand a {font-family: helvetica, arial; font-weight:normal; padding: 5px 0px 5px 0px; font-size: 11px; display:inline-block; text-decoration:none; letter-spacing: 0.9px; text-align:center; background: transparent;transition: transform 150ms linear; transform: rotate(180deg); line-height: 20px;}
#collapse-expand .collapse {font-family: "8716487168361287", helvetica, arial; font-weight:normal; padding: 5px 0px 0px 10px; font-size: 11px; display:none; text-decoration:none; letter-spacing: 0.9px; text-align:left; position: relative; line-height: 20px;}
#collapse-expand .expand {font-family: "8716487168361287", helvetica, arial; font-weight:normal; padding: 5px 0px 0px 10px; font-size: 11px; display:none; text-decoration:none; letter-spacing: 0.9px; text-align:left; position: relative; line-height: 20px;}
#collapse-expand.collapsed a {transform: rotate(0deg);}
#collapse-expand.collapsed:hover .expand {display: inline-block;}
#collapse-expand.expanded:hover .collapse {display: inline-block;}

body.expanded #first-column {width: 0px; overflow:hidden; animation-delay: 0ms;}
body.expanded #second-column {left: 25px; animation-delay: 0ms;}
body.expanded #content-column {width: 75%; animation-delay: 0ms;}

body.expanded #first-column #logo {animation: fadeOut 0.1s ease-in; animation-fill-mode: forwards; animation-delay: 0s;}
body.expanded #first-column #numbering {animation: fadeOut 0.1s ease-in; animation-fill-mode: forwards; animation-delay: 0s;}

/* navigation */

#logo {width: 65px; height: 65px; margin: 25px 0px 0px 25px; will-change: opacity; animation: fadeIn 0.3s ease-in; animation-fill-mode: forwards; animation-delay: 250ms; opacity:0;}

#numbering {margin-top: 6px; float: right; will-change: opacity; animation: fadeIn 0.3s ease-in;animation-fill-mode: forwards; animation-delay: 100ms; opacity:0;}
#numbering div {font-family: "8716487168361287", helvetica, arial; font-weight:normal; color: #000; font-size: 11px; display:block; text-decoration:none; line-height:29px; letter-spacing: 0.9px; width: 25px; text-align:left; height:31px;}

#project-list {display: block; position: fixed; width: 100%; left: 0px; text-align: center; z-index:9;}
#project-list a {font-family: "8716487168361287", helvetica, arial; font-weight:normal; color: #000; font-size: 11px; display: inline-block; text-decoration:none; line-height:29px; letter-spacing: 0.9px; cursor:pointer; height:31px; margin: 0 15px 0 15px;}
#project-list a:after {content: ''; display: block; border-bottom:1px solid rgba(0,0,0,0); height: 0px; width: 100%; background: transparent; transition: width .0s ease, background-color .0s ease, all .0s ease;}
#project-list a.active:after {width: 100%; border-bottom:1px solid #000;}
#project-list a:hover:after {width: 100%; border-bottom:1px solid #000;}

#project-list div, #menu div, #numbering div {padding-top: 1px;}

#project-list.inactive a {color: #999;}
#project-list.inactive a:after {content: ''; display: block; height: 0px; border-bottom:1px solid #999;width: 0; background: transparent; transition: width .15s ease, background-color .15s ease, all .15s ease;}
#project-list.inactive a.active:after {width: 100%; border-bottom:1px solid #999;}
#project-list.inactive a:hover:after {width: 100%; border-bottom:1px solid #999;}



/* project preview */

#preview-container {background:transparent; position: fixed; z-index: 1; filter: grayscale(100%);}

#project-preview #half-right {right: 0px !important; left: auto;}
#project-preview #half-left {left: 0px;}

#project-preview {position:absolute; left: 0px; top: 0px; width: 100%; height: 100%; overflow:hidden; z-index: 1; border-radius:0%;}
#project-preview.inactive {display:none;}
#project-preview div {display: block; width: 100%; height: auto;position: absolute; top: 0px; left:0px; border-radius:0%;}

#project-preview .project-name.makrohang {background: url('main-thumbnails/makrohang.gif') no-repeat center center; background-size:cover; opacity: 0; will-change: opacity}
#project-preview .project-name.EP-artworks {background: url('main-thumbnails/p3.jpg') no-repeat center center; background-size:cover; opacity: 0; will-change: opacity}
#project-preview .project-name.koszivu-ember-fiai {background: url('main-thumbnails/Koszivu1.jpg') no-repeat center center; background-size:cover; opacity: 0; will-change: opacity}
#project-preview .project-name.morningdeer {background: url('main-thumbnails/flyer-20.jpg') no-repeat center center; background-size:cover; opacity: 0; will-change: opacity}
#project-preview .project-name.morningdeer2 {background: url('main-thumbnails/flyer-32.jpg') no-repeat center center; background-size:cover; opacity: 0; will-change: opacity}
#project-preview .project-name.geometry-studies {background: url('main-thumbnails/geometry.jpg') no-repeat center center; background-size:cover; opacity: 0; will-change: opacity}
#project-preview .project-name.bruise {background: url('main-thumbnails/bruise.jpg') no-repeat center center; background-size:cover; opacity: 0; will-change: opacity}
#project-preview .project-name.imperfections {background: url('main-thumbnails/ocd2.jpg') no-repeat center center; background-size:cover; opacity: 0; will-change: opacity}
#project-preview .project-name.paraphrase {background-size: cover; opacity: 0; will-change: opacity}
#project-preview .project-name.north {background-size: cover; opacity: 0; will-change: opacity}
#project-preview .project-name.type {background: url('main-thumbnails/type1.jpg') no-repeat center center; background-size: cover; opacity: 0; will-change: opacity}
#project-preview .project-name.stalker {background: url('main-thumbnails/stalker.jpg') no-repeat center center; background-size: cover; opacity: 0; will-change: opacity}
#project-preview .project-name.favs {background: url('main-thumbnails/favs.jpg') no-repeat center center; background-size: cover; opacity: 0; will-change: opacity}
#project-preview .project-name.accidental-cliches {background: url('main-thumbnails/cliches4.jpg') no-repeat center center; background-size: cover; opacity: 0; will-change: opacity}
#project-preview .project-name.magveto {background: url('main-thumbnails/mv-68.jpg') no-repeat center center; background-size:cover; opacity: 0; will-change: opacity}
#project-preview .project-name.magveto2 {background: url('main-thumbnails/mv-69.jpg') no-repeat center center; background-size:cover; opacity: 0; will-change: opacity}


#project-preview .interlace {background: url('interlace.png') no-repeat center center; opacity: 0; background-size: 100% 100%; z-index: 2;}
#project-preview .interlace.show {opacity:0.99;}
#project-preview .project-name.show {opacity:0.4; z-index:1;}
#project-preview .project-name.typeg.show {background-position:center center; background-repeat:no-repeat; background-size: cover; will-change: opacity;animation: types;animation-duration: 2.1s;animation-iteration-count: 2;animation-fill-mode: forwards;animation-timing-function: steps(1, end);}
#project-preview .project-name.north.show {background-position:center center; background-repeat:no-repeat; background-size: cover; will-change: opacity;animation: north;animation-duration: 2.8s;animation-iteration-count: 2;animation-fill-mode: forwards;animation-timing-function: steps(1, end);}
#project-preview .project-name.paraphrase.show {background-position:center center; background-repeat:no-repeat; background-size: cover; will-change: opacity;animation: paraphrase;animation-duration: 2.1s;animation-iteration-count: 2;animation-fill-mode: forwards;animation-timing-function: steps(1, end);}


@media (max-width: 440px) { 
	
	#content-column { position: absolute; top:0%; z-index: 10; transition: width 150ms ease-in; will-change: width; animation: fadeIn 0.3s ease-in;animation-fill-mode: forwards; animation-delay: 100ms; background: whitesmoke; width: 90vw !important; left: 5vw !important;} 
	
	
	#mMenu {display:table; position: fixed; height: 100%; width: 100%; left: 0px; right: 0px;}
	#project-list, #preview-container {display: none;}
	#middle-project-list {display:table-cell; vertical-align: middle; text-align: center; width: 100%;}
	#middle-project-list a {font-family: "8716487168361287", helvetica, arial; color: #000; font-size: 3vw; text-decoration:none; line-height:32px; padding-bottom: 8px; letter-spacing: 0.9px; cursor:pointer; text-align: center; margin: 1.5vh 0 1.5vh 0;}
	#middle-project-list a:hover {width: 100%; border-bottom:1px solid #000;}
	
	
	#menu a:after {content: ''; display: block; border-bottom:1px solid #fff; height: 0px; width: 100%; background: transparent; transition: width .0s ease, background-color .0s ease, all .0s ease;}
	#menu a.active:after {width: 100%; border-bottom:1px solid #000;}
	#menu a.active:hover:after {width: 100%; border-bottom:1px solid #000;}
	#menu a:hover:after {width: 100%; border-bottom:1px solid #000;}

	#menu {position: fixed; width: 100%; left: 0px; bottom: 0px !important; text-align: center; z-index: 9999999; padding: 25px 0 25px 0;}
	#menu.gradient {background: linear-gradient(to bottom, rgba(245,245,245,0) 0%, rgba(245,245,245,0.9) 100%); }
	#menu div {display: block;}
	#menu a {font-family: "8716487168361287", helvetica, arial; font-weight:bold; color: #000; font-size: 3vw; display: inline-block; text-decoration:none; line-height:29px; letter-spacing: 0.9px; cursor:pointer; height:31px; margin: 0 15px 0 15px;}
	#menu a.active {color: #000;}
	
	#page-title {position: fixed; width: 300px; left: calc(50% - 150px); top: 25px; text-align: center; z-index: 9; }
	#page-title a {font-family: "8716487168361287", helvetica, arial; font-weight:bold; color: #000; font-size: 3vw; text-transform:uppercase; letter-spacing: 0.9px; text-decoration:none; display:inline-block; height:31px; white-space: nowrap;text-overflow: ellipsis; line-height:29px;}


	#content-column .project-title, #tumblr .tumblr-title {font-family: "8716487168361287", helvetica, arial; font-weight:bold; color: #000; font-size: 3vw; text-transform:uppercase; padding-top: 75px; padding-bottom: 25px; letter-spacing: 0.9px; width: 100%; text-decoration:none; display:block; height:31px; line-height:29px; text-align: center;}
	
	#home-separator-top, #home-separator-bottom {display: none;}
	
	

	/* content properties */

	#content-column .project-title.background, #tumblr .tumblr-title.background {background: whitesmoke;}
	#content-column .project-title a, #tumblr .tumblr-title a {color: #000; text-decoration:none; }
	#content-column .field-of-work {font-family: "8716487168361287", helvetica, arial; font-weight:normal; color: #999; font-size: 3vw;margin-bottom: 75px; letter-spacing: 0.9px; text-decoration:none; display:block; height:31px; line-height:30px; width: calc(100% - 0px); opacity: 1; text-align: center;}
	#content-column .project-description {font-family: "8716487168361287", helvetica, arial; font-weight:normal; color: #000; font-size: 3vw; letter-spacing: 0.9px; margin: 0 auto; margin-top: 0px; line-height:32px; margin-bottom: 25px; width: calc(95% - 0px); clear: both; text-align: center;}
	#content-column #tumblr .project-description {font-family: "8716487168361287", helvetica, arial; font-weight:normal; color: #000; font-size: 3vw; letter-spacing: 0.9px; margin: 0 auto; margin-top: 0px; line-height:32px; margin-bottom: 25px; width: calc(95% - 0px); clear: both; text-align: center;}
	#content-column .project-title span, #content-column .tumblr-title span {border-bottom: 1px solid #000; padding-bottom: 8px;}
	#content-column .project-description span {border-bottom: 1px solid transparent; padding-bottom: 8px;}
	#content-column .project-description span a {border-bottom: 1px solid white; color: black; padding-bottom: 8px; text-decoration:none}
	#content-column .project-description span a:hover {border-bottom: 1px solid black;}
	#content-column .project-description.contact span {border-bottom: 1px solid transparent; padding-bottom: 8px;}
	.content-overlay.background {background: url('background.png') repeat-y center center;}
	.content-overlay .grey {background:whitesmoke; width:10px; margin: 0 auto; margin-top: 25px; height: 75px !important; display: block;}
	#content-column #contact .grey {width:100%; position:fixed; left:0px; bottom:0px; padding-top:25px; height: 75px !important;}

	#content-column .contact-extra {font-family: "8716487168361287", helvetica, arial; font-weight:normal; color: #000; font-size: 11px; letter-spacing: 0.9px; padding-top: 5px; line-height:32px; min-height:90px; margin: 0 auto; margin-bottom: 43px; width: 100%; border-bottom: 0px solid #FFD617; text-align:center; z-index:9999;}
	#content-column .contact-extra a {border-bottom: 1px solid #000 !important; color: #000; padding-bottom: 10px; text-decoration:none; margin: 0 15px 0 15px;}
	#content-column .contact-extra a:hover {border-bottom: 1px solid #fff !important;}

	#content-column .contact-extra .uppercase {text-transform:uppercase;}

	#content-column img {width: calc(100% - 0px); margin-bottom:50px; margin-top: 0px; min-height:150px; display:inline-block; background: url('images/loading2.gif') no-repeat center center; background-size: 30px 30px;}
	#content-column .divider {width: 100px; margin: 0 auto; margin-bottom:25px; margin-top: 0px;border-bottom: 1px solid #fff; display:block;}
	#content-column .divider-two {width: 100%; margin: 0 auto; margin-bottom:0px; margin-top: 50px;border-bottom: 1px solid #fff; display:block;}
	#content-column iframe {width: calc(100% - 0px); margin-bottom:0px; margin-top: 0px;}
	#content-column #tumblr-frame {width: 100% !important; margin:0 !important;}
	#content-column iframe:last-child {margin-bottom: 0px;}
	#content-column .images img:last-child {padding-bottom: 0px !important; margin-bottom: 0px !important;}
	#content-column #makrohang iframe {width: calc(100% - 0px); margin-bottom:0px; margin-top: 0px;}


	#content-column #loading {width: 100%; z-index: 111; height: 0px; position:fixed; right: 0; top: 0; background: whitesmoke; display:block;}
	body.expanded #content-column #loading {width: 100%;}
	#content-column #loading.active {animation: loading 1.9s cubic-bezier(0.785, 0.135, 0.15, 0.86); animation-fill-mode: forwards; animation-delay: 100ms;}

	#content-column .content-overlay {display: none; width: 100%; position: static; right: 0px; top: 0px; padding-top: 0px; z-index:10;}
	#content-column .content-overlay.diary {padding-top: 0px;}
	#content-column .content-overlay.fade.gradient {opacity:1 !important;}

	#content-column iframe#tumblr-frame {height: 100%; z-index: 10; overflow-y: scroll;position: absolute;}
	
	.close {position: fixed; top: 25px; left: calc(50vw - 8px); transform: rotate(45deg); cursor: pointer; display: block; padding: 0px;}
	.close-button {background:#000;width:1px;height:19px;position:relative;margin-left:9px;}
	.close-button:before {background:#000;content:"";width:19px;height:1px;position:absolute;top:9px;left:-9px;}



}

@media (min-width: 441px) { 
	
	#content-column { position: absolute; top:0%; z-index: 10; transition: width 150ms ease-in; will-change: width; animation: fadeIn 0.3s ease-in;animation-fill-mode: forwards; animation-delay: 100ms; background: whitesmoke;}

	
	#mMenu {display:none;}
	
	
	#menu a:after {content: ''; display: block; border-bottom:1px solid #fff; height: 0px; width: 100%; background: transparent; transition: width .0s ease, background-color .0s ease, all .0s ease;}
	#menu a.active:after {width: 100%; border-bottom:1px solid #000;}
	#menu a.active:hover:after {width: 100%; border-bottom:1px solid #000;}
	#menu a:hover:after {width: 100%; border-bottom:1px solid #000;}

	#menu {position: fixed; width: 100%; left: 0px; bottom: 0px; text-align: center; z-index: 9999999; padding: 25px 0 50px 0;}
	#menu.gradient {background: linear-gradient(to bottom, rgba(245,245,245,0) 0%, rgba(245,245,245,0.9) 100%); }
	#menu div {display: block;}
	#menu a {font-family: "8716487168361287", helvetica, arial; font-weight:bold; color: #000; font-size: 11px; display: inline-block; text-decoration:none; line-height:29px; letter-spacing: 0.9px; cursor:pointer; height:31px; margin: 0 15px 0 15px;}
	#menu a.active {color: #000;}
	
	#page-title {position: fixed; width: 300px; left: calc(50% - 150px); top: 50px; text-align: center; z-index: 9; }
	#page-title a {font-family: "8716487168361287", helvetica, arial; font-weight:bold; color: #000; font-size: 11px; text-transform:uppercase; letter-spacing: 0.9px; text-decoration:none; display:inline-block; height:31px; white-space: nowrap;text-overflow: ellipsis; line-height:29px;}

	
	#content-column .project-title, #tumblr .tumblr-title {font-family: "8716487168361287", helvetica, arial; font-weight:bold; color: #000; font-size: 11px; text-transform:uppercase; padding-top: 50px; padding-bottom: 50px; letter-spacing: 0.9px; width: 100%; text-decoration:none; display:block; height:31px; line-height:29px; text-align: center;}
	
	#home-separator-top, #home-separator-bottom {width: 1px; position: fixed; background: #000; left: calc(50% - 0.5px); z-index:9;}
	
	

	/* content properties */

	#content-column .project-title.background, #tumblr .tumblr-title.background {background: whitesmoke;}
	#content-column .project-title a, #tumblr .tumblr-title a {color: #000; text-decoration:none; }
	#content-column .field-of-work {font-family: "8716487168361287", helvetica, arial; font-weight:normal; color: #999; font-size: 11px;margin-bottom: 125px; letter-spacing: 0.9px; text-decoration:none; display:block; height:31px; line-height:30px; width: calc(100% - 0px); opacity: 1; text-align: center;}
	#content-column .project-description {font-family: "8716487168361287", helvetica, arial; font-weight:normal; color: #000; font-size: 11px; letter-spacing: 0.9px; margin: 0 auto; margin-top: 75px; line-height:32px; margin-bottom: 25px; width: calc(75% - 0px); clear: both; text-align: center;}
	#content-column #tumblr .project-description {font-family: "8716487168361287", helvetica, arial; font-weight:normal; color: #000; font-size: 11px; letter-spacing: 0.9px; margin: 0 auto; margin-top: 75px; line-height:32px; margin-bottom: 25px; width: calc(75% - 0px); clear: both; text-align: center;}
	#content-column .project-title span, #content-column .tumblr-title span {border-bottom: 1px solid #000; padding-bottom: 8px;}
	#content-column .project-description span {border-bottom: 1px solid transparent; padding-bottom: 8px;}
	#content-column .project-description span a {border-bottom: 1px solid white; color: black; padding-bottom: 8px; text-decoration:none}
	#content-column .project-description span a:hover {border-bottom: 1px solid black;}
	#content-column .project-description.contact span {border-bottom: 1px solid transparent; padding-bottom: 8px;}
	.content-overlay.background {background: url('background.png') repeat-y center center;}
	.content-overlay .grey {background:whitesmoke; width:10px; margin: 0 auto; margin-top: 25px; height: 50px; display: block;}
	#content-column #contact .grey {width:100%; position:fixed; left:0px; bottom:0px; padding-top:25px;}

	#content-column .contact-extra {font-family: "8716487168361287", helvetica, arial; font-weight:normal; color: #000; font-size: 11px; letter-spacing: 0.9px; padding-top: 5px; line-height:32px; min-height:90px; margin: 0 auto; margin-bottom: 43px; width: 100%; border-bottom: 0px solid #FFD617; text-align:center; z-index:9999;}
	#content-column .contact-extra a {border-bottom: 1px solid #000 !important; color: #000; padding-bottom: 10px; text-decoration:none; margin: 0 15px 0 15px;}
	#content-column .contact-extra a:hover {border-bottom: 1px solid #fff !important;}

	#content-column .contact-extra .uppercase {text-transform:uppercase;}

	#content-column img {width: calc(100% - 0px); margin-bottom:50px; margin-top: 0px; min-height:150px; display:inline-block; background: url('images/loading2.gif') no-repeat center center; background-size: 30px 30px;}
	#content-column .divider {width: 100px; margin: 0 auto; margin-bottom:50px; margin-top: 0px;border-bottom: 1px solid #fff; display:block;}
	#content-column .divider-two {width: 100%; margin: 0 auto; margin-bottom:75px; margin-top: 50px;border-bottom: 1px solid #fff; display:block;}
	#content-column iframe {width: calc(100% - 0px); margin-bottom:0px; margin-top: 0px;}
	#content-column #tumblr-frame {width: 100% !important; margin:0 !important;}
	#content-column iframe:last-child {margin-bottom: 0px;}
	#content-column .images img:last-child {padding-bottom: 0px !important; margin-bottom: 0px !important;}
	#content-column #makrohang iframe {width: calc(100% - 0px); margin-bottom:0px; margin-top: 0px;}


	#content-column #loading {width: 100%; z-index: 111; height: 0px; position:fixed; right: 0; top: 0; background: whitesmoke; display:block;}
	body.expanded #content-column #loading {width: 100%;}
	#content-column #loading.active {animation: loading 1.9s cubic-bezier(0.785, 0.135, 0.15, 0.86); animation-fill-mode: forwards; animation-delay: 100ms;}

	#content-column .content-overlay {display: none; width: 100%; position: static; right: 0px; top: 0px; padding-top: 0px; z-index:10;}
	#content-column .content-overlay.diary {padding-top: 0px;}
	#content-column .content-overlay.fade.gradient {opacity:0.5;}

	#content-column iframe#tumblr-frame {height: 100%; z-index: 10; overflow-y: scroll;position: absolute;}
	
	.close {position: fixed; top: calc(50vh - 10px); right: 40px; transform: rotate(45deg); cursor: pointer; display: block; padding: 15px;}
	.close-button {background:#000;width:1px;height:19px;position:relative;margin-left:9px;}
	.close-button:before {background:#000;content:"";width:19px;height:1px;position:absolute;top:9px;left:-9px;}

}


.clear {clear:both;}

/* keyframe animations */

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  
  100% {
	opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  
  100% {
	opacity: 0;
  }
}


@keyframes loading {
  0% {
    opacity: 1;
	height: 0%;
	}
  
  40% {
	height: 100%; 
	position:fixed;
  }
  
  60% {
	height: 100%; 
	opacity: 1;

  }
  
  79% {
	height: 100%; 
	opacity: 1;

  }
  
  100% {
	  height: 100%;
	opacity: 0;
  }
}


@keyframes btw {
  0% {
    opacity:0;
	}
	

  5% {
    opacity:0;
	}
	

  
  70% {
	  opacity: 1;
	

  }
  
  
  100% {
	opacity: 0;
  }
}

@keyframes fadeaway {
  0% {
    opacity:1;
	}
	
	

  
  99% {
	  opacity: 0;
	

  }
  
  
  100% {
 	visibility: hidden;
	  height: 0 px !important;
	  opacity: 0;
  }
}

@keyframes types {
  0% {
    background-image: url('main-thumbnails/type1.jpg'); background-position:center center; background-repeat:no-repeat; background-size: cover;
  }
  33% {
    background-image: url('main-thumbnails/type2.jpg'); background-position:center center; background-repeat:no-repeat; background-size: cover;
  }
  66% {
    background-image: url('main-thumbnails/type3.jpg'); background-position:center center; background-repeat:no-repeat; background-size: cover;
  }
  100% {
    background-image: url('main-thumbnails/type1.jpg'); background-position:center center; background-repeat:no-repeat; background-size: cover;
  }
}

@keyframes paraphrase {
  0% {
    background-image: url('main-thumbnails/para1.jpg'); background-position:center center; background-repeat:no-repeat; background-size: cover;
  }
  33% {
    background-image: url('main-thumbnails/para2.jpg'); background-position:center center; background-repeat:no-repeat; background-size: cover;
  }
  66% {
    background-image: url('main-thumbnails/para3.jpg'); background-position:center center; background-repeat:no-repeat; background-size: cover;
  }
  100% {
    background-image: url('main-thumbnails/para1.jpg'); background-position:center center; background-repeat:no-repeat; background-size: cover;
  }
}

@keyframes north {
  0% {
    background-image: url('main-thumbnails/zine1.jpg'); background-position:center center; background-repeat:no-repeat; background-size: cover;
  }
  25% {
    background-image: url('main-thumbnails/zine2.jpg'); background-position:center center; background-repeat:no-repeat; background-size: cover;
  }
  50% {
    background-image: url('main-thumbnails/zine3.jpg'); background-position:center center; background-repeat:no-repeat; background-size: cover;
  }
  75% {
    background-image: url('main-thumbnails/zine4.jpg'); background-position:center center; background-repeat:no-repeat; background-size: cover;
  }
  100% {
    background-image: url('main-thumbnails/zine1.jpg'); background-position:center center; background-repeat:no-repeat; background-size: cover;
  }
}