html,
body {
font-size: 13px;
color: #969595;
font-family: "Open Sans", sans-serif;
background-color: transparent;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Open Sans', sans-serif;
line-height: 1.25;
}
h9 {
font-size: 48px;
}
h9 {
font-family: 'Arimo', sans-serif;
text-transform: uppercase;
font-weight: 700;
color: #444;
margin: 0;
padding: 0;
line-height:1;
}
h1 {
font-size: 3.62rem;
}
h5 {
font-size: 1.154rem;
}
p {
line-height: 1.8;
}
a {
color: #4aa3df;
transition: all 0.3s;
}
a:hover {
text-decoration: none;
}
blockquote {
border: 0;
padding: 0;
margin-bottom: 30px;
}
ul {
list-style-type: none;
padding: 0;
}
/******************** 1.1 BUTTONS ********************/
.btn {
border-radius: 4px;
transition: all 0.3s;
}
.btn-base {
background-color: #4aa3df;
color: #fff !important;
border: 1px solid #4aa3df;
}
.btn-base:hover {
background-color: #258cd1;
border-color: #258cd1;
}
.btn-trans {
background-color: transparent;
border: 1px solid #4aa3df;
}
.btn-trans:hover {
background-color: #4aa3df;
color: #fff;
}
.btn-md {
font-size: 1.3rem;
padding: 12px 22px;
}
.btn-lg {
font-size: 1.85rem;
padding: 18px;
font-weight: 600;
}
.btn-lg [class^="icon-"],
.btn-lg [class*="icon-"] {
width: 25px;
margin-right: 10px;
margin-top: 3px;
vertical-align: top;
}
.btn-rounded {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
}
.buttons-group .btn {
margin-left: 15px;
margin-right: 15px;
margin-bottom: 30px;
}
/******************** ICONOGRAPHY ********************/
[class^="icon-"],
[class*="icon-"] {
vertical-align: middle;
height: auto;
transition: all 0.3s;
width: 20px;
}
.outer-shape {
position: relative;
width: 70px;
}
.outer-shape .rectangle {
position: relative;
width: 100%;
height: auto;
fill: transparent;
stroke-width: 1px;
stroke: #4aa3df;
transition: all 0.3s;
}
.outer-shape [class^="icon-"],
.outer-shape [class*="icon-"] {
position: absolute;
left: calc(50% - 20px);
top: calc(50% - 12px);
fill: #4aa3df;
transition: all 0.3s;
}
.outer-shape.right .rectangle {
transform: rotateY(180deg);
}
.outer-shape.right [class^="icon-"],
.outer-shape.right [class*="icon-"] {
left: auto;
right: calc(50% - 20px);
}
.outer-shape.big {
width: 100px;
}
.outer-shape.big [class^="icon-"],
.outer-shape.big [class*="icon-"] {
width: 25px;
left: calc(50% - 25px);
top: calc(50% - 15px);
}
.outer-shape.big.right [class^="icon-"],
.outer-shape.big.right [class*="icon-"] {
left: auto;
right: calc(50% - 25px);
}
.media:hover .outer-shape .rectangle {
fill: #4aa3df;
}
.media:hover .outer-shape [class^="icon-"],
.media:hover .outer-shape [class*="icon-"] {
fill: #fff;
}
/******************** 1.3 SECTION SPECIFIC ********************/
.white-bg {
background-color: #fff;
color: #919191;
}
.off-white {
background-color: #f9f9f9;
}
.off-white2 {
background-color: #f9f9f9;
}
.overlay {
position: relative;
color: #fff;
}
.overlay:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.overlay .section-title {
color: #fff;
}
.overlay .section-title-2:before,
.overlay .section-title-2:after {
border-color: #fff;
}
.overlay .btn-trans {
border: 1px solid #fff;
color: #fff;
}
.overlay .btn-trans:hover {
background-color: #4aa3df;
border-color: #4aa3df;
}
.overlay [class^="icon-"],
.overlay [class*="icon-"] {
fill: #fff;
}
.section-title {
margin-top: 0;
color: #100f0f;
}
.section-title2 {
margin-top: 0;
color: #ffffff;
}
.section-sub-title {
font-size: 1.15rem;
line-height: 2;
margin-bottom: 0;
}
.section-heading {
margin-bottom: 80px;
}
.section-title-1 + .section-sub-title {
margin-top: 30px;
}
.section-title-2 {
display: inline-block;
position: relative;
}
.section-title-2:before,
.section-title-2:after {
content: "";
border-top: 2px solid #969595;
width: 100px;
position: absolute;
top: 21px;
}
.section-title-2:before {
left: -130px;
}
.section-title-2:after {
right: -130px;
}
@media (max-width: 767px) {
.section-title-2 {
display: block;
}
.section-title-2:before {
border-color: transparent !important;
}
.section-title-2:after {
right: 50%;
top: auto;
bottom: -15px;
transform: translateX(50%);
}
}
.prapa {
background-color:black;
opacity:0.5;
height: 20%;
width:100%;
}
/******************** 1.4 MISC ********************/
.media-left {
padding-right: 20px;
}
.form-control {
box-shadow: none;
color: #969595;
}
.form-control:hover,
.form-control:focus {
box-shadow: none;
}
.form-control:focus {
border-color: #4aa3df;
}
/******************** 1.5 HELPER CLASS ********************/
.margin-top-30 {
margin-top: 30px;
}
.margin-top-40 {
margin-top: 40px;
}
.margin-top-80 {
margin-top: 80px;
}
.margin-bottom-80 {
margin-bottom: 80px;
}
.margin-bottom-50 {
margin-bottom: 50px;
}
.margin-bottom-40 {
margin-bottom: 40px;
}
.margin-bottom-30 {
margin-bottom: 30px;
}
.margin-30 {
margin-top: 30px;
margin-bottom: 30px;
}
.margin-50 {
margin-top: 50px;
margin-bottom: 50px;
}
.margin-auto {
margin-left: auto;
margin-right: auto;
}
.padding-top-50 {
padding-top: 50px;
}
.padding-bottom-30 {
padding-bottom: 30px;
}
.padding-bottom-40 {
padding-bottom: 40px;
}
.padding-right-35 {
padding-right: 35px;
}
.padding-left-35 {
padding-left: 35px;
}
.padding-100 {
padding-top: 100px;
padding-bottom: 100px;
}
.padding-50 {
padding-top: 50px;
padding-bottom: 50px;
}
.padding-200 {
padding-top: 200px;
padding-bottom: 200px;
}
/*
|----------------------------------------------------------------------------
| 2. NAVBAR
|----------------------------------------------------------------------------
*/
@media (max-width: 768px) {
.nav > li > a {
text-transform: uppercase;
font-size: 15px;
color: #2b9eff !important;
}
}
.nav > li.active > a {
color: #41f12a;
}
.nav > li > a {
text-transform: uppercase;
font-size: 15px;
color: #ffffff;
}
.nav > li > a:hover,
.nav > li > a:focus {
color: #4aa3df;
background-color: #f9f9f9;
}
.navbar {
background: #fff;
border-bottom: 1px solid #efefef;
}
.navbar-header [class^="icon"],
.navbar-header [class*="icon"] {
width: 42px;
height: 42px;
background-color: #e74c3c;
padding: 7px;
fill: #fff;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-ms-border-radius: 7px;
-o-border-radius: 7px;
border-radius: 7px;
}
.navbar-brand {
height: 80px;
}
.navbar-brand .logo {
height: 100%;
width: auto;
}
.navbar-collapse {
border-color: #efefef;
}
/******************** 2.1 NAVBAR STYLE - FIXED TOP ********************/
.navbar-top {
transition: all 0.3s;
}
@media (min-width: 768px) {
.navbar-top .navbar-nav > li > a {
padding-top: 30px;
padding-bottom: 30px;
background-color: transparent;
}
.navbar-fixed-top {
background-color: transparent;
border-color: transparent;
}
.navbar-fixed-top .navbar-nav > li > a {
color: #fffff;
}
.navbar-fixed-top .navbar-nav > li > a:hover,
.navbar-fixed-top .navbar-nav > li > a:focus {
color: #4aa3df;
}
.navbar-fixed-top.scrolling {
background-color: #fff;
border-color: #efefef;
}
.navbar-fixed-top.scrolling .navbar-nav > li > a {
color: #969595;
}
.navbar-fixed-top.scrolling .navbar-nav > li:hover > a,
.navbar-fixed-top.scrolling .navbar-nav > li:focus > a,
.navbar-fixed-top.scrolling .navbar-nav > li.active > a {
color: #4aa3df;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.navbar-top .navbar-nav > li > a {
text-transform: capitalize;
padding-left: 8px;
padding-right: 8px;
}
}
/******************** 2.2 NAVBAR STYLE - LEFT ********************/
.navbar-fixed-left {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 99999;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
border-right: 1px solid #efefef;
margin-bottom: 0;
}
@media (min-width: 768px) {
.navbar-left-switch {
position: fixed;
top: 100px;
left: 0;
background: #fff;
width: 55px;
height: 55px;
z-index: 10;
border: 1px solid #efefef;
display: flex;
align-items: center;
justify-content: center;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
cursor: pointer;
}
.navbar-left-switch [class*="icon-"],
.navbar-left-switch [class^="icon-"] {
width: 30px;
height: 30px;
}
.navbar-fixed-left {
bottom: 0;
right: auto;
left: -202px;
transition: all 0.5s;
}
.navbar-fixed-left.toggle-nav {
left: 0;
}
.navbar-fixed-left .container {
width: 200px;
}
.navbar-fixed-left .navbar-header {
float: none;
margin-top: 30px;
margin-bottom: 30px;
}
.navbar-fixed-left .navbar-brand {
float: none;
}
.navbar-fixed-left .navbar-brand > img {
margin-left: auto;
margin-right: auto;
}
.navbar-fixed-left .navbar-nav {
float: none;
margin-left: -30px;
margin-right: -30px;
}
.navbar-fixed-left .navbar-nav > li {
float: none;
margin-right: -1px;
}
.navbar-fixed-left .navbar-nav > li > a {
padding-left: 60px;
border-bottom: 1px solid #efefef;
}
.navbar-fixed-left .navbar-nav > li.active {
border-right: 3px solid #4aa3df;
}
.navbar-fixed-left .navbar-nav > li.active > a {
background-color: #efefef;
}
}
/*
|----------------------------------------------------------------------------
| 3. HOME
|----------------------------------------------------------------------------
*/
.home {
padding-bottom: 170px;
}
.home .section-title {
text-transform: uppercase;
color: #fff;
}
.home .section-sub-title {
font-size: 1.385rem;
padding: 0 60px 20px 60px;
}
.home .section-title {
font-weight: 700;
}
.image-bg {
background: url(../images/baneri1.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/*
|----------------------------------------------------------------------------
| 4. APP DESCRIPTION
|----------------------------------------------------------------------------
*/
.app-description {
padding-top: 43px;
}
@media (min-width: 992px) {
.features-img {
}
}
@media (max-width: 991px) {
.features-img img {
margin: auto;
}
}
.add-svg {
width: 40px;
height: 40px;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%235eedde%22%20d%3D%22M1684%20408q-67%2098-162%20167%201%2014%201%2042%200%20130-38%20259.5t-115.5%20248.5-184.5%20210.5-258%20146-323%2054.5q-271%200-496-145%2035%204%2078%204%20225%200%20401-138-105-2-188-64.5t-114-159.5q33%205%2061%205%2043%200%2085-11-112-23-185.5-111.5t-73.5-205.5v-4q68%2038%20146%2041-66-44-105-115t-39-154q0-88%2044-163%20121%20149%20294.5%20238.5t371.5%2099.5q-8-38-8-74%200-134%2094.5-228.5t228.5-94.5q140%200%20236%20102%20109-21%20205-78-37%20115-142%20178%2093-10%20186-50z%22%2F%3E%3C%2Fsvg%3E");
display: inline-block;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
/*
|----------------------------------------------------------------------------
| 5. VIDEO
|----------------------------------------------------------------------------
*/
.video {
position: relative;
}
.video .container {
transition: all 0.3s;
}
.video:before {
transition: all 1s;
}
.video.overlay:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
}
.video.dark:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.video .playing {
opacity: 0.4;
}
.video video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background: url(../video/video.jpg) no-repeat;
background-size: cover;
}
/*
=================================================================
Per me ja ndryshy ngjyrat activav , Active dhe Active2
=================================================================
*/
.menu_container > ul > li.active > a {
border-bottom: solid 0px #428bca !important;
color: #25ff1d !important;
}
.menu_container > ul > li:hover > a {
border-bottom: solid 0px #428bca !important;
color: #46c4e8 !important;
}
.menu_container > ul > li.active2 > a {
border-bottom: solid 0px #428bca !important;
color: #22a708 !important;
}
/*Text Section*/
.text-section {
text-align: left;
padding: 100px 0;
background: #fff;
}
.text-section p.subtitle {
text-align: left;
color: #5dae87;
font-size: 17px;
margin-bottom: 40px;
}
.text-section .image {
text-align: center;
}
.text-section .image.align-left {
float: left;
width: 50%;
padding: 0 20px;
}
.text-section .text.align-left {
float: left;
width: 50%;
padding: 0 10% 0 40px;
}
.text-section .image.align-right {
float: right;
width: 50%;
padding: 0 20px;
}
.text-section .text.align-right{
float: right;
width: 50%;
padding: 0 40px 0 10%;
}
.text-section .image.align-center {
}
.text-section .text.align-center {
text-align: center;
width: 80%;
margin: 0 auto;
}
.text-section .text.align-center p.subtitle {
text-align: center;
}
.text-section ul.list-checkmarks {
margin-top: 40px;
}
ul.list-checkmarks li {
text-align: left;
list-style-image: none;
background: url(../images/checkmark.png) top left no-repeat;
background-position: 0 2px;
margin: 10px 0;
padding: 0 10px 10px 40px;
}
@media only screen and (max-width: 720px) {
.text-section .text {
float: none!important;
text-align: center;
}
.text-section .text.align-right,
.text-section .text.align-left,
.text-section .image.align-right,
.text-section .image.align-left {
width: 100%;
}
.text-section .image {
float: none!important;
width: 80%!important;
padding: 0 20px;
margin: 0 auto 60px auto;
}
.text-section .text p.subtitle {
text-align: center;
}
}
.wrapper {
max-width: 1190px;
margin: 0 auto;
position: relative;
}
/*
=================================================================
Kontieri 1 2 3 4 5
=================================================================
*/
.konti1 {
width: 99%;
margin: 10px auto;
position: relative;
text-align:center;
}
.konti2 {
background: green;
height: 310px;
width: 290px;
display:inline-block;
margin: 10px;
border-right-width: 5px;
border-right-color: #f4f2e7;
color:white;
border-top-color: #d3d0bd;
border-top-style: solid;
background: url(../images/prapa.jpg); /* will get clipped */
border-radius: 37px 37px 37px 37px;
-moz-border-radius: 37px 37px 37px 37px;
-webkit-border-radius: 37px 37px 37px 37px;
border: 0px solid #000000;
-webkit-box-shadow: 10px 10px 37px -20px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 37px -20px rgba(0,0,0,0.75);
box-shadow: 10px 10px 37px -20px rgba(0,0,0,0.75);
margin-bottom: 100px;
overflow: auto;
}
.konti3 {
color:white;
background: green;
height: 310px;
width: 290px;
display:inline-block;
margin: 10px;
border-right-style: solid;
border-right-width: 5px;
border-right-color: #f4f2e7;
overflow: auto;
border-top-color: #d3d0bd;
border-top-style: solid;
background: url(../images/prapa2.jpg); /* will get clipped */
border-radius: 37px 37px 37px 37px;
-moz-border-radius: 37px 37px 37px 37px;
-webkit-border-radius: 37px 37px 37px 37px;
border: 0px solid #000000;
-webkit-box-shadow: 10px 10px 37px -20px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 37px -20px rgba(0,0,0,0.75);
box-shadow: 10px 10px 37px -20px rgba(0,0,0,0.75);
margin-bottom: 100px;
overflow: auto;
}
.konti4 {
background: green;
height: 310px;
width: 290px;
display:inline-block;
margin: 10px;
color:white;
border-left-style: solid;
border-left-width: 5px;
border-left-color: #f4f2e7;
overflow: auto;
border-top-color: #d3d0bd;
border-top-style: solid;
background: url(../images/prapa3.jpg); /* will get clipped */
border-radius: 37px 37px 37px 37px;
-moz-border-radius: 37px 37px 37px 37px;
-webkit-border-radius: 37px 37px 37px 37px;
border: 0px solid #000000;
-webkit-box-shadow: 10px 10px 37px -20px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 37px -20px rgba(0,0,0,0.75);
box-shadow: 10px 10px 37px -20px rgba(0,0,0,0.75);
margin-bottom: 100px;
overflow: auto;
}
.konti5 {
background: green;
height: 310px;
width: 290px;
display:inline-block;
margin: 10px;
color:white;
border-left-style: solid;
border-left-width: 5px;
border-left-color: #f4f2e7;
overflow: auto;
border-top-color: #d3d0bd;
border-top-style: solid;
background: url(../images/prapa4.jpg); /* will get clipped */
border-radius: 37px 37px 37px 37px;
-moz-border-radius: 37px 37px 37px 37px;
-webkit-border-radius: 37px 37px 37px 37px;
border: 0px solid #000000;
-webkit-box-shadow: 10px 10px 37px -20px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 37px -20px rgba(0,0,0,0.75);
box-shadow: 10px 10px 37px -20px rgba(0,0,0,0.75);
margin-bottom: 100px;
overflow: auto;
}
/*--------------------------------------------------------------
# Intro Section
--------------------------------------------------------------*/
#intro {
display: table;
width: 100%;
height: 100vh;
background: #000;
}
#intro .carousel-item {
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#intro .carousel-item::before {
content: '';
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
height: 100%;
width: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
#intro .carousel-container {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
#intro .carousel-content {
text-align: center;
}
#intro h2 {
color: #fff;
margin-bottom: 30px;
font-size: 48px;
font-weight: 700;
}
@media (max-width: 768px) {
#intro h2 {
font-size: 28px;
}
}
#intro p {
width: 80%;
margin: 0 auto 30px auto;
color: #fff;
}
@media (min-width: 1024px) {
#intro p {
width: 60%;
}
}
#intro .carousel-fade .carousel-inner .carousel-item {
-webkit-transition-property: opacity;
transition-property: opacity;
}
#intro .carousel-fade .carousel-inner .carousel-item,
#intro .carousel-fade .carousel-inner .active.carousel-item-left,
#intro .carousel-fade .carousel-inner .active.carousel-item-right {
opacity: 0;
}
#intro .carousel-fade .carousel-inner .active,
#intro .carousel-fade .carousel-inner .carousel-item-next.carousel-item-left,
#intro .carousel-fade .carousel-inner .carousel-item-prev.carousel-item-right {
opacity: 1;
transition: 0.5s;
}
#intro .carousel-fade .carousel-inner .carousel-item-next,
#intro .carousel-fade .carousel-inner .carousel-item-prev,
#intro .carousel-fade .carousel-inner .active.carousel-item-left,
#intro .carousel-fade .carousel-inner .active.carousel-item-right {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#intro .carousel-control-prev, #intro .carousel-control-next {
width: 10%;
}
@media (min-width: 1024px) {
#intro .carousel-control-prev, #intro .carousel-control-next {
width: 5%;
}
}
#intro .carousel-control-next-icon, #intro .carousel-control-prev-icon {
background: none;
font-size: 32px;
line-height: 1;
}
#intro .carousel-indicators li {
cursor: pointer;
}
#intro .btn-get-started {
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
letter-spacing: 1px;
display: inline-block;
padding: 8px 32px;
border-radius: 50px;
transition: 0.5s;
margin: 10px;
color: #fff;
background: #18d26e;
}
#intro .btn-get-started:hover {
background: #fff;
color: #18d26e;
}
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
color:black;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
margin:0px;
width:100%;
}
.modalDialog > div {
width: 350px;
position: relative;
margin: 15% auto;
padding: 5px 20px 13px 20px;
border-radius: 20px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #147eea;
color: #FFFFFF;
line-height: 25px;
right: 10px;
text-align: center;
top: 3px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
/*
|----------------------------------------------------------------------------
| 6. FEATURES
|----------------------------------------------------------------------------
*/
.features {
padding-bottom: 60px;
}
.features .media:hover .section-title {
color: #4aa3df;
}
/*
|----------------------------------------------------------------------------
| 7. TESTIMONIAL
|----------------------------------------------------------------------------
*/
.testimonial.image-bg {
background: url(../images/testimonial.jpg) no-repeat center center;
}
.testimonial cite {
display: block;
font-style: normal;
font-size: 4 rem;
line-height: 2;
}
.testimonial .person {
margin-bottom: 0;
}
.testimonial .person span {
display: block;
line-height: 1.6;
}
.testimonial .name {
font-size: 12px;
}
.testimonial .company {
font-size: 10px;
}
.testimonial-potraits {
list-style-type: none;
padding: 0;
}
.testimonial-potraits .item {
display: inline-block;
width: 60px;
margin: 0 7px;
position: relative;
cursor: pointer;
}
.nentitull{
font-size: 1.17rem;
line-height: 1.3;
margin-bottom: 5px;
padding-left:11px;
padding-right:11px;
color:#969595;
font-family:'Raleway', sans-serif;
}
.testimonial-potraits .item:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-ms-border-radius: 7px;
-o-border-radius: 7px;
border-radius: 7px;
background-color: rgba(0, 0, 0, 0.3);
}
.testimonial-potraits .item.active:before {
background-color: transparent;
}
.testimonial-potraits img {
width: 100%;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-ms-border-radius: 7px;
-o-border-radius: 7px;
border-radius: 7px;
background-color: #fff;
padding: 3px;
}
.testimonial-contents {
position: relative;
}
.testimonial-contents .owl-prev,
.testimonial-contents .owl-next {
position: absolute;
top: 50px;
background-color: rgba(0, 6, 0, 0.8);
background: rgba(0, 6, 0, 0.8);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
width: 40px;
height: 40px;
line-height: 35px;
transition: all 0.3s;
}
.testimonial-contents .owl-prev:hover,
.testimonial-contents .owl-next:hover {
background-color: #4aa3df;
}
.testimonial-contents .owl-prev {
left: 0;
}
.testimonial-contents .owl-next {
right: 0;
}
/*
|----------------------------------------------------------------------------
| 8. SCREENSHOTS
|----------------------------------------------------------------------------
*/
.swiper-frame img {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
width: 366px;
height: auto;
}
.swiper-button-next,
.swiper-button-prev {
top: auto;
right: auto;
background-size: 8px 12px;
width: 8px;
height: 12px;
margin-top: 20px;
transform: translateX(-50%);
}
.swiper-button-prev {
left: calc(50% - 20px);
}
.swiper-button-next {
left: calc(50% + 20px);
}
.swiper-slide {
margin-top: 90px;
margin-bottom: 90px;
}
.swiper-slide img {
width: 320px;
}
/*
|----------------------------------------------------------------------------
| 9. BLOGS
|----------------------------------------------------------------------------
*/
/******************** 9.1 RECENT BLOGS ********************/
.recent-blogs {
padding-bottom: 70px;
}
.blog-items {
overflow: hidden;
/******************** 9.2 CAROUSEL CONTROLS ********************/
}
.blog-items p {
margin-bottom: 0;
}
.blog-items .section-title {
font-size: 16px;
}
.blog-items .meta-info {
text-transform: uppercase;
font-size: 10px;
margin-bottom: 20px;
}
.blog-items .meta-info a {
color: #919191;
}
.blog-items .meta-info a:hover {
color: #4aa3df;
}
.blog-items .carousel-control {
right: 3px;
}
.blog-items .carousel-control.left {
left: auto;
top: calc(50% + 15px);
}
.blog-items .carousel-control.right {
top: calc(50% - 15px);
}
.media-item,
.media-content {
display: table-cell;
vertical-align: top;
}
.media-item {
max-width: 110px;
max-height: 100%;
}
.media-item img,
.media-item .carousel-inner > .item > img {
max-width: none;
}
.media-item + .media-content {
border-left-color: transparent;
}
.media-content {
overflow: hidden;
width: 100%;
padding: 20px;
border: 1px solid rgba(0, 0, 0, 0.03);
}
.media-content blockquote {
font-size: 1rem;
}
.post-blockquote .media-content {
padding-left: 80px;
position: relative;
}
.post-blockquote .meta-info {
margin-bottom: 0;
}
.post-blockquote [class*="icon-"],
.post-blockquote [class*="icon-"] {
fill: #4aa3df;
position: absolute;
left: 20px;
top: 30px;
width: 40px;
}
/******************** 9.3 VIDEO POST ********************/
.post-video .media-item {
position: relative;
}
.post-video .video-link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
background-color: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
}
.post-video .icon-play {
fill: #fff;
width: 50px;
}
.post-video .icon-play:hover {
fill: #4aa3df;
}
.video-element {
position: relative;
}
.video-element:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
}
.video-element.dark:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.video-element:before {
transition: all 1s;
}
.video-element .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: transparent;
border: 2px solid #fff;
padding: 20px;
}
.video-element video {
width: 100%;
height: 100%;
}
/******************** 9.4 SLIDE SHOW POST ********************/
.carousel-control {
font-size: 0;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.5);
text-shadow: 0 0 0;
top: 50%;
width: 25px;
height: 25px;
line-height: 25px;
display: table-cell;
vertical-align: middle;
}
.carousel-control:hover,
.carousel-control:focus {
background-color: #4aa3df;
opacity: 1;
}
.carousel-control [class*="icon-"],
.carousel-control [class^="icon-"] {
fill: #fff;
}
.carousel-control.left {
left: 3px;
}
.carousel-control.right {
right: 3px;
}
.carousel-control.left,
.carousel-control.right {
background-image: none;
}
.carousel-indicators {
bottom: 0;
}
.carousel-indicators li {
width: 12px;
height: 12px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-ms-border-radius: 12px;
-o-border-radius: 12px;
border-radius: 12px;
margin: 0 2px;
transition: all 0.5s;
border-color: #4aa3df;
}
.carousel-indicators li.active {
margin: 0 2px;
background-color: #4aa3df;
}
/*
|----------------------------------------------------------------------------
| 9.5 SINGLE BLOG POSTS
|----------------------------------------------------------------------------
*/
@media (min-width: 768px) {
.blog-post {
padding-right: 80px;
}
}
.blog-post .post-title {
font-size: 2rem;
color: #313131;
margin-top: 0;
margin-bottom: 20px;
}
.blog-post .meta-info {
list-style-type: none;
padding: 0;
margin-top: 20px;
margin-bottom: 20px;
}
.blog-post .meta-info li {
display: inline-block;
margin-right: 30px;
font-size: 1.3rem;
}
.blog-post .meta-info li a {
color: #919191;
}
.blog-post .meta-info li [class*="icon-"],
.blog-post .meta-info li [class^="icon-"] {
vertical-align: middle;
fill: #4aa3df;
margin-right: 10px;
}
.blog-post blockquote {
margin-bottom: 0;
}
.share-post {
color: #4aa3df;
margin: 50px 0 40px 0;
}
.share-post ul {
display: inline-block;
}
.share-post ul li {
display: inline-block;
margin-left: 15px;
}
.share-post [class^="icon-"],
.share-post [class*="icon-"] {
fill: #969595;
}
.share-post [class^="icon-"]:hover,
.share-post [class*="icon-"]:hover {
fill: #4aa3df;
}
/******************** 9.5.1 COMMENT AREA ********************/
.comment-area .area-heading {
font-size: 1.5rem;
color: #313131;
}
.comment-area .media-left {
vertical-align: middle;
}
.comment-area img {
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
max-width: 100px;
}
.comment-area .name {
color: #313131;
font-size: 1.3rem;
margin-right: 10px;
}
.comment-area .name:hover {
color: #4aa3df;
}
.comment-area .date,
.comment-area .reply {
font-size: 11px;
}
.comment-area .reply {
font-weight: 700;
}
.comment-area ul {
margin-bottom: 0;
}
.comment-area ul li .media {
padding: 20px 20px 10px 20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
margin-top: 30px;
}
.comment-area > ul > li .media {
background-color: #efefef;
}
@media (min-width: 768px) {
.comment-area > ul > li .media {
width: calc(100% - 80px);
}
}
.comment-area > ul > li ul .media {
width: 100%;
background-color: #f9f9f9;
}
@media (min-width: 768px) {
.comment-area > ul > li > ul {
margin-left: 80px;
}
}
/******************** 9.5.2 COMMENT FORM ********************/
.comment-form input.form-control {
height: 45px;
}
.comment-form .form-control {
padding: 10px 40px 10px 20px;
border-color: #969595;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-ms-border-radius: 7px;
-o-border-radius: 7px;
border-radius: 7px;
}
.comment-form .form-group {
position: relative;
margin-bottom: 30px;
}
.comment-form [class*="icon-"],
.comment-form [class^="icon-"] {
position: absolute;
top: 14px;
right: 15px;
width: 15px;
fill: currentColor;
}
.comment-form .btn {
height: 45px;
}
body.modal-content { /* ...or body.dialogShowing */
overflow: hidden;
}
a[ id= "home2" ]:target ~ #home2 section. {
-webkit-transform: translateY( 0px);
transform: translateY( 0px );
}
a[ id="EXE_DIV2" ]:target ~ #EXE_MAIN article.panel {
-webkit-transform: translateY( -500px );
transform: translateY( -500px );
}
a[ id= "EXE_DIV3" ]:target ~ #EXE_MAIN article.panel {
-webkit-transform: translateY( -1000px );
transform: translateY( -1000px );
}
/*
|----------------------------------------------------------------------------
| 10. PRICING TABLE
|----------------------------------------------------------------------------
*/
.bossi
{
width:100%;
z-index:2;
position:relative;
color:white;
}
#map {
width: 360px;
height: 280px;
-moz-border-radius: 32px;
-webkit-border-radius: 32px;
border-radius: 32px;
}
.pricing-table {
padding-bottom: 70px;
}
.pricing-table.image-bg {
background: url(../images/pricing-bg.jpg) no-repeat center center;
background-size: cover;
}
.posteri1 {
background: url(../images/vivid3.jpg) no-repeat ;
width:100%;
height:70%;
background-size: cover;
padding-top: 50px;
color:#ffffff;
}
.drucken {
margin: 0 auto;
width:100%;
position:inherit;
padding-bottom:50px;
}
.pricing-table.overlay:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
}
.pricing-plan {
background-color: rgba(255, 255, 255, 0.8);
color: #484747;
padding: 30px 10px;
}
.pricing-plan .offer {
display: inline-table;
}
.pricing-plan .currency,
.pricing-plan .price,
.pricing-plan .renew {
display: table-cell;
vertical-align: top;
}
.pricing-plan .price {
font-size: 4.62rem;
line-height: 1;
}
.pricing-plan .price span {
font-size: 30px;
padding-right: 5px;
}
.pricing-plan .currency {
font-size: 35px;
font-weight: 300;
line-height: 1.3;
}
.pricing-plan .renew {
vertical-align: bottom;
font-size: 1rem;
line-height: 2;
}
.pricing-plan .pill {
margin-top: 15px;
margin-bottom: 15px;
z-index:0;
}
.pricing-plan .objects {
padding-left: 30px;
padding-right: 30px;
}
.pricing-plan ul {
margin-bottom: 20px;
}
.pricing-plan ul li {
margin-bottom: 15px;
}
.pricing-plan .btn {
background-color: #f9f9f9;
border-color: #f9f9f9;
color: #969595;
padding-top: 10px;
padding-bottom: 10px;
}
.pricing-plan .btn:hover,
.pricing-plan .btn:focus {
background-color: #4aa3df;
border-color: #4aa3df;
color: #fff;
}
.pricing-plan.highlighten {
background-color: #fff;
color: #969595;
}
.pricing-plan.highlighten .offer {
color: #484747;
}
.pricing-plan.highlighten .pill p {
background-color: #4aa3df;
color: #fff;
}
.pricing-plan.highlighten .btn {
background-color: transparent;
border-color: #4aa3df;
}
.pricing-plan.highlighten .btn:hover {
background: #4aa3df;
}
.pill {
position: relative;
}
.pill p {
background-color: #f9f9f9;
display: inline-block;
padding: 8px 40px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
-ms-border-radius: 40px;
-o-border-radius: 40px;
border-radius: 40px;
z-index: 1;
position: relative;
}
.pill hr {
position: absolute;
left: 0;
right: 0;
top: 0;
}
/*
|----------------------------------------------------------------------------
| 11. Button
|----------------------------------------------------------------------------
*/
.myButton {
background-color:#14c944;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
border:2px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
padding:16px 76px;
text-shadow:0px 0px 0px #2f6627;
}
.myButton:hover {
background-color:#5cbf2a;
}
.myButton:active {
position:relative;
top:1px;
}
.preis{
background-image: url(../images/foot8.jpg) ;
background-position: center center;
color: white;
}
.preis2{
background-image: url(../images/mesi2.jpg) ;
background-position: center center;
color: white;
}
.preis7{
background-image: url(../images/mesi7.jpg) ;
font-style: blue;
background-position: center center;
color: white;
}
body.modal-open {
overflow: hidden;
}
/*
|----------------------------------------------------------------------------
| 11. SUBSCRIBE
|----------------------------------------------------------------------------
*/
.subscribe-form {
background: #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
padding: 30px 30px 0 30px;
}
@media (min-width: 768px) {
.subscribe-form {
padding: 50px 150px 20px;
}
}
.subscribe-form .form-control {
background-color: #f9f9f9;
box-shadow: none;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
border: 0;
padding-left: 25px;
padding-right: 25px;
}
.subscribe-form .form-control,
.subscribe-form .btn {
height: 45px;
}
/*
|----------------------------------------------------------------------------
| 12. DOWNLOAD
|----------------------------------------------------------------------------
*/
.download {
padding-bottom: 70px;
}
.download.image-bg {
background: url(../images/download-bg.jpg) no-repeat center center;
background-size: cover;
height: 650px;
}
.download.overlay:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
/*
|----------------------------------------------------------------------------
| 13. CONTACT US
|----------------------------------------------------------------------------
*/
.contact-us {
padding-bottom: 70px;
background: url(../images/footerr.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.address p {
padding-left: 30px;
position: relative;
}
.address p:before {
content: "";
height: 18px;
width: 18px;
position: absolute;
left: 0;
top: 2px;
background-color: currentColor;
}
.address .call:before {
-webkit-mask: url(icons/phone.svg) no-repeat 50% 50%;
-moz-mask: url(/icons/phone.svg) no-repeat 50% 50%;
-ms-mask: url(icons/phone.svg) no-repeat 50% 50%;
mask: url(icons/phone.svg) no-repeat 50% 50%;
-webkit-mask-size: cover;
-moz-mask-size: cover;
-ms-mask-size: cover;
mask-size: cover;
}
.address .email:before {
-webkit-mask: url(icons/envelope-o.svg) no-repeat 50% 50%;
-moz-mask: url(icons/envelope-o.svg) no-repeat 50% 50%;
-ms-mask: url(icons/envelope-o.svg) no-repeat 50% 50%;
mask: url(icons/envelope-o.svg) no-repeat 50% 50%;
-webkit-mask-size: cover;
-moz-mask-size: cover;
-ms-mask-size: cover;
mask-size: cover;
}
.address .post:before {
-webkit-mask: url(icons/map-marker.svg) no-repeat 50% 50%;
-moz-mask: url(icons/map-marker.svg) no-repeat 50% 50%;
-ms-mask: url(icons/map-marker.svg) no-repeat 50% 50%;
mask: url(icons/map-marker.svg) no-repeat 50% 50%;
-webkit-mask-size: cover;
-moz-mask-size: cover;
-ms-mask-size: cover;
mask-size: cover;
}
.social-media {
list-style: none;
padding: 0;
}
.social-media li {
display: inline-block;
}
.social-media li + li {
margin-left: 10px;
}
.social-media li [class^="icon-"],
.social-media li [class*="icon-"] {
padding: 5px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-ms-border-radius: 7px;
-o-border-radius: 7px;
border-radius: 7px;
width: 30px;
height: 30px;
fill: currentColor;
}
.social-media li a {
color: currentColor;
}
.social-media li a:hover [class^="icon-"],
.social-media li a:focus [class^="icon-"],
.social-media li a:hover [class*="icon-"],
.social-media li a:focus [class*="icon-"] {
fill: #fff;
}
.social-media li a:hover .icon-facebook,
.social-media li a:focus .icon-facebook {
background: #002E62;
}
.social-media li a:hover .icon-twitter,
.social-media li a:focus .icon-twitter {
background: #54ABEE;
}
.social-media li a:hover .icon-google-plus,
.social-media li a:focus .icon-google-plus {
background: #D34836;
}
.social-media li a:hover .icon-dribbble,
.social-media li a:focus .icon-dribbble {
background: #EC4A89;
}
.quick-contact .form-control {
background-color: #fff;
box-shadow: inset 0 0 0;
}
.quick-contact .btn {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
.footer {
padding: 0px 0;
}
.footer p {
margin-bottom: 0;
font-weight: 600;
}
.footer p a {
color: #969595;
}
.footer p a:hover {
color: #4aa3df;
}
/*
|----------------------------------------------------------------------------
| SIDEBAR
|----------------------------------------------------------------------------
*/
.categories li {
border-left: 1px solid #efefef;
border-top: 1px solid #efefef;
}
.categories li:last-child {
border-bottom: 1px solid #efefef;
}
.categories li a {
color: #969595;
padding: 15px;
display: block;
}
.categories li:hover a {
background-color: #efefef;
color: #4aa3df;
}