/*
	Author: Javed Ur Rehman 
	Website: www.icap.org.pk
*/

body {padding:0px; margin:0px; font-family: "HelvRegularIBM","Helvetica Neue",Arial,sans-serif; color: #323232; font-size: 16px; line-height: 1.625rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
a{-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
ul, li {padding:0px; margin:0px;}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
h1 {color: #262626; margin: 0px; padding-bottom: 20px; line-height: 40px; border-bottom: 1px solid #c3c3c3;}
img {max-width:100%;}
.has_child {position: relative;}
.has_child:hover ul{display:block;}
header {border-bottom: 1px solid #e0e0e0; padding-top: 10px;}
header .head {margin:0px auto; position: relative;}
header .head img {max-width: 100%;}
header .head .right {float:right; padding-top: 15px; position: relative;}
header .head .right ul {list-style: none;}
header .head .right ul li {float:left;}
header .head .right ul li a {text-decoration:none;}
header .head .right span{color: #323232; padding-top:3px; display:block;}

header .head .social ul {list-style: none;}
header .head .social ul li {float:left; padding-right: 10px;}
header .head .social ul li a {text-decoration:none; font-size: 22px; padding: 20px 15px; color: #3F4048;}
.social li a:hover .fb {color: #5470B9;}
.social li a:hover .rt {color: #55acee;}
.social li a:hover .ld {color: #0077B5;}
.social li a:hover .yt {color: #cd201f;}
.social li a:hover .ad {color: #a4c639;}
.social li a:hover .ap {color: #a6b1b7;}

header .head .social {float:right; margin-right: 20px;}
header .head .social span{color: #323232; padding-top:3px; display:block;}
header .head .menu{float: left; clear: both; background: #f3f3f3; border-top-right-radius: 5px; border-top-left-radius: 5px; border: 1px solid #c3c3c3; box-sizing: border-box; border-bottom: none; margin-left: 20px;}
header .head nav ul {list-style: none;}
header .head nav ul li {float: left; border-right: 1px solid #c3c3c3;}
header .head nav ul li a{text-decoration: none; border: 0; border-bottom: 2px solid transparent; box-sizing: border-box; display: inline-block; height: 50px; line-height: 50px; color: #000; padding-left: 13px; padding-right: 12px;}
header .head nav ul li:last-child{border-right:none;}
header .head nav ul li a:hover{border-color: #013763; color:#013763;}
header .head nav ul li a.active{border-color: #013763; color:#013763;}
header .head nav ul li ul {z-index: 10; display:none; width: 220px; position: absolute; background-color: #f2f2f2; border-left: 1px solid #c3c3c3; border-right: 1px solid #c3c3c3; border-top: 1px solid #c3c3c3;}
header .head nav ul li ul li{float:none; border-bottom: 1px solid #c3c3c3; border-right: none}
header .head nav ul li ul li a {display: block; padding: 0px 10px;}
header .head nav ul li ul li a:hover {background:#013763; color:#fff;}
header .head nav ul li ul li a.active {background:#013763; color:#fff;}

header .cover{border-top: 1px solid #e0e0e0;}

.main-container {background-color: #f7f7f7;}
.main-container ol {overflow: hidden;}
.main-container ul {overflow: hidden; padding-left:40px;}
.main-container .maintext .maincon {width:1250px; margin: 0 auto; padding: 60px 0px;}
.main-container .maincon aside {width: 300px; float: left;}
.main-container .maincon aside ul {list-style:none; margin-right:20px; border: 1px solid #c3c3c3; margin-left: 20px; padding-left: 0px; border-radius: 2px;}
.main-container .maincon aside ul li {border-bottom: 1px solid #c3c3c3;}
.main-container .maincon aside ul li:last-child {border-bottom:none;}
.main-container .maincon aside ul li a{text-decoration:none; background: #f3f3f3; padding: 10px; display: block; color: #323232;}
.main-container .maincon aside ul li a:hover{background:#013763; color:#FFF;}
.main-container .maincon aside ul li a.active{background:#013763; color:#FFF;}
.main-container .maintext .text{width:70%; float: left; border: 1px solid #c3c3c3; border-radius: 2px; background: #fff; padding: 20px;}
.main-container .maintext .text a{color: #013763; font-weight: bold; text-decoration: none;}
.main-container .maintext .text a:hover{text-decoration:underline;}

/* Table CSS Start*/
.main-container table {width: 100%; border-collapse: collapse; margin: 30px 0px 30px; background-color: #fff;}
.main-container table tr:nth-of-type(odd) {background: #eee;}
.main-container table th {background: #333; color: white; font-weight: bold;}
.main-container table td, th {padding: 6px 6px 6px 10px; border: 1px solid #ccc; text-align: left;}
/* Table CSS End*/

footer {background: #efefef; padding: 25px 0px; border-top: 1px solid #dddddd;}
.showhide{display:none; background:url(../images/responsive-icon.jpg) no-repeat; width:25px; height:20px; position: absolute; right: -25px; top: 20px; opacity: 1; transition: 1s;}
.showhide:hover {opacity: .8;}

/* Certified Directors CSS Start*/
.certified-list h2 {font-size: 16px; background: #e3e3e3; padding: 10px 0px; margin-bottom: 0px; border: 1px solid #ccc; border-radius: 2px;}
.certified-list h2 .certified-btn {width: 22px; height: 22px; border: none; cursor: pointer; background: #333; color: #fff !important; margin-right: 10px; margin-left: 10px; font-weight: 100; font-family: serif;}
.certified-list h2 .certified-btn:hover {background: #B52025;}
.certified-list ul {list-style: none; padding: 0px;}
.certified-list .heading {list-style: none; background: #B52025; padding: 0px; color: #ffffff; font-weight: bold;}
.certified-list .heading .pic {float: left; text-align: center; width: 160px; padding: 5px 0px; border-right: 1px solid #fff;}
.certified-list .heading .participant {padding: 5px 0px 5px 15px; float: left;}
.certified-list .data {border: 1px solid #ccc; border-bottom: none;}
.certified-list .data:last-child {border-bottom: 1px solid #ccc; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px;} 
.certified-list .data .cd-data-1 {float: left; text-align: center; width: 160px; padding-top: 5px; border-right: 1px solid #ccc; background: #f3f3f3; box-sizing: border-box;}
.certified-list .data .cd-data-1 img{border: 3px solid #7a7a7a;}
.certified-list .data .cd-data-2 {float: left; padding: 5px 0px 5px 15px;}
.certified-list .data .cd-data-2 h3, .certified-list .data .cd-data-2 h4, .certified-list .data .cd-data-2 h5, .certified-list .data .cd-data-2 p {margin:0px;}
.certified-list .data .cd-data-2 h4 {font-weight: normal; color: #B52025;}
.certified-list .data .cd-data-2 h5 {font-weight: bold; font-size: 16px;}
.certified-list .data .cd-data-2 p {font-size: 14px;}
/* Certified Directors CSS End*/

/* Previous Sessions CSS Start*/
.sessionheld {background: #747474; color: #ffffff; border: 1px solid #666; border-radius: 2px; width: 100%; float: left; box-sizing: border-box; margin-bottom: 10px;}
.sessionheld h3 {width: 20%; margin: 0px; float: left; font-size: 17px; text-align: center; padding: 5px 0px; box-sizing: border-box; border-right: 1px solid #fff;}
.sessionheld h3:last-child {border-right:none;}
.sessionheld .session1, .sessionheld .session2 {width: 30%;}
.held-list {float: left; box-sizing: border-box; width: 100%;}
.held-list .dtp {float: left; box-sizing: border-box; width: 100%; background: #e3e3e3; border: 1px solid #ccc; border-radius: 2px;}
.held-list h3 {width: 20%; margin: 0px; float: left; font-size: 15px; text-align: left; padding: 5px 0px 5px 20px; box-sizing: border-box; border-right: 1px solid #c3c3c3;}
.held-list h3:last-child {border-right:none;}
.held-list .session1, .held-list .session2 {width: 30%;}
.held-list h3 button{width: 22px; height: 22px; border: none; cursor: pointer; background: #333; color: #fff !important; margin-right: 10px; font-weight: 100; font-family: serif;}
.held-list h3 button:hover {background: #B52025;}
.held-list .heading {list-style: none; background: #B52025; padding: 0px; color: #ffffff; font-weight: bold; float: left; margin: 0px; box-sizing: border-box; width: 100%;}
.held-list .heading li{float: left; text-align: center; width: 160px; padding: 5px 0px; border-right: 1px solid #fff; box-sizing: border-box;}
.held-list .heading li:last-child {border-right:none;}
.held-list .data{float: left; margin: 0px; padding: 0px; box-sizing: border-box; width: 100%; list-style: none; border: 1px solid #ccc;}
.held-list .data li {float: left; text-align: center; width: 160px; padding: 10px 0px 5px; box-sizing: border-box; border-right: 1px solid #ccc; min-height: 72px;}
.held-list .data li:first-child {padding: 23px 0px 0px;}
.held-list .data li:last-child {border-right:none;}
.held-list .data:last-child {border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top: 0px;}
/* Previous Sessions CSS End*/

/* DTP Held Picture Gallery Plugin CSS Start*/
.image-source-link {color: #98C3D1;}
.mfp-with-zoom .mfp-container, .mfp-with-zoom.mfp-bg {opacity: 0;-webkit-backface-visibility: hidden; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; /* ideally, transition speed should match zoom duration */ }
.mfp-with-zoom.mfp-ready .mfp-container {opacity: 1;}
.mfp-with-zoom.mfp-ready.mfp-bg {opacity: 0.8;}
.mfp-with-zoom.mfp-removing .mfp-container, .mfp-with-zoom.mfp-removing.mfp-bg {opacity: 0;}
/* DTP Held Picture Gallery Plugin CSS End*/

/* Faculty - Trainers Profile CSS Start*/
.faculty {background: #747474; color: #ffffff; border: 1px solid #666; border-radius: 2px; width: 100%; float: left; box-sizing: border-box; margin-bottom: 10px;}
.faculty h3 {width: 33%; margin: 0px; float: left; font-size: 17px; text-align: left; padding: 5px 10px; box-sizing: border-box; border-right: 1px solid #fff;}
.faculty h3:last-child {border-right: none;}
.faculty .desi {width: 34%;}
.faculty_data {float: left; box-sizing: border-box; width: 100%; margin-bottom: 10px;}
.faculty_data .user {float: left; box-sizing: border-box; width: 100%; background: #e3e3e3; border: 1px solid #ccc; border-radius: 2px;}
.faculty_data h3 {width: 33%; margin: 0px; float: left; font-size: 14px; text-align: left; padding: 5px 10px; box-sizing: border-box;}
.faculty_data .desig {width: 34%; border-left: 1px solid #c3c3c3; border-right: 1px solid #c3c3c3;}
.faculty_data h3 button{width: 22px; height: 22px; border: none; cursor: pointer; background: #333; color: #fff !important; margin-right: 10px; font-weight: 100; font-family: serif;}
.faculty_data h3 button:hover {background: #B52025;}
.faculty_data h3:first-child {font-size:16px;}
.faculty_data .user .height2{padding: 15px 10px;}
.faculty_data .user .height3{padding: 30px 10px;}
.faculty_data .user .height4{padding: 50px 10px;}
.faculty_data .user .height62{height: 62px;}
.faculty_data .user .height88{height: 88px;}

.faculty_data .box {display:none; clear:both; border: 1px solid #ccc; border-radius: 2px; border-top: none;}
.faculty_data .mod{width: 150px; float: left; padding: 5px 10px; box-sizing: border-box; font-weight:bold; font-size: 15px;}
.faculty_data .box .height2{padding: 24px 10px;}
.faculty_data .box .height3{padding: 42px 10px;}
.faculty_data .box .height4{padding: 60px 10px;}
.faculty_data .mod_name{padding: 0px; border-left: 1px solid #ccc; box-sizing: border-box; list-style: none;}
.faculty_data .mod_name li {border-bottom: 1px solid #ccc; font-size: 14px; padding: 5px;}
.faculty_data .mod_name li:last-child {border-bottom: none;}
/* Faculty - Trainers Profile CSS End*/

/* Form CSS Start*/
.form table {border: 1px solid #ccc;}
.form table tr:nth-of-type(odd) {background: #f9f9f9;}
.form table td {padding: 6px 10px; border:none; border-bottom: 1px solid #ccc;}
.form table td:first-child {width:250px;}
.form label {font-weight: bold; color: #454545; font-size: 14px;}
.form select {width: 300px; border: 1px solid #ccc; padding: 5px 10px; margin: 0px; border-radius: 2px;}
.form input[type='text'], .form input[type='email'] {border-radius: 2px; margin: 0px; border: 1px solid #ccc; padding: 5px 10px; width: 300px; box-sizing: border-box;}
.submit {padding: 10px 25px 8px; color: #fff; background: #0db14b; text-shadow: rgba(0,0,0,0.24) 0 1px 0; font-size: 16px; box-shadow: rgba(255,255,255,0.24) 0 2px 0 0 inset,#fff 0 1px 0 0; border: 1px solid #0ca746; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -khtml-border-radius: 2px; -ms-border-radius: 2px; font-weight: bold; cursor: pointer;}
.submit:hover{background: #0e903f;}
.popup {display:none; position: fixed; top: 30%; left: 25%; background: #ffffff; padding: 60px 40px; border: 10px solid #c3c3c3; border-radius: 5px; z-index: 9;}
#overlay { display:none; opacity:0.5; background-color:black; position:fixed; width:100%; height:100%; top:0px; left:0px; z-index: 9; }
#close { font-size: 1.5em; cursor: pointer; position: absolute; right: 10px; top: 5px;}
/* Form CSS End */


@media only screen and (max-width: 1180px) {
.main-container .maintext .maincon {width:95%;}
.main-container .maintext .text {width: 60%;}
.held-list .heading li {width:100px;}
.held-list .data li{width:100px;}
}

@media only screen and (max-width: 1160px) {
header .head {width: 90%;}
header .head nav ul li a{font-size: 13px;}
}

@media only screen and (max-width: 1130px) {
.main-container .maintext .text {width: 60%;}
.main-container .maincon aside ul {padding-left: 0px;}
header .head nav ul li a {padding: 0px 8px;}
}

@media only screen and (max-width: 1050px) {
.certified-list .data .cd-data-1 {width: 86px;}
}


@media screen and (min-width:1031px) {
header .head .menu { display:block !important;}
.has_child:hover ul{display:block !important;}
header .head nav ul li ul {display:none !important;}
}

@media only screen and (max-width: 1030px) {
.showhide{display:block;}
header .head .social {padding-top: 0px;}
header .head .menu {float: none; margin-top: 0px; position: absolute; top: 50px; right: 0px; display:none; border:1px solid #dfdfdf; background:#fff; z-index: 10; border-top-right-radius: 0px; border-top-left-radius: 0px;}
header .head nav ul li {margin-left:0px; padding-right: 0px !important;}
header .head nav ul li {float: none !important; border-right:none;}
header .head nav ul li a {width: 200px; background: #f3f3f3; padding: 0px 0px 0px 10px; border-bottom: 1px solid #d3d3d3; margin-left: 0px; height: 40px; line-height: 40px;}
header .head nav ul li a:hover {background: #013763; color: #FFF;}
header .head nav ul li a.active {background: #013763; color: #FFF;}
header .head nav ul li ul {width: 200px; border:none; position: static;}
header .head nav ul li ul li {border-bottom: none;}
.has_child:after { content: ""; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #000; display: block; height: 0; width: 0; right: 0.7em; top: 1.2em; position: absolute; }
}

@media only screen and (max-width: 920px) {
.main-container .maincon aside {display:none;}
.main-container .maintext .text {width: 90%; float: none; margin: 0 auto;}
}

@media only screen and (max-width: 860px) {
.popup {width: 60%;}
}

@media only screen and (max-width: 760px) {
.main-container .maintext .text h1 {font-size: 24px; padding-bottom: 20px; line-height: 30px;}

.faculty_data h3:first-child {font-size: 13px;}
.faculty_data h3 {font-size: 12px; line-height: 16px;}
.faculty_data .mod {width: 120px; font-size: 13px; padding: 0px 10px;}
.faculty_data .mod_name li {font-size: 12px; line-height: 15px;}
.faculty_data .box .height2 {padding: 13px 10px;}
.faculty_data .box .height3 {padding: 26px 10px;}
.faculty_data .box .height4 {padding: 39px 10px;}
.faculty h3 {font-size: 15px;}

}


@media only screen and (max-width: 680px) {
.dtp-fee table, .dtp-fee thead, .dtp-fee tbody, .dtp-fee th, .dtp-fee td, .dtp-fee tr { display:block;} /* Force table to not be like tables anymore */
.dtp-fee table {border-top: 1px solid #e1e1e1; border-left: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1;}
.dtp-fee thead tr {position: absolute; top: -9999px; left: -9999px;}
.dtp-fee table td {border: none; border-bottom: 1px solid #e1e1e1 !important; position: relative; padding-left: 50% !important;} /* Behave  like a "row" */
.dtp-fee td:before {position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap;} /* Now like a table header */
.dtp-fee td:before:first-child {width: 0% !important;}
.dtp-fee td:first-child {padding-left: 6px !important;}
.dtp-fee table tr:nth-of-type(odd) {background: #fff;}
.dtp-fee table td:nth-of-type(odd) {background: #f9f9f9;}
	/* Label the data */
.dtp-fee td:nth-of-type(1):before { content: " "; }
.dtp-fee td:nth-of-type(2):before { content: "Session I:"; }
.dtp-fee td:nth-of-type(3):before { content: "Session II:"; }
.dtp-fee td:nth-of-type(4):before { content: "Total:"; }
.dtp-fee td:before {font-weight:bold;}

.upcoming table, .upcoming thead, .upcoming tbody, .upcoming th, .upcoming td, .upcoming tr { display:block;}
.upcoming table {border-top: 1px solid #e1e1e1; border-left: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1;}
.upcoming thead tr {position: absolute; top: -9999px; left: -9999px;}
.upcoming table td {border: none; border-bottom: 1px solid #e1e1e1 !important; position: relative; padding-left: 50% !important;}
.upcoming td:before {position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap;}
.upcoming table tr:nth-of-type(odd) {background: #fff;}
.upcoming table td:nth-of-type(odd) {background: #f9f9f9;}
	/* Label the data */
.upcoming td:nth-of-type(1):before { content: "DTP:"; }
.upcoming td:nth-of-type(2):before { content: "Session:"; }
.upcoming td:nth-of-type(3):before { content: "Brochure:"; }
.upcoming td:nth-of-type(4):before { content: "Reg. Form:"; }
.upcoming td:nth-of-type(5):before { content: "Date:"; }
.upcoming td:nth-of-type(6):before { content: "Location:"; }
.upcoming td:before {font-weight:bold;}

}

@media only screen and (max-width: 640px) {
.certified-list .data .cd-data-2 {padding: 5px 0px 5px 10px; width: 80%; box-sizing: border-box; }
}

@media only screen and (max-width: 620px) {
header .head .menu {top: 130px; right: 15px;}
header .head nav ul li a {height: 30px; line-height: 30px;}
.has_child:after {top: 0.8em;}

.sessionheld {display: none;}
.held-list h3 {width: 100%; padding: 0px; padding-left: 45%; position: relative; border-right: none; min-height: 40px;}
.held-list .session1, .held-list .session2 {width: 100%;}
.held-list h3:before {position: absolute; top: 6px; left: 6px; width: 72px; white-space: nowrap; font-weight:bold;}
.held-list h3:nth-of-type(1):before { content: "Program:"; }
.held-list h3:nth-of-type(2):before { content: "City:"; }
.held-list h3:nth-of-type(3):before { content: "Session 1:"; }
.held-list h3:nth-of-type(4):before { content: "Session 2:"; }

.held-list .heading {display: none;}
.held-list .data li {width: 100%; padding-left: 45%; position: relative; border-right: none; min-height: 50px;}
.held-list .data li:first-child {padding:0px; padding-left: 45%;}
.held-list .data li:before {position: absolute; top: 6px; left: 6px; width: 72px; white-space: nowrap; font-weight:bold;}
.held-list .data li:nth-of-type(1):before { content: "Session:"; }
.held-list .data li:nth-of-type(2):before { content: "Participants:"; }
.held-list .data li:nth-of-type(3):before { content: "PR:"; }
.held-list .data li:nth-of-type(4):before { content: "Agenda:"; }
.held-list .data li:nth-of-type(5):before { content: "Pictures:"; }
}

@media only screen and (max-width: 600px) {
.showhide {right: -12px;}
}

@media only screen and (max-width: 530px) {
.certified-list .data .cd-data-2 {width:70%;}
.certified-list .data .cd-data-2 h3 {font-size: 16px; line-height: 16px;}
.certified-list .data .cd-data-2 h4 {font-size: 14px;}
.certified-list .data .cd-data-2 h5 {font-size: 14px; line-height: 16px;}
.certified-list .data .cd-data-2 p {font-size: 13px;}
.certified-list h2 .certified-btn {margin-left: 0px;}
.certified-list h2 {padding: 10px 0px 10px 10px; font-size: 14px;}
}


@media only screen and (max-width: 500px) {
.form table, .form thead, .form tbody, .form th, .form td, .form tr { display:block;}
.form table td {padding: 0px 10px; border-bottom: none;}
.form table td:first-child {width: 100%; box-sizing: border-box;}
.form select {width: 100%; box-sizing: border-box;}
.form input[type='text'], .form input[type='email'] {width: 100%;}
.submit {margin: 5px 0px;}
}

@media only screen and (max-width: 460px) {
.faculty {display: none;}
.faculty_data h3 {border-bottom: 1px solid #c3c3c3; width: 100%; padding-left: 43%; position: relative;}
.faculty_data .desig {border-left:none; border-right:none; width:100%;}
.faculty_data h3:nth-child(3){border-bottom: none;}
.faculty_data .mod {border-bottom: 1px solid #ccc; width: 100%;}
.faculty_data .box .height2 {padding: 5px 10px;}
.faculty_data .box .height3 {padding: 5px 10px;}
.faculty_data .box .height4 {padding: 5px 10px;}
.faculty_data .user .height62 {height: inherit;}
.faculty_data .user .height88 {height: inherit;}
.faculty_data .mod_name {border-left: none; clear: both;}
.faculty_data h3:before {position: absolute; top: 6px; left: 6px; width: 72px; white-space: nowrap;}
.faculty_data h3:nth-of-type(1):before { content: "Name:"; }
.faculty_data h3:nth-of-type(2):before { content: "Designation:"; }
.faculty_data h3:nth-of-type(3):before { content: "Company:"; }

}

@media only screen and (max-width: 400px) {
.certified-list .data .cd-data-1 {width:100%; padding-left: 10px; text-align: left; border-right:none;}
.certified-list .data .cd-data-2 {width:100%;}
.certified-list .heading { display: none;}
.popup {width: 60%; padding: 10px 20px;}

}

@media only screen and (max-width: 380px) {
.main-container .maintext .text {width: 80%;}
.upcoming table {font-size:14px;}
}

@media only screen and (max-width: 300px) {
header .cover{padding: 0px;}
}

@media only screen and (max-width: 280px) {
header .head .menu {top: 105px;}
}