/*
Theme URI: http://saltedstone.com/
Author: the Saltedstone team (AW)
Author URI: http://saltedstone.com/
Description: Dedicated style for all edge pages.
Templates: product-edge.php;
Version: 1.0
Date: 5/28/2020
*/

/* general setting ---------------------- */
/*.edge-page .sec-wrap .pcenter{ max-width:1295px; }*/
.op-75{ opacity: 0.75; }
.sec-wrap{ padding:180px 0; background-position: center center; background-repeat: no-repeat; background-size:cover; }
.sec-wrap .h2{ margin-bottom:30px; }

.hero-edge .hero-copy{ opacity:1; }

.section-intro ul{ list-style: none; margin-left:0; }
.section-intro ul li{ position:relative; padding-left:1.25em; margin-bottom:3px; }
.section-intro ul li:before{ content:"•"; color:#4A90E2; line-height: 1.6; position: absolute; left:0; top:0; }

/* threats section ---------------------- */
.phrase-wrap .phrase-block{ display: flex; justify-content: center; align-items: center; max-width: 276px; padding:23px 5% 13px; font-size:18px; font-weight:600; color:#2A2A2A; background-color: #FFFFFF; box-shadow: 0 0 12px 0 rgba(83, 107, 145, 0.25); position: relative; }
.phrase-wrap .phrase-block:before{ content: ""; display:inline-block; width:34px; height:34px; position: absolute; top:-17px; left:calc(50% - 17px); background:url(../images/icon/icon-search.svg) center center no-repeat; background-size:100% auto;  }
.phrase-slide-inner.display-flex{ max-width: 600px; padding-top:20px; margin:0 auto; }
.phrase-slide-inner .phrase-wrap{ padding:0 10px; box-sizing: border-box; }
.phrases-wrap .slick-dots li button:before{ font-size:16px; color:#A2B5E9; opacity: 0.16; }
.phrases-wrap .slick-dots li.slick-active button:before{ color:#A2B5E9; opacity:1; }

@media only screen and (min-width:921px){
	.sec-wrap.sec-catchThreats{ padding-bottom:100px; }
}
@media only screen and (max-width:920px){
	.sec-wrap .section-img{ display: block; margin-left:auto; margin-right:auto; }
	.phrase-slide-inner.display-flex{ display:flex; flex-wrap: wrap; }
	.phrase-slide-inner .phrase-wrap{ width:50%; }
}

/* detectionWindow section ---------------------- */
.sec-detectionWindow{ position:relative; overflow: hidden; }
.sec-detectionWindow .sec-img{ width:100%; text-align: center; position: absolute; left:0; bottom:-156px; }
.sec-detectionWindow .section-header{ max-width: 1074px; margin-bottom:104px; }
.dw-items .item-cat{ display: block; font-size:28px; font-weight: 700; line-height: 1.357; margin-bottom:19px; }
.dw-items ul{ list-style: none; margin:0 0 40px; }
.dw-items ul li{ font-size:21px; margin-bottom: 10px; opacity:0.75; }
.dw-item .pointer{ display:none; }

.dw-items .slick-prev:before, .dw-items .slick-next:before{ display: none; }
.dw-items .slick-arrow { width: 36px; height: 36px; top:40%; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0,0); }
.sec-detectionWindow .dw-items .slick-prev { background: url(../images/icon-arrow-pre.svg) center center no-repeat; }
.sec-detectionWindow .dw-items .slick-next { background: url(../images/icon-arrow-next.svg) center center no-repeat; }

@media only screen and (min-width:1025px){
	.dw-items ul li{ position:relative; padding-left:1.75em; }
	.dw-items ul li:before{ content:"•"; color:#4A90E2; line-height: 1.6; position: absolute; left:0; top:0; }
	.dw-item .pointer{ display:block; padding-bottom:170px; position:relative; }
	.dw-item .pointer img{ position:absolute; left:0; top:0; max-width:110%; }
	.dw-item-1 .pointer img{ max-width: 215%; }
	.dw-item-4 .pointer img{ left:inherit; right:9%; max-width: 122%; }
}
@media only screen and (max-width:1024px){

	.sec-detectionWindow .entry{ padding-bottom:10px; }
	.sec-detectionWindow .section-header{ margin-bottom:50px; }
	.sec-detectionWindow  .dw-items{ max-width:320px; margin:0 auto; }
	.dw-item{ text-align: center; }
	.dw-items ul li { margin-bottom:5px; }

}

@media only screen and (max-width:920px){
	.sec-detectionWindow .entry{ padding-bottom:60px; }
}
@media only screen and (max-width:767px){
	.sec-detectionWindow .sec-img{ bottom:-12%; }
}

/* customer quote section ---------------------- */
.sec-customerQuote .quote{ max-width:700px; font-size:30px; line-height:1.4; margin-bottom:28px;  }
.sec-customerQuote .quote-wrap .author-info{ font-size:24px; font-weight:700; text-transform: none; }

@media only screen and (min-width:921px){
	.sec-wrap.sec-customerQuote{ padding:50px 0 0;}
	.sec-customerQuote .entry,
	.sec-customerQuote .quote-wrap{ position: relative; }
	.sec-customerQuote .entry:before,
	.sec-customerQuote .quote-wrap:after{ content:""; display:inline-block; width:138px; height:125px; position:absolute; }
	.sec-customerQuote .entry:before{ left:0; top:0; background:url(../images/icon/icon-Quotemark_L.svg) center center no-repeat; }
	.sec-customerQuote .quote-wrap:after{ top:72%; right:0; background:url(../images/icon/icon-Quotemark_R.svg) center center no-repeat; }

}

@media only screen and (max-width:920px){
	.sec-customerQuote .author-img{ display: none; text-align: center; margin-bottom:30px; }
	.sec-customerQuote .quote-wrap{ padding-top:20px; }

}

/* threat hunt section ---------------------- */
.sec-threatHunt .section-intro{ max-width:627px; }

@media only screen and (min-width:921px){
	.sec-wrap.sec-threatHunt{ padding-top:0; padding-bottom:0; overflow: hidden; }
	.sec-wrap.sec-threatHunt .section-img.flex-5{ padding-top:135px; }
	.sec-threatHunt .section-img img{ margin-bottom:-37px; }
}

/* event logs section ---------------------- */
.sec-eventLogs .section-header{ max-width:1024px; }
.sec-eventLogs .section-img{ max-width:100%; margin:0 auto; }

@media only screen and (min-width:921px){
	.sec-wrap.sec-eventLogs{ padding:190px 0 144px; }
	.sec-eventLogs .section-header{ margin-bottom:79px; }

}


/* SIEM section ---------------------- */
.sec-siem .section-header{ max-width: 575px; margin: 0; }
.sec-siem .h2{ margin-bottom:30px; }
.siem-items{ max-width: 537px; }
.siem-item{ font-size:0; margin-bottom:54px; }
.siem-item .item-icon{ display: inline-block; vertical-align: top; width:64px; padding-right:33px; }
.siem-item .item-details{ display: inline-block; vertical-align:top; width:calc(100% - 97px); font-size:18px; }
.siem-item .h4{ margin-bottom:8px; }

@media only screen and (min-width:921px){
	.sec-wrap.sec-siem{ padding-bottom:100px; }

}


/* awareness section ---------------------- */
.sec-awareness .section-header{ max-width:100%; }
.awareness-nav{ list-style: none; margin: 0; font-size:0; }
.awareness-nav li{ display: inline-block; vertical-align: top; padding:0 20px; font-size:30px; }
.awareness-nav li span{ border-bottom:3.75px solid transparent; cursor: pointer; }
.awareness-nav li.active span{ font-weight:700; border-color:#D21A27; color:#D21A27; }
.awareness-items .screenshot{ display:block; max-width: 952px; margin:0 auto; }
.awareness-items .screenshot:not(.active){ display: none; }


/* investigations section ---------------------- */
.sec-investigations{ overflow: hidden; }
.sec-investigations .section-header{ max-width:766px; margin:0 0 67px; }
.investigations-nav{ list-style: none; margin: 0; padding-top:18px; }
.investigations-nav .invet-item{ display: block; font-size:0; margin-bottom:30px; cursor:pointer; }
.investigations-nav .invet-item .num{ display: inline-block; width:85px; height:94px; line-height: 1; padding:23px 46px 0 0; text-align: center; font-size:47px; font-weight:700; position: relative; }
.investigations-nav .invet-item .num:before{ content:""; display:inline-block; width:178px; height:131px; position: absolute; left: 0; top:0;
background:url(../images/icon/icon-hexagon-blue.svg) 0 0 no-repeat; }
.investigations-nav .invet-item .invest-name{ display: inline-block; vertical-align: top; width:calc(100% - 131px); font-size:21px; padding-top:15px; }
.investigations-nav .invet-item.active .invest-name{ font-weight:700; }
.investigation-items .screenshots{ position:relative; }
.investigation-items .screenshot{ display: block; opacity: 1; }
.investigation-items .screenshot .popup,
.investigations-nav .mobile.item-img .popup{ display:inline-block; position: absolute; top:46%; left:7%; margin-right:-45px; }
.investigation-items #invest-1.screenshot .popup,
.investigations-nav #invest-1.mobile.item-img .popup{ top:48%; left:3%; }
.investigation-items #invest-2.screenshot .popup,
.investigations-nav #invest-2.mobile.item-img .popup{ top:calc(50% - 120px); left:calc(50% - 164px); margin: auto; }
.investigation-items #invest-2.screenshot{ position:relative; }
.investigation-items #invest-2.screenshot:before{ content:url(../images/icon/icon-click.svg); opacity:0; position: absolute; top:34%; left:5%; animation: hide-popup 2.6s forwards; animation-delay: 0.5s; }
.investigation-items .screenshot .popup img{ display: inline-block; position: relative; opacity:0;  }
.investigation-items .screenshot.active .popup img{ animation: show-popup 0.7s forwards; animation-delay: 1s; }
.investigation-items .screenshot:not(.active){ display: none; opacity:0; }

.investigations-nav .slick-dots li button:before{ font-size:16px; color:#A2B5E9; opacity: 0.16; }
.investigations-nav .slick-dots li.slick-active button:before{ color:#A2B5E9; opacity:1; }
.investigations-nav .mobile.item-img{ position:relative; }
.investigations-nav .mobile.item-img:not(#invest-2) > img{ max-width:calc(100% - 15px); }

/**
 * Popup animations.
 * Based on Sweet Alert: "https://t4t5.github.io/sweetalert/"
 */

@keyframes show-popup {

	0% {
		transform: translate(0%, 0%)
		scale(0);
		opacity: 1;
	}
	45% {
		transform: translate(0%, 0%)
		scale(1.00);
		opacity: 1;
	}
	80% {
		transform: translate(0%, 0%)
		scale(1);
		opacity: 1;
	}
	100% {
		transform: translate(0%, 0%)
		scale(1);
		opacity: 1;
	}
}

@keyframes hide-popup {
	0% {
		transform: translate(0%, 0%)
		scale(1);
		opacity: 1;
	}
	100% {
		transform: translate(0%, 0%)
		scale(.5);
		opacity: 0;
	}
}

@media only screen and (min-width:921px){
	.investigations-nav .invet-item:not(.active){ opacity: 0.50; }
	.sec-investigations .screenshots{ margin-left:5%; }
}
@media only screen and (max-width:920px){
	.sec-investigations .decktop{ display: none; }
	.sec-investigations .mobile{ display: block; }
	.sec-investigations .section-header{ margin-bottom:0; }
	.sec-investigations .section-intro{ margin-bottom:20px; }
	.header-wrap{ display: block; max-width: 402px; margin:0 auto; }
	.investigations-nav .invet-item .invest-name{ font-weight: 700; }

	.investigations-nav .mobile.item-img{ padding:0 10px; }
	.investigations-nav .mobile.item-img .popup{ margin-right: 0; }
	.investigations-nav #invest-2.mobile.item-img .popup{ max-width: 55%; top:23%; left:30%; }

}

/* expert section ---------------------- */
.sec-experts .section-header{ max-width:1020px; }
.expert-block{ max-width: 283px; margin:0 auto 30px; }
.expert-block .heashot{ display: block; width:187px; height:187px; border-radius: 50%; overflow: hidden; margin:0 auto 20px; }
.expert-block .name{ font-size:21px; margin-bottom:2px; }
.expert-block .job-title{ font-size:21px; }

@media only screen and (min-width:921px){
	.sec-experts .section-intro{ margin-bottom:63px; }
	.expert-block .heashot{ margin-bottom:30px; }
}

/* attacks section ---------------------- */
.sec-attacks .section-header{ max-width:100%; }
.attack-block{ max-width:375px; margin:0 auto 30px; }
.attack-block .cat{ display: block; font-size:16px; font-weight:700; line-height: 1.5; letter-spacing: 2.29px; text-transform: uppercase; margin-bottom:12px; }
.attack-block .item-img{ display: block; width:100%; height:200px; overflow: hidden; margin-bottom:25px; }
.attack-block .h5{ max-width:372px; margin-bottom:23px; font-size:20px; line-height: 1.35; color:#55585B; }
.attacks .flex-item:first-child .attack-block .h5{ max-width: 322px; }
.attack-block .section-cta-wrap{ border-top:1px solid #AFB4B7; padding-top:17px; }
.attack-block .item-link{ font-size:23px; font-weight:400; text-transform: uppercase; }
.attack-block .item-link:after{ content:"\f105"; font-family: 'FontAwesome'; font-size:16px; font-weight:600; padding-left:9px; position:relative; top:-1px; }


@media only screen and (min-width:921px){
	.sec-attacks .section-header .h2{ margin-bottom:63px; }
	.attack-block .h5{ min-height:108px; margin-bottom:43px; }

}
@media only screen and (min-width:1025px){
	.attack-block .h5{ min-height:81px; }
}


/* FAQ section ---------------------- */
.sec-wrap.sec-faq{ padding-top:0; }
.sec-faq .entry{ border-top:1px solid #979797; padding-top:50px; }
.sec-faq .faq_ul{ margin:0;}

@media only screen and (min-width:921px){
	.sec-faq .entry{ padding-top:154px; }
}

/* CTA banner section ---------------------- */
.sec-ctab .h2{ margin-bottom:26px; }


/* footer section ---------------------- */
.page-template-product-edge .site-footer { min-height: inherit; margin-top: -0; padding:40px 0 30px; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

@media only screen and (min-width:921px){
	.display-flex{ display: flex; flex-wrap: wrap; margin:0 -15px; }
	.display-flex.align-center{ align-items:center; }
	.display-flex.space-center{ justify-content: center; }
	.display-flex.space-around{ justify-content: space-around; }
	.display-flex.space-between{ justify-content: space-between; }
	.flex-item{ display: block; padding:0 15px; box-sizing: border-box; }
	.flex-2{ width:16.67%; }
	.flex-3{ width:25%; }
	.flex-4{ width:33.33%; }
	.flex-5{ width:41.67%; }
	.flex-6{ width:50%; }
	.flex-7{ width:58.33%; }
	.flex-8{ width:66.67%; }
	.flex-9{ width:75%; }
	.flex-10{ width:83.33%; }

	.hero-edge .video-wrap{ position:relative; top:30px; }

	.sec-siem .flex-6:last-child{ max-width:542px; }

	.sec-wrap.sec-ctab{ padding:200px 0; }
	.sec-ctab .h2{ font-size:56px; margin-bottom:46px; }
	.sec-ctab .btn{ width:330px; height:75px; line-height:73px; }

}

@media only screen and (max-width:920px){
	.sec-wrap{ padding:60px 0; }
	.sec-wrap .section-header{ max-width:100%; text-align: center; }
	.sec-wrap .section-intro,
	.sec-wrap .section-img{ margin-left: auto; margin-right:auto; text-align: center; }

	.inner-hero.hs-video.hero-edge{ padding-bottom: 100px; }
	.hero-edge .video-wrap{ margin-bottom:30px; }

	.sec-customerQuote .quote,
	.siem-items{  margin-left: auto; margin-right:auto; }

}

@media only screen and (max-width:767px){
	.desktop{ display:none!important; }
}