<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container-fluid">
<div class="row-fluid">
<div class="col-md-12">
<div class="venn-container">
<div class="venncirclft">
<a class="venntxtlft" href="#">Unique (Volume)</a>
<ul class="venntxtlft-list">
<li>List 1 dfdsfsd</li>
<li>List ddsf sdfdsf2</li>
<li>List sd fd sfs3</li>
<li>List s dfsf4</li>
<li>Listsd fsdf 5</li>
<li>Listsd fdsfd 6</li>
<li>List ddsf sdfdsf2</li>
<li>List sd fd sfs3</li>
<li>List s dfsf4</li>
<li>Listsd fsdf 5</li>
<li>Listsd fdsfd 6</li>
</ul>
</div>
<div class="venncircrt">
<a class="venntxtrt" href="#">Oppurtunity (Volume)</a>
<ul class="venntxtrt-list">
<li>List 1 dfdsfsd</li>
<li>List ddsf sdfdsf2</li>
<li>List sd fd sfs3</li>
<li>List s dfsf4</li>
<li>Listsd fsdf 5</li>
<li>Listsd fdsfd 6</li>
<li>List ddsf sdfdsf2</li>
<li>List sd fd sfs3</li>
<li>List s dfsf4</li>
<li>Listsd fsdf 5</li>
<li>Listsd fdsfd 6</li>
</ul>
</div>
<div class="venntxtoverlay">
<a class="venntxtoverlay-txt" href="#">Overlapping (Volume)</a>
<ul class="venntxtoverlay-list">
<li>List 1 dfdsfsd</li>
<li>List ddsf sdfdsf2</li>
<li>List sd fd sfs3</li>
<li>List s dfsf4</li>
<li>Listsd fsdf 5</li>
<li>Listsd fdsfd 6</li>
<li>List ddsf sdfdsf2</li>
<li>List sd fd sfs3</li>
<li>List s dfsf4</li>
<li>Listsd fsdf 5</li>
<li>Listsd fdsfd 6</li>
</ul>
</div>
</div>
</div>
</div>
</div>
/*---------------Listing start--------------------*/
.list-group-flex{
display: flex;
align-items: center;
justify-content:flex-start;
background: #f0f0f0;
font-weight:600;
font-family: 'Roboto', sans-serif;
margin-bottom:0;
border-bottom:1px solid #fff;
}
.btn-compitetor{color:#111;padding:14px 0;font-family: 'Roboto', sans-serif;font-size: 15px;}
.list-group-flex .left-side{padding:30px 32px;background:#e5e5e5;position:relative;}
.list-group-flex .right-side{padding-left:30px;}
.list-group-flex .listing-title{font-weight:600;}
.listing-detials ul li{padding-right:60px;font-weight: 400;font-size: 1.65rem;}
.listing-detials ul li i{color: #0265c0;font-size: 1.6rem;margin-right: 5px;}
input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkmark {
position: relative;
top: 0;
left: 0;
height: 22px;
width: 22px;
background-color: #fff;
border: 2px solid #111;
padding: 0 7px;
}
input:checked ~ .checkmark {
background-color: #0265c0;
border:2px solid #0265c0;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
input:checked ~ .checkmark:after {
display: block;
}
.checkmark:after {
left: 6px;
top: 1px;
width: 7px;
height: 12px;
border: solid white;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.border-0{border:none;}
.competitor-popup .modal-content{padding:50px;border-radius:0;}
.competitor-popup .modal-header .close {
margin-top: 0;
position: absolute;
right: -10px;
top: -10px;
background: #000;
color: #fff;
opacity: 1;
width: 30px;
height: 30px;
line-height: normal;
border-radius: 100%;
padding-bottom: 6px;
border: 1px solid #fff;
}
.competitor-popup .modal-header .close span{position: relative;top: -1px;}
/*---------------Listing end--------------------*/
/*---------------Inpput Animate start--------------------*/
.focus-t span {
bottom: 30px !important;
color: #000;
font-size: 11px;
transition: all 0.8s ease 0s;
z-index:1;
}
.focus-t span:-webkit-autofill ~ label {
bottom: 30px !important;
color: #000;
font-size: 11px;
transition: all 0.8s ease 0s;
z-index:1;
}
input.field-input, .field-select {
box-shadow: none !important;
z-index:2;
background: no-repeat bottom,50% calc(100% - 1px);
background-size: 0 100%,100% 100%;
border: 0;
-webkit-transition: background 0s ease-out;
transition: background 0s ease-out;
background-image: -webkit-linear-gradient(bottom,#3f51b5 2px,rgba(63,81,181,0) 0),-webkit-linear-gradient(bottom,rgba(0,0,0,.26) 1px,transparent 0);
background-image: linear-gradient(0deg,#3f51b5 2px,rgba(63,81,181,0) 0),linear-gradient(0deg,rgba(0,0,0,.26) 1px,transparent 0);
}
.focus-t input{
border-color:rgba(0,0,0,0.26);
background-size:100% 100%, 100% 100%;
-webkit-transition-duration:.3s;
transition-duration:.3s;
}
.text-effect {
position: relative;
height:55px;
}
.text-effect span {
bottom:15px;
position: absolute;
z-index:1;
pointer-events: none;
}
.focus-text{
}
/*---------------Input Animate end--------------------*/
.contact .big-gutter {
padding-left:35px;
padding-right:35px;
}
.contact-text {
margin:45px auto;
}
.mt-40{margin-top:40px;}
.mb-40{margin-bottom:40px;}
.mt-20{margin-top:20px;}
.mb-20{margin-bottom:20px;}
/* Input Styles */
.field-input, .field-select {
width: 100%;
padding:25px 15px 5px 0;
background-color:transparent;
margin-bottom: 25px;
border-radius:0;
color:#151515 !important;
font-size: 14px;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
border: none;
height:auto;
box-shadow:none !important;
}
* {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-tap-highlight-color: transparent;
}
*:focus {
outline: 0;
box-shadow: none;
}
/* Generic Button Styles */
.form-btn {
max-width:290px;
width:100%;
display: block;
height: auto;
padding:18px 15px;
color:#fff;
background:#111;
border:none;
border-radius:0;
outline: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
margin:auto;
text-align:center;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.10);
-moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.10);
-webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.10);
}
.form-btn:hover, .form-btn:focus {background:#333;color:white;border:none;}
.form-btn:active{opacity: 0.9;}
/*--------------------------ovarlap Circle Start -------------------------*/
.venn-container {
padding:0;
overflow:hidden;
}
.venncircle {
padding: 18px;
width:100%;
height:100%;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border-radius: 50%;
position: absolute;
-webkit-transition: color 0.5s linear, background-color 0.5s linear;
-moz-transition: color 0.5s linear, background-color 0.5s linear;
-o-transition: color 0.5s linear, background-color 0.5s linear;
transition: color 0.5s linear, background-color 0.5s linear;
}
.venncircle > a {
font-size: 19px;
font-weight: bold;
letter-spacing: .004em;
color: #FFFFFF;
text-decoration: none;
}
.venncirclft {
padding: 18px;
width:750px;
height:640px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border-radius: 50%;
position: absolute;
-webkit-transition: color 0.5s linear, background-color 0.5s linear;
-moz-transition: color 0.5s linear, background-color 0.5s linear;
-o-transition: color 0.5s linear, background-color 0.5s linear;
transition: color 0.5s linear, background-color 0.5s linear;
margin-left:0;
background-color:rgba(33,150,243,0.8);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
z-index: 2;
}
.venncirclft > a {
font-size: 19px;
font-weight: bold;
letter-spacing: .004em;
color: #FFFFFF;
text-decoration: none;
}
.venncircrt {
padding: 18px;
width:750px;
height:640px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border-radius: 50%;
position: absolute;
-webkit-transition: color 0.5s linear, background-color 0.5s linear;
-moz-transition: color 0.5s linear, background-color 0.5s linear;
-o-transition: color 0.5s linear, background-color 0.5s linear;
transition: color 0.5s linear, background-color 0.5s linear;
margin-left:370px;
background-color:rgba(93, 183, 93, 0.8);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
z-index: 3;
text-align: right;
}
.venncircrt > a {
font-size: 19px;
font-weight: bold;
letter-spacing: .004em;
color: #FFFFFF;
text-decoration: none;
}
.venntxtrt {
margin: 0 0 0 87px;
display:block;
position: relative;
top: 110px;
z-index: 5;
right:130px;
}
.venntxtrt-list{
width: auto;
display: block;
position: relative;
top: 130px;
z-index: 5;
right: -130px;
padding: 0;
text-align: center;
margin: 0 auto;
}
.venntxtrt-list li{list-style:none;margin-bottom:10px;color:#fff;}
.venntxtlft {
width: 100%;
display:block;
position: relative;
top: 110px;
z-index: 5;
left: 110px;
}
.venntxtlft-list{
width: auto;
display: inline-block;
position: relative;
top: 130px;
z-index: 5;
left: 130px;
text-align: center;
padding: 0;
}
.venntxtlft-list li{list-style:none;margin-bottom:10px;color:#fff;}
.venntxtoverlay{
width: auto;
display: block;
position: absolute;
top: 130px;
z-index: 9;
left: 31%;
}
.venntxtoverlay > a {
font-size: 19px;
font-weight: bold;
letter-spacing: .004em;
color: #FFFFFF;
text-decoration: none;
}
.venntxtoverlay-list {
width: auto;
display:block;
position: relative;
top:auto;
z-index: 5;
left:auto;
text-align: center;
padding: 20px 0 0 0;
}
.venntxtoverlay-list li {
list-style: none;
margin-bottom: 10px;
color: #fff;
}
/*--------------------------ovarlap Circle end -------------------------*/
@media only screen and (max-width : 768px) {
.listing-detials ul li {padding-right:10px;}
}
@media screen and (max-width: 767px) {
.list-group-flex .right-side {padding-left: 15px;}
.contact .big-gutter{padding-left:15px;padding-right:15px;}
.field-input, .field-select{margin-bottom:5px;}
.mtb-40{margin-bottom:20px;margin-top:20px;}
}
