a.home-btn:after {content:'\f015';font-family: 'Font Awesome 5 Free';font-weight: 900}
#news-comment-form {display:none}
#header .inner {position: relative;padding: 0;width: 100%}
picture {max-width:90%;min-height:130px}
@media only screen and (min-width: 481px) {
.rubrik {padding: 3px 0;display: table-cell}
div.innav2 {float: left}
}
@media only screen and (max-width: 480px) {
body {hyphens: auto}
textarea {hyphens:none}
@supports (hyphens: auto) {
table td {
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
}
@supports not (hyphens: auto) {
table {word-break: break-word}
}
#container .head:before {
min-height: 48px;
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: #066196 url(images/cb-back-mobile.png) no-repeat;
background-position: 15% 50% !important;
}
#page {padding: 15px 10px 15px 10px}
#search-form {position: absolute;top: 10px;right: 10px}
.home-img a > img {
max-width: 35%;
float: right;
height: auto;
border-radius: 3px;
-moz-box-shadow: 5px 5px 5px #A4A4A4;
-webkit-box-shadow: 5px 5px 5px #A4A4A4;
box-shadow: 5px 5px 5px #A4A4A4;
margin: 5px 4px 10px 15px;
}
.divwrapper {height:320px}
.cycle-slideshow {height: 100%;min-height:280px}
.cycle-slideshow .mitte img {max-width:58%;padding-top: 10px}
.cycle-slideshow div.links h5, .cycle-slideshow div.links h6 {padding:0}
.cycle-slideshow div.linksmitte {width: 40%;float: left}
.cycle-slideshow div.rechts {width: 60%;float: right}
.cycle-slideshow div.links {width: 100%;text-align: center}
.cycle-slideshow div.mitte {width: 100%;text-align: center}
.cycle-slideshow .hider {display:none}
.cycle-slideshow .slide4l {width:28%;float: left}
.cycle-slideshow .slide4m {width:72%;float: right}
.rubrik {padding: 3px 0;display: block}
div.innav2 {float: none}
}
@media only screen and (min-width: 481px) and (max-width: 900px) {
#page {padding: 22px;width:100%}
#container .head:before {
min-height: 53px;
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: #066196 url(images/cb-back-mobile.png) no-repeat;
background-position: 40% 50% !important;
}
#search-form {position: absolute;top: 9px;right: 20px}
.home-img a > img {
max-width: 20%;
float: right;
height: auto;
border-radius: 3px;
-moz-box-shadow: 5px 5px 5px #A4A4A4;
-webkit-box-shadow: 5px 5px 5px #A4A4A4;
box-shadow: 5px 5px 5px #A4A4A4;
margin: 5px 4px 10px 15px;
}
.divwrapper {height:330px}
.title-f {color:#066196}
.cycle-slideshow {height: 100%;min-height:290px}
.cycle-slideshow div.mitte img {max-width:70%}
.cycle-slideshow div.mitte img {display: table-cell;vertical-align: middle}
.cycle-slideshow div.linksmitte {width: 66%;float: left;text-align: center}
.cycle-slideshow div.links {width: 50%;float: left;margin-top:40px}
.cycle-slideshow div.mitte {width: 50%;float: right;height: 200px;line-height: 200px}
.cycle-slideshow div.rechts {width: 33%;float: right;margin-top: 10px;text-align:left}
.cycle-slideshow .hider {width:28%;float: right}
.cycle-slideshow .slide4l {width:28%;float: left}
.cycle-slideshow .slide4m {width:44%;float: left}
}
@media only screen and (max-width: 900px) {
.hinw {position: absolute;right: 22px;color: #333;}
#searchTxt {opacity:0}
ul.slimmenu {
position: absolute;
top: 85px;
height: calc(100vh - 100px);
z-index: 999;
margin-left: 3%;
padding: 0;
left:-700px;
list-style-type: none;
width: 280px;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
}
.nav {
width: 100%;
background: #fff;
position: absolute;
top: 50px;
z-index:33;
}
#container > #header{width:100%;height:50px}
.deskblock, #subnavigation {display:none}
.mobilblock a {margin: 0 10px}
#sidebar, .sidebar-block-title, .sidebar-block, .sidebar-block2 {
width:100%;
padding-left:0;
padding-right:0;
border-right:none !important;
border-left:none !important;
}
.sidebar-block-title {text-align: center}
.sidebar-bewert {
flex-flow: row nowrap;
display: flex;
justify-content: space-around;
align-items: center;
}

header a#logo {
display: block;
float: left;
height: 50px;
width: 70%;
position: relative;
}
table th.row13 {top:45px}
.fa-search.mob {
position: absolute;
font-size: 20px;
color: #f0f0f0;
right: 8%;
top: 1px;
cursor: pointer;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
}
.topnav > ul > li > a > i, .topnav > ul > li > i {cursor: pointer;font-size: 20px}
.topnav .fa-bell {line-height: 46px !important}
.nav2 {width: 100%}
.topnav {float: right}
.topnav > ul {margin-right: 10px}
.topnav > ul > li {display: inline-block}
#togg {float: left;position: relative;margin-left: 3%}
.topnav > ul > li > a, .topnav > ul > li > #down, .topnav > ul > li > #notidown {
display: inline-block;
width: 40px;
text-align: center;
height: 45px;
vertical-align: middle;
line-height: 50px;
color: #066196;
cursor:pointer;
}
.cycle {background: #fff;max-height:310px;width: 100%}
.cycle-slideshow h2 {padding:0 0 10px 0}
#content-wrapper {padding-top: 42px}
.nomob {display:none}
.right-div {float: right;right: 10px;position: absolute;padding-top: 25px}
}
@media only screen and (min-width: 901px) {
ul.slimmenu {
z-index: 3;
position: relative;
max-width: 1200px;
width:100%;
margin: 0 auto;
height: 51px;
padding: 0;
background: #3C3C3C url('images/nav-bg.gif') repeat-x left top;
overflow: hidden;
}
ul.slimmenu:before, ul.slimmenu:after {content: '';display: table}
#container > #header{width:100%;height:100px}
#navigation-wrapper:not(.sticky2) {
transition-property: top;
-webkit-transition-property: top;
-moz-transition-property: top;
-o-transition-property: top;
-ms-transition-property: top;
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
}
.home-img-div {text-align: center;float: right;padding: 5px 0 10px 25px}
.home-img-div {text-align: center; float: right; padding: 5px 0px 10px 25px}
.home-img {
width: auto;
height: 105px;
box-shadow: 5px 5px 5px #A4A4A4;
-moz-box-shadow: 5px 5px 5px #A4A4A4;
-webkit-box-shadow: 5px 5px 5px #A4A4A4;
border-radius: 3px;
overflow: hidden;
display: inline-block;
margin: 0 0 30px 0;
}
.home-img a > img {
-webkit-transition: -webkit-transform 0.15s ease 0s;
-moz-transition: -moz-transform 0.15s ease 0s;
-o-transition: -o-transform 0.15s ease 0s;
transition: transform 0.15s ease 0s;
-webkit-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
max-width: 140px;
height: 105px;
border-radius: 3px;
}
.divwrapper {height:350px}
.cycle {background: #fff;max-height:320px;width: 100%}
.cyclelink {color:#303030 !important}
.pseudodiv {padding-left:70px}
.cycle-slideshow {height: 100%;min-height:310px;background:#fff}
.cycle-slideshow h2 {padding:10px 0 20px 0}
.cycle-slideshow div.linksmitte {width: 66%;float: left;text-align: center}
.cycle-slideshow div.links {width: 50%;float: left;margin-top:40px}
.cycle-slideshow div.mitte {width: 50%;float: right}
.cycle-slideshow div.rechts {width: 33%;float: right;margin-top: 10px;text-align:left}
.cycle-slideshow .hider {width:33%;float: right}
.cycle-slideshow .slide4l, .cycle-slideshow .slide4m {width:33%;float: left}
.hinw, #togg, #navi .fa-home {display:none !important;height:0;opacity:0}
#navi .login-toggle a {text-align: right}
#navi {
position: absolute;
right: 0;
top: 0;
font-family: 'Ubuntu';
font-size: 15px;
z-index: 9;
}
.topnav > ul {margin-right: 15px}
.topnav > ul > li {
position: relative;
float: left;
display: block;
padding: 1px 12px 9px 12px;
}
.topnav > ul > li.first {background: url('images/divider.gif') no-repeat right 13px}
.topnav li.last {background: none}
.topnav li.last a {padding-right: 0}
.topnav > ul > li:not(.noti) * {color: #f0f0f0;vertical-align: middle}
.topnav > ul > li a:hover, .topnav > ul > li span:hover, .topnav > ul > li a:hover > i, .topnav > ul > li > i:hover {color: #d0c7c7}
.topnav > ul > li i {color: #f0f0f0;cursor: pointer}
#down {color: #f0f0f0;cursor:pointer}
.topnav .fa-bell {font-size: 19px !important;line-height: 30px !important}
#content-wrapper {padding: 50px 0 20px 0}
#search-form {position: absolute;top: 49px;right: 45px;text-align: right}
#searchTxt, #searchTxt:hover {
width: 110px;
height: 27px;
padding: 0 30px 0 15px;
font-size: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
border: none;
}
#container .head:before {
min-height: 100px;
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: #066196 url(images/cb-back2.png) no-repeat;
}
#header #logo {float: left;width: 65%;height: 100px;position: relative}
#content-top {margin: 9px 0 7px}
.fa-search.mob {
right: 12px;
position: absolute;
top: 7px;
font-size: 14px;
color: #1e5ba1;
}
table th.row13 {top:0}
.nodesk {display:none !important}
#page {
float: right;
padding: 15px 35px 15px 35px;
flex-basis: 615px;
flex-grow: 1;
flex-shrink: 1;
min-width: 0;
align-self: flex-start;
}
#sidebar {
float: left;
scroll-behavior: smooth;
width: 272px;
flex-basis: calc(272px + 12px);
}
.sidebar-block, .sidebar-block2 {width: 272px}
.sidebar-block-title {width: 272px;padding: 5px 15px 5px 15px}
.sidebar-bewert {height:170px;flex-flow: row wrap}
#subnavigation {
float: left;
width: 240px;
padding: 5px 15px 5px 15px;
margin: 0 0 20px 0;
border: 1px solid #D6D6D6;
background: #FFFFFF;
}
#subnavigation.no-border, #subnavigation ul.no-border {border: 0 !important}
#subnavigation li {float: left;padding: 0 !important;background: none !important}
#subnavigation li a {
width: 220px;
float: left;
padding: 10px 5px 10px 27px;
color: #323F55;
border-bottom: 1px solid #D6D6D6;
background-position: 0 15.5px;
background-repeat: no-repeat;
}
#subnavigation li a.no-border {border: 0 !important}
#subnavigation li.level-3 a {
width: 205px;
padding: 4px 5px 4px 45px;
border: 0;
background-position: 20px 11px;
font-size: 92%;
}
#subnavigation li.level-1 > ul, #subnavigation li.active > ul {display: block}
#subnavigation li.active.level-2 > ul {float: left;padding: 10px 0 9px 0;border-bottom: 1px solid #D6D6D6}
#subnavigation li.active.level-3 > ul {float: left;padding: 5px 0 5px 0}
#subnavigation li a:hover, #subnavigation li a.active {color: #076fac}
#subnavigation li.level-2 a.active {font-weight: bold}
#subnavigation li.level-2 a:hover, #subnavigation li.level-2 a.active {background-image: url('images/nav-2-active.png')}
#subnavigation li.level-3 a:hover, #subnavigation li.level-3 a.active, #subnavigation li.level-4 a:hover, #subnavigation li.level-4 a.active {background-image: url('images/nav-3-active.png')}
#subnavigation li.navpadding {position:relative;margin-top: 15px;}
#subnavigation li.navpadding::before {
content: "";
position: absolute;
left: 45px;
top: -8px;
width: 50%;
border-top: 1px dashed #bdbdbd;
}
#breadcrumb {padding-left: 280px}
.mobilblock {display:none}
.right-div {float: right;right: 10px;position: absolute;padding-top: 20px}
}
@media only screen and (max-width: 430px) {
.tablehint {
display: block;
width:100%;
padding:10px 0;
font-size:90%;
}
}
@media only screen and (min-width: 431px) {
.tablehint {display: none}
}
@media only screen and (max-width: 358px) {
.tablehint2 {
display: block;
width:100%;
padding:10px 0;
font-size:90%;
}
}
@media only screen and (min-width: 359px) {
.tablehint2 {display: none}
}
@media only screen and (min-width: 900px) and (max-width: 1100px) {
#container .head:before {background-position-x: 70% !important}
}
@media only screen and (min-height: 650px) {
#res {display: none}
}
@media only screen and (min-width: 700px) {
.footer-left2, .footer-center-left {float: left}
.footer-right2 {float: left;text-align: center}
#footer-top {
width: 96% !important;
padding-bottom:15px;
display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
#footer-top .list li {
padding: 17px 0 0 0;
margin: 0;
background: none;
}
}
@media screen and (min-width: 1200px) {
h6 {font-size: 18px}
}
.sidebar-block-title {
float: left;
color: #FFFFFF;
font-size: calc(0.88em + 0.13vw);
font-family: 'Ubuntu';
font-weight: bold;
background: #066196;
-webkit-border-radius: 2px 2px 0 0;
-moz-border-radius: 2px 2px 0 0;
-ms-border-radius: 2px 2px 0 0;
-o-border-radius: 2px 2px 0 0;
border-radius: 2px 2px 0 0;
}
.sidebar-block, .sidebar-block2 {
float: left;
padding: 10px 0 10px 0;
margin: 0 0 20px 0;
border: 1px solid #D6D6D6;
background: #FFFFFF;
}
.sidebar-bewert {
width: 100%;
float: left;
padding: 0;
margin: 0 0 13px 0;
text-align: center;
}
#footer {
float: left;
width: 100%;
padding-bottom: 8px;
border-bottom: 4px solid #066196;
background: #3C3C3C url(images/nav-bg.png) repeat-x left top;
background-size: contain;
color: #ffffff;
}
#footer .inner {width: 99%}
#footer .inner > div {float: left;width: 100%}
#footer ul.list.no-bg {background: none;margin-right: 3%}
#footer-top a .fa-li {
color: #078bd8;
font-size:15px;
opacity:0;
margin-left: -5px;
-webkit-transition: opacity .1s ease-in;
-moz-transition: opacity .1s ease-in;
-o-transition: opacity .1s ease-in;
transition: opacity .2s ease-in;
}
.list.no-bg li {
padding: 5px 5px 0 0 !important;
background: none;
display: inline-block;
}
#footer-bottom2 {
width: 100%;
font-size: 13px;
color: #b6b6b6;
padding: 20px 0 0 0;
position: relative;
height: 22px;
box-sizing: content-box;
}
#footer h6 {
color: #b6b6b6;
text-transform: uppercase;
padding:1.7em 0 1em 0;
text-align: center;
}
#footer-bottom2 a {color: #b6b6b6 !important}
#footer-bottom2 a:hover {color: #066196 !important}
.footer-bottom-left {
float: left;
position: absolute;
left: 1%;
top:20px;
}
.footer-bottom-right {
float: right;
position: absolute;
top:20px;
right: 1%;
text-align: right;
}
.footer-bottom-left .cologne {
background: url(images/cologne.png) no-repeat;
background-size: 11px 12px;
width: 11px;
height:12px;
display:inline-block;
margin-bottom: -1px;
padding-left: 2px;
}
#ani {
background: url('images/cb_ani.gif') no-repeat;
background-size: 200px auto;
background-position: center center;
}
.boxmosch {padding-left: 20px;}
#ausmosch {
background-image:url(images/ausmosch2.gif);
background-repeat: no-repeat;
background-position: center center;
height: 112px;
width: 149px;
margin: 30% auto;
border-radius: 5px;
}
#ausmosch2 {
background-image:url(images/rahmen.gif);
background-repeat: no-repeat;
background-position: center center;
height: 123px;
width: 200px;
margin: 2% auto;
}
#kosten input[type=text] {
width: 29px;
text-align: right;
font-family: Arial;
font-size: 13px;
padding: 4px;
border: 1px solid #A1A1A1;
color: #565656;
margin-bottom: 1px;
}
.center-table, .center-table4 {
display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
align-items: center;
justify-content: center;
}
.center-table2 {
display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
justify-content: center;
}
.center-table3 {
display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
align-items: center;
justify-content: center;
}
#micro table.micro {width: 100%}
#micro td.micro {width: 10%;text-align: right !important}
#micro td {white-space: nowrap}
.faq > li {padding: 10px;background: none !important}
.faq li.q {cursor: pointer}
.faq li.top {font-size: 15px;font-weight: bold;padding: 19px 0 6px 18px}
.faq h6{font-weight: normal;color: #000}
.faq h6,.faq h3 {padding: 2px 0 2px 0}
.border {border-bottom: 1px #ddd solid}
.faq li.aw {
display: none;
background: #F5F5F5 !important;
border: 5px solid #F5F5F5;
border-radius: 5px;
margin-left: 28px;
padding-left: 5px;
padding-right: 5px;
overflow: hidden;
text-align: justify;
}
.faq img {
margin-top: 7px;
padding-right: 7px;
width: 14px;
height: 14px;
float: left;
}
.fa-li2 {
text-align: center;
width: 15px;
line-height: inherit;
padding: 1px 0;
position: absolute;
font-size: 14px;
}
.rotate {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
transform-origin: 30% 55%;
}
#spnCharLeft {
position: absolute;
right: 200px;
top: 370px;
}
#slide {
width: 100%;
height: 40px;
padding: 0;
}
.boxparent, .boxparent2 {
width: 100%;
display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
}
.boxparent {justify-content: center}
.boxparent ol li {margin-bottom:13px !important}
.boxparent2 {justify-content: flex-start}
.box {
float: left;
width: 280px;
padding: 10px;
}
.boxa {
display: table;
float: left;
width: 280px;
padding: 20px;
text-align: center;
}
.box1 {flex-basis: 270px;padding-right:10px}
.box2 {
padding-bottom: 20px;
flex-basis: 500px;
flex-grow: 1;
}
.box3 {
clear: left;
float: left;
width: 120px;
height: 100%;
padding: 10px 0;
}
.box4 {
float: left;
width: calc(100% - 130px);
padding: 10px 0;
}
.box5 {
clear: left;
float: left;
flex-basis: 550px;
padding: 10px;
}
.box6 {float: left;padding: 10px}
.divwrapper {background:#fff;position: relative}
#hide-on-mobile {display: block}
.galerie img {border: 4px solid #EFEFEF;margin-bottom:4px}
.galerie a:hover img {border:4px solid #D0D0D0;margin-bottom:4px}
.galerie table {width: 100%;text-align: center}
.galerie td {width: 25%;vertical-align: top;text-align: center}
#calcbox4 {position: absolute;right: 30px}
#calc table {border: 2px solid #066196}
#calc th {
font-size: 16px;
color: #FFFFFF;
background-color: #066196;
padding: 6px 0 6px 0;
text-align: center;
}
#calc input[type=submit] {margin: 7px}
table.rahmen2 {width: 95%}
table.rahmen3, table.rahmen, table.urahmen, table.grahmen, table.rahmen td, table.urahmen td, table.grahmen td, table.rahmen3 td.rahmen {border: 1px solid #43749F;}
table.rahmen3 td.rahmen {text-align: center;vertical-align: middle}
table.rahmen3 td.rahmen:first-child, td.rahmen:nth-child(2), table.rahmen td:first-child {text-align: left !important}
th.rahmen {font-size: 18px}
tr.rahmen {border-bottom: 1px solid #43749F}
table.grahmen td {vertical-align: top}
table.rahmen td {text-align: center}
table tr.row13, table td.row13 {
border: 1px solid #43749F;
background-color: #E5E5E5;
padding: 2px 0 2px 1px;
font-weight: bold;
text-align: center;
vertical-align: middle;
}
table th.row13, table th.row14 {
border-right: 1px solid #43749F;
border-left: 1px solid #43749F;
background-color: #E5E5E5;
font-size: 13px;
padding: 2px 0 2px 0;
color: #303030;
font-weight: bold;
vertical-align: middle;
background-clip: padding-box;
}
table th.row13 {position:sticky;border-bottom: 1px solid #43749F}
table th.row14 {border-bottom: 1px solid #43749F}
table td.row14 {
background-color: #E5E5E5;
padding: 0 6px 0 10px;
font-weight: bold;
}
table tr.row12, table td.row12 {
border: 1px solid #43749F;
background-color: #E5E5E5;
padding: 4px 0 4px 10px;
font-weight: bold;
}
table th.row1 {
padding: 0;
background: none;
color: #303030;
font-weight: normal;
}
.urahmen td {padding:6px 4px 6px 7px}
table td.row1 {padding: 0 0 0 12px}
.horizontal-list2.no-bg li {
float: left;
padding: 0 5px;
margin: 0;
background: none !important;
}
.buch {padding: 20px 0 0 20px}
.buch2 {padding: 20px 0 15px 20px}
#such-toggle .fa-search {font-size:14px}
tr.sprit {
border-top: #066196 1px solid;
padding: 5px 0;
width:10%;
vertical-align:top;
}
tr.sprit:first-child {border-top: none}
td.sprit {
vertical-align: top !important;
width:20%;
max-width:160px;
padding: 13px 0 0 13px;
}
.zitate-li2 {background: url('images/marker.gif') no-repeat 10px 8px !important;padding-left: 0 !important;display: table-row}
td.sprit2 {padding: 13px 8px 6px 8px}
td.gas {vertical-align: middle;padding: 0}
td.sprit3 {padding: 6px 8px 13px 8px}
.sprittable1 {width:30%}
.sprittable3 {width: 30%;height: 324px}
.spritcount {margin: 20px 0}
#spritinfo {color:#066196;cursor:help;margin: 62px 0 0 33px}
.sprittab {width: 310px !important}
img {max-width: 100%;height: auto}
.gas {
margin:0 0 29px 15px;
font-size:19px;
cursor:pointer;
color: #066196;
}
#dark {opacity:0}
#darkSwitch {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 0;
opacity: 0;
z-index: 2;
visibility: visible;
cursor: pointer;
}
.cycle-button {
display: none;
position: absolute;
top: 52%;
width: 27px;
height: 27px;
float: left;
z-index: 5;
cursor: pointer;
background-image: url('images/cycle-buttons.png');
}
.cycle-prev {left: -35px;background-position: left center}
.cycle-next {right: -35px;background-position: right center}
/*Default theme**************/
.popupTheme {
background-color: #076fac;
background-size: 100% 100%;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 0;
position: relative;
box-shadow: 3px 3px 3px #888;
z-index: 1;
float: left;
margin: 5px;
cursor: pointer;
}
#twtt:after {
content: "\f099";
font-family: 'Font Awesome 5 Brands';
font-weight: 900;
width: 20px;
height: 20px;
font-size: 18px;
color: #fff;
display: block;
background-color: transparent;
background-size: 100% 100%;
cursor: pointer;	
line-height: 19px;
}
#myPopUp2:after {
content: "\f1e0";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
width: 20px;
height: 20px;
font-size: 18px;
color: #fff;
display: block;
background-color: transparent;
padding: 5px;
background-size: 100% 100%;
cursor: pointer;
line-height: 19px;
}
.popupTheme i, .popupThemeblue i {
width: 20px;
height: 20px;
font-size: 18px;
color: #fff;
display: block;
background-color: transparent;
padding: 5px;
background-size: 100% 100%;
cursor: pointer;
}
.popupThemeblue i {
width: 20px;
height: 20px;
font-size: 18px;
color: #fff;
display: block;
background-color: transparent;
padding: 10px;
background-size: 100% 100%;
cursor: pointer;
}
.popupTheme i:hover {background-color: #066196}
/*Blue theme*****************/
.popupThemeblue {background-color: #076fac}
.popupThemeblue i {background-color: #076fac}
.popupThemeblue i:hover, #twtt:hover, #myPopUp2:hover {background-color: #066196}
/*Popup arrow theme and settings********************************************/

.pop-cont.pop-left::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -7px;
border-width: 7px;
border-style: solid;
border-color: transparent transparent transparent #333;
z-index: 100;
}
/*Blue theme**************************************************************/
.pop-cont.pop-top.popupThemeblue::after {border-color: #076fac transparent transparent transparent}
.pop-cont.pop-bottom.popupThemeblue::before {border-color: transparent transparent #076fac transparent !important}
.pop-cont.pop-left.popupThemeblue::after {border-color: transparent transparent transparent #076fac!important}
.pop-cont.pop-right.popupThemeblue::before {border-color: transparent #076fac transparent transparent !important}
/*Popup menu container********************************************************/
.pop-cont {
margin: auto;
position: relative;
display: block;
cursor: pointer;
border-radius: 6px;
box-shadow: 3px 3px 3px #888888;
}
.pop-cont, .pop-item, .popupTheme {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
/*Individual menu item*/
.pop-item {
height: 100%;
display: block;
width: 20px;
height: 20px;
text-align: center;
padding: 10px;
text-decoration: none;
float: left;
}
.item-side {float: none !important}
.pop-item i {margin: -10px 0 0 -10px}
/*Position of the popup*******************************************************/

.pop-left {
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
margin-top: -5px;
}
.animate-flip {
-webkit-animation: animateFlip 0.4s 1 ease;
}
@-webkit-keyframes animateFlip {
from {
transform: rotate3d(2, 2, 2, 180deg);
opacity: 0;
}
to {
transform: rotate3d(0, 0, 0, 0deg);
opacity: 1;
}
}
@keyframes animateFlip {
from {
transform: rotate3d(2, 2, 2, 180deg);
opacity: 0;
}
to {
transform: rotate3d(0, 0, 0, 0deg);
opacity: 1;
}
}
/*Styling for the different menu item's borders****************************/
.leftBorder {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.rightBorder {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.bottomBorder {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.topBorder {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}