/* lesson methods */

/* what */
.lesson.methods .what h2 {
	padding-bottom:35px;
}

.lesson.methods h3 {
	font-size:26px;
	line-height:31.47px;
	color:#192333;
}

.lesson.methods .wrap-img-ph {
	background-color:#f9f9f9;
	border-radius:12px;
	text-align:center;
}
.lesson.methods .wrap-img-ph img {
	max-width:84%;
}

.lesson.methods .what .col-x.l {
	width:46%;
}
.lesson.methods .what .col-x.r {
	width:54%;
	padding-left:48px;
}

.lesson.methods .what .col-x.r h3 {
	padding-bottom:17px;
}

.lesson.methods p {
	font-size:18px;
	line-height:27px;
	font-weight:400;
	color:#7c7c7c;
}

/* responsive methods - what */
@media screen and (max-width:1024px) {
	.lesson.methods .what h2 {
		padding-bottom:17px;
	}
}

@media screen and (max-width:768px) {
	.lesson.methods .what .col-x.l,
	.lesson.methods .what .col-x.r {
		width:100%;
		padding-left:0;
	}
	
	.lesson.methods .what .col-x.r h3 {
		padding-top:16px;
	}

	.lesson.methods p {
		font-size:16px;
		line-height:24px;
	}
}

@media screen and (max-width:480px) {
	.lesson.methods .what .col-x.r h3 {
		font-size:18px;
		line-height:21.78px;
	}
}


/* 3 columns */
.lesson.methods .a-methods h2 {
	padding-bottom: 20px;
}

.lesson.methods .a-methods h3 {
	padding-top:17px;
}

.lesson.methods .row.row3col {
	margin-left:-11px;
	margin-right:-11px;
}
.lesson.methods .col-4.col4method {
	padding-left:11px;
	padding-right:11px;
}

.lesson.methods .col4method .wrap {
	border: 1px solid #e7e7e7;
	border-radius: 12px;
	padding: 23px 23px;
}

.lesson.methods h4 {
	font-size:22px;
	font-weight:800;
	line-height:26.4px;
	padding:18px 0 14px 0;
}

.lesson.methods .col4method p { padding-top:13px; }

.lesson.methods .pvspace{
	height:13px;
}

.lesson.methods .wrap-read-more {
	padding-right:8px;
}

.lesson.methods div.read-more {
	display:inline-block;
	cursor:pointer;
}

.lesson.methods div.read-more span {
	display:inline-block;
	vertical-align:middle;
	font-size:16px;
	font-weight:700;
	font-family:'Nunito Sans';
	color:#1c7b82;
}

.lesson.methods div.read-more:hover span {
	color:#186c72;
}

.lesson.methods div.read-more img {
	vertical-align:middle;
	margin-left:10px;
}

/* modal */
.lesson.methods .modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1050;
	display: none;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	outline: 0;
	background: rgba(0, 0, 0, 0.43);
}

.lesson.methods .modal.in .modal-dialog {
	display:flex;
	align-items:center;
	height:100%;
	-webkit-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	transform: translate(0, 0);
	width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.lesson.methods .modal-content {
	position: relative;
	background-color: #fff;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 6px;
	outline: 0;
	box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}

.lesson.methods .modal-body {
	position: relative;
	padding: 4px 24px 24px 24px;
}

.lesson.methods .modal-body:before {
	content:"×";
	display:block;
	position:absolute;
	top:14px; right:12px;
	font-size:34px;
	font-weight:500;
	line-height:30px;
	height:30px; width:30px;
	color:#555555;
	cursor:pointer;
	z-index:1;
}

/* responsive for 3 columns */
@media screen and (max-width:1024px) {
	.lesson.methods .a-methods h2 {
		padding-bottom: 17px;
	}

	.lesson.methods .col4method .wrap {
		padding: 20px 20px;
	}

	.lesson.methods .col4method .wrap > img { width:48px; }
}

@media screen and (max-width: 768px) {
	.lesson.methods .col4method .wrap > img,
	.lesson.methods .a-methods h3 {
		display:inline-block;
		vertical-align:middle;
	}
	.lesson.methods .a-methods h3 {
		font-size:24px;
		line-height:29px;
		padding-left:7px;
		padding-top:8px;
	}

	.lesson.methods .col-4 {
		float: none;
		width: 100%;
		margin-bottom: 16px;
	}
	
	.lesson.methods .wrap-read-more {
		text-align:right;
	}

    .lesson.methods .modal.in .modal-dialog {
		width: 90%;
    }
}

@media (max-width: 640px) {
	.lesson.methods .modal.in .modal-dialog p {
		font-size:16px;
		line-height:22px;
	}
}

@media screen and (max-width: 480px) {
	.lesson.methods .col4method .wrap {
        padding: 15px 15px;
    }

	.lesson.methods .col4method .wrap > img { width:32px; }

	.lesson.methods .a-methods h3 {
		font-size:18px;
		line-height:21.78px;
		padding-left:7px;
	}

	.lesson.methods .modal.in .modal-dialog p {
		font-size: 14px;
		line-height: 20px;
	}
}

@media screen and (max-width: 389px) {
	.lesson.methods .col4method .wrap {
        padding: 10px 10px;
    }
}


/* 'Everyone is a Target' */
.lessons .lesson.methods .row-body.row-body-2.row-target {
	padding-bottom:20px;
}

.lesson.methods .row-target h2 span {
	display: inline-block;
	font-size:inherit;
	line-height:80px;
	background-image: url(../img/methods/targetx2.png);
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	padding: 0 25px;
}

/* responsive for row-target */
@media screen and (max-width:768px) {
	.lesson.methods .row-target h2 span {
		line-height:66px;
		padding: 0 17px;
	}
}

@media screen and (max-width:480px) {
	.lesson.methods .row-target h2 {
		padding-bottom:8px;
	}
	
	.lesson.methods .row-target h2 span {
		line-height:49px;
		padding: 0 17px;
	}
}


/* 'whatlook' */
.lesson.methods .phishing .col-7 {
	padding-right:25px;
}

.lesson.methods .phishing .col-7 h2 {
	padding-bottom:18px;
}

.lesson.methods .phishing .col-whatlook {
	text-align:center;
}
.lesson.methods .phishing .col-whatlook .wrap {
	background-color:#e9f7f8;
	border-radius:6px;
	padding:40px 20px;
}

.lesson.methods .phishing .col-whatlook h4 {
	color:#1e1e1e;
	font-family:'Poppins';
	padding-top:0;
	padding-bottom:5px;
}
.lesson.methods .phishing .col-whatlook p {
	font-weight:600;
}

/* responsive for 'whatlook' */
@media screen and (max-width:768px) {
	.lesson.methods .phishing .col-7,
	.lesson.methods .phishing .col-5 {
		width:100%;
		padding-right:0;
	}
	
	.lesson.methods .phishing .col-whatlook {
		margin-top:15px;
	}
	
	.lesson.methods .phishing .col-whatlook .wrap {
		padding:24px 20px;
	}
}


/* emailbox */
.lesson.methods .emailbox {
	border: 1px solid #e7e7e7;
	border-radius: 12px;
	padding: 0;
	box-shadow: 3px 0 12px 1px rgba(218, 219, 223, 0.6);
	overflow: hidden;
	margin-top:20px;
}

.lesson.methods .emailbox .lmenu.col-x {
	padding-left:0;
	padding-right:0;
}

.lesson.methods .emailbox .lmenu .wrap {
	width: 212px;
	height: 622px;
	background-color: #f9f9f9;
	border-radius: 12px 0 0 12px;
}

.lesson.methods .emailbox .lmenu .item {
	background-color: #f9f9f9;
	border-right: 1px solid #e7e7e7;
	font-size: 24px;
	font-weight: 600;
	line-height: 32.74px;
	color: #7c7c7c;
	padding: 14px 24px;
}
.lesson.methods .emailbox .lmenu .item.inbox {
	background-color: #fff;
	border-bottom: 1px solid #e7e7e7;
	border-right: 0 none;
	color: #1e1e1e;
	border-radius: 12px 0 0 0;
}

.lesson.methods .emailbox .rbody {
	width: 888px;
	padding: 47px 27px 0 27px;
	overflow: visible;
}

.lesson.methods .emailbox .em-block {
	font-family:'Nunito Sans';
	padding-bottom: 16px;
	font-size: 18px;
}

.lesson.methods .emailbox span.bold {
	font-family:'Nunito Sans';
	font-size:inherit;
	font-weight: 700;
	color: #434343;
}

.lesson.methods .emailbox span.toexplain {
	color: #555555;
	border-bottom: 2px solid #27acb6;
	font-family:'Nunito Sans';
	font-size:18px;
}

.lesson.methods .emailbox span.toexplain a {
	cursor:unset;
}

.lesson.methods .emailbox span.toexplain1 { padding-right:50px; }
.lesson.methods .emailbox span.toexplain2 { padding-right:50px; }
.lesson.methods .emailbox span.toexplain3 { padding-right:50px; }
.lesson.methods .emailbox span.toexplain4 { padding-right:80px; }
.lesson.methods .emailbox span.toexplain5 { padding-right:119px; }
.lesson.methods .emailbox span.toexplain6 { padding-right:50px; }

.lesson.methods .emailbox .explainer {
	display:inline-block;
	position:absolute;
	font-family:'Nunito Sans';
	font-size:16px;
	font-weight:700;
	line-height:16px;
	color:#fff;
	background-color:#27acb6;
	border-radius:6px 6px 6px 6px;
	padding:9px 10px;
	z-index:1;
}

.lesson.methods .emailbox .explainer1 { top:-4px; right:-199px; }
.lesson.methods .emailbox .explainer2 { top:-4px; right:-129px; }
.lesson.methods .emailbox .explainer3 { top:-4px; right:-186px; }
.lesson.methods .emailbox .explainer4 {
	top: 8px;
	right: -110px;
	border-radius: 6px;
	padding-top: 20px;
	padding-bottom: 20px;
	line-height:1.5;
}
.lesson.methods .emailbox .explainer4a { display:none; }
.lesson.methods .emailbox .explainer5 { top:-4px; right:-147px; }

.lesson.methods .emailbox p {
    font-size: 18px;
	font-family:'Nunito Sans';
    padding-bottom: 27px;
	color:#1e1e1e;
}

.lesson.methods .emailbox br.br-600 {
	display:none;
}

.lesson.methods .emailbox .hr {
	clear: both;
	background-color: #e7e7e7;
	height: 1px;
	margin-top: 7px;
	margin-bottom: 20px;
}

/* responsive for emailbox */
@media screen and (max-width: 1440px) {
	.lesson.methods .emailbox .rbody {
		width: 760px;
	}

	.lesson.methods .emailbox .rbody p {
		padding-bottom:18px;
	}
}

@media (max-width: 1279px) {
	.lesson.methods .emailbox .rbody {
		width: 760px;
		padding: 47px 27px 0 27px;
		overflow: visible;
	}
}

@media (max-width: 1200px) {
	.lesson.methods .emailbox .rbody {
		width: 646px;
	}
}

@media screen and (max-width: 1024px) {
	.lesson.methods .emailbox .lmenu .wrap {
		width: 154px;
	}
	
	.lesson.methods .emailbox .lmenu .item {
		font-size: 18px;
	}
	
	.lesson.methods .emailbox .rbody {
		width: 562px;
	}
	
	.lesson.methods .emailbox p,
	.lesson.methods .emailbox a	{
		font-size: 16px;
	}
	
	.lesson.methods .emailbox .explainer4 { right: -61px; }
}

@media screen and (max-width: 800px) {
	.lesson.methods .emailbox .rbody {
		width: 527px;
	}
	
	.lesson.methods .emailbox span.toexplain4 span.stime { display:none; }
}

@media screen and (max-width: 767px) {
	.lesson.methods .emailbox .col-7,
	.lesson.methods .emailbox .col-5 {
		float: none;
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
	
	.lesson.methods .emailbox {
		border: 0 none;
		border-radius: 0;
		box-shadow: none;
	}
	
	.lesson.methods .emailbox .col-x {
		float: none;
		width: 100%;
	}

	.lesson.methods .emailbox .lmenu.col-x {
		padding-left: 0;
		padding-right: 0;
	}

	.lesson.methods .emailbox .lmenu .wrap {
		width: 100%;
		height: auto;
		background-color: #f1f1f1;
		border-radius: 0;
		padding: 5px 0;
	}
	
	.lesson.methods .emailbox .lmenu .item {
		background-color: transparent;
		padding: 2px 8px;
		font-size:18px;
	}

	.lesson.methods .emailbox .lmenu .item,
	.lesson.methods .emailbox .lmenu .item.inbox {
		display: inline-block;
		border: 0 none;
		border-radius: 5px;
		margin-left: 10px;
	}
}

@media (max-width: 639px) {
	.lesson.methods .emailbox .lmenu .item {
		padding: 2px 3px;
		font-size:16px;
		line-height:28px;
	}
/*	.lesson.methods .emailbox span.toexplain4 span.stime { display:none; }*/
}

@media (max-width: 599px) {
	.lesson.methods .emailbox .rbody {
		padding-left:15px;
		padding-right:15px;
	}

	.lesson.methods .emailbox p,
	.lesson.methods .emailbox a,
	.lesson.methods .emailbox span,
	.lesson.methods .emailbox span.bold,
	.lesson.methods .emailbox span.toexplain {
		font-size: 14px;
	}

	.lesson.methods .emailbox .explainer {
		font-size:14px;
		padding:5px 7px;
		border-radius: 6px;
	}
	.lesson.methods .emailbox .explainer1 {
		top:7px;
		right:-149px;
	}
	
	.lesson.methods .emailbox .explainer2 {
		top: -1px;
		right: -62px;
		width: 91px;
		text-align: center;
	}
	
	.lesson.methods .emailbox .explainer3 {
		top: 8px;
		right: -137px;
	}
	
	.lesson.methods .emailbox span.toexplain4 {
		padding-right:0;
	}
	.lesson.methods .emailbox span.toexplain4 a span { display:inline; }
	.lesson.methods .emailbox .explainer4 {
		right:-48px;
		top: 33px;
		padding:15px 7px;
    }
	.lesson.methods .emailbox .explainer4:before {
		content:"";
		display:inline-block;
		position:absolute;
		top:-13px;
		left:50%;
		height:20px; width:2px;
		background-color:#27acb6;
	}
	
	.lesson.methods .emailbox span.toexplain5 {
		display: inline-block;
		padding-right: 80px;
	}
	.lesson.methods .emailbox .explainer5 {
		top: 8px;
		right: -118px;
	}
	
	.lesson.methods .emailbox br.br-600 {
		display:block;
	}
}

@media screen and (max-width: 460px) {
	.lesson.methods .emailbox .em-block {
		padding-bottom: 32px;
	}

	.lesson.methods .emailbox span.toexplain1 {
		padding-right: 10px;
	}

    .lesson.methods .emailbox .explainer1 {
		top: -10px;
		right: -99px;
		width: 100px;
		text-align: center;
	}

	.lesson.methods .emailbox span.toexplain2 {
		padding-right: 0;
	}
	.lesson.methods .emailbox .explainer2 {
		top: 23px;
		right: 35px;
        width:auto;
		text-align: center;
		border-radius: 0 0 6px 6px;
    }

	.lesson.methods .emailbox .explainer3 {
		top: -5px;
		right: -43px;
		width: 82px;
    }
	
	.lesson.methods .emailbox .explainer4 {
		padding: 5px 7px;
		border-radius: 0 0 6px 6px;
		line-height: 16px;
		top: 19px;
		left: 45px;
		right: auto;
	}
	.lesson.methods .emailbox .explainer4a {
		display:inline-block;
		border-radius:0 0 6px 6px;
		top:24px; left:20px;
	}

	.lesson.methods .emailbox .explainer4 br { display: none; }
	.lesson.methods .emailbox .explainer4:before { display:none; }
	.lesson.methods .emailbox span.toexplain4 a span {
		display: none;
    }

	.lesson.methods .emailbox .em-block-it {
		margin-top:12px;
	}
	.lesson.methods .emailbox span.toexplain5 {
		padding-right: 0;
    }
}

@media screen and (max-width: 400px) {
	.lesson.methods .emailbox {
		border: 0 none !important;
	}
	
	.lesson.methods .emailbox .rbody {
		padding-left: 10px;
		padding-right: 10px;
	}
}

@media screen and (max-width: 400px) {
	.lesson.methods .emailbox .rbody {
		padding-left: 0;
		padding-right: 0;
	}
}