/* MyDIO Chat CSS Document */

@font-face {
    font-family: DropCT;
	src: url('/fonts/DropMedium.eot');
	src: url('/fonts/DropMedium.eot?#iefix') format('embedded-opentype'),
	     url('/fonts/DropMedium.woff') format('woff'),
	     url('/fonts/DropMedium.ttf') format('truetype'),
	     url('/fonts/DropMedium.svg#webfont') format('svg');
	font-weight:400;
}
@font-face {
    font-family: DropCT;
    src: url('/fonts/DropRegular.eot');
	src: url('/fonts/DropRegular.eot?#iefix') format('embedded-opentype'),
	     url('/fonts/DropRegular.woff') format('woff'),
	     url('/fonts/DropRegular.ttf') format('truetype'),
	     url('/fonts/DropRegular.svg#webfont') format('svg');
	font-weight:300;
}
body
{
	    font-family: 'DropCT';
		border-color:green;
		font-weight:300;
}
.class { font-variant-ligatures: contextual; -moz-font-feature-settings: "calt"; -webkit-font-feature-settings: "calt"; font-feature-settings: "calt"; }
.class { font-variant-ligatures: common-ligatures; -moz-font-feature-settings: "liga", "clig";  -webkit-font-feature-settings: "liga", "clig"; font-feature-settings: "liga", "clig"; }
.class { -moz-font-feature-settings: "case"; -webkit-font-feature-settings: 'case' on;          font-feature-settings: "case" on; }
.h2{
font-size:40px !important;


}
h2{
font-weight:400}
.menu_text{
padding:10px;display:inline-block;font-size: 18px;font-weight:400;
}
.forgotten{
color:#000;
width:100%;text-align: center;cursor:pointer
}
.forgotten:hover{
color:#69a562;

}
.login_window
	{
		max-width: 320px;
		margin: auto;
		top: 170px;
		position: relative;
		z-index: 3;
	}
::-ms-reveal {
 display:none !important;
}
input[type=text]::-ms-clear {
  background-color: red; /* This sets the cross color as red. */
  /* The cross can be hidden by setting the display attribute as "none" */
}
#background {
  background: #17f621;
   background-color: #17f621;
  background: -moz-linear-gradient(left,  #59edcb 0%, #17f621 100%);
  background: -webkit-linear-gradient(left,  #59edcb 0%, #17f621 100%);
  background: -o-linear-gradient(left,  #59edcb 0%, #17f621 100%);
  background: -ms-linear-gradient(left,  #59edcb 0%, #17f621 100%);
  background: linear-gradient(to right,  #59edcb 0%, #17f621 100%);
  -ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59edcb', endColorstr='#17f621',GradientType=1 );
  background-attachment: fixed;
}
@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
.animate-flicker {
   -webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}


.btn-not-active
{
	color:#f7f7f7;
	}
.slide_left_menu{
	display:none;
	position: fixed;
    background-color: white;
	padding-top:30px;
    width: 80%;
max-width:400px;
    right: 0px;
    top: 0px;
    height: 100%;
	    z-index: 5;
	}
@-webkit-keyframes downarrow {
  0%, 100% { top:50px; opacity: 0.9 }
  50% { top:0px; opacity: 0.4 }
}
.down-arrow{
	width:100%;
	margin:0 auto;
	text-align:center;
cursor:pointer;

	}
.down-arrow:after{
	content:'';
	width:40px;
	height:40px;
	position: fixed;
	margin:auto;
	right:0px;
	left:0px;
	opacity: 0.8;
	bottom: -85%;
	z-index: 4130;
	border-right:4px solid #fff;
	border-bottom:4px solid #fff;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	-webkit-animation:3s downarrow infinite ease;
	animation:3s downarrow infinite ease;
	}
.up-arrow{
	width:100%;
	margin:0 auto;
	text-align:center;
cursor:pointer;
	}
.up-arrow:after{
	content:'';
	width:40px;
	height:40px;
	position: fixed;
	margin:auto;
	right:0px;
	left:0px;
	opacity: 0.8;
	bottom: -85%;
	z-index: 4130;
	border-right:4px solid #fff;
	border-bottom:4px solid #fff;
	-webkit-transform:rotate(225deg);
	transform:rotate(225deg);
	-webkit-animation:3s downarrow infinite ease;
	animation:3s downarrow infinite ease;
	}
.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  
  border-left: 30px solid white;
}
.hide{
display:none;
}
.int_code {
  top:-44px;position:relative;font-size: 21px;font-weight: 300;width:70px;padding-right:5px;letter-spacing: 2px;z-index:20001;
}
.int_code_option:hover {
  background-color:black;
color:white;
}
.bottom_chat_submit
{
	display:none;
	position: absolute;
    bottom: 20px;
    height: 60px;
	z-index:700;
	background-color: lightsteelblue;
	}
	.header-detached .bottom_chat_submit {
    position: fixed;
    bottom: 0;}
.group-create-btn
{
		height:50px;
	border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	margin-top:5px;
	width: 98%;
}
.bold-input
{
	font-weight:bold;

}
.pinbox{ width: 200px;
    margin-right: auto;
    margin-left: auto;
height: 65px !important;
}

.pie {
background:#639;
border-radius:100%;
overflow:hidden;
height: calc(var(--size,200) * 1px);
position:relative;
width: calc(var(--size,200)*1px);
}

.pie__segment{
height:100%;
overflow:hidden;
position:absolute;
transform:translate(0,-50%) rotate(90deg) rotate(calc(var(--offset, 0) * 1deg));
transform-origin:50% 100%;
width:100%;
}

.pie__segment:before{
background:#f00;
content:'';
height:100%;
position:absolute;
transform:translate(0,100%) rotate(calc(var(--value, 45) * 1deg));
transform-origin:50% 0%;
width:100%;
}

/*
.pie__segment:after,.pie__segment:before{
background:#f00;
content:'';
height:100%;
position:absolute;
width:100%;
}

.pie__segment:after{
--degrees: calc((var(--value,45)/100)*360);
transform:translate(0,100%) rotate(calc(var(--degrees)* 1deg);
transform-origin:50% 0%;
}

.pie__segment:after{
opacity: var(--over50, 0);

}


*/

.btn-active{    
    background-image:none !important; 
	background-color: #5abc75;
        -webkit-transition: background-color 500ms ease-out 50ms;
    -moz-transition: background-color 500ms ease-out 50ms;
    -o-transition: background-color 500ms ease-out 50ms;
    transition: background-color 500ms ease-out 50ms;
}
.group_initiate
{
	display:none;
}
.group_chat_table
{
	 display: block;
  height: 234px;
  position:relative;
  top:40px;
    overflow-x: hidden;
	overflow-y: scroll;
    margin-bottom: 10px;
	width:100%;
	
	}

a {
    color: #09F;
    text-decoration: none;
}
.hold_menu
{
	height:30px;width:30px;border-radius:50%; background-image: url(https://images.mydropintheoceans.org/images/icons/IMG_2326.PNG); background-size:contain;
	position:absolute;display:none;
	z-index:5;margin:-4px;
	}
.access_menu
{
	height:30px;width:30px;border-radius:50%; background-image: url(https://images.mydropintheoceans.org/images/icons/IMG_locked.png); background-size:contain;
	 position: relative;
    top: 30px;
    left: 120px;
	z-index:8;
	margin:-4px;
	}
.curser_on{
	cursor:pointer;
	max-width:150px;
	padding:0px;
	display:inline-block;
	margin:4px;
	z-index:7;
}
.shake{
		animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
	animation-iteration-count:infinite;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  }
.doc_box{
	height:34px;
	width:144px;
	padding:3px;
	background-color: #F93;
	font-size:12px;
	border-radius:0px 0px 10px 10px;
	top: -4px;
	position: relative;
	
}
.pic_box{
	height:34px;
	width:144px;
	padding:3px;
	background-color: #39C;
	font-size:12px;
	border-radius:0px 0px 10px 10px;
	top: -4px;
	position: relative;
	
}
.dir_box{
	height:34px;
	width:144px;
	padding:3px;
	background-color: #D4C97F;
	font-size:12px;
	border-radius:0px 0px 10px 10px;
	top: -4px;
	position: relative;
	
}
.doc_thumbframe{
	padding:0px;
	height:90px;
	width:150px;
	background-color: #FFF;
	font-size:10px;
	border-radius:10px 10px 0px 0px;
	
}
.dir_thumbframe{
	padding:0px;
	height:90px;
	width:150px;
	background-color: #F2E58E;
	font-size:10px;
	border-radius:10px 10px 0px 0px;
	
}
#cross {
   width: 30px;
   height: 30px;
   position: relative;
}

#cross:before, #cross:after {
  content: "";
  position: absolute;
  z-index: -1;
  background: #2C559C;
}

#cross:before {
  left: 93%;
  width: 8%;
  margin-left: -15%;
  height: 98%;
  background: #2C559C;
   top: 11px;
}
.input_popup_frame
{
	margin-left:auto;margin-right:auto;width:98%;
		min-width:290px;
		    max-width: 370px;
}
#cross:after {
  top: 93%;
  height: 8%;
  margin-top: -15%;
  width: 98%;
  left: 11px;
}
.msg_stuff{
	display:none;
	height:50px;
	width:60px;
	background-color: #42f492;
	border-radius:20% 20% 20% 20%;
	border-style:solid;
	border-width: medium;
	z-index:9;
	border-color:#2C559C;
	position:fixed;
	top:90px;
	right:30px;
	background-image: url(https://images.mydropintheoceans.org/images/icons/IMG_chat.png);
	background-size:contain;
	
	
	}
.more_stuff{
	
	height:50px;
	width:50px;
	background-color: #FFF;
	border-radius:50% 50% 50% 50%;
	border-style:solid;
	border-width: medium;

	border-color:#2C559C;
	position:fixed;
	bottom:40px;
	right:40px;
	
	}
	.center_contents
	{
		 text-align: center;
	}
	.upload_form{
		position:fixed;
		top:130px;
		display:none;
		z-index:14;
		width:290px;
		margin-left:auto;
		margin-right:auto;
		height:300px;
		background-color:#CCC;
		padding:10px;
		border-radius:20px;
		}
		.upload-button-frame{
			    width: auto!important
		}
		.close_button
			{
				left: 88%;
				top: 9px;
				position: absolute;
				height: 30px;
				width: 30px;
				border-radius: 50%;
				background-color: #e3e3e3;
			}
			.close_chat_button
			{
				left: 88%;
				top: 69px;
				position: absolute;
				height: 30px;
				width: 30px;
				border-radius: 50%;
				background-color: #e3e3e3;
				z-index:6;
			}
		.title_text
		{
			position:relative;
			padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 18px;
    padding-left: 10px;
	min-height:10px;
			text-align: left;
			font-weight:bold;
			
		}
	.cancel_btn 
	{
		float:left;
		margin-top: 12px;
    margin-bottom: 5px;
	}
	.save_btn 
	{
		    float: right;
    top: -6px;
    right: 14px;
    position: relative;
	margin-top: 12px;
    margin-bottom: 5px;
	}
.close_cross
	{
		right: 16px;
		top: 2px;
		width: 26px;
		height: 26px;
		opacity: 0.3;
		position: relative;
	}
.cancel_btn.close_cross
	{
		right: -6px;
		top: -5px;
		width: 30px;
		height: 30px;
		opacity: 0.9;
		background-color: #C33;
		position: relative;
		border-radius:50%;
	}
.close_cross:hover {
  opacity: 1;
}
.close_cross:before, .close_cross:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 26px;
  width: 2px;
  background-color: #333;
}
.close_cross:before {
  transform: rotate(45deg);
}
.close_cross:after {
  transform: rotate(-45deg);
}
.checkmark {
    display:inline-block;
    width: 25px;
    height:25px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.checkmark_circle {
 position: absolute;
    width: 30px;
    height: 30px;
    background-color: green;
    border-radius: 50%;
    left: 0;
    top: 0;
}

.checkmark_stem {
position: absolute;
    width: 4px;
    height: 15px;
    background-color: #fff;
    left: 14px;
    top: 5px;
}

.checkmark_kick {
position: absolute;
    width: 7px;
    height: 4px;
    background-color: #fff;
    left: 8px;
    top: 16px;
}
.settings_span_left
{
	float: left;
	padding-left:10px;
}
	.delete_form{
		position:relative;
		top:230px;
		display:none;
		z-index:13;
		width:200px;
		margin-left:auto;
		margin-right:auto;
		height:100px;
		background-color:#CCC;
		padding:10px;
		border-radius:20px;
		pointer-events: auto;
		}
		.folder_form{
		position:fixed;
		top:230px;
		display:none;
		z-index:12;
		width:200px;
		margin-left:auto;
		margin-right:auto;
		height:100px;
		background-color:#CCC;
		padding:10px;
		border-radius:20px;
		}
			.chat_form{
		position:fixed;
		top:130px;
		display:none;
		z-index:12;
		width:91%;
		min-width:280px;
		max-width: 350px;
		margin-left:auto;
		margin-right:auto;
		height:auto;
		background-color:#CCC;
		padding:10px;
		border-radius:20px;
		}
					.chat_message{
		position:fixed;
		top:130px;
		display:none;
		z-index:12;
		width:90%;
		max-width:340px;
		margin-left:auto;
		margin-right:auto;
		height:400px;
		background-color:#CCC;
		padding:10px;
		border-radius:20px;
		}
.task_form{
		position:fixed;
		top:92px;
		display:none;
		z-index:12;
		width:90%;
		max-width:340px;
		margin-left:auto;
		margin-right:auto;
		height:500px;
		background-color:#CCC;
		padding:10px;
		border-radius:20px;
		}
	.up_icon {
		position:relative;
		display:inline-block;
    outline: 2px solid grey;
    padding: 1em;
    background-image: url(/images/upload.svg);
    background-repeat: no-repeat;
    background-size: cover;
	width:40px;
	/*right:-10px;*/
	height:40px;
	margin:8px;
}
	.chat_icon {
		position:relative;
		display:inline-block;
    outline: 2px solid #CCC;
    padding: 1em;
    background-image: url(/images/chat.svg);
    background-repeat: no-repeat;
	margin-right:auto;
    background-size: cover;
	width:40px;
	/*right:-10px;*/
	height:40px;
	margin:8px;
}
	.folder_icon {
		position:relative;
		display:inline-block;
    outline: 2px solid grey;
    padding: 1em;
    background-image: url(/images/folder.svg);
    background-repeat: no-repeat;
	margin-right:auto;
    background-size: cover;
	width:40px;
	/*right:-10px;*/
	height:40px;
	margin:8px;
}
	.task_icon {
		position:relative;
		display:inline-block;
    outline: 2px solid grey;
    padding: 1em;
    background-image: url(https://images.mydropintheoceans.org/images/connect-icons/task_icon2.png);
    background-repeat: no-repeat;
	margin-right:auto;
    background-size: cover;
	width:40px;
	/*right:-10px;*/
	height:40px;
	margin:8px;
}

#panel {
    padding:  5px 25px;
    border: solid 1px #c3c3c3;
	background-color: #ffff;
	width: 110%;
	height:190px;
	bottom:0px;
    position: fixed;
    left: -9px;
	z-index:12;
	display:none;
	
}
/* twitter style */
.user-icon-mobile a:active,.user-icon-mobile a:hover{
	background-image:url(https://images.mydropintheoceans.org/images/user-active@2x.png);
	}
	.user-icon-mobile{background-image:url(https://images.mydropintheoceans.org/images/user@2x.png);
	background-repeat:no-repeat;background-position:50% 50%;display:block;height:44px;width:40px;
	background-size:19px 18px;position:absolute;right:0;top:1px
	}
	.big_icon{
		background-image:url(../images/My_DIO_ICON_Simple.png);
		background-size:contain;
		height: 210px;
background-repeat:no-repeat;
    width: 85%;
    opacity: 0.8;
	position: relative;
    margin-left: auto;
    margin-right: auto;
	
		
		}
	.hamburger_box{
		width:35px;
		}	
		/* Icon 3 */
 #nav-icon3 {
width: 30px;
    height: 27px;
    position: relative;
       float: right;
    top: 27px;
right:-10px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon3 span {
  display: block;
  position: absolute;
  height: 4.5px;
  width: 100%;
  background: #999;
  border-radius: 0px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

/* Icon 3 */

#nav-icon3 span:nth-child(1) {
  top: 1px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 13px;
}

#nav-icon3 span:nth-child(4) {
  top: 26px;
}

#nav-icon3.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition:0.4s;
    -moz-transition:0.4s;
    -ms-transition:0.4s;
    -o-transition:0.4s;
    transition:0.4s;
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

/* Icon 8 */
 .nav-icon8 {
width: 30px;
    height: 27px;
    position: relative;
       float: right;
    top: 30px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

.nav-icon8 span {
  display: block;
  position: absolute;
  height: 4.5px;
  width: 100%;
  background: #999;
  border-radius: 0px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

.nav-icon8 span:nth-child(1) {
  top: 1px;
}

.nav-icon8 span:nth-child(2),.nav-icon8 span:nth-child(3) {
  top: 13px;
}

.nav-icon8 span:nth-child(4) {
  top: 26px;
}

.nav-icon8.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

.nav-icon8.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition:0.4s;
    -moz-transition:0.4s;
    -ms-transition:0.4s;
    -o-transition:0.4s;
    transition:0.4s;
}

.nav-icon8.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.nav-icon8.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}


/* Icon 4 */
 #nav-icon4 {
width: 30px;
    height: 27px;
    position: relative;
       float: right;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}
#nav-icon4 span {
  display: block;
  position: absolute;
  height: 4.5px;
  width: 100%;
  background: #999;
  border-radius: 0px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#nav-icon4 span:nth-child(1) {
  top: 1px;
}
#nav-icon4 span:nth-child(2),#nav-icon4 span:nth-child(3) {
  top: 13px;
}
#nav-icon4 span:nth-child(4) {
  top: 26px;
}
#nav-icon4.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}
#nav-icon4.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition:0.4s;
    -moz-transition:0.4s;
    -ms-transition:0.4s;
    -o-transition:0.4s;
    transition:0.4s;
}
#nav-icon4.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#nav-icon4.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}
/* Icon 5 */
 #nav-icon5 {
width: 30px;
    height: 27px;
    position: relative;
       float: right;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}
#nav-icon5 span {
  display: block;
  position: absolute;
  height: 4.5px;
  width: 100%;
  background: #999;
  border-radius: 0px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#nav-icon5 span:nth-child(1) {
  top: 1px;
}
#nav-icon5 span:nth-child(2),#nav-icon5 span:nth-child(3) {
  top: 13px;
}
#nav-icon5 span:nth-child(4) {
  top: 26px;
}
#nav-icon5.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}
#nav-icon5.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition:0.4s;
    -moz-transition:0.4s;
    -ms-transition:0.4s;
    -o-transition:0.4s;
    transition:0.4s;
}
#nav-icon5.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#nav-icon5.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}
.feedback_window_box{
		font-size: 27px;
    color: #296c44;
    margin-left: auto;
    margin-right: auto;
    width: 92%;
    line-height: 1.2;
    max-width: 400px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    font-weight: 400;
    display: table-cell;
    vertical-align: middle;
    top: 20px;
    text-align: center;
    position: relative;
    right: 0px;
    left: 0px;
}
.home_intro_box{
		font-size: 22px;
    /*color: #296c44;*/
    margin-left: auto;
    margin-right: auto;
    width: 92%;
    line-height: 1.2;
    max-width: 400px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    font-weight: 300;
    display: table-cell;
    vertical-align: middle;
    top: 20px;
    text-align: justify;
    position: relative;
    right: 0px;
    left: 0px;
}
.message_window{
position: relative;
        /*top:10vh;*/
    background: radial-gradient(circle at 400px 100px, rgb(34, 255, 168), rgb(205, 243, 230));
    border-radius: 15px;
    width: calc(100% - 40px);
    max-width: 500px;
    margin: auto;
	min-height:400px;
    z-index: 5;
    padding-bottom: 24px;
    padding-top: 10px;
    margin-bottom: 30px;border: 1px solid rgba(34, 245, 61, 0.78);
}
.main_intro_window{
	position: relative;
   /* background: radial-gradient(circle at 400px 100px, rgb(34, 255, 168), rgb(205, 243, 230));*/
    border-radius: 15px;
    width: 100%;
    max-width: 500px;
    margin: auto;
	min-height:400px;
    z-index: 5;
    padding-bottom: 24px;
    padding-top: 10px;
    margin-bottom: 30px;
 	/*border: 1px solid rgba(34, 245, 61, 0.78);*/
}
.main_intro_window_buttons
{
	position: relative;
    /* margin: auto; */
    height: 100%;
    max-width: 800px;
    display: inline-block;
    width: 66%;
}
	.ball1 {
  display: block;
  background: black;
  margin: 0;
  border-radius: 50%;
  height: 143px;
  width: 143px;
  background: radial-gradient(circle at 400px 100px, #54edbf, #f7f7f7);
  left: 74%;
    opacity: 0.5;
    position: relative;
    overflow: hidden;
}

	.ball {
  display: block;
  background: black;
  margin: 0;
  border-radius: 50%;
  height: 154px;
  width: 154px;
  background: radial-gradient(circle at 400px 100px, #54edbf, #f7f7f7);
  left: -5%;
    opacity: 0.3;
    position: relative;
    overflow: hidden;
}
	.ball2 {
  display: block;
  background: black;
  margin: 0;
  border-radius: 50%;
  height: 116px;
  width: 116px;
  background: radial-gradient(circle at 400px 100px, #54edbf, #f7f7f7);
  left: 34%;
  top:-19px;
    opacity: 0.7;
    position: relative;
    overflow: hidden;
}
	.ball3 {
  display: block;
  background: black;
  margin: 0;
  border-radius: 50%;
  height: 101px;
  width: 101px;
  background: radial-gradient(circle at 400px 100px, #54edbf, #f7f7f7);
  left: 82%;
  top:-20px;
    opacity: 0.2;
    position: relative;
    overflow: hidden;
}
.ball .shadow {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
-webkit-transform: rotateX(90deg) translateZ(-150px);
-moz-transform: rotateX(90deg) translateZ(-150px);
-ms-transform: rotateX(90deg) translateZ(-150px);
-o-transform: rotateX(90deg) translateZ(-150px);
transform: rotateX(90deg) translateZ(-150px);
z-index: -1;
}
.stage {
      width: 100%;
      -webkit-perspective: 1200px;
      -moz-perspective: 1200px;
      -ms-perspective: 1200px;
      -o-perspective: 1200px;
      perspective: 1200px;
      -webkit-perspective-origin: 50% 50%;
      -moz-perspective-origin: 50% 50%;
      -ms-perspective-origin: 50% 50%;
      -o-perspective-origin: 50% 50%;
      perspective-origin: 50% 50%;
    }
 ::-webkit-input-placeholder {

    vertical-align: middle;
     line-height: 30px;
}

:-moz-placeholder { /* Firefox 18- */

    vertical-align: middle;
     line-height: 30px;
}

::-moz-placeholder {  /* Firefox 19+ */
 line-height: 30px;
    vertical-align: middle; 
}

:-ms-input-placeholder {  
 line-height: 30px;
    vertical-align: middle;
}
.qrcode-text-btn {
  display: inline-block;
  height: 1em;
  width: 5em;
  background: url(qr_icon.svg) 50% 50% no-repeat;
  cursor: pointer;
}

.qrcode-text-btn > input[type=file] {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  opacity: 0;
}
 .outer {
  display: table;
  position: fixed;
  height: 100%;
  width: 100%;
top:19vh;
  z-index:5;
   border-collapse: separate;
 border-spacing: 5px;
}
.mydio_menu_btn_active{
	padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 16px;
    padding-right: 16px;
    background-color: rgb(0, 0, 0);
    border-radius: 10px;
    border-width: 1.8px;
    color: #fff !important;
    max-width: 157px;
    min-width: 157px;
    border-color: rgb(2, 2, 2) !important;
    display: inline-block;
    margin: 0 auto;
    margin-top: 20px;
    font-size: 15px;
    cursor: pointer;
}


.mydio_small_list_btn_active{
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
background-color:rgb(0, 0, 0);
border-radius:6px;
border-width:0px;
color:#fff !important;
max-width:79px;
min-width:79px;
border-color:rgb(2, 2, 2) !important;
display:inline-block;
margin:0 auto;
margin-top:7px;
font-size:14px;
cursor:pointer;
font-weight:700;
letter-spacing:1px;
}
.mydio_small_list_btn_inactive{
padding-top:3px;
padding-bottom:3px;
padding-left:4px;
padding-right:4px;
 background-color: rgba(0, 0, 0, 0);
border-radius:6px;
border-width:1.8px;
color:#fff !important;
max-width:79px;
min-width:79px;
border-color:rgb(2, 2, 2) !important;
display:inline-block;
margin:0 auto;
margin-top:7px;
margin-right:3px;
font-size:14px;
cursor:pointer;
font-weight:300;
letter-spacing:1px;
 color: rgb(2, 2, 2) !important;
}
.mydio_menu_btn_inactive{
	    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 16px;
    padding-right: 16px;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 10px;
    border-width: 1.8px;
    color: rgb(2, 2, 2);
    width: 47%;
    max-width: 157px;
    min-width: 157px;
    border-color: rgb(2, 2, 2);
    display: inline-block;
    margin: 0 auto;
    margin-top: 20px;
    font-size: 15px;
    cursor: pointer;
}

.bottom_menu_box{
position: fixed;
bottom: 0vh;
left: 50%;
margin-left: -180px;
z-index: 2;
padding-bottom: 4vh;
}
.top_menu_box{
position: fixed;
top: -8px;
left: 50%;
height: 140px;
margin-left: -180px;
z-index: 3;
padding-bottom: 3vh;
border-radius:45px;
}
.middle {
  display: table-cell;
  vertical-align: top;
}
.everyone{
font-size:40px;color:white;margin-left:auto;margin-right: auto;
    position: fixed;
text-align:center;
    top:50vh;
    width: 90%;
opacity:0.2;
	font-weight: 400;
    display: block;right:0px;left:0px;
}
.everyone_top_center{
	display:none;
	font-size: 40px;
    color: white;
    margin-left: auto;
    margin-right: auto;
    position: fixed;
    text-align: center;
    top: 90px;
    width: 90%;
    opacity: 0.9;
    font-weight: 400;
    display: block;
    right: 0px;
    left: 0px;
    z-index: 3;
}
.everyone_left{
	font-size:40px;color:white;
	text-align:left;
	top:50vh;
	width: 90%;
	font-weight: 400;
	display: block;right:0px;left:0px;
}
.login_box {
  margin-left: auto;
  margin-right: auto;
    z-index:5;
    width: 100%;  
    position: relative;
  /*whatever width you want
top: -60px; */
}
.mydio_login_input
    {
      padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: rgba(130, 243, 177, 0.8392156862745098);
    border-color: rgba(90, 188, 117, 0.12156862745098039);
    border-radius: 10px;
    border-width: 1px;
    width: 100%;
    height: 55px;
    max-width: 320px;
	-webkit-appearance: none;
    -moz-box-shadow: 0px 2px 16px 0px #5abc75;
    -webkit-box-shadow: 0px 2px 16px 0px #5abc75;
    box-shadow: 0px 2px 16px 0px #5abc75;
    display: block;
    margin: 0 auto;
    font-size: 20px;
    font-weight: 300;
    cursor: pointer;
    /* border-style: solid !important; */
    }
.pin_input{
-webkit-box-shadow:none;
    box-shadow:none;
background-color: rgba(130, 243, 177, 0);
border-color: rgba(255, 255, 255, 0);
letter-spacing: 10px;
font-weight: 400;
    font-size: 50px;
height: 65px;
text-align: center;

}
.sms_label{
bottom: -12px !important;
}
    .fixed-btn{
        bottom: -84%;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    }
   .mydio_slide_content
    {
        padding:16px;
        background-color: rgba(255,255,255, 0);
    	border-width: 0px;  
        width:98%;
        display: block;
    	margin: 0 auto;
        font-size:32px;
        cursor: pointer;
        color: white;
    }
.input{
		font-weight:300;

}
      .mydio_textarea
    {
        padding:10px;
        background-color: rgba(255,255,255, 0);
		border-color:green;
    	border-width: 1px;  
        width:80%;
        display: block;
    	margin: 0 auto;
        font-size:18px;
        cursor: pointer;
        color: black;
		font-weight:300;
    }
.field {
      display: block;
      position: relative;
      height: 55px;
      /*border: solid #aaa;*/
      /*border-width: 2px 2px 0 2px;*/
	  /*background-color: #FFF;*/
	  margin-bottom: 15px;
    }
    .field label {
		max-height: 2px;
		overflow: hidden;
		position: absolute;
		bottom: 0; left: 0; right: 0;
		padding: 0 3px 0 10px;
		font-size: 12px;
		font-weight:400;
		color: #aaa;
		background: rgba(72,171, 101, 0.77);
    }
.field label {
		display: none;

}
.field input[type=number]::-webkit-inner-spin-button, 
.field input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
   .field input:focus ~ label,
.field input:valid ~ label {
	-moz-animation:SlideUpLabel 0.3s ease-in-out 0s forwards;
	-webkit-animation:SlideUpLabel 0.3s ease-in-out 0s forwards;

	-o-animation:SlideUpLabel 0.3s ease-in-out 0s forwards;
	animation:SlideUpLabel 0.3s ease-in-out 0s forwards;
	-webkit-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
	}

.hamburger {
    background-image: url(https://images.mydropintheoceans.org/images/hamburger-icon@2x.png);
	background-repeat: no-repeat;
    background-position: 50% 50%;
       display: inline-block;
    height: 41px;
    width: 37px;
    position: relative;
    right: 10px;
    float: right;
    top: 30px;
	z-index:5;
}
.hamburger-ontop {
    background-image: url(https://images.mydropintheoceans.org/images/hamburger-icon@2x.png);
	background-repeat: no-repeat;
    background-position: 50% 50%;
       display: inline-block;
    height: 41px;
    width: 37px;
    position: absolute;
    left: -50px;
    float: right;
    top: 30px;
	z-index:7;
}
.blank_overlay
		{
			height:1000px;
			width:102%;
			position: fixed;
			top:0px;
			display:none;
			z-index:13;
			left: -9px;
			pointer-events: none;
		}
.blackout
		{
			height:1000px;
			width:110%;
			opacity: 0.7;
			position: fixed;
			background-color: #000;
			top:0px;
			display:none;
			z-index:11;
			left: -9px;
		}
.slider {
	overflow-y: hidden;
	max-height: 500px; /* approximate max height */
	transition-property: all;
	transition-duration: .5s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
#flip{
z-index:3;
}

.slider.closed {
	max-height: 0;
}
button:focus {outline:0;}

@media screen and (min-width:630px){
.header nav{padding:0 5px}
.header .logo{position:static;float:left;margin:2px 0 0;z-index:5}
.header{background-color:#fff;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.account-info .avatar{display:block}
.js .search-icon-mobile{display:none}
.js .main-navigation a:hover,.main-navigation a:hover{background:#f7f7f7}
.js .main-navigation li:after,.main-navigation li:after{width:20px;display:block;content:"•";height:1px;line-height:1px;position:absolute;text-align:center;top:50%;color:#e5e9ec;right:-9px}
.js .main-navigation .dropdown-menu li:after,.js .main-navigation li.last-child:after,.js .main-navigation.signed-out li:after,.main-navigation .dropdown-menu li:after,.main-navigation li.last-child:after,.main-navigation.signed-out li:after{content:""}.js .main-navigation li,.main-navigation li{display:inline-block;padding-right:1px;position:relative;width:auto}
.js .main-navigation .dropdown-menu li,.main-navigation .dropdown-menu li{display:block;margin-left:0;padding-right:0;position:relative;width:auto}
.js .main-navigation .dropdown-menu,.main-navigation .dropdown-menu{border-bottom:1px solid #d0d0d0}
.js .main-navigation.signed-out,.main-navigation.signed-out{float:right}
.js .main-navigation,.main-navigation{clear:none;display:block;margin:0 0 0 10px;float:left;width:auto}
.js .account-info{display:block;position:relative}.bdropiceberg .subtitle h1{font-weight:400;font-size:48px}
}
.logo{background:url(../images/My_DIO_header_LOGO.png) no-repeat;background-size:contain;display:block;height:35px;overflow:hidden;width:160px;bottom:2px}
.header .logo{bottom:19px;background-image:url(../images/My_DIO_header_LOGO.png)}
.header{background-color:#f7f7f7;-webkit-box-shadow:0 0 3px rgba(0,0,0,.3);box-shadow:0 0 3px rgba(0,0,0,.3);position:fixed;z-index:9999}
.header-detached{padding-top:84px}
.header-detached .header{position:fixed;top:0}
.header{display:inline}
.header{position:absolute;right:0;top:0}
.header .dropdown-menu{left:auto;right:0}
.header .navbar-inner .nav>li>a{font-size:12px;font-weight:400;padding:10px 8px;color:#4b5c66}
.header .navbar-inner .nav>li>a.emphasis{color:#2d9edc}
.header .navbar-inner .nav>li>a:hover{background:#f7f7f7}
.header .navbar-inner .container{width:825px}
body.navbar-detached{padding-top:45px}
.headerless-page,.signup-page,body.mobile.navbar-detached{padding-top:0}
.header .navbar-search{margin-top:8px;float:right}
.header .dropdown-menu{margin:0;border-radius:0;z-index:1000px}
.header.navbar .nav>li>.dropdown-menu:after,.header.navbar .nav>li>.dropdown-menu:before{content:none}
.header .form-inline{display:inline}
.header .btn-group{position:absolute;right:0;top:0}.header .btn-group.open .dropdown-menu{left:auto;right:0}
.header .navbar-inner{background:#fff;border-bottom:0;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);-moz-box-shadow:0 1px 2px rgba(0,0,0,.2);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.header .navbar-inner .nav>li>a{font-size:12px;font-weight:400;padding:10px 8px;color:#4b5c66}
.header .navbar-inner .nav>li>a.emphasis{color:#2d9edc}.header .navbar-inner .nav>li>a:hover{background:#f7f7f7}.header .navbar-inner .container{width:825px}
.header,.js .search{height:84px;width:100%}

.header .logo, .totop .logo {
   left: 0px;
    margin: auto;
    padding: 0;
    position: absolute;
    right: 0px;
}
@media screen and (min—moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:3/2),(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5),(min-resolution:144dpi),(min-resolution:1.5dppx)
{
.no-sidebar.full-page .bdropaccounts .david .dio{font-size:11px}
.no-sidebar.full-page .bdropaccounts .david form table tr td .dio{font-size:14px}
.no-sidebar.header-detached .rewards p{color:#633}
.no-sidebar.header-detached .bdropbusiness #reg table tr .col_4{vertical-align:middle;padding-bottom:7px}
.no-sidebar.header-detached,.no-sidebar.header-detached{text-align:left}
}
/* end twitter style */

.mydio_login_btn
    {
		padding-top:14px;
		padding-bottom:14px;
		padding-left:16px;
		padding-right:16px;
		background-color: rgba(255,255,255, 0);
		border-radius: 21px;
		border-width: 1.8px;
		width:250px;
		border-color:black;
		display: block;
		margin: 0 auto;
		font-size:20px;
		cursor: pointer;
    }
.mydio_info_btn
    {
        padding-top:14px;
        padding-bottom:14px;
        padding-left:16px;
        padding-right:16px;
        background-color: rgba(255,255,255, 0);
		border-radius: 15px;
    	border-width: 1.8px;
        width:250px;
		color:white;
        border:1px solid white;
        display: block;
    	margin: 0 auto;
        font-size:20px;
        cursor: pointer;
    }
.mydio_small_white_btn_inactive {
	padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 16px;
    padding-right: 16px;
    background-color: rgba(0, 0, 0, 0.54);
    border-radius: 10px;
    border-width: 1px;
    color: rgb(255, 255, 255);
    width: 80%;
    max-width:250px;
    min-width: 150px;
    border-color: #ffffffa8;
    display: inline-block;
    margin: 0 auto;
    margin-top: 20px;
    font-size: 20px;
    cursor: pointer;
}
.mydio_xtrasmall_white_btn_inactive {
	padding-top: 7px;
    padding-bottom: 9px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: rgba(0, 0, 0, 0.29);
    border-radius: 10px;
    border: 1px solid #8e8787;
    color: rgb(255, 255, 255);
    width: 100%;
    max-width: 280px;
    min-width: 140px;
    display: inline-block;
    margin: 0 auto;
    margin-top: 4px;
    font-size: 16px;
    cursor: pointer;
}
.mydio_small_btn_inactive {
   padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 16px;
    padding-right: 16px;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 10px;
    border-width: 1.8px;
    color: rgb(2, 2, 2);
    width: 47%;
    max-width: 170px;
    min-width: 138px;
    border-color: rgb(2, 2, 2);
    display: inline-block;
    margin: 0 auto;
    margin-top: 20px;
    font-size: 20px;
    cursor: pointer;
}
.mydio_small_btn_active {
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 16px;
    padding-right: 16px;
    background-color: rgb(0, 0, 0);
    border-radius: 10px;
    border-width: 1.8px;
    color: #fff !important;
    width: 47%;
    max-width: 150px;
    border-color: rgb(2, 2, 2) !important;
    display: inline-block;
    margin: 0 auto;
	margin-top:20px;
    font-size: 20px;
    cursor: pointer;
}
.mydio_btn_inactive:hover {
    color: #fff;
	background-color: rgba(0, 0, 0);
}
.mydio_btn_inactive {
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 16px;
    padding-right: 16px;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 10px;
    border-width: 1.8px;
    color: rgb(2, 2, 2);
    width: calc(100% - 10px);
    max-width: 309px;
    border-color: rgb(2, 2, 2);
    display: block;
    margin: 0 auto;
    font-size: 20px;
    cursor: pointer;
}
.mydio_btn_active {
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 16px;
    padding-right: 16px;
    background-color: rgb(0, 0, 0);
    border-radius: 10px;
    border-width: 1.8px;
    color: #fff;
    width: calc(100% - 10px);
    max-width: 309px;
    border-color: rgb(2, 2, 2);
    display: block;
    margin: 0 auto;
    font-size: 20px;
    cursor: pointer;
}
.mydio_login_btn_inactive
    {
        padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 16px;
    padding-right: 16px;
    background-color: rgba(255,255,255, 0);
    border-radius: 21px;
    border-width: 1.8px;
    color:rgba(81, 179, 109, 0.8588235294117647);
    width: calc(100% - 10px);
	max-width: 309px;
    border-color:rgba(90, 188, 117, 0.4588235294117647);
    display: block;
    margin: 0 auto;
    font-size: 20px;
    cursor: pointer;
    }
.mydio_login_btn_active
    {
        padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 16px;
    padding-right: 16px;
       background-color:rgba(72, 171, 101, 0.7098039215686275);
    border-radius: 21px;
    border-width: 1.8px;
    color: #f7f7f7;
    width: 309px;
    border-color:rgba(90, 188, 117, 0.4588235294117647);
    display: block;
    margin: 0 auto;
    font-size: 20px;
    cursor: pointer;
    }
button,input,select,textarea{margin:0;font-size:100%;vertical-align:middle}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}
button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}
button,input,select,textarea{font-size:15px;font-weight:400;line-height:25px;min-height:25px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
button,input,select,textarea{font-family:"DropCT";}
input[type=button],input[type=reset],input[type=radio],input[type=checkbox],input[type=file],input[type=image]{width:auto}
.no-sidebar.header-detached .bdropabout .david .style3{text-align:left}
 .mydio_slide_content button
    {
    color:white;
    
    }