.screenshot {
	padding: 6em 0;
	width: 100%;
}

/* Intro */

#intro_screenshot {
	width: 100%;
	margin-top: -2%;
	margin-bottom: -5%;
}

#intro_protocols {
	position: absolute;
	width: 17.35611511%; /* 386/2224 */
	left: 5.2%;
	top: 53%;
}

/* Entries */

#screenshot_entries {
	margin-bottom: -30%;
}

/*
.hide_protocols {
	position: absolute;
	width: 17%;
	height:25em;
	left: 5.2%;
	top: 40em;
}
*/

#screenshot_create_entry {
	position: absolute;
	width: 30.12589928%; /* = 670/2224 */
	top: 7.8%;
	right: 0%;
	opacity: 0;
	transform: scale(0.1);
	transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}

#entries_screenshot_block.in-view #screenshot_create_entry {
	opacity:1;
	transform: scale(1.0);
	transition: transform 0.3s ease-in, opacity 0.1s ease-in;
}

#screenshot_drop_marker {
	position: absolute;
	width: 18.1205036%; /* = 403/2224 */
	top: 64.6%;
	left: 5%;
	opacity: 0;
	transition: opacity 0.5s ease-in;
}

#entries_screenshot_block.in-view #screenshot_drop_marker {
	opacity: 1;
	transition: opacity 0.3s ease-in;
}

#screenshot_drop_entry {
	position: absolute;
	width: 31.51978417%; /* = 701/2224 */
	top: 53.5%;
	right: 64.5%;
	opacity: 0;
	transform: translate(36%, -34%);
	transition: transform 0.5s ease-in, opacity 1s ease-in;
}

#entries_screenshot_block.in-view #screenshot_drop_entry {
	opacity: 1;
	transform: translate(-17%, 0%);
	transition: transform 1.0s ease-in, opacity 0.3s ease-in;
}

#entries_bubbles {
	right: -8%;
	top: -3%;
	z-index: -1;
}

#entries_fish1 {
	right: -10%;
	top: 12%;
	transform: scale(0.7);
	z-index: -1;
}

#entries_fish2 {
	right: 5%;
	top: -3%;
	transform: scale(0.3);
	z-index: -1;
}

#entries_fish3 {
	right: 0%;
	top: 1%;
	transform: scale(0.45);
	z-index: -1;
}

#entries_fish4 {
	right: -4%;
	top: -4%;
	transform: scale(0.6);
	z-index: -1;
}


/* Attachments */

#screenshot_attachments {
	margin-bottom: -2.5%;
	padding-top: 5%;
}

#screenshot_editor_attachment {
	position: absolute;
	width: 49.28057554%; /* = 1096/2224 */
	top: 13.75em;
	right: 5.2em;
}

#screenshot_quicklook {
	position: absolute;
	width: 55.3057554%; /* = 1230/2224 */
	top: 7.8%;
	left: 20%;
	opacity: 0;
	transform: translate(60%, 0%) scale(0.1) ;
	transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}

#attachments_screenshot_block.in-view #screenshot_quicklook {
	opacity:1;
	transform: scale(1.0);
	transition: transform 0.3s ease-in, opacity 0.1s ease-in;
}

#attachments_whale {
	left: -40%;
	top: -27%;
	z-index: -1;
}


/* Progress */

#screenshot_progress {
	margin-bottom: -30%;
}

#screenshot_create_timer {
	position: absolute;
	width: 28.46223022%; /* = 633/2224 */
	top: 45%;
	right: 51.5%;
	opacity: 0;
	transform: scale(0.1);
	transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}

#progress_screenshot_block.in-view #screenshot_create_timer {
	opacity:1;
	transform: scale(1.0);
	transition: transform 0.3s ease-in, opacity 0.1s ease-in;
}

#screenshot_change_status {
	position: absolute;
	width: 15.01798561%; /* = 334/2224 */
	top: 13%;
	right: -1%;
	opacity: 0;
	transition: opacity 0.2s ease-in;
}

#progress_screenshot_block.in-view #screenshot_change_status {
	opacity:1;
	transition: opacity 0.1s ease-in;
}

#progress_bubbles1 {
	left: -5%;
	top: -18%;
	z-index: -1;
}

#progress_bubbles2 {
	left: -15%;
	top: 15%;
	z-index: -1;
}

/* Journal */

#screenshot_journal {
	margin-bottom: -8.5%;
}

#screenshot_journal_options {
	position: absolute;
	width: 30.12589928%; /* = 670/2224 */
	top: 11%;
	right: 1.5%;
	opacity: 0;
	transform: scale(0.1);
	transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}

#journal_screenshot_block.in-view #screenshot_journal_options {
	opacity:1;
	transform: scale(1.0);
	transition: transform 0.3s ease-in, opacity 0.1s ease-in;
}

#journal_bubbles {
	left: -5%;
	top: 0;
	opacity: 0.7;
}

#journal_jelly1 {
	left: -2%;
	top: 0;
	z-index: -1;
}

#journal_jelly2 {
	left: 5%;
	top: 8%;
	transform: scale(0.8) rotate(10deg);
	z-index: -1;
}

#journal_jelly3 {
	left: 0%;
	top: 25%;
	transform: scale(0.7) rotate(15deg);
	z-index: -1;
}

#journal_jelly4 {
	left: 3%;
	top: -2%;
	transform: scale(0.4) rotate(5deg);
	z-index: -1;
}

#journal_jelly5 {
	right: 0%;
	bottom: 5%;
	transform: scale(0.7) rotate(15deg);
	z-index: -1;
}



/* Protocols */

#screenshot_protocols {
	margin-bottom: -42%;
}

#screenshot_protocol_actions {
	position: absolute;
	width: 30.12589928%; /* = 670/2224 */
	top: 16%;
	right: -0.5%;
	opacity: 0;
	transform: scale(0.1);
	transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}

#protocols_screenshot_block.in-view #screenshot_protocol_actions {
	opacity:1;
	transform: scale(1.0);
	transition: transform 0.3s ease-in, opacity 0.1s ease-in;
}

#protocols_bubbles1 {
	left: -7%;
	top: -22%;
	z-index: -1;
}

#protocols_bubbles2 {
	left: -12%;
	top: 20%;
	z-index: -1;
}

#protocols_remora1 {
	left: 8%;
	top: 9%;
	transform: scale(0.9);
	z-index: -1;
}

#protocols_remora2 {
	left: -2%;
	top: 18%;
	transform: scale(0.7);
	z-index: -1;
}

#protocols_remora3 {
	left: -10%;
	top: 22%;
	transform: scale(0.4);
	z-index: -1;
}

#protocols_remora4 {
	left: -5%;
	top: 6%;
	transform: scale(0.8);
	z-index: -1;
}

#protocols_remora5 {
	left: -3%;
	top: 0%;
	transform: scale(0.6);
	z-index: -1;
}

/* Resources */

#screenshot_resources {
	margin-top: -2%;
	margin-bottom: -50%;
}

#main_menu_background {
	position: absolute;
	top: 0;
	width: 100%;
	height: 2.02589928058em; /* 44px * 1024/2224 */
	background-color: white;
}

#screenshot_resources_main_menu {
	position: absolute;
	width: 89.92805755%; /* 2000/2224 */
	left:  0; /* 722/2224 */
	top: 0; /*  44px * 1024/2224 */
}

#screenshot_resources_menu {
	position: absolute;
	width: 20.05395683%; /* 446/2224 */
	left:  32.46402878%; /* 722/2224 */
	top: 2.02589928058em; /*  44px * 1024/2224 */
	z-index: 3;
}

#main_menu_background, #screenshot_resources_main_menu, #screenshot_resources_menu {
	opacity: 0;
	transition: opacity 0.2s ease-in;
}

#resources_screenshot_block.in-view #main_menu_background, #resources_screenshot_block.in-view #screenshot_resources_main_menu, #resources_screenshot_block.in-view #screenshot_resources_menu {
	opacity: 1;
	transition: transform 0.3s ease-in, opacity 0.1s ease-in;
}

#screenshot_resource_actions {
	position: absolute;
	width: 30.12589928%; /* = 670/2224 */
	top: 16%; 
	right: -0.5%;
	opacity: 0;
	transform: scale(0.1);
	transition: transform 0.2s ease-in, opacity 0.2s ease-in;
}

#resources_screenshot_block.in-view #screenshot_resource_actions {
	opacity:1;
	transform: scale(1.0);
	transition: transform 0.3s ease-in, opacity 0.1s ease-in;
}

#resources_bubbles1 {
	left: -15%;
	top: -25%;
	z-index: -1;
}

#resources_bubbles2 {
	right: -10%;
	bottom: 25%;
	z-index: -1;
	opacity: 0.6;
}

#resources_octopus1 {
	left: -5%;
	top: 7%;
	transform: scale(0.7);
	z-index: -1;
}

#resources_octopus2 {
	left: -2%;
	top: 4%;
	transform: scale(0.6);
	z-index: -1;
}

#resources_octopus3 {
	left: 5%;
	top: 0%;
	transform: scale(0.4);
	z-index: -1;
}

#resources_octopus4 {
	right: -5%;
	bottom: 20%;
	transform: scale(0.9);
	z-index: -1;
	opacity: 0.6;
}

#resources_octopus5 {
	right: -1.5%;
	bottom: 10%;
	transform: scale(0.65);
	z-index: -1;
	opacity: 0.6;
 }