.team{
    position: absolute;
    width: calc(100vh - 120px);
    height: calc(100vh - 120px);
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% + 100px), -50%);
    /* margin: 0px auto; */
    display: none;
}
.team-content{
    position: absolute;
    left: 50%;
    top: 50%;
/*    transform: translate(-50%, -50%);*/
    width: 60%;
    height: 60%;
}
.team-content.team-content-top{
    left: 0;
    top: 0;
    transition: all 0.5s linear;
    z-index: 99;
    transform: scale(0.5) translate(-50%, -50%);
}
.team-content-top .team-head-title {
    font-size: 16pt;
}
.team-content-top ~ .team-content{
    top: 60%;
}
.team-container{
    width: 100%;
    height: 100%;
    position: absolute;
}
.team-head-content{
    width: 100%;
    height: 100%;
    min-width:100px;
    min-height: 100px;
    border: 1px solid rgba(96, 175, 47, 0.3);
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
    /*background-color: rgba(96, 175, 47, 0.47);*/
}
.team-content-top.team-content .team-head-content{
	border: 1px solid rgba(96, 175, 47, 0.3);
    /*background-color: rgba(84, 88, 81, 0.47);*/
}
.team-content:not(.team-content-top)>#first_team_head{
    transform: translate(-100px, -100px);
}
/*
#first_team_head>.team-head-content{
    width: 32%;
    height: 32%;
    margin: 10% auto;
}
#second_team_head>.team-head-content {
    width: 30%;
    height: 30%;
}
#third_team_head>.team-head-content{
    width: 35%;
    height: 35%;
}
*/
.team-head-main-title{
    position: relative;
    display: inline-block;
    color: #000;
    font-size: 14pt;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    text-align: center;
}
.team-head-profile{
    width:40%;
    height: 40%;
/*    margin: 14% 5%;*/
/*    min-width:50px;*/
/*    min-height: 50px;*/
    /*border: 2px solid #60af2f;*/
    border-radius: 50%;
    position: absolute;
    display: inline-block;
    background-image: url(../images/team.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: #fff;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    cursor: pointer;
}
#third_team_head>.team-head-content>.team-head-profile{
    width:25%;
    height: 25%;
}
#four_team_head>.team-head-content>.team-head-profile{
    width:30%;
    height: 30%;
}
.team-head-profile.team-head-txt{
    background-image:none;
    /*background-color:#82a90b;*/
}
.team-bg-color{
	background-color:rgb(89, 202, 211);
}
.team-bg-color1{
	background-color:rgb(166, 155, 193);
}
.team-bg-color2{
	background-color:#babd67;
}
}
.team-content-top .team-head-profile.team-head-txt{
	background-color:#595a54;
	border: 2px solid #545a51;
}
.team-head-title{
    font-size: 12pt;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    border-radius: 3px;
    position: relative;
    top: 102%;
    width: 130%;
    text-align: center;
    margin: 0 -15%;
    font-weight: 600;
}
#third_team_head>.team-head-content .team-head-title{
    font-size: 8pt;
}
.team-head-txt .team-head-title{
    top: 0;
    width: calc(100% - 1px);
    margin: 0 auto;
    background-color: transparent;
/*    color: #000;*/
    display: inline-block;
    vertical-align: middle;
}
.team-head-profile-photo{
    position: absolute;
    display: inline-block;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    background-image: url(../images/team.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
   
    border-radius: 50%;
/*    opacity: 0.4;*/
}
.team-head-profile-photo-bg1{
	background-color:rgb(89, 202, 211);
	border: 1px solid rgb(89, 202, 211);
}
.team-head-profile-photo-bg2{
	 background-color:#babd67;
	 border: 1px solid #babd67;
}
.team-head-profile-photo-bg3{
	background-color: #82a90b;
	border: 1px solid #82a90b;
}
.team-head-txt .team-head-profile-photo{
    background-image:none;
	
}
.vertical{
    display: inline-block;
    height: 100%;
    width: 1px;
    vertical-align: middle;
}
.team-sub-profile{
    width: 75%;
    height: 75%;
/*    min-width:30px;*/
/*    min-height: 30px;*/
    border: 1px solid #babd67;
    border-radius: 50%;
    margin: 0;
    position: absolute;
    display: inline-block;
    background-image: url(../images/team.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: #fff;
/*
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
*/
    transition: left 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28), top 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    opacity: 1;
/*    transition: all 0.5s easy-in-out;*/
}
.team-head-profile.team-hide>.team-sub-profile{
    top:25% !important;
    left:25% !important;
    opacity: 0 !important;
}
.team-sub-profile-photo{
    position: absolute;
    display: inline-block;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    background-image: url(../images/team.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-color:rgb(166, 155, 193);
    border-radius: 50%;
    z-index: 100;
}
.team-sub-profile-photo2{
    position: absolute;
    display: inline-block;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    background-image: url(../images/team.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: #babd67;
    border-radius: 50%;
    z-index: 100;
}
.team-sub-profile>.line {
    content: '';
    position: absolute;
    width: 200px;
    height: 1px;
    top:50%;
    left:50%;
    background-color: #babd67;
    -ms-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    transition: width 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.team-head-profile.team-hide>.team-sub-profile>.line{
    width:0 !important;
    opacity: 0 !important;
}
div.tooltip-inner {
    min-width: 150px;
    text-align: center;
}   
.skill-sets{
    font-size: 9pt;
}
.team-head-profile.team-head-txt.bg-gradient>.team-head-title{
    color:#000;
}
.team-head-profile.team-head-txt.active,
.team-head-profile.team-head-txt.clicked{
    /***background-color:#82a90b*/
}

.team-content-top .team-head-profile.team-head-txt.bg-gradient{
    /*background-color: #fff;*/
}
.team-content-top .team-head-profile.team-head-txt.bg-gradient.clicked{
    /*background-color: #82a90b;*/
}

.team-head-profile.team-head-txt.bg-gradient::before{
    content:'';
    position: absolute;
    width:100%;
    height: 100%;
    left:0;
    top:0;
    border-radius: 50%;
    background: #82a90b; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#fff, rgba(255, 255, 255, 0)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#fff, rgba(255, 255, 255, 0)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#fff, rgba(255, 255, 255, 0)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#fff, rgba(255, 255, 255, 0)); /* Standard syntax */
    -webkit-animation:spin 3s linear infinite;
    -moz-animation:spin 3s linear infinite;
    animation:spin 3s linear infinite;
}

.team-head-profile.team-head-txt.bg-gradient.clicked::before{
    display: none;
    -webkit-animation:none;
    -moz-animation:none;
    animation:none;
}
.team-head-profile.team-head-txt.bg-gradient.clicked>.team-head-title{
    color:#fff;
}

.team-content:not(.team-content-top)>#first_team_head.rotate>.team-head-content {
    -webkit-animation:spin 2s linear 1;
    -moz-animation:spin 2s linear 1;
    animation:spin 2s linear 1;
}

.team-content:not(.team-content-top)>#first_team_head.rotate>.team-head-content .popover-show{
    -webkit-animation:display 3s linear 1;
    -moz-animation:display 3s linear 1;
    animation:display 3s linear 1;
}

@-moz-keyframes display { 0% { opacity: 0 } 99.99% { opacity: 0 } 100% { opacity: 1 } }
@-webkit-keyframes display {  0% { opacity: 0 } 99.99% { opacity: 0 } 100% { opacity: 1 } }
@keyframes display {  0% { opacity: 0 } 99.99% { opacity: 0 } 100% { opacity: 1 } }

@-moz-keyframes left-right { 0% { -moz-transform: translateX(-300%); } 100% { -moz-transform: translateX(0); } }
@-webkit-keyframes left-right { 0% { -webkit-transform: translateX(-300%); } 100% { -webkit-transform: translateX(0); } }
@keyframes left-right { 0% { -webkit-transform: translateX(-300%); transform:translateX(-300%); } 100% { -webkit-transform: translateX(0); transform:translateX(0); } }

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

@-moz-keyframes shake-left-right { 50% { -moz-transform: translateX(10px); } 100% { -moz-transform: translateX(0); } }
@-webkit-keyframes shake-left-right { 50% { -webkit-transform: translateX(10px); } 100% { -webkit-transform: translateX(0); } }
@keyframes shake-left-right { 50% { -webkit-transform: translateX(10px); transform:translateX(10px); } 100% { -webkit-transform: translateX(0); transform:translateX(0); } }

@-moz-keyframes shake-top-bottom { 50% { -moz-transform: translateY(10px); } 100% { -moz-transform: translateY(0); } }
@-webkit-keyframes shake-top-bottom { 500% { -webkit-transform: translateY(10px); } 100% { -webkit-transform: translateY(0); } }
@keyframes shake-top-bottom { 50% { -webkit-transform: translateY(10px); transform:translateY(10px); } 100% { -webkit-transform: translateY(0); transform:translateY(0); } }

.popover-show.first{
    position: absolute;
    top: 40px;
    left: 100%;
    width: 165px;
    
    
}

.popover-show.second{
    position: absolute;
    top: 100%;
    left: 8%;
    width: 165px;
    
    
}
.popover-show.third{
    position: absolute;
    top: 40px;
    left: -100%;
    width: 165px;
    
    
}

.popover-show.first>.popover{
-webkit-animation:shake-left-right 1.5s linear infinite;
    -moz-animation:shake-left-right 1.5s linear infinite;
    animation:shake-left-right 1.5s linear infinite;
}
.popover-show.second>.popover{
-webkit-animation:shake-top-bottom 1.5s linear infinite;
    -moz-animation:shake-top-bottom 1.5s linear infinite;
    animation:shake-top-bottom 1.5s linear infinite;
}
.popover-show.third>.popover{
-webkit-animation:shake-left-right 1.5s linear infinite;
    -moz-animation:shake-left-right 1.5s linear infinite;
    animation:shake-left-right 1.5s linear infinite;
}

.bg-gradient .popover-show .popover {
  position: relative;
  display: block;
  margin: 20px;
  background-color: #e4ecca;
  color:#000;
  font-size: 14pt;
}
.bg-gradient.clicked .popover-show .popover{
    display: none;
}
.team-content-top .bg-gradient .popover-show>.popover{
    -webkit-animation:none;
    -moz-animation:none;
    animation:none;
}
.popover.right>.arrow::after{
    border-right-color: #e4ecca !important;
}
.popover.left>.arrow::after{
    border-left-color: #e4ecca !important;
}
.popover.top>.arrow::after{
    border-top-color: #e4ecca !important;
}
.popover.bottom>.arrow::after{
    border-bottom-color: #e4ecca !important;
}

@media 
all and (max-width : 768px){
    
    .team{
        margin-top: 35px;
        width: calc(100vw - 80px);
        height: calc(100vw - 80px);
        transform: translate(-50%, -50%);
    }
    
    .team-head-title{
/*        font-size: 12pt;*/
    }
    
}

@media 
all and (max-device-width:768px) and (orientation:portrait){
    
    .team{
        width: calc(85vw - 80px);
        height: calc(85vw - 80px);
        transform: translate(-50%, -50%)
    }
    
}

@media 
all and (max-device-width:1024px) and (orientation:landscape){
    
    .team{
        width: calc(90vh - 120px);
        height: calc(90vh - 120px);
/*        transform: translate(-50%, -50%);*/
        transform: translate(calc(-50% + 100px), -50%);
    }
    
}