html {
scroll-behavior:smooth;
}
body {
padding: 0;
margin: 0;
font-family: "Nunito Sans",Arial,sans-serif;
background: #fff;
font-size: 16px;
line-height: 1.8;
font-weight: 400;
color: #999;
}
body::-webkit-scrollbar {
width: 10px;
}
body::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #7DBACF7A;
}
body::-webkit-scrollbar-thumb {
background-color: #1F3950;
border-radius: 4px;
}
h2 {
font-size:30px;
}
h3 {
font-size:26px;
}
.errors {
color: red;
margin: 0;
line-height: 1.5;
padding: 0 15px;
width: 50%;
font-weight:bold;
}
.error {
font-weight:normal;
}
.input-errors {
color: red;
}
/* HOME SECTION */
.vheight100 {
height:100vh;
}
.vheight75 {
height:75vh;
}
.scrolled img {
height:35px !important;
}
.scrolled nav {
height:50px;
line-height:50px;
transition:all 0.3s ease-in-out 0s;
background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,0.9), rgba(255,255,255,0));
}
.scrolled ul {
margin-top:0;
}
footer .footer-none {
display: none;
}
header .header-none {
display: none;
}
.home-article {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.home-article .article-title {
background: rgba(255, 255, 255, 0.93);
padding: 50px;
position: relative;
bottom: -5px;
margin-top: 100px;
}
.home-article .welcome {
margin-top: 0 !important;
}
.home-article h1 {
font-size: 44px;
color: #000000;
line-height: 1.3;
font-weight: 300;
}
.home-article span {
font-weight:800;
text-transform:uppercase;
}
.home-article h3 {
font-size: 32px;
line-height: 1.5;
color: rgba(0, 0, 0, 0.8);
text-align: center;
}
.home-article .date {
text-align: right;
font-style: italic;
margin-bottom: 0;
margin-top: -30px;
}
.text-center {
text-align: center;
}
/*navigation*/
nav {
height: 80px;
line-height: 80px;
}
.navbar-brand {
padding-left: 15px;
}
.navbar-brand:hover, .navbar-brand:focus {
text-decoration:none;
}
.navbar-brand img {
height:75px;
transition:all 0.3s ease-in-out 0s;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
nav {
position: fixed;
width: 100%;
z-index: 99;
padding: 0 15px;
background-image: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,255,255,0.8) , rgba(255,255,255,0));
}
header ul {
display: flex;
float: right;
padding-left:15px;
margin-top:13px;
transition:all 0.3s ease-in-out 0s;
}
.nav-item select, .nav-item select:focus, .nav-item select:focus-visible, .nav-item select:active {
margin-left:20px;
background:none !important;
border:none !important;
outline:none;
cursor:pointer;
}
.nav-item a, .login {
font-size:16px;
padding: 0.7rem 0 0.7rem 20px;
font-weight:400;
color:#000;
text-decoration:none;
}
.nav-item span:before {
content:url('../font/flags/4x3/ua.svg');
}
.login {
cursor:pointer;
}
.nav-item a:hover, .nav-item a:focus, .login:hover {
text-decoration:none;
color:#000;
}
.nav-item .active {
color:#1F3950;
}
.nav-item span {
position:relative;
}
.nav-item span::before, .nav-item .active span::before, footer .login:before {
content:'';
position:absolute;
width:0;
height:2px;
bottom:-7px;
left:50%;
background:#1F3950 !important;
transition:all 0.3s ease-in-out 0s;
}
.nav-item:hover span::before, .nav-item .active span::before {
width:100%;
left:0;
}
.nav-item .login::before {
bottom: 0 !important;
}
.nav-item:hover .login::before {
bottom: 0 !important;
left: 20px !important;
width: calc(100% - 20px) !important;
}
footer .nav-item a, footer .nav-item a:hover, footer .nav-item a:focus {
color: #c0c0c0;
}
footer .nav-item a:before {
content: none;
}
/* SLIDER */
.hero {
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
text-orientation: sideways;
text-align: center;
text-orientation: sideways;
margin: 0rem;
position: fixed;
top: 0;
left: 1.5em;
height: 100%;
text-transform: uppercase;
font-weight: 500 !important;
letter-spacing: 5px;
font-size: 16px !important;
z-index: 1;
color: rgba(0, 0, 0, 0.3) !important;
}
.mySlides {
display: none;
}
.fade {
animation-name: fade;
animation-duration: 2s;
}
.slide {
height: 100vh;
background-size: cover;
position: absolute !important;
right: 0;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.welcome {
margin-top:150px;
font-weight: 600;
font-size: 14px;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(0,0,0,.3);
color: #1F3950;
background: #7DBACF;
background: -moz-linear-gradient(-45deg,#7DBACF 0%,#1F3950 100%);
background: -webkit-gradient(left top,right bottom,color-stop(0%,#7DBACF),color-stop(100%,#1F3950));
background: -webkit-linear-gradient(-45deg,#7DBACF 0%,#1F3950 100%);
background: -o-linear-gradient(-45deg,#7DBACF 0%,#1F3950 100%);
background: -ms-linear-gradient(-45deg,#7DBACF 0%,#1F3950 100%);
background: -webkit-linear-gradient(315deg,#7DBACF 0%,#1F3950 100%);
background: -o-linear-gradient(315deg,#7DBACF 0%,#1F3950 100%);
background: linear-gradient(135deg,#7DBACF 0%,#1F3950 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7DBACF', endColorstr='#1F3950', GradientType=1 );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.slider h1 {
font-size: 44px;
color: #000000;
line-height: 1.3;
font-weight: 300;
}
.slider span {
font-weight:800;
text-transform:uppercase;
}
.slider h3 {
font-size: 20px;
line-height: 1.5;
font-weight: 400;
color: rgba(0, 0, 0, 0.8);
}
.btn {
padding:15px 35px;
background: #7DBACF;
background: -moz-linear-gradient(-45deg,#7DBACF 0%,#1F3950 100%);
background: -webkit-gradient(left top,right bottom,color-stop(0%,#7DBACF),color-stop(100%,#1F3950));
background: -webkit-linear-gradient(-45deg,#7DBACF 0%,#1F3950 100%);
background: -o-linear-gradient(-45deg,#7DBACF 0%,#1F3950 100%);
background: -ms-linear-gradient(-45deg,#7DBACF 0%,#1F3950 100%);
background: -webkit-linear-gradient(315deg,#7DBACF 0%,#1F3950 100%);
background: -o-linear-gradient(315deg,#7DBACF 0%,#1F3950 100%);
background: linear-gradient(135deg,#7DBACF 0%,#1F3950 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7DBACF', endColorstr='#1F3950', GradientType=1 );
color:#fff;
font-size:18px;
border-radius:25px;
margin-top: 30px;
display: inline-block;
opacity:0.85;
transition:all 0.2s ease-in-out 0s;
}
.btn:hover, .btn:focus {
text-decoration:none;
color:#fff;
opacity:1;
}
/* FEATURES SECTION START */
#features-section {
padding:60px 0;
text-align:center;
}
#features-section img {
width:100px;
margin: 0 auto;
display: block;
filter: invert(16%) sepia(14%) saturate(2248%) hue-rotate(166deg) brightness(96%) contrast(86%);
}
/* FEATURES SECTION END*/
/* MODULES SECTION START */
#modules-section {
background: #f8f9fa;
}
#modules-section .center {
padding:50px 15% 30px;
text-align:center;
}
#modules-section .line {
width: 60%;
height: 1px;
background: #1F3950;
margin: 20px auto;
}
#modules-section .row {
display:flex;
}
#modules-section .tab-links, #modules-section .tabs {
padding-top:40px;
padding-bottom:40px;
}
#modules-section .tab-links {
background: #1F3950;
}
#modules-section .tab-links a {
display: block;
line-height: 60px;
color: #fff;
opacity:0.7;
font-size: 19px;
position:relative;
transition:all 0.4s ease-in-out 0s;
}
#modules-section .tab-links .active {
opacity:1;
font-size:20px;
}
#modules-section .tab-links a:hover, #modules-section .tab-links a:focus {
color:#fff;
text-decoration:none;
font-size:20px;
opacity:1;
}
#modules-section .tab-links a:before {
content: '';
width: 30px;
height: 30px;
position: absolute;
right: -60px;
top: 15px;
transform: rotate(45deg);
background: #f8f9fa;
transition:all 0.4s ease-in-out 0s;
}
#modules-section .tab-links a:hover:before, #modules-section .tab-links .active:before {
right: -35px;
}
#modules-section .tab-links img {
height: 40px;
margin-right: 20px;
filter: invert();
bottom: 5px;
position: relative;
}
#modules-section .tab {
display:none;
padding-left:50px;
font-size:16px;
opacity:0;
}
#modules-section .active-tab {
display:block;
transition: opacity 0.15s linear;
opacity:1;
}
#modules-section .tab img {
width: 100px;
display: block;
margin-bottom: 30px;
filter: invert(83%) sepia(6%) saturate(2453%) hue-rotate(161deg) brightness(85%) contrast(89%);
}
#modules-section .tab p {
color:#999999;
}
#modules-section .fade:not(.active-tab) {
opacity: 0;
}
#modules-section ul {
list-style:inside;
color:#999999;
}
#modules-section form {
display:flex;
}
#modules-section input {
line-height: 45px;
height: 45px;
margin-right: 20px;
min-width: 300px;
background:none;
}
#modules-section button {
border: none;
margin: 0 0 25px;
padding: 10px 45px;
display: block;
}
/* MODULES SECTION END */
/* PRICE SECTION START */
#price-section {
padding:50px 0;
}
#price-section .row {
display:flex;
}
#price-section .col-md-4:first-child {
z-index: 3;
}
#price-section .col-md-4:nth-child(2) {
z-index: 2;
}
#price-section .col-md-4:last-child {
z-index: 1;
}
#price-section h2 {
text-align:center;
color: #1F3950;
background: #7DBACF;
background: -moz-linear-gradient(-45deg,#7DBACF 0%,#1F3950 100%);
background: -webkit-gradient(left top,right bottom,color-stop(0%,#7DBACF),color-stop(100%,#1F3950));
background: -webkit-linear-gradient(-45deg,#7DBACF 0%,#1F3950 100%);
background: -o-linear-gradient(-45deg,#7DBACF 0%,#1F3950 100%);
background: -ms-linear-gradient(-45deg,#7DBACF 0%,#1F3950 100%);
background: -webkit-linear-gradient(315deg,#7DBACF 0%,#1F3950 100%);
background: -o-linear-gradient(315deg,#7DBACF 0%,#1F3950 100%);
background: linear-gradient(135deg,#7DBACF 0%,#1F3950 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7DBACF', endColorstr='#1F3950', GradientType=1 );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#price-section .price-block {
padding:30px;
border-radius:10px;
background: #7DBACF;
background: -moz-linear-gradient(-45deg,#7DBACF 0%,#1F3950 100%);
background: -webkit-gradient(left top,right bottom,color-stop(0%,#7DBACF),color-stop(100%,#1F3950));
background: -webkit-linear-gradient(-45deg,#7DBACF 0%,#1F3950 100%);
background: -o-linear-gradient(-45deg,#7DBACF 0%,#1F3950 100%);
background: -ms-linear-gradient(-45deg,#7DBACF 0%,#1F3950 100%);
background: -webkit-linear-gradient(315deg,#7DBACF 0%,#1F3950 100%);
background: -o-linear-gradient(315deg,#7DBACF 0%,#1F3950 100%);
background: linear-gradient(135deg,#7DBACF 0%,#1F3950 100%);
height:100%;
transition:all 0.4s ease-in-out 0s;
}
#price-section .price-block .price {
font-size: 44px;
font-weight: bold;
color: #fff;
width: 150px;
height: 150px;
line-height: 150px;
text-align: center;
margin: 0 auto 30px;
border-radius: 50%;
background: transparent;
transition:all 0.4s ease-in-out 0s;
border: 4px solid transparent;
}
#price-section .price-block .pay {
font-size: 26px;
margin-bottom: 20px;
border-color: #fff;
overflow: hidden;
}
#price-section .price-block .module-price {
line-height: 1.5;
padding-top: 23px;
}
#price-section .price-block .sale {
position: absolute;
transform: rotate(45deg);
background: #fff;
top: 20px;
right: -20px;
font-size: 18px;
padding: 5px 50px;
color: red;
font-weight: bold;
}
#price-section .price-block .pay span {
text-decoration: line-through;
font-size: 18px;
color: red;
}
#price-section .price-block:hover {
box-shadow: 0 0 10px #999;
}
#price-section .price-block p {
text-align: center;
font-size: 20px;
color: #fff;
font-weight: bold;
}
#price-section .price-block .txt {
font-size: 16px;
line-height: normal;
}
#price-section .price-note {
font-style: italic;
margin-top: -20px;
margin-bottom: 0;
padding-top: 50px;
}
#price-section h3 {
text-align: center;
display: block;
width: fit-content;
margin: 0px auto;
}
#price-section h3 span {
font-size: 46px;
color: #1F3950;
}
#price-section a {
text-align: center;
display: block;
margin: 0 auto 30px;
color:#7DBACF;
position: relative;
width: fit-content;
}
#price-section a:before {
content:'';
display: block;
width:0;
height: 1px;
position: absolute;
bottom: 0;
left:50%;
background: #7DBACF;
transition:all 0.3s ease-in-out 0s;
}
#price-section a:hover, #price-section a:focus, #price-section a:focus-visible, #price-section a:visited {
text-decoration: none;
}
#price-section a:hover:before {
width:100%;
left:0;
}
/* PRICE SECTION END */
/* START SECTION START */
#start-section {
background: #f8f9fa;
text-align: center;
padding: 50px 15px;
}
#start-section h3, #start-section .btn {
margin-top: 0;
}
/* START SECTION END */
/* ABOUT SECTION START */
#about-section {
background: #f8f9fa;
}
#about-section .row {
display:flex;
}
#about-section .about-img {
background: url(../images/tyler-franta-iusJ25iYu1c-unsplash.jpg);
height: 100%;
width: 100%;
display: block;
background-size: cover;
background-position: right;
}
#about-section .about-us {
padding-top: 30px;
padding-bottom: 30px;
}
#about-section .about-us p {
color:#999;
}
#about-section .foto {
width: 100%;
display: block;
border-radius: 50%;
}
#about-section .quote {
font-style: italic;
text-align: right;
}
#about-section .ceo {
text-align: right;
margin-top: 25px;
width: 80%;
float: right;
}
#about-section .ceo span {
display:block;
margin-top:15px;
font-weight:bold;
}
.margin-top-40 {
margin-top:40px;
}
.margin-top-0 {
margin-top: 0;
}
/* ABOUT SECTION END */
/* DONATE SECTION START */
#donate-section {
padding: 50px 0;
position:relative;
}
#donate-section h2 {
text-align: center;
}
#donate-section:before {
content:'';
background:url('../images/krakenimages-Y5bvRlcCx8k-unsplash.jpg');
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0.3;
background-size: cover;
background-position: center;
z-index:-1;
}
#donate-section p {
font-size:18px;
}
#donate-section a {
line-height:1;
}
#donate-section .qr-bg {
background: #fff;
padding: 10px;
width: fit-content;
margin: auto;
}
/* DONATE SECTION END */
/* IMAGE SECTION START */
#image-section img {
width:100%;
margin-top: 15px;
}
/* IMAGE SECTION END */
/* DEMO SECTION START */
#demo-section {
background: #f8f9fa;
padding: 50px 0;
overflow: hidden;
}
#demo-section h3 {
font-size: 20px;
}
#demo-section h4 {
font-size: 16px;
}
#demo-section img {
width: 100%;
padding: 15px;
}
#demo-section .img-bg {
background:url('../images/demo-full.png');
height: 100%;
}
#demo-section .btn {
margin: 30px auto 15px;
display: block;
width: fit-content;
padding: 15px 50px;
}
#demo-section li {
margin-bottom: 15px;
}
#demo-section li span {
font-weight: bold;
}
#demo-section .center {
text-align: center;
}
/* DEMO SECTION END */
/* ARTICLES SECTION START */
#articles-section {
padding: 30px 0;
}
#articles-section .article {
transition:all 0.3s ease-in-out 0s;
padding: 10px;
}
#articles-section .article:hover {
box-shadow: 0 0 5px 5px #dddddd;
}
#articles-section .article-title {
padding: 10px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 200px;
position: relative;
}
#articles-section .date {
background: #7DBACF;
background: -moz-linear-gradient(-45deg, #7DBACF 0%, #1F3950 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, #7DBACF), color-stop(100%, #1F3950));
background: -webkit-linear-gradient(-45deg, #7DBACF 0%, #1F3950 100%);
background: -o-linear-gradient(-45deg, #7DBACF 0%, #1F3950 100%);
background: -ms-linear-gradient(-45deg, #7DBACF 0%, #1F3950 100%);
background: -webkit-linear-gradient(315deg, #7DBACF 0%, #1F3950 100%);
background: -o-linear-gradient(315deg, #7DBACF 0%, #1F3950 100%);
background: linear-gradient(135deg, #7DBACF 0%, #1F3950 100%);
color: #fff;
padding: 5px 15px;
margin-left: -25px;
display: block;
width: fit-content;
}
#articles-section .title {
background: rgba(255, 255, 255, 0.95);
padding: 10px;
position: absolute;
bottom: -5px;
left: 5%;
width: 90%;
}
#articles-section h5 {
margin-top: 0;
margin-bottom: 15px;
font-size: 13px;
}
#articles-section h4 {
margin-top:0;
}
#articles-section .read {
text-align: right;
}
#articles-section .btn {
margin-top: 0;
padding: 10px 30px;
font-size: 14px;
}
#articles-section .nav-item {
margin-top: 10px;
text-align: right;
}
/* ARTICLES SECTION END */
/* ARTICLE START */
#article {
padding: 50px 15px;
}
#article .learn-more {
text-align: center;
}
#article span {
font-weight: bold;
}
#article ul {
list-style-type: disc;
padding-left: 20px;
}
#article .icon {
padding-left: 35px;
}
#article .icon::before {
position: absolute;
left: 15px;
}
#article .interface::before{
content: url('../images/icons/interface.svg');
}
#article .fast-create::before{
content: url('../images/icons/fast-start.svg');
}
#article .cloud-storage::before{
content: url('../images/icons/cloud.svg');
}
#article .savings::before{
content: url('../images/icons/savings.svg');
}
#article .fast-import::before{
content: url('../images/icons/fast-import.svg');
}
#article .print-pdf::before{
content: url('../images/icons/pdf.svg');
}
#article .testimonial {
font-size: 16px;
font-style: italic;
text-align: right;
}
#article .testimonial span {
font-size: 26px;
margin-left: 5px;
margin-right: 5px;
}
#article .images, #article .advantages {
margin-top: 30px;
margin-bottom: 15px;
}
#article .images img {
width: 100%;
border-radius: 10px;
box-shadow: 0 0 15px #cecece;
margin-bottom: 15px;
}
#article .advantages img {
width:80%;
max-width: 300px;
border-radius: 10px;
box-shadow: 0 0 15px #cecece;
display: block;
margin:auto;
margin-bottom: 15px;
}
/* ARTICLE END */
/* FOOTER START*/
footer {
background: #000;
padding: 50px 0;
color: #c0c0c0;
}
footer h3 {
margin-top:0;
}
footer .copyright {
text-align: center;
margin-top:30px;
}
footer ul {
list-style:inside;
}
footer li {
padding-bottom: 10px;
}
footer .login {
font-size:14px;
}
footer a, footer .login {
color:#c0c0c0;
position:relative;
}
footer a:before, footer .login:before {
content:'';
width:0;
height:1px;
left:50%;
position:absolute;
bottom:-5px;
background: #1F3950;
transition:all 0.3s ease-in-out 0s;
}
footer a:hover:before, footer .login:hover:before {
width:100%;
left:0;
}
footer a:hover, footer a:focus, footer .login:hover {
color:#c0c0c0;
text-decoration:none;
}
footer .links img {
width:20px;
filter: invert();
margin-right:20px;
}
footer .links a {
display:block;
padding-bottom:10px;
}
footer .links a:before {
bottom:5px;
}
footer input {
background:none;
line-height:2.5;
width:100% !important;
}
footer textarea {
background:none;
line-height:1.5;
width:100%;
resize:none;
outline:none;
border:none;
border-bottom:1px solid;
}
footer textarea:focus-visible, footer textarea:focus, footer textarea:active {
border-bottom: 1px solid;
}
footer .btn {
margin: 30px auto;
display: block;
min-width: 150px;
line-height: 1;
border: none;
}
footer .social {
list-style: none;
display: inline-block;
}
footer .social li {
display: block;
float: right;
margin: 0 15px 0 0;
padding: 0;
}
footer .social a::before {
width: 32px;
height: 32px;
position: relative;
display: block;
left: auto;
bottom: auto;
background:none;
}
footer .facebook::before {
content: url('../images/icons/facebook.svg');
}
footer .instagram::before {
content: url('../images/icons/instagram.svg');
}
footer .linkedin::before {
content: url('../images/icons/linkedin.svg');
}
/* FOOTER END */
/* UP btn */
#up {
position: fixed;
bottom: 10px;
right: 10px;
width: 50px;
height: 50px;
background: #fff;
border-radius: 50%;
opacity: 0.3;
cursor: pointer;
display:none;
z-index:999;
}
#up:before {
content:url('../images/icons/up.svg');
width: 100%;
height: 100%;
display: block;
}
#up:hover {
background: #7DBACF;
background: -moz-linear-gradient(-45deg,#7DBACF 0%,#1F3950 100%);
background: -webkit-gradient(left top,right bottom,color-stop(0%,#7DBACF),color-stop(100%,#1F3950));
background: -webkit-linear-gradient(-45deg,#7DBACF 0%,#1F3950 100%);
background: -o-linear-gradient(-45deg,#7DBACF 0%,#1F3950 100%);
background: -ms-linear-gradient(-45deg,#7DBACF 0%,#1F3950 100%);
background: -webkit-linear-gradient(315deg,#7DBACF 0%,#1F3950 100%);
background: -o-linear-gradient(315deg,#7DBACF 0%,#1F3950 100%);
background: linear-gradient(135deg,#7DBACF 0%,#1F3950 100%);
opacity:1;
transition:all 0.3s ease-in-out 0s;
}
/* LOGIN FORM */
.login_form {
display:none;
position: fixed;
width: 100%;
height: 100%;
top: 0;
background: rgba(255, 255, 255, 0.8);
z-index: 999;
}
.login_form form {
padding: 20px 50px;
background: #fff;
top: 50%;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 20px 5px #888888;
-webkit-box-shadow: 0px 0px 20px 5px #888888;
-moz-box-shadow: 0px 0px 20px 5px #888888;
}
.login_form button {
border: none;
margin: 25px auto;
padding: 10px 45px;
display: block;
}
input, input:focus-visible, input:focus, input:active {
margin-bottom: 25px !important;
border: none;
border-bottom: 1px solid;
width: 250px;
outline:none;
}
input[type="checkbox"] {
width: 13px;
margin-right: 20px;
}
.remind {
text-decoration:none;
color: rgba(0,0,0,.3);
color: #1F3950;
background: #7DBACF;
background: -moz-linear-gradient(-45deg,#7DBACF 0%,#1F3950 100%);
background: -webkit-gradient(left top,right bottom,color-stop(0%,#7DBACF),color-stop(100%,#1F3950));
background: -webkit-linear-gradient(-45deg,#7DBACF 0%,#1F3950 100%);
background: -o-linear-gradient(-45deg,#7DBACF 0%,#1F3950 100%);
background: -ms-linear-gradient(-45deg,#7DBACF 0%,#1F3950 100%);
background: -webkit-linear-gradient(315deg,#7DBACF 0%,#1F3950 100%);
background: -o-linear-gradient(315deg,#7DBACF 0%,#1F3950 100%);
background: linear-gradient(135deg,#7DBACF 0%,#1F3950 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7DBACF', endColorstr='#1F3950', GradientType=1 );
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.close {
position: absolute;
right: 30px;
top: 30px;
cursor: pointer;
width: 15px;
height: 15px;
}
.close:before {
content: '';
position:absolute;
top: 50%;
display: block;
width: 15px;
height: 1px;
background: #1F3950;
transform: rotate(135deg);
transition:all 0.2s ease-in-out 0s;
}
.close:after {
content: '';
position:absolute;
top: 50%;
display: block;
width: 15px;
height: 1px;
background: #1F3950;
transform: rotate(45deg);
transition:all 0.2s ease-in-out 0s;
}
.close:hover:after {
transform: rotate(135deg);
}
.close:hover:before {
transform: rotate(45deg);
}
/* RESPONSIVE */
.fullscreen-nav {
display: initial;
}
.menu, .mobile-btn:before, .mobile-btn:after, .mobile-close:after, .mobile-close:before {
background: #7DBACF;
background: -moz-linear-gradient(-45deg,#7DBACF 0%,#1F3950 100%);
background: -webkit-gradient(left top,right bottom,color-stop(0%,#7DBACF),color-stop(100%,#1F3950));
background: -webkit-linear-gradient(-45deg,#7DBACF 0%,#1F3950 100%);
background: -o-linear-gradient(-45deg,#7DBACF 0%,#1F3950 100%);
background: -ms-linear-gradient(-45deg,#7DBACF 0%,#1F3950 100%);
background: -webkit-linear-gradient(315deg,#7DBACF 0%,#1F3950 100%);
background: -o-linear-gradient(315deg,#7DBACF 0%,#1F3950 100%);
background: linear-gradient(135deg,#7DBACF 0%,#1F3950 100%);
width: 25px;
height: 2px;
position: absolute;
transition:all 0.2s ease-in-out 0s;
}
.mobile-btn {
display:none;
top: 38px;
right: 30px;
z-index: 99;
position: fixed;
width: 25px;
height:16px;
cursor:pointer;
}
.mob-scrolled {
top: 13px;
transition:all 0.2s ease-in-out 0s;
}
.mobile-btn:before {
content:'';
top:7px;
right: 0;
}
.mobile-btn:after {
content:'';
top:14px;
right: 0;
}
.mobile-btn:hover .menu {
background:transparent;
}
.mobile-btn:hover:before {
transform:rotate(135deg);
}
.mobile-btn:hover:after {
top:7px;
transform:rotate(45deg);
}
.mobile-close {
position: fixed;
right: 15px;
top: 15px;
width: 25px;
height:25px;
}
.mobile-close:before {
content:'';
transform: rotate(45deg);
top:10px;
}
.mobile-close:after {
content:'';
transform: rotate(135deg);
top:10px;
}
.mobile-nav {
display:none;
position: fixed;
background: rgb(255 255 255 / 98%);
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index:999;
overflow: auto;
}
.mobile-nav ul {
display: block;
text-align: center;
float: none;
line-height: 50px;
padding: 0;
margin: 50px 0;
max-width: 100%;
}
@media(max-width:767px) {
h2 {
font-size:24px !important;
}
.navbar-brand {
padding-left:0;
}
.welcome {
margin-top: 20vh !important;
}
.btn {
margin-top:30px;
padding: 10px 25px;
}
#home-section h1 {
font-size: 24px !important;
margin-top: 25%;
margin-bottom: 40px;
}
#home-section h3 {
font-size: 18px;
}
#features-section h3 {
margin-bottom: 10px;
margin-top: 15px;
}
#features-section p {
margin-top: 0;
}
#modules-section .center {
padding:30px 0;
}
#modules-section .tab-links, #modules-section .tabs {
padding-top: 20px;
padding-bottom: 20px;
}
#modules-section .tab-links a {
line-height: 40px;
}
#modules-section .tab-links a:before {
content:none;
}
#modules-section .tab {
padding-left: 0 !important;
}
#modules-section h2 {
text-align:center;
}
#modules-section .tab img {
width: 50px;
margin: 0 auto;
}
#modules-section .row, #price-section .row {
display: block;
}
#price-section .price-block:first-child {
margin-bottom:15px;
}
#about-section .foto {
width:150px !important;
}
#donate-section p {
font-size: 14px;
}
#contact-section h3 {
text-align:left !important;
}
.copyright img {
width: 90%;
max-width: 350px;
}
.home-article h1 {
margin-top:0 !important;
margin-bottom: 0 !important;
};
}
@media(max-width:991px) {
h2 {
font-size:28px;
}
.fullscreen-nav, .hero {
display:none;
}
.mobile-btn {
display:block;
}
.navbar-brand img {
height: 45px !important;
}
.slider {
text-align:center;
}
.welcome {
text-align:left;
}
.slide {
right: 0;
top: 0;
left: 0;
z-index: -1;
opacity: 0.1;
}
#modules-section .tab-links img {
height: 25px;
}
#modules-section .tab-links {
min-width:250px;
}
#modules-section .tab-links a {
font-size:14px;
}
#modules-section .tab-links .active {
font-size:16px;
}
#modules-section .tab {
padding-left: 15px;
font-size: 14px;
}
#modules-section .tab img {
width: 70px;
margin-bottom: 20px;
}
#modules-section form {
display: block;
}
#about-section .row {
display: block;
}
#about-section .foto {
width: 200px;
margin: 0 auto;
}
#about-section .ceo {
margin-top: 0;
}
#donate-section {
text-align: center;
}
#contact-section h3 {
text-align: center;
margin-top: 15px;
}
}
@media(max-width:1199px) {
h1 {
font-size:34px !important;
}
h3 {
font-size:24px;
}
.navbar-brand img {
height: 55px;
}
header ul {
line-height: 40px;
margin-top: 30px;
}
.nav-item a, .login {
font-size: 13px;
}
.scrolled ul {
margin-top:0;
}
.scrolled img {
height: 30px !important;
bottom: 5px;
position: relative;
}
.hero {
left: 10px;
font-size: 13px !important;
}
.welcome {
margin-top:25vh;
}
footer {
font-size:13px;
padding-bottom:20px;
}
}
@media(max-height:400px) {
#home-section h1 {
margin-top: 30px !important;
}
.btn {
margin-top: 0px;
}
}