@import "https://www.manageengine.com/css/fonts.css";
body{margin:0;padding:0;}
.af{font-family:'Open Sans',sans-serif;margin:0;padding:0}
.af p,.af a,.af li,.af td,.af td,.af span,.af label{line-height:24px;font-size:14px}
.af h1,.af h2,.af h3,.af h4,.af h5,.af h6{margin:0}
.af ul{padding-left:0;margin:0}
.af li{list-style-type:none}
.af a{text-decoration:none;cursor:pointer;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}
.af a:hover{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}
.af div,.af a,.af ul,.af li,.af input,.af p,.af h1,.af h2,.af span{box-sizing:border-box}
div{box-sizing:border-box;}
.af{width:100%;display:inline-block;float: left;}
.ac{margin:0 auto;position:relative;max-width: 85%;}
.ag .ac, .oth-main .ac{max-width: 1000px;}

.banner{
    background: url(../images/workshop-blue-thank-bg-2020.jpg) no-repeat;
    padding: 25px 0px 60px 0px;
    text-align: center;
    background-size: cover;
}
.red-theme .banner{
    background: url(../images/workshop-red-thank-bg-2020.jpg) no-repeat;
    padding: 25px 0px 60px 0px;
    text-align: center;
    background-size: cover;
}
.orange-theme .banner{
    background: url(../images/workshop-orange-thank-bg-2020.jpg) no-repeat;
    padding: 25px 0px 60px 0px;
    text-align: center;
    background-size: cover;
}
.yellow-theme .banner{
    background: url(../images/workshop-yellow-thank-bg-2020.jpg) no-repeat;
    padding: 25px 0px 60px 0px;
    text-align: center;
    background-size: cover;
}
.banner .logo {
    float: left;
    width: 180px;
    height: 52px;
    background: url(../images/workshop-sprite-2020.png) no-repeat;
    background-size: 756px;
    background-position: -417px -116px;
}
.red-theme .logo {
    background-position: -453px -186px;
    background-size: 830px;
}
.banner h1{
    color: #fff;
    font-weight: 700;
    font-size: 42px;
    width: 100%;
    float: left;
}
.yellow-theme .banner h1{
color: #1212b3;
}
.banner p{
    color: #ffea00;
    font-size: 24px;
    line-height: 35px;
    width: 100%;
    float: left;
    margin-bottom: 0px;
    font-weight: 300;
}

.rec{
    background: #fafafa;
    padding: 70px 0px;
}
.rec h2{
    text-align: center;
    font-size: 28px;
    line-height: 32px;
    padding-bottom: 25px;
}
.rec ul{
    margin: 0 auto;
    display: table;
    width: 70%;
}
.rec ul li{
    float: left;
    width: 33.333%;
}
.rec ul li div{
    background: #fff;
    border: 1px solid #e6e6e6;
    margin: 15px;
    padding: 30px;
    border-radius: 7px;
    height: 290px;
    position: relative;transition: all 0.5s ease;
}
.rec ul li div:hover{transition: all 0.5s ease;transform: translateY(-5px);box-shadow: 0px 17px 21px -16px #1b374c8c;}

.rec ul li div h4{
    font-size: 20px;
    font-weight: 600;
    display: inline-block;
    width: 100%;
    padding-top: 15px;
}
.rec ul li div p{
    color: #37444a;
    font-size: 14px;
    font-weight: 500;
}
.rec ul li div span{
    color: #0e73b0;
    text-decoration: underline;
}
.rec ul li div a{
    position: absolute;
    width: 100%;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}
.rec ul li div i{
    float: left;
    width: 58px;
    height: 50px;
    background: url(../images/workshop-sprite-2020.png) no-repeat;
    background-size: 638px;
    background-position: -282px -643px;
}
.rec ul li:nth-child(2) div i{
    background-position:-345px -643px;
}
.rec ul li:nth-child(3) div i{
    background-position: -401px -643px;
}

.red-theme .rec ul li div i{
    float: left;
    width: 58px;
    height: 50px;
    background: url(../images/workshop-sprite-2020.png) no-repeat;
    background-size: 638px;
    background-position: -464px -705px;
}
.red-theme .rec ul li:nth-child(2) div i{
    background-position:-345px -705px;
}
.red-theme .rec ul li:nth-child(3) div i{
    background-position: -401px -705px;
}


.orange-theme .rec ul li div i{
    float: left;
    width: 58px;
    height: 50px;
    background: url(../images/workshop-sprite-2020.png) no-repeat;
    background-size: 638px;
    background-position: -464px -774px;
}
.orange-theme .rec ul li:nth-child(2) div i{
    background-position: -282px -774px;
}
.orange-theme .rec ul li:nth-child(3) div i{
    background-position: -401px -774px;
}



.yellow-theme .rec ul li div i{
    float: left;
    width: 58px;
    height: 50px;
    background: url(../images/workshop-sprite-2020.png) no-repeat;
    background-size: 638px;
    background-position: -462px -840px;
}
.yellow-theme .rec ul li:nth-child(2) div i{
    background-position:-345px -838px;
}
.yellow-theme .rec ul li:nth-child(3) div i{
    background-position: -282px -838px;
}



.res{
    padding: 70px 0px;
}
.res h2{
    text-align: center;
    font-size: 28px;
    line-height: 32px;
    padding-bottom: 25px;
}
.res .ac div{
    background: url(../images/workshop-blue-footer-bg-2020.png) no-repeat;
    /* padding: 25px 0px 60px 0px; */
    text-align: center;
    background-size: 100% 100%;
    position: relative;
    padding: 70px 30px;
    width: 75%;
    margin: 0 auto;
    border-radius: 8px;
    }
.red-theme .res .ac div{
    background: url(../images/workshop-red-footer-bg-2020.png) no-repeat;
    /* padding: 25px 0px 60px 0px; */
    text-align: center;
    background-size: 100% 100%;
    position: relative;
    padding: 70px 30px;
    width: 75%;
    margin: 0 auto;
    border-radius: 8px;
    }
.orange-theme .res .ac div{
    background: url(../images/workshop-orange-footer-bg-2020.png) no-repeat;
    /* padding: 25px 0px 60px 0px; */
    text-align: center;
    background-size: 100% 100%;
    position: relative;
    padding: 70px 30px;
    width: 75%;
    margin: 0 auto;
    border-radius: 8px;
    }
	
.yellow-theme .res .ac div{
    background: url(../images/workshop-yellow-footer-bg-2020.png) no-repeat;
    /* padding: 25px 0px 60px 0px; */
    text-align: center;
    background-size: 100% 100%;
    position: relative;
    padding: 70px 30px;
    width: 75%;
    margin: 0 auto;
    border-radius: 8px;
    }
.res div h4{
    color: #fff;
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 25px;
    line-height: 40px;
}
.res div a{
    background: #ffcf29;
    color: #000;
    display: inline-block;
    padding: 10px 30px;
    border-radius: 2px;
    font-size: 16px;
    font-weight: 600;
}
.res .ac div:hover a{
    background: #FFEB3B;
    box-shadow: 0px 14px 21px -7px #181c1f7a;
    transform: translateY(-4px);
}
.yellow-theme .res div a{
background:#1212b3;
color:white;
}
.yellow-theme .res .ac div:hover a {
    background: #5d5dcc;
    box-shadow: 0px 14px 21px -7px #181c1f7a;
    transform: translateY(-4px);
}
.cr{background:#f3f3f3}
.cr p{margin:0;text-align:center;font-size:13px;color:#a2a2a2;padding:8px 0}
span#backToTop {
    opacity: 0 !important;
    display: none !important;
}


/* resource section */

.resource-section{display:inline-block}
.text-center {text-align: center}
.width-70{width:80%;margin: auto;}
.resource-section .title{font-family:'Open Sans',sans-serif;font-size:30px;line-height:39px;margin-top:80px;margin-bottom:45px}
.resource-section ul.m-auto{margin:auto;text-align:center;display:inline-block;clear:both;padding:0;    margin-bottom: 30px;border-bottom:1px solid rgba(0,0,0,0.2);}
.resource-section ul.m-auto li{float:left;padding:0 60px;font-family:'Open Sans',sans-serif;line-height:60px;font-size:23px;cursor:pointer;transition: .2s;list-style: none;    opacity: 0.7;}
.resource-section ul.m-auto li.current{border-bottom:3px solid #005fdc;font-weight:600;    opacity: 1;}
.resource-section ul.m-auto li:hover{border-bottom:3px solid #005fdc;   opacity: 1;}
.resource-area .width-33{padding:15px;width:33%;float:left}
.resource-area .width-50{padding:15px;width:50%;float:left}
.box-border{border:1px solid rgba(0,0,0,0.2);border-top-right-radius:6px;border-top-left-radius:6px}
.res-image{height:165px;width:100%;background-image:url(https://www.manageengine.com/products/ad-manager/solutions/images/active-directory-education-resources-sprite.png);background-size:1243px;background-repeat:no-repeat;background-position:bottom;border-top-right-radius:6px;border-top-left-radius:6px}
.res-image-1{background-position:-43px -47px}
.res-image-2{background-position:-444px -47px}
.res-image-3{background-position:-848px -47px}
h4.res-title{padding:40px 33px 0;font-family:'Open Sans',sans-serif;font-weight:700;font-size:18px;line-height:27.52px;margin-top:0;margin-left:0}
.box-border{position: relative;}
.box-border p{padding:0 33px;padding-bottom:66px;font-family:'Open Sans',sans-serif;font-size:16px;line-height:25.52px}
.box-border a{text-align:right;float:right;position:relative;top:-44px;right:22px;font-family:'Open Sans',sans-serif;color:#2c66dd}
.box-border a:last-child {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
	cursor: pointer;
}
.video{height:165px;position:relative;overflow:hidden;border-radius:3px}
.video-popup .video{overflow:visible}
.videoTrigger{width:100%;height:100%;position:absolute;cursor:pointer}
.videos .box-border{min-height:320px}
.resource-area{display: none}
.whitepaper{display: block;}

/* resource section end */

@media screen and (max-width:1550px) {
    .rec ul{width:90%;} 
}
@media screen and (max-width:1300px) {
    .rec ul{width:100%;} 
	.width-70{width:100%}
}
@media screen and (max-width:1050px) {
    .banner h1{padding-top:25px;}
    .banner .logo{float: initial;margin: 0 auto;display:table;}
}
@media screen and (max-width:992px) {
    .rec ul li {
    width: 50%;
}
.resource-area .width-33 {
    padding: 15px;
    width: 50%;
    float: left;
}
.resource-section ul.m-auto li {
    float: left;
    padding: 0px 20px;
}
}
@media screen and (max-width:767px) {
    .rec ul li {
    width: 100%;
}
    .rec ul li div{height:auto;}
    .banner p{font-size: 20px;}
    .banner h1{font-size: 32px;}
    .res .ac div{width:80%;}
    .rec ul li div p {
    color: #37444a;
    line-height: 32px;
}
.resource-area .width-33 {
    padding: 15px;
    width: 100%;
    float: left;
}
}

@media screen and (max-width:480px) {
    .rec ul li div{text-align: center;}
    .rec ul li div i{
        float: initial;
        margin: 0 auto;
        display: table;
    }
    .res .ac div{width:90%;}
}