.outer_menu a { color: #245574; text-decoration: none; }
.outer_menu a { color: #245574; text-decoration: none; }

#display_menu:checked ~ .outer_menu{
	z-index:9999;
	display:block;
	transition: opacity .35s;
	width:calc(70px + 10vw);
	height:110px;
	position:absolute;
	right:0px;
	padding: 20px;
	padding-bottom: 0px;
	top:80px;
	margin-right:20px;
	margin-top:5px;
	top:65px; /* comment out when using dev menu */
	border:1px solid #a1a1a1;
	border-radius:5px;
	background-color:white;
}



#small-screen-warning{
	position: absolute;
    width: 80%;
    min-height: 104px;
    max-height: none;
    height: auto;
   /* background: #d9534f none repeat scroll 0% 0%; */
   /* background: #5cb85c none repeat scroll 0% 0%; */
    border-radius: 19px;
    text-align: center;
    color: rgb(255, 255, 255);
    font-size: 1.3em;
    padding: 20px;
	opacity: 0;	
	transition: visibility 0s, opacity 0.5s linear;
	box-sizing: border-box;
	z-index: -1;
	transition: all .6s ease-in-out;
} 

.text-by-img {
	width: 50%; float: left;
	
}

	@media (max-width:800px) {.text-by-img { width: 100%; float: none; }}

.stronghr {border-top:1px solid #a0a0a0;}

.voomly-embed {border: 1px solid #a8a8a8;}

.label {color:#333; display:block; text-align:left;}

/* Login/register screen */

.g-recaptcha div {margin: 0 auto;}

.login_wrapper{ width:100%;margin: 20px 0px; border-top: 1px solid #dcdcdc;  min-height: 80vh; }
.login_wrapper .panel { margin: 10px; }
.login_panel{ box-sizing:border-box; max-width:450px; margin:20px auto; border: 1px solid #ddd; border-radius:4px;box-shadow: 0 1px 1px rgba(0,0,0,.05);  }

	@media (max-width:500px) {.login_panel {margin: 20px; }}

.login_panel_head{ font-size: 16px; line-height: 1.42857143; padding: 10px 15px; border-bottom: 1px solid transparent; border-top-left-radius: 3px; border-top-right-radius: 3px;color: #333; background-color: #f5f5f5; border-color: #ddd;}

.login_panel_head_title{
margin-top: 0;
margin-bottom: 0;
font-size: 16px;
color: inherit;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
	box-sizing: border-box;
}

.login_panel_body{ font-size: 16px; line-height: 1.42857143; color: #333; padding: 15px;}

.login_group{margin-bottom:15px; }
input[disabled]{
	cursor: not-allowed!important;
	box-shadow:none;
	opacity:.65;
}
.login_control{
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.login_control:focus{
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}

.input_red_outliner{/*
	background-color: #ffd2d6;
	border-color:#a71010;
*/
background-color: #f2dede;
border-color: #ebccd1;
}

.input_green_outliner{/*
	background-color: #ffd2d6;
	border-color:#a71010;
*/
background-color: #bae8ba;
border-color: #28a745;
}

.login_panel p{ margin-top: 20px;}
.agreed_spacing{
	margin-bottom:7px;
	padding-left:2px;
	padding-top:5px;
}

.login_checkbox { margin: 10px 0; }

.login_checkbox label{
	min-height: 20px;
	padding-left: 1px;
	margin-bottom: 10px;
	font-weight: 400;
	cursor: pointer;
	display: inline-block;
max-width: 100%;
box-sizing: border-box;
}

.login_submit_button{
box-sizing: border-box;
width: 100%;
cursor: pointer;
display: block;
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px;
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
text-align: center;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
margin:0px;
}
.send_confirmation_email{

}
.register_button{
	margin-right:10px;
	float: right;
	border: 1px solid #2a5d84;
	padding: 10px;
	border-radius: .3em;
	margin-top: 15px;
}
.warning_message{
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
box-sizing: border-box;
padding: 15px;
margin-top: 10px;
margin-bottom: 20px;
border: 1px solid transparent;
font-size: 16px;
line-height: 1.42857143;
}

#terms_reg, #privacy_reg {
	display:inline;
	color: darkblue;
	text-decoration: underline solid!important;
	cursor:pointer;

}

#terms_and_cond, #privacy_policy{
	position: fixed;
	top: 0px;
	left: 0px;
	margin: 50px;
	background-color: white;
	border: 1px solid #1f1f1f;
	border-radius: 30px;
	padding: 30px;
	    overflow: scroll;
    height: calc(100% - 81px);
}

.underline {text-decoration: underline; }

.orange-button-basic { 
	margin: 40px; 
	border-radius: 10px; 
	padding: 20px 40px; 
	font-weight: 600; 
	color: #fff; 
	font-family: 'Montserrat', sans-serif; 
	font-size: 16px; 
}
.orange-button-basic { 
	background: #fe7a05; 
}

#accept_button, #accept_button_privacy{
	width:40%;
	max-width:250px;
	margin: 40px auto;
	text-align:center;
	cursor:pointer;
}

#username_exists, #bad_password{
	color: #f97676;
	background-color: #ffeeef;
	position: relative;
	top: -15px;
	padding: 5px;
    padding-left: 5px;
	padding-left: 10px;
}

#email_exists{
	color: #f97676;
	background-color: #ffeeef;
	position: relative;
	top: -15px;
	padding: 5px;
    padding-left: 5px;
	padding-left: 10px;
}

.panel-wrapper { margin: 30px auto; width: 80%; }



/* course home page (list of modules) */
.course-outline .no-bullets li ul { padding-left: 80px; }
.course-outline .no-bullets li ul li {list-style-type: circle; }

.course-outline .fa {padding: 0 1em; }

.complete {color: #666; font-size: .5em; }

.whoforwrapper {padding: 0px 20px; margin: 20px 0; border-radius: .3em;border: 1px solid #dcdcdc; background: #ffffff; }
.whoforwrapper p {padding-right: 200px; }
	@media (max-width:800px) { .whoforwrapper p { padding-right: 0px; } }
.whofor-img-wrapper { width: 200px; text-align: center;float: left; padding: 20px 20px 20px 20px; margin-right: 50px; }
	@media (max-width:800px) {.whofor-img-wrapper { float:none; margin: 0 auto; } }
.whofor-img-wrapper img{ height: 200px; }

.course-outline ul li i { color: #bb4803; }

.major-question:before {
    font-family: FontAwesome;
    content: "\f059";
	font-size: 2em;
	position: absolute; top: 5px; left: 10px;
}

.major-question { position: relative; border: 1px solid #285da4; border-radius: 4px; padding: 5px 10px 5px 60px; font-size: 1.2em; font-weight: bold; background-color: #ccc; }

.module-incomplete { float:left; width: 1em; height: 1em; border: 2px solid #ccc; margin-right: 20px; border-radius:10%; }
.module-complete { float:left; width: 1em; height: 1em; border: 1px solid #fff; margin-right: 20px; color: #4caf50; }

.blocked_module a{
	cursor: default;
	color:#bfbfbf !important;
}
.blocked_module {
	color:#bfbfbf !important;
}

.blocked_module span{
	color:#bfbfbf !important;
	
}


/* ----------------------- footer area -------------------------- */

footer { background: #333; color: #fff; padding: 45px 0; margin-top: 45px; text-align: center; }
footer li {list-style-type: none}
footer a {color: #fff; font-weight: bold; }
footer ul {padding: 0; }

/* ---------------------------- COURSE STYLING -------------------------- */


.section-wrapper ol li { padding: 5px 10px; }
.section-wrapper ul li { padding: 5px 10px; line-height: 1.6em; }

.course-home ul li {padding-bottom: 20px; font-size: 24px;}
.course-home ul li .module-title { float: left; width: 90%; }
.course-home ul li ul { clear: both; padding-left: 80px; padding-top: 10px; }
.course-home ul li ul li {padding-bottom: 0px; font-size: 16px;}

.course-home a { color: #111; text-decoration:none; }
.course-home a:hover {  text-decoration:underline; }

	@media (max-width:750px) {.course-home ul {padding: 0; } }
	@media (max-width:750px) {.course-home ul li ul {padding-left: 40px; } }
	@media (max-width:750px) {/* .course-home ul li div {margin-bottom: 20px; */ }
	@media (max-width:750px) {.course-home ul li .module-title {width: 70% } }
	@media (max-width:750px) {.course-home ul li ul li div {margin-bottom: 0px; } }

.code { font-size: 16px; font-family: courier }


.key-info-point { clear: both; position: relative; background: #d9edf7; border: 1px solid #bce8f1; color: #31708f; padding: 35px; margin: 50px; border-radius: 4px; text-align: center; font-weight: 500; font-size: 24px; line-height: 1.5em; }
.key-info-point::before { content: ""; position: absolute; top: -20px; left: -18px; background-image: url('/images/key-point-icon.png'); height: 50px; width: 50px; }

.need-help-div { clear: both; position: relative; background: #d9edf7; border: 1px solid #bce8f1;  padding: 35px 35px 35px 375px; margin: 50px; border-radius: 4px;  }
.need-help-div p { font-weight: 500; font-size: 24px; color: #222222; }
.need-help-div::before { content: ""; position: absolute; top: -20px; left: -18px; background-image: url('/images/panic-face-350.png'); height: 350px; width: 350px; }

	@media (max-width:800px) {
		.need-help-div { padding: 375px 35px 35px 35px; }

		}
	
.image-center-nowrap {width: 80%; margin: 20px auto; border: 1px solid #ccc; display: block;}
.image-center-nowrap img {width: 100%;}
	
#mform {float:right;}

.green_button_continue{
	background-color:#25871a!important;
}

.code-text { text-align: center; font-family: courier; font-size: 16px; }

.inline-audio-play-button { width: 20px; display: inline; cursor:pointer;}

.blue-box-yellow-highlight { border: 1px solid blue; background-color: yellow; }

.go-slow-section, .go-slow-section h2 {color: #fff;}

.float-left-30 {float: left; width: 30%;}
.float-left-30 img {width: 100%;}
.float-right-65 {float: right; width: 65%;}

/* @media (max-width: 800px) {
  .float-left-30, .float-right-65 {
    float: none;
    width: 100%;
  }
} */

/* ------------------------------- TEST PAGES ------------------------------------------ */	

.options-wrapper { width: 49% }
.audio-alert {background-color: purple; color: #fff; border-radius:3px; padding: 5px 10px;}
.audio-alert:before {
	font-family: FontAwesome;
	content: "\f028";
	margin-right:20px;
			 }
	
/* styled checkboxes from https://www.w3schools.com/howto/howto_css_custom_checkbox.asp */
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	min-height: 50px;
}

/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
}

/* Create a custom checkbox */
.checkmark, .checkmark-radio{
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
	border: 1px solid #ccc;
}

.checkmark-radio{border-radius: 50%; border: 1px solid #ccc;}

.wrong-answer-selected-popup {

}

.correct-answer-selected-popup {

}



/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark, .container input:checked ~ .checkmark-radio {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after, .checkmark-radio:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after, .container input:checked ~ .checkmark-radio:after {
    display: block;
}

.container .label { margin-left: 20px; }

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.container .checkmark-radio:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

/* end styled checkboxes */

.qform {margin-top: 2em; }

#q1, #q2, #q3, #q4, #q5, #q6, #q7, #q8, #q9,#mark-test-complete { position: relative; }

#q1result,#q2result,#q3result,#q4result,#q5result,#q6result,#q7result,#q8result,#q9result,#cant-mark-module-complete{
	position: absolute;
    width: 50%;
    min-height: 104px;
    max-height: none;
    height: auto;
   /* background: #d9534f none repeat scroll 0% 0%; */
   /* background: #5cb85c none repeat scroll 0% 0%; */
    border-radius: 19px;
    text-align: center;
    color: rgb(255, 255, 255);
    font-size: 1.3em;
    padding: 20px;
	opacity: 0;	
	transition: visibility 0s, opacity 0.5s linear;
	box-sizing: border-box;
	z-index: -1;
	transition: all .6s ease-in-out;
}

@media (max-width:767px) { #q1result,#q2result,#q3result,#q4result,#q5result,#q6result,#q7result,#q8result,#q9result {width:100%} }

#cant-mark-module-complete #login, #cant-mark-module-complete #register { width: 50%;  display: inline;}

/* Click and Drag boxes */

#GridDivStart {background-color: #fff; width: 100%; border: 1px solid #ccc; box-sizing: border-box; border-radius: 10px; margin-bottom:10px;}

#GridDivA-wrapper { background-color: #31b0d5; width: 45%; float: left; margin-bottom: 25px; border-radius: 10px;}
#GridDivB-wrapper { background-color: #f0ad4e; width: 45%; float: right; border-radius: 10px;}

#GridDivA-wrapper p, #GridDivB-wrapper p, #GridDivStart p { margin: 5px 25px; cursor: grab;  }

#GridDivA {  
    min-height: 140px;
    background-color: #fff;
	box-sizing: border-box;
	margin: 15px;

}

#GridDivB {  
    min-height: 140px;
    background-color: #fff;
	box-sizing: border-box;
	margin: 15px;
}

.Component, .to_move_object {  
    background-color: #205081;
	color: #fff;
	margin: 5px;
	padding: 0px 5px;
	text-align: center;
	box-sizing: border-box;
	cursor: pointer;
	border-radius: 5px;
}

.Component { float: left; }

.to_move_object { margin: 10px; padding: 15px 10px;  } 

.droppable { padding: 0px 10px }

.correct_bg { background: #dff0d8 !important;  }

.correct_bg_popup { background: #5cb85c; }
.incorrect_bg_popup { background: #d9534f; }


	@media (max-width:1225px) {

		}

	@media (max-width:767px) {
		#GridDivA-wrapper, #GridDivB-wrapper { float:none; width: 100%; padding-bottom: 10px;padding-top:10px; }
		#GridDivA, #GridDivB { height: 200px; float:none;}
	}
	




/* SORT TWO COLUMNS */
  
	.two-sortable-cols-holder {width: 80%; margin: 0 auto; }
  
	.left_box_wrapper, .right_box_wrapper { width: 45%; }
	.left_box_wrapper { background-color: #31b0d5; }
	.right_box_wrapper { background-color: #f0ad4e; }
	
	.column_title { margin: 15px 10px; text-align: center; font-family: arial; font-weight: bold; }
  
	.draggable_zones { background-color: #cccccc; margin: 20px; box-sizing: border-box; }
  
	 #left_grid, #right_grid{
		height: 500px;
		padding: 10px;
		box-sizing: border-box;
	 }

/* SORT ONE COLUMNS */	 

.sortable-list-holder { width: 50%; margin: 0 auto; background-color: #f0ad4e; display: block;}
#sortable { background-color: #cccccc; margin: 20px; box-sizing: border-box; display: inline-block; width: calc(100% - 40px); list-style-type: none; padding: 0; }
#sortable li { 
	margin: 10px; 
	padding: 15px 10px;    
	background-color: #205081;
	color: #fff;
	text-align: center;
	box-sizing: border-box;
	cursor: grab;
	}

/* MISSING WORDS */
.missing-word-wrapper table {margin-left:auto;margin-right:auto;}
.missing-word-wrapper table td {vertical-align: top;}

.wordinputbox { font-size: 18px; padding-left: 10px; font-family: 'Montserrat', sans-serif; height: 20px;}

@media (max-width:767px) {
	.missing-word-wrapper table td { display: block; }
}

.givenword {border: 1px solid blue; padding:10px 10px; margin-right: 20px; border-radius: 3px; margin-top:5px; }
.englishword { background: url('/images/flag-icon-english.png') no-repeat; background-size: 28px 28px; background-position:5px 8px; padding-left:40px;}
.polishword { background: url('/images/flag-icon-polish.png') no-repeat; background-size: 28px 28px; background-position:5px 8px; }
.wordtocheck {float: left; border-radius: 3px; margin: 5px; border: 1px solid red; padding:5px 10px 5px 40px;}
.wordtocheck input {font-size: 18px; padding-left:10px;}
.word img {height:28px;margin-right: 10px;}

.wordtocheck span { display: inline-block; vertical-align: top; padding-top: 7px; }
.wordtocheck textarea { resize:none; }

@media (max-width:767px) {
	.wordtocheck {float:right;}
}

#reveal-answer, #q1reveal-answer, #q2reveal-answer, #q3reveal-answer, #q4reveal-answer, #q5reveal-answer,  
#help-answer, #q1help-answer, #q2help-answer, #q3help-answer, #q4help-answer, #q5help-answer  {
	position: absolute;
	width: 80%;
	min-height: 104px;
	max-height: none;
	height: auto;
	/* background: #d9534f none repeat scroll 0% 0%; */
	/* background: #5cb85c none repeat scroll 0% 0%; */
	border-radius: 19px;
	text-align: center;
	color: rgb(255, 255, 255);
	font-size: 1.3em;
	padding: 20px;
	opacity: 0;
	transition: visibility 0s, opacity 0.5s linear;
	box-sizing: border-box;
	z-index: -1;
	transition: all .6s ease-in-out;
	
}
.translatewords {position:relative;}

.answer-icon {float: left; padding: 5px 10px; border-radius: 3px; margin: 5px; cursor: pointer; padding: 5px; }
.show-answer-icon, .correct-answer-icon {clear:both; cursor: help; }

@media (max-width:767px) {
	.answer-icon {float: right;}
}

#closeAnswer, .closeAnswer { cursor: pointer; width: auto; margin: 0 auto; border: 1px solid #fff; border-radius: 3px; background: #fe7a05;}

.wordinput, .q1wordinput, .q2wordinput, .q3wordinput, .q4wordinput, .q5wordinput, .q6wordinput, .q7wordinput, .q8wordinput, .q9wordinput {  border-radius:10px; outline:none;}
.inactiveinput { border: 5px solid #a32d10; }
.activeinput { border: 5px solid orange; }
.correctinput { border: 5px solid green; }

.play-answer-icon:before {
	font-family: FontAwesome;
	content: "\f04b";
	display: inline-block;
	padding-right: 3px;
	vertical-align: middle;
	font-weight: 900;
	color: green;
}

.play-answer-slow-icon:before {
	font-family: FontAwesome;
	content: "\f017";
	display: inline-block;
	padding-right: 3px;
	vertical-align: middle;
	font-weight: 900;
	color: green;
}

.show-answer-icon:before {
	font-family: FontAwesome;
	/* content: "\f06e"; */
	content: "\f06e";
	display: inline-block;
	padding-right: 3px;
	vertical-align: middle;
	font-weight: 900;
	color: blue;
}

.help-answer-icon:before {
	font-family: FontAwesome;
	/* content: "\f06e"; */
	content: "\f059";
	display: inline-block;
	padding-right: 3px;
	vertical-align: middle;
	font-weight: 900;
	color: blue;
}

.correct-answer-icon:before {
	font-family: FontAwesome;
	content: "\f058";
	display: inline-block;
	padding-right: 3px;
	vertical-align: middle;
	font-weight: 900;
	color: green;
}

.answer-icon, .play-answer-icon, .play-answer-slow-icon {
	font-size: 18px; margin: 10px;  background: #c0c0c0; border-radius: 50%; line-height: 24px;
}

.answer-icon { padding: 5px 10px;}
.play-answer-icon, .play-answer-slow-icon { padding: 5px 5px 5px 10px;}

.displaynone { display:none;}
.displayblock {display:block;}

/* ----------------- Matching words ------------------ */
.matchingwords {border: 1px solid #c0c0c0; border-radius:10px; padding: 5px 10px; background:#fff;}
.matchingwords .word, .matchingwords .finish-msg {float: left; padding: 5px 10px; border-radius: 3px; margin: 5px; cursor: grab }
.unselected-word { border: 2px solid blue }
.selected-word { border: 2px solid orange }
.selected-word-correct, .finish-msg { border: 2px solid green }
.selected-word-incorrect { border: 2px solid red }
.opacity-zero {opacity:0;animation-delay: 5s}


/* ------------------------------- END OF TEST PAGES ------------------------------------------ */

/* REFERENCE AREA 
#bb4803 - dark-dark-orange
#e25f10 - dark-orange
#fe7a05 - orange (standard CTA button)
#fe892d - light-orange (standard CTA button hover)




*/

/* ------------------------ FLIP AND GROW CARDS -------------------------------- */
.cards {
	text-align: center;
	vertical-align: middle;
	line-height: 200px;
    margin:30px;
    width:200px;
    height:200px;
    background-color:#59A3FF;
    cursor:pointer;
    display:inline-block;
    overflow:hidden;
	box-shadow: 4px 4px 12px 2px #999;
}
.cards p {line-height: 1.2em; margin: 60px 10px;}
.cards img {
    display:block;
    width:80%;
    height:auto;
    margin:0 auto
}
#cardClone {
	text-align: center;
	vertical-align: middle;
	line-height: 200px;
    position:fixed;
    display:none;
    margin:30px;
    width:200px;
    height:200px;
    -webkit-transition:.6s;
    transition:.6s;
    -webkit-transform-style:preserve-3d;
    transform-style:preserve-3d;
    z-index:99;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}
	@media (max-width:1200px) {#cardClone { perspective: 95%; -webkit-perspective: 95%; margin: 0; position: fixed; overflow-y: scroll;} }
#cloneFront, #cloneBack {
    backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
    width:100%;
    height:100%;
    position:absolute;
    -webkit-transition:.6s;
    transition:.6s;
    overflow:hidden;
	box-sizing: border-box;
}
#cloneFront {
    z-index:100;
    background-color:#59A3FF;
    transform: translatez(0);
    -webkit-transform: translatez(0);
	box-shadow: 4px 4px 12px 2px #999;
}
#cloneBack {
    transform:rotateY(-180deg);
    -webkit-transform:rotateY(-180deg);
    z-index:101;
    /* background-color:#aaa; */
	background: #aaa url('images/close_btn.png') right top no-repeat;
	cursor: pointer;
	padding: 5%;
}

#cloneBack img { width: 50%; float: left; }
#cloneBack h3 {  line-height: 1em;}
#cloneBack div { width: 40%; float: right; }
#cloneBack ul { line-height: 1.5em; text-align: left;}



	@media (max-width:1200px) { #cloneBack { overflow-y:scroll;} }
#closeClone {
    color:white;
    background-color:black;
    border:1px solid grey;
    border-radius:2px;
    cursor:pointer;
    float:right;
}

.hidden_cards {display: none; }
/* #cloneBack img {height: 200px; } */
/* #cloneBack img {height: 200px; } */
/* .card_content { margin: 5%; }
.card_content img { width: 50%; float: left; }
.card_content h3 {  line-height: 1em;}
.card_content div { width: 40%; float: right; }
.card_content ul { line-height: 1.5em; text-align: left;} */

@media (max-width:1200px) {.card_content h3 { line-height: 1em; margin-top: 50px; } }

/* ------------------------ FLIP CARDS -------------------------------- */
.flipcards-wrapper{display:flex;}
/*.flipcards-3 { width: 30%; margin: 10px 1.4%; text-align: center; float: left; margin-bottom: 100px; min-height: 200px;}
.flipcards-3 div { padding: 10%;box-sizing: border-box; color: #fff; min-height: 200px; }
*/
.flipcards-3 {flex:1; margin: 10px 1.4%; text-align: center; margin-bottom: 100px; min-height: 200px;}
.flipcards-3 div { padding: 10%;box-sizing: border-box; color: #fff; min-height: 200px; }
.flipcards-3:after { 
    content:'';
    display: block;
    position: absolute;
    left: 6%;
    bottom: 0px;
    width: 90%;
    /* max-width: 210px; */
    height: 5px;
    background: transparent;
    border-radius: 100px/100px;
    box-shadow: 0 50px 20px rgba(0,0,0,1);
	}
	
/* ------------------------ Toggle Boxes --------------------------------------- */
.toggle-wrapper { width: 80%; margin: 20px auto;  }
.toggle-title { font-family: Arial Black, Arial Bold, Gadget, sans-serif; cursor: pointer; }
.toggle-title a{  }
.toggle-title a .moreless{ padding: 20px; background: #333; float: left; color: #fff; }
.toggle-title a .less{ display: none;}
.toggle-title a .more{ display: inline;}
.toggle-title a .toggle-title-text{ padding: 20px; float: left; color: #fff; }

.report-detail-section { background: #cccccc; padding: 20px; display: none; }

/* ------------------------ CLICK IMAGE POP UP--------------------------------------- */
.image_grid{
	display: flex;
	max-width: 1000px;
	margin-left: auto;
	margin-right:auto;
	margin-bottom:30px;
}

.image_box{
	flex: 1;
	margin-left:30px;
}
.a_image{
	z-index:1;
}

.image_box:hover {
	cursor: pointer;
}

.image_box:hover .image_click{
	opacity: 1;
	 
}

.image_box:hover img{
	opacity:0.8;
}

.image_box img{
	width: 100%;
	height: 100%;
	position: relative;
	transition: opacity 0.3s;
	
}
.circle_image{

	border-radius:100%;
}

.image_box img:hover{


}

.image_click{
	opacity: 0;
	position: absolute;
	border-radius: 50%;
	background-color:lightgrey;
	width:100px;
	height:100px;
	z-index:10;
/*	transform: translate(62.5px, 22.5px);
*/	 transition: opacity 0.5s;
}

.image_click:before {
	content: "\f25a";
    font-family: "FontAwesome";
	font-size:2em;
	color: black;
    position:absolute;
	left: calc(50% - 16px);
	top: calc(50% - 16px);
 }
 
 #popup_background {
	opacity:0.4;
	position:fixed;
	z-index:100;
	left:0px;
	top:0px;
	/*left: calc(50% - 350px);
	top:calc(50% - 200px);*/
	height:100%;
	width:100%;
	overflow:hidden;
	background-color: #656565;
 }
 
 .display_none{
	display:none;

 }
 
 #popup_message{
	position:fixed;
	z-index:101;
	border-radius:20px;
	background-color: #f5f5f5;
	height:500px;
	width:800px;
	left:calc(50% - 400px);
	top:calc(50% - 250px);
	animation:fadeIn 10s;
	text-align:center;
 }
 
 #popup_message span{
	position: relative;
	left:15px;
	top:18px;
	width:770px;
	height:402px;
	display:block;
 }
 
 .button_center_bottom{
	 position: absolute;
    bottom: 0;
	width:100px;
	margin:20px;
/*padding left and right is set to 40px*/
	left: calc(50% - 110px);
 }

/* ------------------------ IMAGE TOGGLE--------------------------------------- */
	
	.float_left{
		float:left;
	}
	.float_right{
		float:right;
	}
	.clear_both{
		clear:both;
	}
	.image_toggle{
		width:100%;
		margin-top:20px;
		/* margin-bottom:60px;
		height: 350px; */
	}
	
	.image_toggle_title{
		
		margin:12px;
		margin-left:1px;
		font-size: 18px;
		font-weight: bold;
	}
	
	.image_toggle_image{
		width:250px;
		height:250px;
		background: #e0e0e0;
		border-radius: 4px;
		border: 1px solid #757575;
		
	}
	.image_toggle_image img{
		width:100%;
		height:100%;
		border-radius: 4px;
	}
	
	.click_background{
		opacity: 0;
		position: absolute;
		border-radius: 50%;
		background-color:lightgrey;
		width:100px;
		height:100px;
		transform: translate(75px, 75px);
		 transition: opacity 0.5s;

	}

	.image_toggle_image:hover{
		cursor: pointer;
	}

	.image_toggle_image:hover .click_background{
		opacity: 1;
	}
	
	
	.click_background:before {
		content: "\f25a";
		font-family: "FontAwesome";
		font-size:2em;
		color: black;
		position:absolute;
		left: calc(50% - 16px);
		top: calc(50% - 16px);
	 }
	
	.image_toggle_text{
		display:none;
		margin-left: 5%;
		padding:10px;
		box-sizing: border-box;
		width:calc(95% - 270px);
		background-color:#d9edf7;
		border: 1px solid #bce8f1;
		border-radius: 4px;
		
		line-height: 1.5; 
	}
	
/* ------------------------ IMAGE WITH POP UPS--------------------------------------- */
	
	.img_with_popups{
		width:100%;
		position: relative;
		
	}
	
	.img_popups_image{
		/* height:600px; */
		/* width:600px; */
		margin-left:auto;
		margin-right:auto;
		margin-bottom: 50px;
		position: relative;
	}
	
	.img_popups_image img{
		width: 100%;
		height: 100%;
	}
	
	.general_click, .general_click_numbered{
		position: absolute;
		border-radius: 50%;
		background-color:#d4d4d4;
		width:50px;
		height:50px;
		cursor:pointer;
		transition: background-color 0.5s;
		font-size: 2.3em;
		text-align: center;
		font-family: arial;
		text-shadow: 2px 2px 2px #999;
		box-shadow: 0px 0px 10px #fff;
	}
	
	.general_click:hover, .general_click:hover{
		background-color:#b7b7b7;
	}
	.general_click:before{
		content: "\f25a";
		font-family: "FontAwesome";
		font-size: 1em;
		color: black;
		position:absolute;
		left: calc(50% - 20px);
		top: calc(50% - 20px);
	}
	
	#popup_blur{
		opacity:0.4;
		position:fixed;
		z-index:100;
		left:0px;
		top:0px;
		height:100%;
		width:100%;
		overflow:hidden;
		background-color: #656565;
	}
	
	
 #img_popup_message{
	position:absolute;
	width: 50%;
	color: #fff;
	z-index:101;
	border-radius:20px;
	animation:fadeIn 10s;
	text-align:center;
 }
 
 #img_popup_message span{
	position: relative;
	margin: 20px 15px;	
		/* width:770px; */
	/* height:402px; */
	display:block;
 }
 
 /* ----------------------- Jargon Buster Box ---------------------- */
 .jargon-buster { position: relative; width: 80%; margin: 0 auto; border: 1px solid #fec927; background-color: #ffe081; box-sizing: border-box; padding: 20px 20px 20px 300px; }
 

 .jargon-buster::before { content: ""; position: absolute; top: 20px; left: 20px; background: url('images/jargon-buster.png') no-repeat; background-size: cover; background-position: center; width: 250px; height: 250px; }

 

 
 /* OPTIONS with images */
 
 
 .flex_grid{
	display:flex;
	 flex-wrap: wrap;
 }
  
 .flex_box{
	flex:1;
	margin-left:10px;
	background-color:#dedede;
	border-radius:15px;
	padding: 10px;
	box-sizing: border-box;
	text-align:center;
 }
 .flex_box .label:hover  label .flex_box{
	background-color:#a8a8a8;
 }
 
 .flex_box .checkmark,  .flex_box .checkmark-radio {
	top: 10px;
	left: 10px;
 
 }
 
 .questions_with_images{
	margin-left:10px;
	width:95%;
	height:95%;
 }
 
/*----- Sign up (DELETE AFTER LAUNCH) ------*/
.signupform { width: 555px; margin: 0 auto; }


@media (max-width:500px) { 
	.signupform { width: 90%; margin: 40px auto 0 auto; }
	#signup input { display:block; width: 80%; margin-left: auto; margin-right: auto; } 
	}