@import url("http://fonts.googleapis.com/css?family=Open+Sans:200,300,400,600,700,800'");
@import url("https://fonts.googleapis.com/css?family=Roboto:200,300,400italic,400,600,700");
@import url('https://fonts.googleapis.com/css2?family=Merienda&display=swap');
@import url("colors.css");
@import url("animate.css");
@import url("aos.css");

html { height: 100% }
body { padding-top: 50px; height: 100%; font-family: "Open Sans", sans-serif !important; font-size: 15px; font-weight: 600; color: #000 }
.lead { color: #000; font-weight: 600; font-family: "Open Sans",Helvetica,Arial,sans-serif; font-size: 18px !important; line-height: 1.4 }
.leadbut { padding: 7px; color: #FFFFFF; font-weight: 700; font-size: 15px }
.tab-content { color: #000; font-weight: 600; font-family: 'Roboto',Arial,sans-serif; }
a { color: #0A47FF; font-weight: 600 }
h1, h2, h3, h4, h5, h6 { text-shadow: none !important; font-weight: 600 }
h4 { color: #444 }
.large { font-size 20px }
.wider { letter-spacing: 1.2rem }
a:hover { text-decoration: underline }
a:focus; a:active, a:visited { outline: none !important }
.well { background-color: #FFE47A !important }
.merien { font-family: "Merienda", sans-serif; font-weight: 400 }
.merienb { font-family: "Merienda", sans-serif; font-weight: 700 }
.page-header { margin-top: 100px !important; font-size: 42px !important }

.navbar-fixed-top { max-height: 100px; background-color: #00428a }
.navbar-right { margin-right: 20px !important }
.navbar-right li { margin-top: 15px }
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus {color: #FFF; background-color: #00428a }
.navbar-inverse .navbar-right .open .dropdown-menu>li>a.active { background-color: #0B8ECC; color: #FFF }
.navbar-header span { margin: 0 15px 15px 20px }
.topvideo { position: relative; background: #1f59af!important; margin: 0; padding: 0 }
.topvideo video { max-height: 700px auto; width: 100vw; position: absolute; top: 0; left: 0; z-index: -2; object-fit: fill }
#playbtn { vertical-align: middle; margin-top: 50% }
.pbtn { font-size: 12px; font-weight: 600; color: #000 }
@media (max-width: 800px) {
.topvideo { display: none }
}
.topimg { height: 100%; width: auto; background-position: center; background-repeat: no-repeat; background-size: cover }
@media (max-width: 780px) {
.topimg h1 { margin-top: -70px!important }
}
.topnews { background:url(../images/how-to-plan-for-success2.jpg); height: 100%; width: auto; background-position: center; background-repeat: no-repeat; background-size: cover }

.butanim img { transition: width 2s, height 4s;0; padding-bottom: 5px }
.butanim img:hover {  margin-left: 15px; transform: scale(1.1) }
.promo { margin-top: 25px; position: absolute; top: 30px; right: 20px }
.promo span { font-family: 'Open Sans', Helvetica, Arial, sans-serif; color: #FFF; margin: 15px 0px; font-size: 22px; background: linear-gradient(to right, #FFF 20%, #FFDC52 40%, #FFCC00 60%, #FFF 80%); background-size: 200% auto; color: #000; background-clip: text; text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shine 1.5s linear infinite; font-weight: 500; line-height: 1.1; -moz-text-shadow: 1px 1px 2px #999; -webkit-text-shadow: 1px 1px 2px #999; text-shadow: 1px 1px 2px #999 }
.promo a { font-family: 'Open Sans', Helvetica, Arial, sans-serif; color: #FFF; margin: 15px 0px; font-size: 22px; background: linear-gradient(to right, #FFF 20%, #FFDC52 40%, #FFCC00 60%, #FFF 80%); background-size: 200% auto; color: #000; background-clip: text; text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shine 1.5s linear infinite; font-weight: 500; line-height: 1.1; -moz-text-shadow: 1px 1px 2px #999; -webkit-text-shadow: 1px 1px 2px #999; text-shadow: 1px 1px 2px #999 }
.promo a:hover { background: linear-gradient(to right, #FFD1D1 20%, #FFD1D1 40%, #FFD1D1 60%, #FFD1D1 80%); background-size: 200% auto; color: #000; background-clip: text; text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: none; border-bottom: 1px solid #FFF }
.bounce-in { display:inline-block; vertical-align:middle; -webkit-transform:perspective(1px) translateZ(0);
transform:perspective(1px) translateZ(0); box-shadow:0 0 1px rgba(0,0,0,0);
-webkit-transition-duration:.5s; transition-duration:.5s }
.bounce-in:active,.bounce-in:focus,.bounce-in:hover { -webkit-transform:scale(1.2); transform:scale(1.2); -webkit-transition-timing-function:cubic-bezier(0.47,2.02,.31,-.36); transition-timing-function:cubic-bezier(0.47,2.02,.31,-.36) }
#popwin { position: relative; background: #555; padding: 20px; width: 500px; height: 500px; margin: 20px auto }
.color-effect {
text-align: center; background: linear-gradient(to right, #FFF 20%, #FFCC00 40%, #FFCC00 60%, #FFF 80%); background-size: 200% auto; color: #000; background-clip: text; text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shine 1.5s linear infinite }
@keyframes shine { to { background-position: 200% center }}
.color-effect:hover { background: linear-gradient(to right, #FFF 20%, #FFF 40%, #FFF 60%, #FFF 80%); background-size: 200% auto; color: #000; background-clip: text; text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: none; text-decoration: underline }
.down3 { margin-top: 2% }

.jumbotron .animation.animated-item-1 {
-webkit-animation: fadeInDown 800ms linear 800ms both; -moz-animation: fadeInDown 800ms linear 800ms both;
-o-animation: fadeInDown 800ms linear 800ms both; -ms-animation: fadeInDown 800ms linear 800ms both;
animation: fadeInDown 800ms linear 800ms both }
.jumbotron .animation.animated-item-2 {
-webkit-animation: fadeInUp 800ms linear 1000ms both; -moz-animation: fadeInUp 800ms linear 1000ms both;
-o-animation: fadeInUp 800ms linear 1000ms both; -ms-animation: fadeInUp 800ms linear 1000ms both;
animation: fadeInUp 800ms linear 1000ms both }
.jumbotron .animation.animated-item-3 {
-webkit-animation: zoomInUp 800ms linear 1200ms both; -moz-animation: zoomInUp 800ms linear 1200ms both;
-o-animation: zoomInUp 800ms linear 1200ms both; -ms-animation: zoomInUp 800ms linear 1200ms both;
animation: zoomInUp 800ms linear 1200ms both }
.jumbotron .animation.animated-item-4 {
-webkit-animation: zoomInLeft 800ms linear 1400ms both; -moz-animation: zoomInLeft 800ms linear 1400ms both;
-o-animation: zoomInLeft 800ms linear 1400ms both; -ms-animation: zoomInLeft 800ms linear 1400ms both;
animation: zoomInLeft 800ms linear 1400ms both }

.intro h1 { color: #FFF; font-family: 'Roboto',Arial,sans-serif; font-size: 42px; position: absolute; bottom: 35px; right: 65px }
.intro .animation.animated-item-1 {
-webkit-animation: fadeInUp 1000ms linear 800ms both; -moz-animation: fadeInUp 800ms linear 1000ms both;
-o-animation: fadeInUp 1000ms linear 1000ms both; -ms-animation: fadeInUp 1000ms linear 1000ms both;
animation: fadeInUp 1000ms linear 1000ms both }
.intro .animation.animated-item-2 {
-webkit-animation: zoomInLeft 1000ms linear 1000ms both; -moz-animation: zoomInLeft 1500ms linear 1500ms both;
-o-animation: zoomInLeft 1500ms linear 1500ms both; -ms-animation: zoomInLeft 1500ms linear 1500ms both;
animation: zoomInLeft 1500ms linear 1500ms both; position: absolute; bottom: 35px; margin-left: auto !important; margin-right: auto !important; text-align: center }

.radius8 { border-radius: 8px }
.panel-title .accordion-toggle:active, .panel-title .accordion-toggle:focus {outline: none }
.center, .discount-clock { margin-left: auto !important; margin-right: auto !important; text-align: center }
.left { text-align: left !important }
.right { text-align: right !important }
.vcenter { position: absolute; transform: translateY(50%)  }
@media (max-width: 991px) {
.vcenter { position: relative; transform: translateY(0%); margin: 25px 0px -10px 0px }
}
.text-middle { margin-top: 2% }
.tab-pane { margin-top: 15px }
select { padding: 4px; border-radius: 4px; }
.xtrasmall { font-size: 60% }
.lead { font-size: 15px; font-weight: 600 }
.lead2 { font-size: 1.3em }
.btn-info { background-color: rgb(56, 144, 245) !important }
.btn-info:hover { background-color: #FFF!important }
.space10 { height: 10px !important }
.space15 { height: 15px !important }
.space25 { height: 25px !important }
.sp50 { height: 50px !important }
.margin-top-25perc { margin-top: 2% !important }
.margin-top-2 { margin-top: 2px !important }
.margin-top-3 { margin-top: 3px !important }
.margin-top-5, .mt-5 { margin-top: 5px !important }
.margin-top-10, .mt-10 { margin-top: 10px !important }
.margin-top-15, .mt-15 { margin-top: 15px !important }
.margin-top-25, .mt-25 { margin-top: 25px !important }
.margin-top--25, .mt--25 { margin-top: -25px !important }
.mt-30 { margin-top: 30px !important }
.margin-top-35, .mt-35 { margin-top: 35px !important }
.margin-top--35, .mt--35 { margin-top: -35px !important }
.mt-40 { margin-top: 40px !important }
.margin-top-50, .mt-50 { margin-top: 50px !important }
.mt-60 { margin-top: 60px !important }
.margin-top-75, .mt-75 { margin-top: 75px !important }
.mt--5 { margin-top: -6px !important }
.mt--10 { margin-top: -10px !important }
.mt--15 { margin-top: -15px !important }
.mt--50 { margin-top: -50px !important }
.mt--60 { margin-top: -60px !important }
.mt--80 { margin-top: -80px !important }
.mt-80 { margin-top: 80px !important }
.mt-100 { margin-top: 100px !important }
.ml5 { margin-left: 5px !important }
.margin-left-15, .ml15 { margin-left: 15px !important }
.margin-left-25, .ml25 { margin-left: 25px !important }
.ml-50 { margin-left: 50px !important }
.ml10 { margin-left: 10px !important }
.mr10 { margin-right: 10px !important }
.margin-right-15, .mr-15 { margin-right: 15px !important }
.margin-right-25, .mr-25 { margin-right: 25px !important }
.margin-right-50, .mr-50 { margin-right: 50px !important }
.margin-bottom-10, .mb-10 { margin-bottom: 10px !important }
.margin-bottom-15, .mb15 { margin-bottom: 15px !important }
.margin-bottom-25, .mb-25 { margin-bottom: 25px !important }
.margin-bottom-30, .mb-30 { margin-bottom: 30px !important }
.mb-40 { margin-bottom: 40px !important }
.margin-bottom-50, .mb-50 { margin-bottom: 50px !important }
.mb-100 { margin-bottom: 100px !important }
.mb-65 { margin-bottom: 65px !important }
.mb--40 { margin-bottom: -25px !important }
@media (max-width: 767px) {
.mbm-15 { margin-bottom: 15px !important }
}

.p-15 { padding: 15px !important }
.p-30 { padding: 30px !important }
.pb-40 { padding-bottom: 40px !important }
.pse-15 { padding: 0 15px !important }

#Ordernow .modal-header { font-size: 20px }
.list-group-item-heading { color: #FFF; font-size: 18px }
.elem-btn { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #F2F2F2; background-color: rgba(204, 51, 51, 1); border-style: solid; border-width: 1px 1px 1px 1px; border-color: #970810; border-radius: 2px 2px 2px 2px; padding: 8px 12px; text-align: center; display: inline-block; line-height: 1 }
.elem-btn:hover { color: #fff; background-color: #000; border-color: #000; text-decoration: none !important }
.elem2-btn { font-size: 20px; text-transform: uppercase; letter-spacing: 1px; color: #970810; background-color: rgba(255, 215, 0, 1.0); border-style: solid; border-width: 1px 1px 1px 1px; border-color: #970810; border-radius: 2px 2px 2px 2px; padding: 12px 35px 12px 35px; text-align: center; display: inline-block; line-height: 1 }
.elem2-btn:hover { color: #FFCC00; background-color: #000; border-color: #fff }
.elem3-btn, .elem3-btn:active, .elem3-btn:focus { font-size: 22px; text-transform: uppercase; letter-spacing: 1px; fill: #970810; color: #FFF; background-color: rgba(0, 0, 0, 1); border-style: solid; border-width: 1px 1px 1px 1px; border-color: #000; border-radius: 2px 2px 2px 2px; padding: 5px 10px 5px 10px; text-align: center; display: inline-block; line-height: 1 }
.elem3-btn:hover { color: #333333 !important; background-color: #FFCC00; border-color: #fff; text-decoration: none !important }

.dark { color: #222222 }
.lblue { color: #C2E0FF }
.crimson { color: #660066 }
.white { color: #FCFCFC; -moz-text-shadow: 1px 1px 1px #999;
-webkit-text-shadow: 1px 1px 1px #999; text-shadow: 1px 1px 1px #999 }
.templatediv .button, .templatediv .btn { margin-bottom: 15px }
.cover-bg { background-position: center center; background-repeat: no-repeat; background-size: cover !important }
.circle { border-radius: 50%; width: 250px; height: 250px }
.circle25 { width: 25px; height: 25px; border-radius: 100%; color: #FFF; border: 4px thin #7A0018;
background-color: #A30021; text-align: center; padding: 4px 12px; margin: 0px 15px 15px 0 }
.knowtags .btn { font-size: 15px; margin: 0px 15px 10px 0px; padding-right: 10px !important }
.knowtags .btn:hover { cursor: pointer }
#displaybut, #cheapbut, .btn { outline: none }
.border-bottom-blue { border-bottom: 2px solid #38528B; height: 35px }
.fancy-short img { width: 350px; margin: 0; height: 20px }
.padr-15 { padding: 15px }
.panel-heading { font-size: 18px }

#search-form { line-height: 30px; margin: 15px 10px 0px 20px }
#search-form .search-text-box {
background-color: #fff; background-image: url(../images/main/search-icon.png);
background-position: 6px 56%; background-repeat: no-repeat;
border: 0; color: transparent; font-size: 13px; line-height: 18px; cursor: pointer;
-webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out; -webkit-box-shadow: none;
box-shadow: none; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;
width: 25px; height: 25px; margin: 15px 15px 0 -15px; padding: 0;
}
#search-form .search-text-box:focus {
font-size: 13px; background-color: #fff; width: 170px; height: 25px;
border: 0; color: #888; cursor: text; text-align: left;
padding: 0 15px 1px 25px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
}
.badge1 {
display: inline-block; min-width: 10px; padding: 3px 7px; font-size: 12px;
font-weight: bold; color: #ffffff; line-height: 1; vertical-align: baseline;
white-space: nowrap; text-align: center; background-color: #999; border-radius: 10px }
.myimageslist ul { list-style: none; margin: 0 0 0 -35px }
.myimageslist li { margin: 10px 10px 15px 0px; float: left; text-align: left; line-height: 1.5 }

#save { display: none }
.scroll-drop { font-size: 12px!important; font-weight: normal!important; font-weight: 400!important; margin-right: 5px }
.scroll-menu, .scroll-menu2 { margin-top: 0!important }
ul.scroll-menu { position: absolute; overflow-x: auto; -webkit-overflow-scrolling: touch;
-moz-overflow-scrolling: touch; -ms-overflow-scrolling: touch; -o-overflow-scrolling: touch;
overflow-scrolling: touch; left: 0 !important; width: 100%; height: 100%;
min-height: 142px; min-width: 180px; margin: 0 }
ul.scroll-menu > li { font-size: 0.8em; margin-left: -10px }
ul.scroll-menu2 { position: absolute; overflow-x: auto; -webkit-overflow-scrolling: touch;
-moz-overflow-scrolling: touch; -ms-overflow-scrolling: touch; -o-overflow-scrolling: touch;
overflow-scrolling: touch; left: 0 !important; width: 100%; height: 100%;
min-height: 250px; min-width: 250px; margin: 0; padding: 10px }
ul.scroll-menu2 > li { font-size: 1em; margin-left: -10px }

.fancy img { width: 200px; margin: 0px 15px; height: 6px }
.notfound p { text-align: center !important; margin: 0 auto }
.path { font-size: 85% }
.benefits { color: #004080; line-height: 1.5em }
.benefits ul li:before {
color: #9e9e9e; content: "\e080"; margin: 0 9px 0 0;
}
#saveit { display: none }
.hr1 { margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px dotted #999999;
-moz-box-sizing: content-box; box-sizing: content-box; height: 0 }
.hr2 { margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px dotted #fff;
-moz-box-sizing: content-box; box-sizing: content-box; height: 0 }
.tilde {
margin: 0px 15px 0px 20px; font-weight: bold;
color: #808080; font-size: 38px
}
.new { font-size: 11px; font-weight: 500; padding: 3px 8px; background-color: #CC0000; color: #FFF;  }
.texticon { margin-left: 15px }
.texticon i { color: #999!important }
.color-effect, .color-effect2 {
text-align: center; background: linear-gradient(to right, #A30021 20%, #FFCC00 40%, #A30021 60%, #FFF 80%); background-size: 200% auto; color: #000; background-clip: text; text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shine 1.5s linear infinite }
@keyframes shine { to { background-position: 200% center }}
.color-effect:hover { background: linear-gradient(to right, #A30021 20%, #000033 40%, #000033 60%, #000033 80%); background-size: 200% auto; color: #000; background-clip: text; text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: none; text-decoration: underline }
.color-effect2:hover { background: linear-gradient(to right, #FFFF66 20%, #FFFF66 40%, #FFFF66 60%, #FFFF66 80%); background-size: 200% auto; background-clip: text; text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: none; text-decoration: underline }

/* Buttons */

.btn { transition: all .3s ease-in; -o-transition: all .3s ease-in;
-moz-transition: all .3s ease-in; -webkit-transition: all .3s ease-in }
.btn-info { background-color: #85D6FF }
.btn-default:hover, .btn-primary:hover, .btn-success:hover,
.btn-info:hover, .btn-warning:hover, .btn-danger:hover {
color: #000000; background-color: #FFF; border-color: #3a4445 }
.btn-default:hover, .btn-primary:hover, .btn-success:hover,
.btn-info:hover, .btn-warning:hover, .btn-danger:hover {
box-shadow: inset 0px 20px 40px #EEF0F2, 2px 2px 5px #888;
-moz-box-shadow: inset 0px 20px 40px #EEF0F2, 2px 2px 5px #888;
-webkit-box-shadow: inset 0px 20px 40px #EEF0F2, 2px 2px 5px #888; text-decoration: none }
.halfwidth-button { width: 50% }
.fullwidth-button { width: 100% }
.transbutton { width: auto; height: auto; padding: 10px 23px; border: 1px solid white;
background: rgba(43,43,43,0.1); color: white; font-weight: 500; text-transform: uppercase;
font-size: 20px; cursor: pointer; margin: 35px auto; display: block; text-align: center;
-webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s }
.transbutton:hover { background: white; color: #3c3c3c; text-decoration: none }

.login { margin: 15px 25px 25px 100px; font-size: 14px; height: 16px; width: auto; color: #444; background-color: #FFF; padding: 4px 8px; transition: all .3s ease-in; -o-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -webkit-transition: all .3s ease-in; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-bottom-right-radius: 5px; -moz-border-bottom-left-radius: 5px }
.login:hover { background-color: #BBBB3E; color: #FFF }

.btn-dark { color:#fff; background-color: #343a40; border-color: #343a40 }
.btn-dark:hover { color:#fff; background-color: #23272b; border-color: #1d2124 }
.btn-dark.focus, .btn-dark:focus { box-shadow:0 0 0 .2rem rgba(82,88,93,.5) }

.btn.showbtn{
color: #000; background-color: #FFD700; font-family: "Montserrat", sans-serif;
border: none; border-radius: 15px; font-weight: 600; transition: all 0.5s }
.btn.showbtn:hover{ color: #fff; background-color: #4E6C8D; box-shadow: 10px 10px 10px rgba(0,0,0,0.2) }
.cta-btn {
font-family: "Raleway", sans-serif; font-size: 24px; text-transform: uppercase; letter-spacing: 1px; display: inline-block;
padding: 10px 25px; border-radius: 2px; transition: 0.4s; border: 2px solid #f03c02; color: #0000CD;
background-color: #FFE79E }
.cta-btn:hover { color: #000; background-color: #FFF; text-decoration: none }
.cta-btn-white {
font-family: "Raleway", sans-serif; font-size: 26px; text-transform: uppercase; letter-spacing: 1px; display: inline-block;
padding: 10px 25px; border-radius: 2px; transition: 0.4s; border: 2px solid #f03c02; color: #000;
background: #FFF }
.cta-btn-white:hover { color: #FFF; background-color: #DC3545; text-decoration: none }

.move-right:hover .fa { position: relative; transition: transform 1s ease; transform: translateX(20px) !important }
.move-right:hover::after .fa { transition: transform 1s ease-in-out; transform: translateX(20px, 0px) !important }
.shade:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23) }

/* Page Sections */

.section-coloredf { padding: 40px 0 15px 0; background: #0066CC url("../images/nicebg2.png") no-repeat }
.section-coloredf h2, .section-coloredf h3{ color: #FFF }
.section-coloredf h2 { text-align: center; padding-bottom: 40px }
.section, .section-colored, .section-colored2, .section-action { padding: 50px 0 }
.section-colored { background: #90B6E5 url("../images/main/sectionbg.jpg") repeat; -webkit-animation: slidein 20s; animation: slidein 20s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate }
.section-colored-fm { background-color: #BED4E9}
.section-colored2 { background-color: #88B0D7 }
.section-action { background-color: #0276AC }
.section-action1 { background-color: #0276AC }
.section-action1:hover { background-color: #D18B00 }
.section-action, .section-action1 { text-align: center; text-transform: uppercase; padding: 30px 0 }
.section-action h1, .section-action1 h1 { margin: 0; font-size: 28px; color: white; text-shadow: none }
.section-action a, .section-action1 a {
display: inline-block; margin: 20px 7px 5px; padding: 6px 18px;
border: 1px solid white; background: transparent; font-size: 20px;
color: white; -webkit-transition: all 0.3s;
-moz-transition: all 0.3s; transition: all 0.3s }
.section-action a:hover, .section-action1 a:hover { color: #3c3c3c; background: white }

.section-colored2bot { padding: 50px 0; background: #0066CC url("../images/nicebg2.png") no-repeat; position: relative; -webkit-animation: slidein 40s; animation: slidein 40s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate }
@-webkit-keyframes slidein { from { background-position: center; background-size:3000px; } to { background-position: 0px;background-size:2750px;}}
@keyframes slidein { from { background-position: center; background-size: 3000px } to { background-position: 0px; background-size:2750px }}

.section-colored2bot ul > li { color: #FFF !important }
.section-colored2bot ul > li .icon-link { font-weight: 700; color: #FFF !important }

.section-banner {
background-color: #3366CC; -webkit-border-radius: 5px; -moz-border-radius: 5px;
border-bottom: 1px solid #000; border-radius: 5px;
}
.section-banner .modal-body h4 { color: #000000 }
.section-banner p {
text-align: center; font-family: 'Open Sans',Helvetica,Arial,sans-serif;
font-size: 20px; font-weight: 400; line-height: 1.4; color: #FFFFFF; padding: 12px 0px 5px 0px;
}
.section-banner .pmodal {
text-align: left; font-family: 'Open Sans',Helvetica,Arial,sans-serif;
font-size: 14px; font-weight: 400; line-height: 1.4; color: #000000; padding: 12px 0px 5px 0px;
}
.section-banner small {
text-align: center; font-family: 'Open Sans',Helvetica,Arial,sans-serif;
font-size: 13px; font-weight: 200; line-height: 1; color: #EEEEEE; padding: 5px 0px 5px 0px;
}
.sidebar { margin-top: 40px }
.sidebar ul { border-radius: 5px; padding: 5px; border: 1px solid #cccccc }
.quote { font-size: 15px !important; line-height: 2; background-color: #F7F7F7; padding: 7px 15px 7px 15px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px }
.badgereg { min-width: 10px; padding: 3px 8px; font-size: 12px;
font-weight: bold; color: #FFF; line-height: 1; vertical-align: baseline;
white-space: nowrap; text-align: center;
background-color: #88B0D7; border-radius: 10px }

#action { width: 100%; margin: 30px 0px; background-color: #3399CC; height: 180px }
.action i { width: 50px; height: 50px; border-radius: 100%; color: #FFFFFF;
background-color: #F88933; text-align: center; padding: 12px 0; margin-right: 20px }
.action h1 { margin-top: 3%; text-transform: uppercase; font-size: 28px;
color: #FFFFFF; font-weight: 300; text-align: center }
.action p { font-size: 32px; color: #FFFFCC; font-weight: 400; text-transform: uppercase; text-align: center }

.call { width: 100%; margin: 25px 0px 0px 0px; text-align: center; background-color: #FFD429 }
.call i { width: 50px; height: 100px; color: #FFFFFF;
background-color: #F88933 !important; text-align: center; padding: 12px 0; margin-right: 20px }
.call h1 a { font-family: 'Roboto',Helvetica,Arial,sans-serif; margin: 20px auto 10px; text-transform: uppercase; font-size: 36px;
color: #333333; font-weight: 700 }
.call p { font-size: 20px; color: #484541; font-weight: 300; text-transform: uppercase; margin-bottom: 30px }

.calltemp { width: 100%; margin: 25px 0px; padding: 15px 20px 30px 20px; text-align: center; background-color: #F88933 }
.calltemp h1 a { font-family: 'Roboto',Helvetica,Arial,sans-serif; text-transform: uppercase; font-size: 28px;
color: #FFF; font-weight: 400 }
.calltemp h1 a:hover { color: #FFF; background-color: #9900FF }

/*.quote { width: 70%; padding: 15px; background-color: #F5F5F5; font-family: 'Raleway',Helvetica,Arial,sans-serif; ; font-size: 11px!important; line-height: 1.2 }*/

/* AI powered */

.aibox { color: #FFF; background-color: #336666; padding: 15px 20px 15px 20px; box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); transition: all ease-in-out 0.3s }
.aibox p { font-size: 17px; font-weight: 700 }
.aibox:hover { box-shadow: 10px 15px 30px rgba(0, 0, 0, 0.18); color: #FFF; background-color: #4D9999 }
.vline { border-left: 2px solid #336666; min-height: 100% auto; height: 100% auto }

/* discounts */

.discount { position: relative; bottom: 70px; left: 15px; background-color: #8AC4FF; border-radius: 50%; padding: 10px 15px; opacity: 1; width: 100px }
.discount .p1 { text-align: center; font-size: 22px; font-weight: 700; color: #000 }
.discount .p2 { text-align: center; font-size: 18px; color: #000 }
.discount:hover { color: rgba(255, 61, 61, 1)!important; text-decoration: none; background-color: #FFCC33; border-radius: 50% }
.discount:visited, .discount:active, .discount:focus { outline: 0; text-decoration: none }

/* Pricetables */

.pricing { position: relative; margin-bottom: 15px; border: 3px solid #eee }
.pricing-active { border: 3px solid #003366; margin-top: -10px; box-shadow: 7px 7px rgba(54, 215, 172, 0.2) }
.pricing:hover { border: 3px solid #003366 }
.pricing:hover .pricing-head h3 { color: #FFFF66!important }
.pricing:hover h4 { color: #003366 }
.pricing:hover .pricing-head .aibox p { background-color: #4D9999 }
.pricing-head { text-align: center }
.pricing-head h3, .pricing-head h4 { margin: 0; line-height: normal }
.pricing-head h3 span, .pricing-head h4 span {
display: block; margin-top: 5px; font-size: 14px; font-style: italic }
.pricing-head h3 {
font-weight: 300; color: #EEEEEE; padding: 12px 0;
font-size: 27px; background: #003366; border-bottom: solid 1px #000066 }
.pricing-head h4 {
color: #6C774B; padding: 5px 0; font-size: 54px;
font-weight: 300; background: #D9ECFF; border-bottom: solid 1px #f5f9e7 }
.pricing-head-active h4 { color: #003366 }
.pricing-head h4 i { top: -8px; font-size: 28px; font-style: normal; position: relative }
.pricing-head h4 span { top: -10px; font-size: 14px; font-style: normal; position: relative }
.pricing-content { padding-top: 15px }
.pricing-content li { color: #888; font-size: 12px; padding: 10px 15px; border-bottom: solid 1px #f5f9e7 }
.pricing-content li i { top: 2px; color: #003366; font-size: 16px; margin-right: 5px; position: relative }
.pricing-footer { color: #777; font-size: 11px; line-height: 17px; text-align: center; padding: 0 20px 19px }
 .price-active, .pricing:hover { z-index: 9 }
.price-active h4 { color: #003366; }
.no-space-pricing .pricing:hover { transition: box-shadow 0.2s ease-in-out }
.no-space-pricing .price-active .pricing-head h4, .no-space-pricing .pricing:hover .pricing-head h4 {
color: #003366; padding: 15px 0; font-size: 80px; transition: color 0.5s ease-in-out }

/* Lists */

.list-group ul { margin-left: 25px }
.list-group ul>li:before {
content: url('../images/main/listbullet.png'); margin-right: 6px; bottom: 2px;
position: relative; display: inline-block; vertical-align: middle; font-size: 0;
line-height: 0; margin-left: -13px
}
.opera .plmlist ul>li:before {
/* Vertical-align:middle in Opera doesn't need additional offset */
bottom: 0;
}

/* Caro */

.caro { margin-top: 100px }
.caro h1 { font-family: 'Roboto',sans-serif; font-size: 36px; margin: 0 }
.caro p { color: #333333; margin: 35px 0; font-family: 'Roboto',sans-serif; font-weight: 400; font-size: 1.4em; text-shadow: none }
.overimg img { z-index: -102; margin: 0 0 0 30px }

/* Carousel */

.carousel-inner { background-color: #E4C496 }
.carousel-inner h1 { font-family: 'Roboto',Arial,sans-serif; font-size: 36px }
.carousel-caption { margin-top: 25px }
.carousel-inner h4 { font-family: 'Roboto',Arial,sans-serif; font-size: 22px; font-weight: 400 !important; color: #333333 }
.carousel-inner #carouselh5 { font-size: 42px; margin: -15px 0 0 0; padding: 0 }
.carousel-inner p { color: #333333; margin: 35px 0px 0px 0px; font-family: 'Roboto',Arial,sans-serif; font-weight: 400; font-size: 1.4em; text-shadow: none }
/* Half Page Height Carousel Customization */
.carousel { height: 50% }
.item, .active, .carousel-inner { height: 100% }
.fill { width: 100%; height: 100%; background-position: center; background-size: cover }
.overimg img { z-index: -102; margin: 0 0 0 30px }
.carousel-control .icon-prev, .carousel-control .icon-next { font-size: 75px; top: 45% }
.carousel-indicators li { border: 1px solid #000 }

/* About */

#about { background: #fff; padding: 20px 0px 50px 0px }
#about h4 { margin-top: 0; font-size: 24px }
#about .i1 { font-size: 36px; color: #3071a8 }
#about .i2 { font-size: 48px; color: #3071a8 }
#about .content { padding: 25px; border-radius: 8px }
#about .content:hover { background-image: url(../images/bghover1.png);
background-repeat: no-repeat; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;
background-color: #FFCC66 }
#about .content:hover span { margin-left: -25px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;
color: #3399FF; background-color: #FFF; border-radius: 50%; padding: 10px 15px  }

#about .content2 { margin: 15px; padding: 15px; border-radius: 8px; background: #e1f7fe }
#about .content2:hover { background-image: url(../images/bghover2.png); background: #8be5ff }

/*#about .content2 { margin: 15px; padding: 15px; border-radius: 8px; background-image: url(../images/bghover2.png); background-position: 0% - 100%; background-repeat: no-repeat }
#about .content2:hover { background-image: url(../images/bghover2.png); background-position: 0% - 100%; background-repeat: no-repeat; border0; box-shadow: 0px 40px 40px 0px rgba(0,0,0,0.1); transform: translateY(-5px); background-color: rgb(255, 255, 255) }*/

/* 3D

.tt-icon-box { height: 100% }
.tt-icon-box { padding: 40px 30px; border-radius: 15px; border: 2px solid rgb(229, 229, 229); text-align: left }
.tt-icon-box__icon-container { border-color: rgb(0, 42, 140); padding: 15px; font-size: 25px; background-color: rgb(0, 42, 140) }
.tt-icon-box__icon-container i { transform: rotate(0deg) }
.tt-icon-box:hover { border-style: solid; border-color: rgb(255, 255, 255); box-shadow: 0px 40px 40px 0px rgba(0,0,0,0.1); transform: translateY(-5px); background-color: rgb(255, 255, 255) }
*/

.select3d1 { text-shadow: 1px 1px 0px rgba(238, 238, 238, 0.5), 1px 1px 0px #707070 }
.select3d2 { text-shadow: 1px 1px 0px rgba(238, 238, 238, 0.5), 2px 2px 0px #707070 }
.select3d3 { text-shadow: 1px 1px 0px rgba(54, 54, 54, 0.5), 2px 3px 0px #707070 }

/* Animation */

#carouselh1, #carouselh2, #carouselh3, #carouselh4, #carouselh5 {
animation-duration: 4s; animation-delay: 1s;
-webkit-animation-duration: 4s; -webkit-animation-delay: 1s;
-moz-animation-duration: 4s; -moz-animation-delay: 1s;
-o-animation-duration: 4s; -o-animation-delay: 1s;
}
#carouselh1i, #carouselh2i, #carouselh3i, #carouselh4i, #carouselh5i {
animation-duration: 3s; animation-delay: 3s;
-webkit-animation-duration: 2s; -webkit-animation-delay: 2s;
-moz-animation-duration: 2s; -moz-animation-delay: 2s;
-o-animation-duration: 2s; -o-animation-delay: 2s;
}
#anim1, #anim2 {
animation-duration: 5s; animation-delay: 5s;
-webkit-animation-duration: 5s; -webkit-animation-delay: 5s;
-moz-animation-duration: 5s; -moz-animation-delay: 5s;
-o-animation-duration: 5s; -o-animation-delay: 5s;
animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite;
}
#anim3 {
animation-duration: 5s; animation-delay: 6s;
-webkit-animation-duration: 5s; -webkit-animation-delay: 6s;
-moz-animation-duration: 5s; -moz-animation-delay: 6s;
-o-animation-duration: 5s; -o-animation-delay: 6s;
animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite;
}

.block, .bizblock { margin: 35px 0px; padding: 7% 20px; text-align: center; box-shadow: 0px 20px 20px 0px rgba(0,0,0,0.15) }
.block h2 { color: #3D0000; font-family: 'Roboto',Helvetica,Arial,sans-serif; font-size: 24px; font-weight: 700 }
.block p { color: #FFF; font-size: 14px; font-weight: 300; margin-top: 0.5em }
.bizblock h2 { color: #3D0000; font-family: 'Roboto',Helvetica,Arial,sans-serif; font-size: 22px; font-weight: 700; margin-top: 0 }
.bizblock h3 { color: #000; font-size: 15px; font-weight: 700 }
.bizblock p { color: #FFF !important; font-size: 14px; font-weight: 300; margin-top: 0.5em }
.bizblock .templates { display: inline-block; padding: 0; margin: -15px 0 0 0; float: right }
.bizblock .more { color: #3071A8; font-size: 15px; font-weight: 700 }
.bizblock .more:hover { color: #4089C9; font-size: 15px; font-weight: 700 }

/* Vertical tabs */

.v-tab .tab-pane { border: 1px solid #999; padding: 10px; min-height: 300px; margin-top: -15px }
.v-tab .tab-pane p, .v-tab .tab-pane ul { font-style: normal; font-size: 16px; color: #333333 }
.v-tab ul > li, .v-tab ul > li:active, .v-tab ul > li:focus  { outline: 0 }
.v-tab ul > li > a:before {
font-family: 'FontAwesome'; content: "\f07b"; padding-right: 10px }
.v-tab ul > li.active > a:before {
font-family: 'FontAwesome'; content: "\f07c"; padding-right: 10px }
.v-tab .tab-arrow { font-size: 74px; padding-right: 0; color: #A9BCD0 }
.v-tab ul > li .tab-arrow { display: none }
.v-tab ul > li.active .tab-arrow { display: inline-block; position: absolute; top: 5px; right: -15px; z-index: 1 }

.bordered {
border-radius: 4px; box-shadow: 1px 2px 3px 2px #C7C7C7;
border: 1px solid #A9B4BB }

/* Portfolio */

.reg-item { border-radius: 3px; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); margin-bottom: 40px; background-image: url("../images/regbg.png"); box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); border: 1px solid #ddd; padding: 0; display: block }
.reg-item2 { border-radius: 3px; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); margin-bottom: 40px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); border: 1px solid #ddd; padding: 10px; display: block }
.reg-item:hover, .reg-item2:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2) }
.reg-item img { display: block; width: 300px; padding-bottom: 10px; border-bottom: 1px solid #AAAAAA }
.reg-item-footer { width: 100%; text-align: center; padding: 10px 5px 10px 5px; background: #FFF; border-radius: 5px }
.reg-item-footer a { font-weight: 600; font-size: 16px;
-webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out;
 -o-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out;
transition: all 0.25s ease-out }
.reg-item-footer p { font-size: 12px; color: rgba(79, 79, 79, 1); margin: 10px 0; text-align: center; border: 0; text-decoration: none }
.bbottom { border-bottom: 1px solid #CCC; padding: 5px 0px 10px 0px }

.combos { border-radius: 3px; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); padding: 0px 15px 25px 15px; margin-bottom: 25px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); border: 1px solid #ddd }
.combos div { margin-top: 15px }
.combos:hover { box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2) }

/* Product box */

.product-box_boxes { margin: 50px auto 25px auto; padding: 7% 20px; text-align: center }
.product-box { text-align: center; z-index: 100 }
.product-box_box { border-radius: 6px; width: 354px; height: 360px; text-align: center; overflow: hidden; box-shadow: 0px 20px 40px 0px rgba(0,0,0,0.15); background-color: rgb(255, 255, 255) }
.product-box_box::before { background: linear-gradient(315deg, rgb(114, 184, 254) 0%, rgb(0, 129, 255) 100%); transition:opacity 0.3s; left: 0px; top: 0px; width: 100%; height: 100%; position: absolute; z-index: 0; content: ""; opacity: 0 }
.product-box_box--hover:hover::before {	opacity: 1 }
.product-box_box--hover:hover .description { color: rgb(255, 255, 255); opacity: 1 }
.product-box_box h2 { margin: 0px; color: rgb(38, 61, 87); line-height: 28px; font-size: 24px; font-weight: 800; position: relative; z-index: 1 }
.product-box_box h3 { margin: 0px; color: rgb(38, 61, 87); line-height: 18px; font-size: 18px; font-weight: 800; position: relative; z-index: 1 }
.product-box_box .description { margin: 20px auto 0px; width: 280px; color: rgb(138, 155, 165); line-height: 16px; font-size: 16px; font-weight: 400; position: relative; z-index: 1 }
@media only screen and (max-width:1350px){
.product-box_box { width: 270px }
.product-box_box .description { padding: 0px 10px; width: auto; font-size: 15px }
}
@media only screen and (max-width:980px){
.product-box_box { margin: 0px auto 10px; width: 350px }
}
@media only screen and (max-width:380px){
.product-box_box { width: 95% }
}

/* Promotion box */

.promotion-box { border-radius: 5px; border: 1px solid rgb(238, 238, 238); left: 35px;
top: 85px; position: fixed; z-index: 10; box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25);
background-color: rgb(255, 255, 255); -webkit-animation-delay: 2s; -moz-animation-delay: 2s;
-o-animation-delay: 2s; -ms-animation-delay: 2s; animation-delay: 2s; background-color: rgb(169, 212, 234) }
.promotion-box:hover .title { display: none }
.promotion-box .rightside { padding-top: 25px }
.promotion-box .title { padding: 15px; display: block; background-color: #CC0000; color: #FFF }
.promotion-box #promosection { overflow: hidden; display: none }
.promotion-box:hover #promosection { display: block; padding: 0px; background-color: #F2F2F2 }

/* Program box */

#boxwrapper { width: auto; margin: 15px 0px }
.newsbox { float: left; width: auto; height: auto; display: block; border: 0px #D3D3D3;
box-shadow: inset 0px 20px 40px #EEF0F2, 2px 2px 5px #888;
-moz-box-shadow: inset 0px 20px 40px #EEF0F2, 2px 2px 5px #888;
-webkit-box-shadow: inset 0px 20px 40px #EEF0F2, 2px 2px 5px #888;
padding: 0px  15px 15px; margin: 15px }
.newsbox h2 { font-family: 'Roboto',Helvetica,Arial,sans-serif; font-size: 21px; font-weight: 400 }
.newsbox h3 { font-size: 15px; font-weight: 700 }
.newsbox img { margin-left: auto !important; margin-right: auto !important }
.newsbox div { margin: 0 }
.newsbox .templates { display: inline-block; padding: 0; margin: 25px 0px 0px 0px; float: right }
.newsbox .more { font-size: 15px; font-weight: 700 }
.newsbox .sample { display: inline-block; padding: 0; margin: 0; margin-top: 15px; float: right }

#acc-wrapper { width: auto; margin: 20px 10px 15px 0px }
.servicebutton { width: 100%; cursor: pointer; background-color: #6699CC; padding: 10px; margin: 10px 10px 0px 0px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; text-align: center; vertical-align: middle }
.servicebutton h2 { margin-top: 5px; font-family: 'Roboto',Helvetica,Arial,sans-serif; font-size: 21px; font-weight: 400; color: #FFF }
.servicebutton p { color: #FFF }
.servicebutton:hover h2, .servicebutton:hover p { color: #000 }

/* just bought box */

.elem4-btn, .elem4-btn:active, .elem4-btn:focus { width: 50%; padding: 5px 10px; margin-bottom: 25px; font-family: 'Roboto',Helvetica,Arial,sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; background-color: #FFBE5C; border-style: double; border-width: 1px 1px 1px 1px; border-color: #000; border-radius: 3px; text-align: center; line-height: 1.2 }
.elem4-btn:hover { color: #FFF; background-color: #CC7A00 }

/* Survey */

.survey { border: 1px solid #8A9BA5; border-radius: 4px; padding: 10px }

/* Accordions */

/* image */
.planmenu { float: left; margin: 0px auto -40px; width: 49% }

.f-accordion {
text-align: left; width: 100%; font-weight: normal;
font-size: 15px; color: #2A2A2A; margin: 0 0 25px 0
}
.f-accordion .accordion-head { font-size: 28px; color: #4C4C4C }
.f-accordion .panel {
width: 100%; border-bottom: 1px solid #B5B5B5; padding: 20px 0 0;
background: transparent; margin-bottom: 0
}
.f-accordion-heading { width: 100%; margin-bottom: 15px; text-transform: uppercase }
.f-accordion-inner { padding: 0 15px 15px; display: block }
.f-accordion-heading > a:before {
font-family: 'FontAwesome'; content: "\f068"; padding-right: 10px }
.f-accordion-heading > a.collapsed:before {
font-family: 'FontAwesome'; content: "\f067"; padding-right: 10px }

/* skewed edges */

.edge--bottom { position: relative; z-index: 1 }
.edge--bottom:after {
background: inherit; content: ''; display: block; height: 50%;
left: 0; position: absolute; right: 0; z-index: -1; -webkit-backface-visibility: hidden }
.edge--bottom:after {
bottom: 0; -webkit-transform: skewY(-1.5deg); transform: skewY(-1.5deg);
-webkit-transform-origin: 100%; transform-origin: 100% }
.edge--bottom--reverse { position: relative; z-index: 1 }
.edge--bottom--reverse:after {
background: inherit; content: ''; display: block; height: 50%; left: 0;
position: absolute; right: 0; z-index: -1; -webkit-backface-visibility: hidden }
.edge--bottom--reverse:after {
bottom: 0; -webkit-transform: skewY(1.5deg); transform: skewY(1.5deg);
-webkit-transform-origin: 0 100%; transform-origin: 0 100% }

.edge--top { position: relative; z-index: 1 }
.edge--top:before {
background: inherit; content: ''; display: block; height: 50%; left: 0;
position: absolute; right: 0; z-index: -1; -webkit-backface-visibility: hidden }
.edge--top:before {
top: 0; -webkit-transform: skewY(1.5deg); transform: skewY(1.5deg);
-webkit-transform-origin: 100% 0; transform-origin: 100% 0 }

.edge--top--reverse { position: relative; z-index: 1 }
.edge--top--reverse:before {
background: inherit; content: ''; display: block; height: 50%; left: 0;
position: absolute; right: 0; z-index: -1; -webkit-backface-visibility: hidden }
.edge--top--reverse:before {
top: 0; -webkit-transform: skewY(-1.5deg); transform: skewY(-1.5deg);
-webkit-transform-origin: 0 0; transform-origin: 0 0 }

.edge--both { position: relative; z-index: 1 }
.edge--both:before, .edge--both:after {
background: inherit; content: ''; display: block; height: 50%; left: 0;
position: absolute; right: 0; z-index: -1; -webkit-backface-visibility: hidden }
.edge--both:before {
top: 0; -webkit-transform: skewY(1.5deg); transform: skewY(1.5deg);
-webkit-transform-origin: 100% 0; transform-origin: 100% 0 }
.edge--both:after {
bottom: 0; -webkit-transform: skewY(-1.5deg); transform: skewY(-1.5deg);
-webkit-transform-origin: 100%; transform-origin: 100% }

.edge--both--reverse { position: relative; z-index: 1 }
.edge--both--reverse:before, .edge--both--reverse:after {
background: inherit; content: ''; display: block; height: 50%; left: 0;
position: absolute; right: 0; z-index: -1; -webkit-backface-visibility: hidden }
.edge--both--reverse:before {
top: 0; -webkit-transform: skewY(-1.5deg); transform: skewY(-1.5deg);
-webkit-transform-origin: 0 0; transform-origin: 0 0 }
.edge--both--reverse:after {
bottom: 0; -webkit-transform: skewY(1.5deg); transform: skewY(1.5deg);
-webkit-transform-origin: 0 0; transform-origin: 0 0 }

.-white { background-color: rgba(250, 250, 250, 1) }
.-white:hover { background-color: rgba(255, 255, 255, 1) }
.-berry { background-color: rgba(220, 106, 131, 1) }
.-berry:hover { background-color: rgba(228, 139, 159, 1) }
.-blue { background-color: rgba(49, 167, 227, 1) }
.-blue:hover { background-color: rgba(93, 186, 233, 1) }
.-liblue { background-color: rgba(120, 198, 237, 1) }
.-liblue:hover { background-color: rgba(152, 211, 241, 1) }
.-orange { background-color: rgba(216, 95, 34, 1) }
.-orange:hover { background-color: rgba(225, 119, 65, 1) }
.-liorange { background-color: rgba(230, 141, 96, 1) }
.-liorange:hover { background-color: rgba(235, 163, 127, 1) }
.-green { background-color: rgba(83, 136, 58, 1) }
.-green:hover { background-color: rgba(94, 155, 66, 1) }
.-ligreen { background-color: rgba(138, 194, 112, 1) }
.-ligreen:hover { background-color: rgba(161, 206, 141, 1) }
.-liligreen { background-color: rgba(184, 218, 169, 1) }
.-liligreen:hover { background-color: rgba(199, 226, 187, 1) }

/* Progress */

.progress { height: 40px }
.progress .progress-bar {
font-size: 15px; font-weight: 300; line-height: 40px;
padding-left: 20px; text-align: left }
.progress .progress-bar i { margin-right: 8px }
.progress-bar .percent { position: relative; float: right; top: 30%; text-shadow: none }

.animation.animated-item1 {
-webkit-animation: zoomInLeft 3000ms linear 600ms both; -moz-animation: zoomInLeft 3000ms linear 600ms both;
-o-animation: zoomInLeft 3000ms linear 600ms both; -ms-animation: zoomInLeft 3000ms linear 600ms both;
animation: zoomInLeft 3000ms linear 600ms both
}
.animation.animated-item2 {
-webkit-animation: zoomInLeft 4000ms linear 800ms both; -moz-animation: zoomInLeft 4000ms linear 800ms both;
-o-animation: zoomInLeft 4000ms linear 800ms both; -ms-animation: zoomInLeft 4000ms linear 800ms both;
animation: zoomInLeft 4000ms linear 800ms both
}
.animation.animated-item3 {
-webkit-animation: zoomInLeft 5000ms linear 1000ms both; -moz-animation: zoomInLeft 5000ms linear 1000ms both;
-o-animation: zoomInLeft 5000ms linear 1000ms both; -ms-animation: zoomInLeft 5000ms linear 1000ms both;
animation: zoomInLeft 5000ms linear 1000ms both
}
.animation.animated-item4 {
-webkit-animation: zoomInLeft 6000ms linear 1200ms both; -moz-animation: zoomInLeft 6000ms linear 1200ms both;
-o-animation: zoomInLeft 6000ms linear 1200ms both; -ms-animation: zoomInLeft 6000ms linear 1200ms both;
animation: zoomInLeft 6000ms linear 1200ms both
}
.animation.animated-item5 {
-webkit-animation: zoomInLeft 7000ms linear 1400ms both; -moz-animation: zoomInLeft 7000ms linear 1400ms both;
-o-animation: zoomInLeft 7000ms linear 1400ms both; -ms-animation: zoomInLeft 7000ms linear 1400ms both;
animation: zoomInLeft 7000ms linear 1400ms both
}

/* Boxed */

.box { padding: 10px 15px }
.boxed { padding: 10px 15px; background-color: rgba(0, 0, 0, 0.9); color: #FFF; opacity: .9 }
.boxed p { }
.boxedrev { margin: 35px 0px 25px 0px; padding: 10px 15px; background-color: rgba(0, 0, 0, 0.9); color: #FFF; opacity: .9; font-size: 130% }
.boxedrevp { font-size: 1.2em; background-color: #FFF }
.boxbrown { width: 65%; padding: 10px; opacity: .7; filter: alpha(opacity=70); background-color: #B87A3D;
margin-left: auto; margin-right: auto }
.boxbrown2 { color: #FFF; width: 65%; padding: 10px; opacity: .7; filter: alpha(opacity=70); background-color: #B87A3D;
margin-left: auto; margin-right: auto }
.boxpurple { width: 65%; padding: 10px; color: #FFFFFF; background-color: #5D237A;
margin-left: auto; margin-right: auto }
.boxblue { width: 65%; padding: 10px; color: #FFFFFF; background-color: #6699CC;
margin-left: auto; margin-right: auto }

.actions {
display: inline-block; padding: 0; margin: 0; margin-top: -5px; float: right;
}
.actions > .dropdown-menu i { color: #000 !important }

#action4 { margin: -50px 0px 80px 0px; background-color: rgba(51, 153, 204, 1) }
.action4 { text-align: center; padding: 30px 20px; margin-bottom: 40px }
.action4 h1, .action4 h1 a { font-size: 28px; color: white; text-shadow: none }
.action4 p { width: auto; display: inline-block; margin: 20px 7px 5px; padding: 6px 18px;
border: 1px solid white; background: transparent; font-size: 30px; color: #FFF; -webkit-transition: all 0.3s;
-moz-transition: all 0.3s; transition: all 0.3s }

/* skewed edges */

#action3 { background-color: rgba(255, 204, 51, 1) }
#action3 .inner { background-color: rgba(255, 235, 204, 1) }
#action3 .inner:hover { background-color: rgba(255, 216, 158, 1) }

/* Benefits */

#benefits { background-color: #3399FF; padding: 25px 0px 50px 0px }
.benefits { margin: 30px 15px 30px 0px; padding: 15px 10px }
.benefits h2 { color: #111; text-align: center }
.benefits p { color: #000; font-size: 17px; text-align: center; padding: 0px 10px }

/* Modal */

.modal-wide { width: 60% !important }
.modal-full { width: 100% !important }

.totop { margin: 15px; color: #FFF; font-size: 1.5em; text-decoration: none; padding: 1px 8px 3px 8px; outline: none }
.totop:hover { padding-bottom: 6px; border-radius: 50%; color: #FFF !important; text-decoration: none !important; background-color: #CC0000 }
.totop:visited, .totop:active, .totop:focus { outline: none }

/* Homequote */

.homequote { max-width: 490px; height: auto; font-weight: 300; overflow: hidden; padding: 15px 25px }
.homequote h3 { font-family: 'Roboto', Arial, sans-serif; font-size: 38px; padding: 5px 10px; line-height: 1.4;
display: inline-block; color: #0066CC; font-style: italic }
.homequote i { font-size: 36px; color: #65AAF7; margin: 0px 0px 15px 0px }
.homequote div { margin: 10px 0px 15px 0px }
.homequote div .btn { border-radius: 50%; padding: 10px }
/* .homequote h3::after { float: right; font-size: 38px; font-family:'FontAwesome'; color: #65AAF7; content: "\f10e"; margin-top: 50px } */

/* Footer */

.footer .section { margin: 0; padding: 50px 0px 10px 0px; color: #FFF; background-color: #00428a; height: 70% }
.footer p { margin: 15px 0; padding: 0; text-align: center }
.footer ul>li { margin-left: -25px; padding: 0 }
.footer a, .footer a:link { color: #DDE4D3; text-decoration: none }
.footer a:visited { color: #DDE4D3; text-decoration: none }
.footer a:hover { color: #FFCC33; text-decoration: underline }
.footer h2 { color: #F0F7FF; text-align: center; margin: 20px 0px 0px 0px; font-size: 22px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; line-height: 1.1; letter-spacing: 0.05em;
-moz-text-shadow: 1px 1px 1px #999  !important; -webkit-text-shadow: 1px 1px 1px #999  !important; text-shadow: 1px 1px 1px #999 !important
}
.footer h3 { color: #C2E0FF; font-size: 1.4em }
.footer img { border: none; margin: 5px }

/* jcarousel */

.jcarousel-wrapper { margin: 20px auto; position: relative; width: 490px; height: 353px }
.jcarousel { position: relative; overflow: hidden; width: 100% }
.jcarousel ul { width: 20000em; position: relative; list-style: none; margin: 0; padding: 0 }
.jcarousel li { float: left }
.jcarousel img { display: block; max-width: 100%; height: auto !important }
.jcarousel-pagination {
position: absolute; bottom: -40px; left: 50%; -webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0); transform: translate(-50%, 0); margin: 0 }
.jcarousel-pagination a { text-decoration: none; display: inline-block;
font-size: 11px; height: 10px; width: 10px; line-height: 10px; background: #fff;
color: #4E443C; border-radius: 10px; text-indent: -9999px; margin-right: 7px;
-webkit-box-shadow: 0 0 2px #4E443C; -moz-box-shadow: 0 0 2px #4E443C;
box-shadow: 0 0 2px #4E443C }
.jcarousel-pagination a.active { background: #4E443C; color: #fff; opacity: 1;
-webkit-box-shadow: 0 0 2px #F0EFE7; -moz-box-shadow: 0 0 2px #F0EFE7;
box-shadow: 0 0 2px #F0EFE7 }

#abox {
width: 100%; min-width: 100%; height: auto; min-height: auto;
-webkit-border-radius: 4px; -moz-border-radius: 4px;
border-radius: 4px; border: #a3b1ce 1px solid
}
#abox h1 {
margin: 0; font-family: arial; text-align: left;
width: auto; padding: 6px 10px 6px 10px;
font-weight: normal; font-size: 15px;
color: #000033; background-color: #E0EAF0;
background-image: url('../images/main/hboxh1.png');
background-repeat: repeat-x; border-bottom: #555555 2px solid;
vertical-align: middle
}
#abox p {
padding-right: 20px; padding-left: 20px; font-weight: normal; font-size: 11px; padding-bottom: 0px;
margin: 0px; color: #334B80; padding-top: 14px; font-family: arial
}
#abox .a1 {
border-right: #a3b1ce 1px solid; padding: 3px 5px; border-top: #a3b1ce 1px solid; font-weight: normal;
font-size: 9px; margin: 0px; border-left: #a3b1ce 1px solid; color: #38528b;
border-bottom: #a3b1ce 1px solid; font-family: arial; background-color: #ffffff; -webkit-border-radius: 4px;
-moz-border-radius: 4px; border-radius: 4px; text-decoration: none
}
#abox .a1:hover { color: #ffffff; background-color: #003366 }
#abox .a1:hover:visited { color: #ffffff; background-color: #003366 }

li ul.has-pages { margin-left: 20px }
.lpage { border-bottom: #ddd 1px solid; padding: 5px }
.last-page { border: none }

/* cookieChoices */

#cookieChoiceInfo { padding: 15px !important; color: rgb(255, 255, 255); background-color: rgb(75, 170, 211) !important }
#cookieChoiceInfo a { background-color: #66CCFF; color: #FFFFFF; padding: 10px 20px }
#cookieChoiceInfo a:hover { color: #333; background-color: white }

/* Timer */

#countdown { color: #333; padding: 0; margin: 0; text-align: center }
#timer-headline{ font-weight: 700; color: #000 !important; font-size: 18px !important; margin: 0 }
#countdown ul>li { display: inline-block; font-size: 1.5em; list-style-type: none; padding: 1em; text-transform: uppercase }
#countdown ul>li span { display: block; font-size: 4.5rem }
@media all and (max-width: 768px) {
#countdown h1 { font-size: calc(1.5rem * var(--smaller)) }
#countdown ul>li { font-size: calc(1.125rem * var(--smaller)) }
#countdown ul>li span { font-size: calc(3.375rem * var(--smaller)) }
}

/* show slow */

.showslow { transition: transform 6s ease, opacity 6s ease }

/* Responsive */

@media (min-width: 992px) and (max-width: 1440px) {
.page-header { margin-top: 100px !important; font-size: 32px }
.login { margin-left: 60px }
.jumbotron { margin: 0 0 25px 0 }
.carousel { height: 70% }
.reg-item img, .portfolio-item img { text-align: center; margin-top: 25px }
}
@media (min-width: 768px) and (max-width: 991px) {
.page-header { margin-top: 100px !important }
.jumbotron { margin: 45px 0 35px 0 }
.login { margin-left: 65px }
.carousel { margin-top: 30px; height: 70% }
.carousel img { display: none }
.boxblue { display: none }
.reg-item img, .portfolio-item img { text-align: center; margin-top: 25px }
.reg-item .btn-success { margin: 15px 0px 15px 0px }
.v-tab, .v-tab .tab-pane { font-size: .9em !important }
}
@media (max-width: 767px) {
.promo { display: none }
.intro, .topimg { display: none }
.intro p { margin-top: 50px }
.login { white-space: nowrap; word-wrap: normal; margin: 70px 30px 30px 30px }
.carousel { height: 70% }
.carousel img { display: none }
.jumbotron { margin-top: 40px; padding-bottom: 35px }
#search-form { display: none }
.boxblue { display: none }
.reg-item img, .portfolio-item img { text-align: center; margin-top: 25px }
.v-tab, .v-tab .tab-pane, .v-tab .tab-pane p { font-size: .9em !important }
.reg-item .btn-success { margin: 15px 0px 15px 0px }
}
@media (max-width: 490px) {
.intro { display: none }
.jumbotron { margin: 0 0 25px 0; font-size: 95% }
.action4 h1, .action4 h1 a { font-size: 90%; color: white; text-shadow: none; padding: 0 15px }
}