/*!
* Start Bootstrap - Busines Frontpage (https://startbootstrap.com/template-overviews/business-frontpage)
* Copyright 2013-2017 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-business-frontpage/blob/master/LICENSE)
*/
html {
font-size: 1rem;
}
@include media-breakpoint-up(sm) {
html {
font-size: 1.2rem;
}
}
@include media-breakpoint-up(md) {
html {
font-size: 1.4rem;
}
}
@include media-breakpoint-up(lg) {
html {
font-size: 1.6rem;
}
}
#lnkMail {
unicode-bidi: bidi-override;
direction: rtl;
}
.captcha {
height:600px;
}
.contact h2 { text-align:center!important; text-transform:uppercase!important; }
.contact form { width: 500px; margin:0 auto; }
.contact form input.text {
border:1px solid #cacaca;
width:347px;
height:44px;
margin:0 10px 15px 0;
padding:0 0 0 10px;
float:left;
}
.contact form textarea {
border:1px solid #cacaca;
width:420px;
height:93px;
margin:15px 0;
padding:10px;
float:left;
}
.contact form input.submit {
border:1px solid #cacaca;
width:100px;
height:44px;
margin:15px 30px 45px 60px;
padding:10px;
background:#f6861f;
color:#fff;
text-transform:uppercase;
text-align:center;
}
body {
/* padding-top: 54px; */
font: 400 16px/22px 'Lato', sans-serif; color: #000; line-height: 22px; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; background: #fff; }
body p { text-align:justify; }
body a { color:#f6861f; }
body a:hover { color:#f6861f; text-decoration: underline; }
#main-content h1 { color:#f6861f; text-align:center; text-transform:uppercase; font-size:2.3rem; line-height:2.5rem; margin:1rem auto; }
#main-content h2 { color:#003d62; text-align:left; text-transform:none; line-height:2rem; margin:1rem 0 2rem 0; }
#main-content span.text-muted {font-size:1.6rem; text-transform:none;}
#main-content ul { list-style:none outside; }
#main-content ul li { line-height:1.8rem; padding-left:1.3em; }
#main-content ul li::before {
content:"\21d2";
font-weight:bold;
color:#b0b0b0;
display: inline-block;
font-weight:bold;
margin-left: -1.3em;
width: 1.3em;
}
/** HEADER RULES FOR BANNER IN HOMEPAGE **/
.business-header-home {
/* min-height: 357px; */
background: linear-gradient(90deg, rgba(127,208,219,1) 40%, rgba(211,245,249,1) 55%);
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
background-size: auto 100%;
-o-background-size: auto 100%;
}
.business-header-image {
background: url(../images/formpro-home-standard.jpg);
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
background-size: auto 100%;
-o-background-size: auto 100%;
background-repeat: no-repeat;
background-position: center;
}
.business-header-home div.h1 { color:#f6861f; text-transform:uppercase; }
.business-header-home p { color: #999; }
.business-header-home a.btn-template-orange{font-size:1.6rem; display:block; width:18rem; padding:.5rem 0;}
/** END OF HEADER RULES FOR BANNER IN HOMEPAGE **/
/** HEADER RULES FOR BANNER IN INNER PAGES **/
.business-header {
height: 364px;
min-height: 357px;
background: url(../images/formpro-home-newyear.jpg) center center no-repeat scroll !important;
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
background-size: auto 100%;
-o-background-size: auto 100%;
}
.business-header.featured div.h1 { color:#f6861f; text-transform:uppercase; position:relative; font-size:3rem; }
.business-header.featured p { color: #999; position:relative; }
.business-header.featured .btn { position:relative; display:block; }
/** END OF HEADER RULES FOR BANNER IN INNER PAGES **/
/** RULES FOR LAPTOPS AND BIGGER DEVICES **/
/** Big devices (laptops, more than 992px) **/
@media (min-width: 992px) {
body {
padding-top: 105px;
}
/** HEADER RULES FOR BANNER IN HOMEPAGE **/
.business-header-home {
/* min-height: 357px; */
background: linear-gradient(90deg, rgba(127,208,219,1) 40%, rgba(211,245,249,1) 55%);
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
background-size: auto 100%;
-o-background-size: auto 100%;
}
.business-header-image {
background: url(../images/formpro-home-standard.jpg);
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
background-size: auto 100%;
-o-background-size: auto 100%;
background-repeat: no-repeat;
background-position: center;
}
.business-header-home div.h1 { color:#f6861f; text-transform:uppercase; position:relative; top:20px; }
.business-header-home p { color: #999; position:relative; top:20px; }
.business-header-home a.btn-template-orange{font-size:1.4rem; display:block; width:18rem; padding:.5rem 0; position:relative; top:-20px;}
/** END OF HEADER RULES FOR BANNER IN HOMEPAGE **/
/** HEADER RULES FOR BANNER IN INNER PAGES **/
.business-header {
height: 364px;
min-height: 357px;
background: url(../images/formpro-home-newyear.jpg) center center no-repeat scroll !important;
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
background-size: auto 100%;
-o-background-size: auto 100%;
}
.business-header.featured div.h1 { color:#f6861f; text-transform:uppercase; position:relative; font-size:3rem; }
.business-header.featured p { color: #999; position:relative; }
.business-header.featured .btn { position:relative; display:block; width:20rem; }
/** END OF HEADER RULES FOR BANNER IN INNER PAGES **/
}
/* 1200px width menu rules */
@media screen and (min-width: 993px) and (max-width: 1199px) {
.business-header.featured div.h1 { font-size:2.5rem; }
.business-header.featured p { font-size:1.5rem; }
.business-header.featured .btn { position:relative; }
.business-header a.btn-template-orange{ font-size:1.5rem; width:20rem; padding:1rem 0; }
}
/** RULES FOR TABLETS AND SMALLER DEVICES **/
/** Medium devices (tablets, less than 992px) **/
@media (max-width: 991.98px) {
body {
padding-top: 0;
}
/** HEADER RULES FOR BANNER IN HOMEPAGE **/
.business-header-home {
/* min-height: 357px; */
background: linear-gradient(90deg, rgba(127,208,219,1) 40%, rgba(211,245,249,1) 55%);
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
background-size: auto 100%;
-o-background-size: auto 100%;
}
.business-header-image {
background: url(../images/formpro-home-standard.jpg);
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
background-size: auto 100%;
-o-background-size: auto 100%;
background-repeat: no-repeat;
background-position: center;
}
.business-header-home div.h1 { font-size:2.5rem; position:relative; top:30px; }
.business-header-home p { font-size:1.5rem; position:relative; top:50px; }
.business-header-home .btn { position:relative; top:40px; }
.business-header-home a.btn-template-orange{ font-size:1.4rem; width:16rem; padding:0.5rem; }
/** END OF HEADER RULES FOR BANNER IN HOMEPAGE **/
/** HEADER RULES FOR BANNER IN INNER PAGES **/
.business-header {
height: 364px;
min-height: 357px;
background: url(../images/formpro-home-newyear.jpg) center center no-repeat scroll !important;
-webkit-background-size: auto 100%;
-moz-background-size: auto 100%;
background-size: auto 100%;
-o-background-size: auto 100%;
}
.business-header.featured div.h1 { font-size:1.8rem; }
.business-header.featured p { font-size:1.5rem; }
.business-header.featured .btn { position:relative; }
.business-header a.btn-template-orange{ font-size:1.4rem; width:18rem; padding:1rem 0; }
/** END OF HEADER RULES FOR BANNER IN INNER PAGES **/
}
/** RULES FOR TABLETS AND SMALLER DEVICES **/
/** Medium devices (tablets, less than 768px) **/
@media (max-width: 767.98px) {
.business-header-home { height:unset; min-height:unset;}
.business-header-home div.h1 { font-size:1.8rem; position:relative; top:20px; }
.business-header-home p { font-size:1.4rem; position:relative; top:20px; }
.business-header-home .btn { position:relative; top:-20px; }
.business-header-home a.btn-template-orange{ font-size:1.4rem; width:14rem; padding:0.5rem; }
.business-header.featured div.h1 { font-size:1.8rem; top:20px; }
.business-header.featured p { font-size:1.5rem; top:30px; }
.business-header.featured .btn { position:relative; }
.business-header a.btn-template-orange{ font-size:1.4rem; width:16rem; padding:1rem 0; top:20px; }
/** END OF HEADER RULES FOR BANNER IN INNER PAGES **/
}
/** RULES SMALLER DEVICES **/
/** Medium devices (smallest, less than 576px) **/
@media (max-width: 575.98px) {
.business-header-home { height:unset; min-height:unset;}
.business-header-home div.h1 { font-size:1.8rem; position:relative; top:20px; }
.business-header-home p { font-size:1.4rem; position:relative; top:20px; }
.business-header-home .btn { position:relative; top:-20px; }
.business-header-home a.btn-template-orange{ font-size:1.2rem; width:14rem; padding:0.5rem; }
.business-header.featured { height:unset; min-height:unset;}
.business-header.featured div.h1 { font-size:1.8rem; top:0px; }
.business-header.featured p { font-size:1.4rem; top:0px; }
.business-header.featured .btn { position:relative; top:-20px; }
.business-header a.btn-template-orange{ font-size:1.2rem; width:14rem; padding:0.5rem; }
#main-content h1 { font-size:1.8rem; line-height:2rem; margin:1rem auto; }
#main-content h2 { line-height:1.6rem; margin:0.8rem 0 1.8rem 0; }
#main-content span.text-muted { font-size:1.3rem; }
#main-content p { padding:0 20px; }
h3.call2action{ font-size:1.3rem; }
.btn-group-lg>.btn, .btn-lg { font-size:1rem; }
h2.featurette-heading { font-size: 1.6rem; }
.featurette h2.featurette-heading span { font-size: 1.3rem; }
.lead { font-size:15px; }
.featurette-image { margin:20px 0 0 0; }
.marketing .featurette-divider { margin: 2.5rem 0; } /* Space out the Bootstrap
more */
.get-it.claro{background:#e7e8ea; color:#003d62; padding:20px 0 !important;}
.get-it.claro h3{letter-spacing:0.2rem; font-size: 1.5rem; margin:0}
.get-it.claro p{font-size:1.1rem; letter-spacing:0.1rem; margin:0.5rem;}
.get-it.claro div .btn{font-size:1.2rem; font-weight:400; letter-spacing:0.1rem; margin:0rem!important;}
.quality { display:none!important; }
#myFooter { padding-top:20px!important; padding-bottom:5px!important; }
#myFooter h5 { margin-top:10px!important; }
#myFooter ul { line-height:1.4!important; }
/** END OF HEADER RULES FOR BANNER IN INNER PAGES **/
}
.card {
height: 100%;
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
margin-bottom: 1.5rem;
text-align: center;
}
#main-content .marketing h2 {
font-size: 1.5rem;
font-weight: 700;
color: #003d62;
text-transform: none;
margin: 1rem auto;
text-align:center;
}
.marketing .col-lg-4 p {
margin-right: .75rem;
margin-left: .75rem;
font-size: 1rem;
line-height:1.4rem;
text-align: center;
}
/* Featurettes
------------------------- */
.featurette-divider {
margin: 5rem 0; /* Space out the Bootstrap
more */
}
/* Thin out the marketing headings */
.featurette-heading {
color: #003d62;
text-align: left;
font-weight: 400;
line-height: 1;
letter-spacing: -.05rem;
text-transform: none;
}
.featurette-heading span {
font-size: 1.5rem;
}
.featurette-image { border:2px solid #e7e8ea; }
/** FEATURES SECTION **/
.feature-heading {
color: #003d62;
text-align: left;
font-weight: 400;
line-height: 1;
letter-spacing: -.05rem;
text-transform: none;
}
.feature-heading span {
font-size: 1.1rem;
text-transform: uppercase;
}
.feature-image { border:2px solid #e7e8ea; }
/*** CALL TO ACTION WITH COLOR **/
.get-it{background:#222222; color:#fff; padding:50px 0}
.get-it h3{text-transform:uppercase; letter-spacing:0.1em; margin:0}
.get-it.claro{background:#e7e8ea; color:#003d62; padding:50px 0}
.get-it.claro h3{color:#f6861f; text-transform:uppercase; letter-spacing:0.2rem; font-weight:700; margin:0}
.get-it.claro p{color:#003d62; font-size:1.5rem; text-transform:none; letter-spacing:0.1rem; text-align:center; margin:0.5rem;}
.get-it.claro div .btn{font-size:1.5rem; font-weight:400; text-transform:none; letter-spacing:0.1rem; text-align:center; margin:0.5rem;}
h3.call2action{color:#003d62; text-align:center;}
/** BUTTON OF CALL TO ACTION **/
.btn-template-outlined-orange{background:none;border:1px solid #f6861f !important;color:#fff;border-radius:0 !important;text-decoration:none}
.btn-template-outlined-orange:hover,.btn-template-outlined-orange:focus{background:#f6861f;color:#fff !important}
.btn-template-outlined-white{background:none;border:1px solid #fff !important;color:#fff;border-radius:0 !important;text-decoration:none}
.btn-template-outlined-white:hover,.btn-template-outlined-white:focus{background:#fff;color:#f6861f !important}
.btn-template-orange{background:#f6861f;border:none !important;color:#fff;border-radius:0 !important;text-decoration:none}
.btn-template-orange:hover,.btn-template-orange:focus{background:#003d62;color:#fff !important}
.btn-template-navy{background:#003d62;border:none !important;color:#fff;border-radius:0 !important;text-decoration:none}
.btn-template-navy:hover,.btn-template-navy:focus{background:#f6861f !important;color:#fff !important}
/** OTHER BUTTON **/
.btn-template-outlined-navy{background:none;border:1px solid #003d62 !important;color:#003d62;border-radius:0 !important;text-decoration:none}
.btn-template-outlined-navy:hover,.btn-template-outlined-navy:focus{background:#003d62 !important;color:#fff !important}
.btn-template-outlined-black{background:none;border:1px solid #333 !important;color:#333;border-radius:0 !important;text-decoration:none}
.btn-template-outlined-black:hover,.btn-template-outlined-black:focus{background:#333 !important;color:#fff !important}
/** VIDEO PAGES RULES **/
.videos {margin:50px auto;}
.videos h3 { color:#003d62; margin-bottom:20px;}
.video-list-thumbs{}
.video-list-thumbs > li{
margin-bottom:12px;
}
.video-list-thumbs li::before{
content: ""!important;
font-weight: bold;
color: #b0b0b0;
margin-right: 6px;
float: left;
}
.video-list-thumbs > li:last-child{}
.video-list-thumbs a{
display:block;
width:247px;
position:relative;
background-color: #003d62;
color: #999;
padding: 8px;
border-radius:3px
transition:all 500ms ease-in-out;
border-radius:4px
}
.video-list-thumbs > li > a:hover{
box-shadow:0 2px 5px rgba(0,0,0,.8);
text-decoration:none;
color:#fff;
}
.videos .video-list-thumbs h2{
bottom: 0;
font-size: 14px;
height: 33px;
margin: 8px 0 0!important;
color:#fff!important;
text-transform:none;
text-align:left;
line-height:1rem!important;
}
.video-list-thumbs .fa-play-circle{
font-size: 60px;
opacity: 0.8;
position: absolute;
right: 39%;
top: 23%;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
transition:all 500ms ease-in-out;
}
.video-list-thumbs > li > a:hover .fa-play-circle
color:#fff;
opacity:1;
text-shadow:0 1px 3px rgba(0,0,0,.8);
}
.videos .video-list-thumbs > li > a .duration{
display: inline-block!important;
background-color: rgba(0, 0, 0, 0.4)!important;
border-radius: 2px!important;
color: #fff!important;
font-size: 11px!important;
font-weight: bold!important;
left: 12px!important;
line-height: 15px!important;
padding: 2px 3px!important;
position: absolute!important;
top: 12px!important;
transition:all 500ms ease!important;
}
.videos .video-list-thumbs > li > a:hover .duration{
background-color:#003d62!important;
}
@media (min-width:320px) and (max-width: 480px) {
.video-list-thumbs .fa-play-circle{
font-size: 35px;
right: 36%;
top: 27%;
}
.video-list-thumbs h2{
bottom: 0;
font-size: 12px;
height: 22px;
margin: 8px 0 0;
}
}
/** VIDEO INDIVIDUAL PAGE RULES **/
h4.video-section { color: #003d62; }
.videoListBox { margin-bottom: 25px; }
.videoListBox a, .videoListBox a:hover { text-decoration:none; }
.videoList i.video { font-size: 92px; color: #b0b0b0; display: inline-block; margin-top: -15px; margin-left: -5px; }
.videoTime { float: right; color: #b0b0b0; line-height: 50px; margin-bottom: 0; }
.videoListBox p.videoInfo { color:#999; }
.videoListBox h3 { color: #003d62; line-height: 50px; font-size: 24px; font-weight: 700; text-transform: none; }
.videoListItem { height: 50px; line-height: 50px; border-bottom: 1px solid #e8e8e8; }
.videoListItem a i { font-size: 24px; color: #999; float: left; display: inline-block; margin:13px 7px 0 0; /* margin: 10px 10px 0 0; */ }
.videoListItem a:hover i { color: #f6861f; }
.videoListItem a p { color: #7b7b7b; line-height: 50px; margin-bottom: 0; }
.videoListItem a:hover p { color: #f6861f; }
.videoListItem a p.videoTime { color: #b0b0b0; }
.videoList p.videoInfo { color: #b0b0b0; margin-bottom: 0; }
.videoActive { background: #f3f3f3; }
.videoWrapper { position: relative; padding-bottom: 56.25%; height: 0; }
.videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/** SAMPLE FORMS PAGE RULES **/
.samples { margin:50px auto; }
#pills-tab li::before{
content: ""!important;
font-weight: bold;
color: #b0b0b0;
margin-right: 6px;
float: left;
}
.samples .nav { margin:0 auto 50px auto; }
.tab-content h4 { text-align:center!important; }
.Portfolio {
position: relative;
margin: 10px;
border: 2px solid #003d62;
float: left;
width: 180px;
transition-duration: 0.4s;
border-radius: 5px;
animation: winanim 0.5s ;
-webkit-backface-visibility:visible;
backface-visibility:visible;
box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 5px 8px 0 rgba(0,0,0,.14),0 1px 14px 0 rgba(0,0,0,.12)
}
.Portfolio:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
}
.Portfolio img {
width: 100%;
height: 250px;
border-radius: 5px
}
.Portfolio img.lightbox {
cursor:zoom-in!important;
}
.desc {
padding: 5px;
text-align: center;
font-size: 90%;
background:#003d62;
color:#fff;
}
.samples .nav {
padding:20px;
margin-top:-30px;
}
.samples .nav li a {
margin:5px;
padding: 10px 25px;
font-size:.8rem;
color:#fff;
background: #003d62;
transition-duration: 0.4s;
text-transform:uppercase;
}
.samples .nav a:hover {
background:#f6861f;
color:#fff;
}
.samples .nav .active {
background-color:#f6861f !important;
color:#fff;
}
@keyframes winanim {
0%{opacity:0;transform:scale3d(.3,.3,.3)}
50%{opacity:1}
}
/** PRICE PAGE RULES **/
.clearfloat { font-size: 1%; height: 0px; clear: both; width: 100%; }
/*header*/
#all_container { width: 100%; margin: 0 auto; min-width: 1024px; }
#pricecontainer { width: 993px; margin: 40px auto; text-align: left; font: normal 12px/16px 'Segoe UI', sans-serif; color: #363636; }
#priceinner li::before, #pricedetails li::before{
content: ""!important;
font-weight: bold;
color: #b0b0b0;
margin-right: 6px;
float: left;
}
.test-menu {text-align:left}
#pricebox { width: 193px; /* height: 865px; */ padding:8px; display: block; background:#e9e9e9; float:left; }
.right { margin-right:7px; }
#pricebox:hover { background:#ffd5af; }
#pricetitle { width: 177px; height: 53px; display: block; font: bold normal 24px/53px 'Segoe UI', sans-serif; color: #FFFFFF; text-align: center; }
.normal { background: #f6861f; }
.bestvalue { background: #f6861f url(../images/best-value.png) no-repeat right center; }
#price { width: 177px; height: 42px; display: block; padding: 6px 0px; background: #405368; font: bold normal 24px/24px 'Segoe UI', sans-serif; color: #FFFFFF; text-align: center; border-bottom:1px solid #fff; }
#price span { font: bold normal 12px/14px 'Segoe UI', sans-serif; color: #FFFFFF; text-align: center;}
#priceinner { width: 177px; display: block; background: #243951; font: bold normal 16px/20px 'Segoe UI', sans-serif; color: #FFFFFF; text-align: center; border-bottom:1px solid #fff;}
#priceinner span { font: normal 12px/14px 'Segoe UI', sans-serif; color: #FFFFFF; text-align: center;}
#priceinner ul { margin:0 0; padding: 0 0; list-style: none; }
#priceinner ul li { display:block; padding: 5px 0; line-height:1rem; }
#pricebutton a {width:125px; height:32px; margin: 11px auto; display:block; background: #f6861f; font: bold normal 12px/32px 'Segoe UI', sans-serif; color: #FFFFFF; text-align: center; -moz-border-radius: 4px; -webkit-border-radius: 4px; -khtml-border-radius: 4px; behavior: url(js/border-radius.htc); text-shadow: 1px 1px 2px #666; text-transform:uppercase; }
#pricebutton a:hover {background: #243951; text-decoration:none; }
#pricedetails { width: 167px; height:460px; padding:5px; display: block; font: normal 12px/14px 'Segoe UI', sans-serif; color: #363636; text-align: left; border-top:1px solid #fff; border-bottom:1px solid #fff; }
#pricedetails span { font: bold normal 16px/20px 'Segoe UI', sans-serif; color: #243951; text-align: left; padding:5px 0; }
#pricedetails ul { margin: 10px 0; padding: 0 0; }
#pricedetails ul li { padding: 2px 0; list-style: url(../images/thick.png) none inside; line-height:1.5rem; }
.subscriptionAd {width:1024px; height:107px; margin-top:20px; margin-left:20px;background:url(../images/subscriptionad.jpg) no-repeat; position:relative;}
.subscriptionText1 { position: absolute; top: 18px; left: 23px; width: 590px; font: bold 24px/24px "Segoe UI", Arial, sans-serif; color: #f6861f; text-transform: uppercase; text-align: left; }
.subscriptionText2 { position: absolute; top: 68px; left: 23px; width: 570px; font: bold 18px/24px "Segoe UI", Arial, sans-serif; color: #000000; text-align: left; }
.subscriptionText3 { position: absolute; top: 25px; left: 690px; width: 100px; font: bold 24px/28px "Segoe UI", Arial, sans-serif; color: #ffffff; text-transform: uppercase; text-align: center; text-shadow:1px 1px 2px #000; }
#note {margin:50px auto 50px 35px; color:#363636; font:12px/14px 'Segoe UI',sans-serif; text-align:left; font-weight:bold;}
/*Support page*/
.supportIntro { text-align: center; margin-bottom: 20px; }
.supportIntro h4 { color: #f6861f; text-transform: uppercase; font-size: 24px; line-height: 32px; font-weight: 700; }
.support { display: flex; flex-wrap: wrap; float: none; width: 100%; }
.supportBox { display: flex; flex-direction: column; margin-bottom: 0px; padding: 20px 10px; }
.support .contactAddress { flex: 1 0 auto; flex-wrap: nowrap; height: auto; margin-bottom: 0px; }
.supportBox .contactIcon { font-size:48px; color:#003d62; float:left; margin-right:25px; }
.supportBox .biglink { font-size:18px; font-weight:700; padding-left:73px; }
.supportBox .contactText span { color:#003d62; }
/** LIGHTBOX RULES **/
/* CSS used for image lightbox in themes page. */
.img-popup {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(38, 40, 52, 0.9);
text-align: center;
display: none;
z-index: 9999999999999;
animation: pop-in;
animation-duration: 0.5s;
-webkit-animation: pop-in 0.5s;
-moz-animation: pop-in 0.5s;
-ms-animation: pop-in 0.5s;
cursor: zoom-out;
}
.img-popup img {
position: absolute;
top: 50%;
max-width: 80%;
max-height: 80vh;
display: inline-block;
transform: translate(-50%, -50%);
}
.close-lightbox {
position: absolute;
top: 45px;
right: 20%;
padding: 10px 10px;
color: #fff;
font-size: 40px;
border: 2px solid #fff;
border-radius: 20%!important;
z-index: 99;
cursor: pointer;
}
.close-lightbox:hover {
color: #f6861f;
border: 2px solid #f6861f;
}
.lightboxfadeout{
animation: fadeout;
animation-duration: 0.5s;
-webkit-animation: fadeout 0.5s;
-moz-animation: fadeout 0.5s;
-ms-animation: fadeout 0.5s;
}
@keyframes pop-in {
0% {
opacity: 0;
transform: scale(0.1);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@-webkit-keyframes pop-in {
0% {
opacity: 0;
-webkit-transform: scale(0.1);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
}
}
@-moz-keyframes pop-in {
0% {
opacity: 0;
-moz-transform: scale(0.1);
}
100% {
opacity: 1;
-moz-transform: scale(1);
}
}
@keyframes fadeout {
100% {
opacity: 0;
transform: scale(0.1);
}
0% {
opacity: 1;
transform: scale(1);
}
}
@-webkit-keyframes fadeout {
100% {
opacity: 0;
-webkit-transform: scale(0.1);
}
0% {
opacity: 1;
-webkit-transform: scale(1);
}
}
@-moz-keyframes fadeout {
100% {
opacity: 0;
-moz-transform: scale(0.1);
}
0% {
opacity: 1;
-moz-transform: scale(1);
}
}
/** ERROR PAGE **/
#error-container {
width: calc(100% - 100px);
max-width: 700px;
min-width: 300px;
margin: 0 auto;
padding: 50px;
}
#error-container h1 {
font-size: 16rem!important;
color:#003d62!important;
font-weight:700!important;
}
#error-container h2 {
font-size: 5rem!important;
color: #f6861f!important;
font-weight:700!important;
padding:5rem 1rem 0 6rem!important;
line-height:5rem!important;
}
/** FOOTER **/
/* CSS used for positioning the footers at the bottom of the page. */
#myFooter {
background-color: #3a3f46;
color: white;
}
#myFooter .row {
margin-bottom: 60px;
}
#myFooter .info{
text-align: justify;
color: #afb0b1;
}
#myFooter ul {
list-style-type: none;
padding-left: 0;
line-height: 1.7;
}
#myFooter h5 {
font-size: 18px;
color: white;
font-weight: bold;
margin-top: 30px;
text-transform: uppercase;
}
#myFooter a:hover{
color: #f6861f!important;
}
#myFooter a[href^="tel:"]:before {
content: "\260e";
margin-right: 0.5em;
}
#myFooter .logo{
margin-top: 10px;
}
#myFooter .second-bar .logo a{
color:#003d62;;
font-size: 28px;
float: left;
font-weight: bold;
line-height: 68px;
margin: 0;
padding: 0;
}
#myFooter a {
color: #d2d1d1;
text-decoration: none;
}
#myFooter a:hover,
#myFooter a:focus {
text-decoration: none;
color: #fff;
}
#myFooter .quality { width:100%; /* height:100%;*/ height:24px; background: url(../images/swiss-quality.png) no-repeat; }
#myFooter .quality h5 { position:relative; font-size:14px; top:0; left:34px; line-height:24px; text-transform:none; font-weight:normal; }
#myFooter .italica { font-style:italic; margin: 15px auto!important; font-size:14px; line-height:18px; }
#myFooter .since { font-size:18px; line-height:18px; font-weight:bold; }
#myFooter ul li.lines { line-height:1.2!important; }
#myFooter .second-bar {
color: #000;
text-align: center;
background-color: #33373e;
}
#myFooter .second-bar a {
font-size: 22px;
color: #003d62;
padding: 10px;
transition: 0.2s;
line-height: 68px;
}
#myFooter .second-bar .social-icons a {
font-size: 1rem;
color: #003d62;
padding: 4px;
}
#myFooter .second-bar a:hover {
text-decoration: none;
}
#myFooter .social-icons {
float:right;
}
#myFooter .payment {float:left;}
#myFooter ul.payment{border-right:1px solid #eae8e6;padding-right:20px;padding-left:0px;}
#myFooter ul.payment li{display: inline-flex;}
#myFooter ul.payment li.methods{padding:0 auto; text-transform:uppercase; color:#003d62; font-size:0.7rem;}
#myFooter ul.payment li.Cards{ margin-top:-15px;}
#myFooter .payment p {float:left; margin-left:40px; margin-top:20px;}
@media screen and (max-width: 767px) {
#myFooter {
text-align: center;
}
#myFooter p{
text-align: center;
}
#myFooter .quality{
margin:0 auto;
}
#myFooter ul.payment{ border-right:0px solid #eae8e6; padding-top:20px; }
#myFooter .payment li a img{width:80%!important;}
#myFooter .second-bar .social-icons, #myFooter .second-bar .social-icons a {
font-size: 0.8rem;
}
#myFooter .second-bar a {
line-height: 26px;
}
}
/** NAVBAR **/
/* adds some margin below the link sets */
.below-nav {
padding-top: 225px!important; // This value depends on the height of your navbar.
}
.custom-toggler.navbar-toggler {
border-color: rgb(0, 61, 98);
}
.custom-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(0, 61, 98)' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.navbar { font:700 1rem 'Lato', sans-serif!important; border-bottom: 1px solid #003d62; background-color:#fff!important; z-index:10000; }
/* tyring to fix scroll menu problem on mobile */
/*nav.navbar.fixed-top {
max-height: 100%;
overflow-y: auto;
} CAUSES PAGE TO HAVE 2 SCROLLBARS - CHECK RELATED RULE IN NORMAL VIEW ALSO */
/** reset the default navbar brand padding [it's 15px by default] **/
.navbar-brand {
padding: 0;
}
/** transfer the navbar brand padding to the image inside it, also make it 100% height **/
.navbar-brand >img {
padding: 20px; // value optional, it is up to you its value
height: 100%;
}
.navbar.navbar-dark .nav-link { color: #003d62; text-transform:uppercase; /*padding: 1.7em 0.3em !important; FIX MOUSELEAVE BUG*/padding: 2.9em 1.1em !important; }
.navbar.navbar-dark .nav-link:hover, .navbar.navbar-dark .nav-link:active { color: #f6861f; background: none;/* border-top:2px solid #f6861f; border-left:2px solid #f6861f; border-right:2px solid #f6861f;*/ }
.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link { color: #f6861f; }
.navbar.navbar-dark .dropdown-menu .nav-link { text-transform:none; margin: 0!important; padding: 0!important; font-weight: 400; color: #003d62; }
.navbar.navbar-dark .dropdown-menu .nav-link:hover { color: #f6861f; background: none; font-weight:bold; border:none; }
/* adds some margin below the link sets */
.navbar .dropdown-menu div[class*="col"] {
margin-bottom:1rem;
}
.navbar .dropdown-menu {
border:none;
/* background-color:#fff!important;*/
margin-top:63px;
padding-top:30px;
border-bottom: 1px solid #003d62!important;
z-index:1000;
}
.navbar .dropdown-menu h4 {
color: #f6861f;
padding: 0 0 0.8em 0.6em !important;
margin: 0;
font-size: 1.2rem;
font-weight: 300;
}
.navbar .dropdown-menu .nav-view-more{
font-size: 0.8rem;
margin-left:0.8em !important;
color:#fff;
background:#f6861f;
border: 1px solid #f6861f;
display: inline-block !important;
line-height: normal;
padding: 5px 8px !important;
margin-top: 10px !important;
font-weight: normal;
text-decoration:none;
}
.navbar .dropdown-menu .nav-view-more:hover{
background: none;
border: 1px solid #f6861f;
color: #f6861f !important;
}
.navbar button { margin-right: 15px; }
.btn-navbar-outlined-navy{ background:none; border:1px solid #003d62 !important; color:#003d62; border-radius:0 !important; text-decoration:none; text-transform:uppercase; font-size:0.75rem; padding:0.6rem 1.2rem; font-weight:700; }
.btn-navbar-outlined-navy:hover,.btn-navbar-outlined-navy:focus{ background:#003d62 !important; color:#fff !important; }
.btn-navbar-orange{ background:#f6861f; border:1px solid #f6861f !important; color:#fff; border-radius:0 !important; text-decoration:none; text-transform:uppercase; font-size:0.75rem; padding:0.6rem 1.2rem; font-weight:700; }
.btn-navbar-orange:hover,.btn-navbar-orange:focus{ background:none; color:#f6861f !important; }
/* 1200px width menu rules */
@media screen and (min-width: 992px) and (max-width: 1199px) {
/*.navbar.navbar-dark .nav-link { padding: 2.7em 0.1em !important; } FIX MOUSELEAVE BUG*/
.navbar.navbar-dark .nav-link { padding: 3.8em 0.8em !important; }
.navbar { font:700 0.75rem 'Lato', sans-serif!important; }
.navbar.navbar-dark .dropdown-menu .nav-link { font-size:0.8rem; }
}
/* breakpoint and up - mega dropdown styles */
@media screen and (min-width: 992px) {
/* remove the padding from the navbar so the dropdown hover state is not broken */
.navbar {
padding-top:0px;
padding-bottom:0px;
}
/* tyring to fix scroll menu problem on mobile */
/* nav.navbar.fixed-top {
overflow-y: visible;
} CAUSES PAGE TO HAVE 2 SCROLLBARS - CHECK RELATED RULE IN NORMAL VIEW ALSO */
/* remove the padding from the nav-item and add some margin to give some breathing room on hovers */
/* .navbar .nav-item {
padding:.5rem .5rem;
margin:0 .25rem;
} FIX MOUSELEAVE BUG*/
.navbar .dropdown-menu .nav-item {
padding:.5rem .5rem;
margin:0 .25rem;
}
/* makes the dropdown full width */
.navbar .dropdown { position:static; }
.navbar .dropdown-menu {
width:100%;
left:0;
right:0;
/* height of nav-item */
top:45px;
}
/* shows the dropdown menu on hover */
.navbar .dropdown:hover .dropdown-menu, .navbar .dropdown .dropdown-menu:hover { display:block!important; }
.navbar.navbar-dark .dropdown-menu {
border-bottom: 1px solid #003d62;
background-color: #fff;
}
} /** END 992px and up rules **/
/** Medium devices (tablets, less than 992px) **/
@media (max-width: 991.98px) {
/* remove the padding from the navbar so the dropdown hover state is not broken */
.navbar {
padding-top:0px;
padding-bottom:0px;
}
/* remove the padding from the nav-item and add some margin to give some breathing room on hovers */
.navbar .nav-item {
padding:.5rem .5rem;
margin:0 .25rem;
}
.navbar.navbar-dark .nav-link { padding: 0.5em !important; }
.navbar { font:700 1rem 'Lato', sans-serif!important; }
.navbar.navbar-dark .dropdown-menu .nav-link { font-size:1rem; }
/* makes the dropdown full width */
.navbar .dropdown { position:static; }
.navbar .dropdown-menu {
width:100%;
left:0;
right:0;
/* height of nav-item */
top:45px;
}
/* shows the dropdown menu on hover */
/* .navbar .dropdown:hover .dropdown-menu, .navbar .dropdown .dropdown-menu:hover { display:block!important; } */
.navbar .dropdown-menu {
border: 1px solid #003d62;
margin: 10px auto;
padding-top: 20px;
}
}
/** Medium devices (tablets, less than 992px) **/
@media (max-width: 559.98px) {
.navbar .navbar-collapse { /*max-height:300px!important;*/ overflow-y:scroll!important; overflow-x:hidden!important; }
.contact form { min-width: 270px; width:90%; margin:0 auto; }
.contact form input.text { width:100%; min-width:250px; }
.contact form textarea { width:100%; min-width:250px; }
}