Edit File - File Manager

Edit File: style.css

/* 
Skin Name: App
Version: 1.0
Demo URI: https://themify.me/demo/themes/ultra-app
Required Plugins: builder-contact, builder-pricing-table
*/

/************************************************************************************
GENERAL
*************************************************************************************/
body {
	font-family: 'Poppins', sans-serif;
	font-size: 1.05em;
	color: #7d7d7d;
}
.post-nav .arrow,
a {
	color: #5023ce;
}
a:hover,
.post-nav  a:hover > span,
.post-title a:hover {
	color: #5f22d6;
}

/* form elements */
label {
	display: block;
	font-size: .85em;
	font-weight: 500;
	text-transform: uppercase;
	vertical-align: middle;
}
textarea, input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], input[type=number], input[type=tel], input[type=date], input[type=datetime], input[type=datetime-local], input[type=month], input[type=time], input[type=week] {
	background: none;
	border: 1px solid #d2d0d0;
	border-radius: 0;
	color: inherit;
	padding: .65em;
	margin: 0;
	transition: all .3s;
}
textarea {
	border: 1px solid #d2d0d0;
}
input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], input[type=tel] {
	max-width: none;
}
select {
	background: none;
	border: 1px solid #d2d0d0;
	width: 100%;
	max-width: 27.3em;
	border-radius: 0;	
}
input[type=reset], input[type=submit], button {
	border-radius: 50em;
	padding: 0.925em 3.35em;
	font-size: 1.1em;
	font-weight: bold;
	font-family: 'Raleway', sans-serif;
	letter-spacing: 0.11em;
}
textarea:focus, input[type=text]:focus, input[type=password]:focus, input[type=search]:focus, input[type=email]:focus, input[type=url]:focus, input[type=tel]:focus, textarea:hover, input[type=text]:hover, input[type=password]:hover, input[type=search]:hover, input[type=email]:hover, input[type=url]:hover, input[type=tel]:hover {
	box-shadow: 0 2px 15px 0px rgba(0,0,0,0.2);
}
blockquote:before {
	color: #5023ce;
}

/************************************************************************************
HEADING
*************************************************************************************/
h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	font-family: 'Raleway', sans-serif;
}
h1 {
	font-size: 3.6em;
	line-height: 1.2em;
	font-weight: 800;
	margin: 0 0 .2em;
	text-transform: none;
	letter-spacing: -0.01em;
}
h2 {
	font-size: 2.7em;
	line-height: 1.2em;
	font-weight: 900;
	margin: 0 0 .45em;
	letter-spacing: -0.015em;
}
h3 {
	font-size: 1.5em;
	line-height: 1.5em;
	font-weight: normal;
	line-height: normal;
}

/************************************************************************************
HEADER
*************************************************************************************/
#headerwrap {
	border: none;
}

/* SITE LOGO
================================================ */
#site-logo {
	font-family: 'Raleway', sans-serif;
	font-size: 1.95em;
	font-weight: bold;
	letter-spacing: normal;
}

/* MAIN NAVIGATION
================================================ */
#main-nav a {
	font-family: 'Raleway', sans-serif;
	font-weight: 600;
	letter-spacing: 0.03em;
	padding: 0.5em;
	text-transform: uppercase;
}
#main-nav a:hover,
#main-nav .mega-menu-posts a:hover,
#main-nav .current_page_item > a,
#main-nav .current-menu-item > a {
	color: #ffd52b;
}
#main-nav ul a {
	letter-spacing: normal;
}
#main-nav ul .current_page_item > a,
#main-nav ul .current-menu-item > a,
#main-nav ul a:hover {
	color: #5023ce;
}

/* highlight-link (custom menu class) */
#main-nav li.highlight-link {
	margin-left: .7em;
}
#main-nav li.highlight-link a {
	border: 2px solid;
	border-radius: 50em;
	line-height: normal;
	letter-spacing: 0.06em;
	padding: .625em 1.6em;
}

/* FIXED HEADER
================================================ */
.transparent-header #headerwrap.fixed-header,
#headerwrap.fixed-header {
	background-color: rgba(56, 33, 243, 0.82);
	color: #fff;
}

/* HEADER HORIZONTAL LAYOUT
================================================ */
.header-horizontal #site-logo {
	font-size: 1.95em;
}

/* Mega menu widget */
#main-nav .has-mega-column .widget {
	font-size: .9em;
	line-height: 1.7em;
}

/************************************************************************************
PAGE
*************************************************************************************/
.page-title {
	font-size: 4.15em;
	line-height: normal;
	margin: 0 0 .2em;
}

.widgettitle {
	text-transform: none;
	font-weight: bold;
	letter-spacing: normal;
}

/************************************************************************************
POST
*************************************************************************************/
.single .post-date-wrap:not(.post-date-inline) .post-date {
	background-image: linear-gradient( 135deg, rgb(80,35,206) 0%, rgb(123,34,230) 66%, rgb(165,32,254) 100%);
	color: #fff;
}

/************************************************************************************
BUILDER BUTTONS
*************************************************************************************/
/* TESTIMONIAL SLIDER MODULE
================================================ */
.module-testimonial-slider .themify_builder_slider > li .testimonial-image {
	max-width: 80%;
	margin: auto;
	margin-bottom: -40px;
	z-index:1;
}
.module-testimonial-slider .themify_builder_slider > li .testimonial-content {
	box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.2);
	border-radius: 10px;
	background-color: #9677ee;
	color: #fff;
	margin: 42px 20px;
	margin-top: 0;
	padding: 40px;
	padding-top: 70px;
}
.module-testimonial-slider .themify_builder_slider > li .testimonial-content {
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
}
.module-testimonial-slider .testimonial-entry-content p:last-child {
	margin: 0;
}
.module-testimonial-slider .testimonial-entry-content:before {
	content: "\201C";
	display: block;
	line-height: 0;
	font-size: 4em;
	font-family: serif;
	font-style: normal;
	font-weight: normal;
	margin-top: 40px;
	margin-bottom: 10px;
}
.module-testimonial-slider .themify_builder_slider > li .testimonial-author {
	order: -1;
}
.module-testimonial-slider .themify_builder_slider > li .testimonial-author .person-company {
	text-transform: uppercase;
	opacity: .8;
	font-size: .825em;
	font-weight: 300;
	letter-spacing: .06em;
}
.module-testimonial-slider .themify_builder_slider > li .testimonial-author .person-name {
	font-family: 'Raleway', sans-serif;
	line-height: normal;
}
.module-testimonial-slider .themify_builder_slider > li {
	margin-top: 15px !important;
	margin-bottom: 15px !important;
}
.module-testimonial-slider .themify_builder_slider > li:hover .testimonial-content {
	box-shadow: 0 7px 20px rgba(0,0,0,.5);
}
.module-testimonial-slider .themify_builder_slider > li:hover {
	transform: rotateX(-5deg) scale(1.03);
}

/* carousel pager */
.themify_builder_slider_wrap .carousel-pager a,
.module-testimonial-slider.themify_builder_slider_wrap .carousel-pager a {
	width: 18px;
	height: 18px;
	margin: 0 5px;
	border-width: 2px;
	border-color: #5023ce;
}
.themify_builder_slider_wrap .carousel-pager a:hover,
.themify_builder_slider_wrap .carousel-pager a.selected,
.module-testimonial-slider.themify_builder_slider_wrap .carousel-pager a:hover,
.module-testimonial-slider.themify_builder_slider_wrap .carousel-pager a.selected {
	background-color: #5023ce;
}

/* carousel arrow */
.themify_builder_slider_wrap .carousel-nav-wrap .carousel-prev,
.themify_builder_slider_wrap .carousel-nav-wrap .carousel-next,
.module-testimonial-slider.themify_builder_slider_wrap .carousel-nav-wrap .carousel-prev,
.module-testimonial-slider.themify_builder_slider_wrap .carousel-nav-wrap .carousel-next {
	background-color: transparent;
	color: #5023ce;
	font-size: 1em;
	overflow: visible;
	padding: 0 5px;
	display: inline-block !important;
}
.themify_builder_slider_wrap .carousel-prev:before,
.themify_builder_slider_wrap .carousel-next:before,
.module-testimonial-slider.themify_builder_slider_wrap .carousel-prev:before,
.module-testimonial-slider.themify_builder_slider_wrap .carousel-next:before {
	width: 1em;
	height: 1em;
	border-width: 10px;
	margin: 0 16px;
}
.themify_builder_slider_wrap .carousel-nav-wrap .carousel-prev:hover,
.themify_builder_slider_wrap .carousel-nav-wrap .carousel-next:hover {
	transform: translateY(-50%) scale(1.2);
}
.themify_builder_slider_wrap .carousel-nav-wrap .carousel-prev:hover:before,
.themify_builder_slider_wrap .carousel-nav-wrap .carousel-next:hover:before {
	box-shadow: 5px 5px 5px rgba(0,0,0,.15);
}

/* Animation transition */
.themify_builder_slider > li,
.module-testimonial-slider .themify_builder_slider > li,
.themify_builder_slider > li .slide-content,
.module-testimonial-slider .themify_builder_slider > li .testimonial-content,
.themify_builder_slider_wrap .carousel-nav-wrap .carousel-prev,
.themify_builder_slider_wrap .carousel-nav-wrap .carousel-next,
.themify_builder_slider_wrap .carousel-prev:before,
.themify_builder_slider_wrap .carousel-next:before {
    transition: .8s cubic-bezier(.2,1,.2,1);
}

@media screen and (min-width: 1300px) {
	.themify_builder_slider_wrap .carousel-wrap,
	.module-testimonial-slider.themify_builder_slider_wrap .carousel-wrap {
		padding: 0 50px;
		box-sizing: border-box;
	}
	.themify_builder_slider_wrap .carousel-nav-wrap .carousel-prev,
	.themify_builder_slider_wrap .carousel-nav-wrap .carousel-next {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
	.themify_builder_slider_wrap .carousel-nav-wrap .carousel-next {
		right: 0;
		left: auto;
	}
}

/* PRICING TABLE MODULE
================================================ */
.module.module-pricing-table .module-pricing-table-pop:before {
	border-width: 5px;
	height: .8em;
	width: .8em;
	bottom: -20px;
}
.ui.module.module-pricing-table {
	border: none;
	border-radius: 10px;
	box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.2);
	font-family: 'Raleway', sans-serif;
}
.module.module-pricing-table .module-pricing-table-header {
	background-image: linear-gradient( 122deg, rgb(60,200,240) 0%, rgb(198,92,233) 100%);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	padding-bottom: 57px;
	padding-top: 32px;
}
.module.module-pricing-table .module-pricing-table-title {
	font-size: 1.65em;
	font-weight: normal;
}
.module.module-pricing-table .module-pricing-table-price {
	font-size: 3.5em;
	font-weight: 300;
	margin: .55em 0 .45em;
}
.module.module-pricing-table .module-pricing-table-description {
	font-size: .9em;
	font-weight: 300;
}
.module.module-pricing-table .module-pricing-table-content {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	position: relative;
	z-index: 1;
	padding-top: 0;
}
.module-pricing-table .module-pricing-table-content:before {
	content: "";
	display: block;
	height: 46px;
	width: 100%;
	background-color: inherit;
	position: absolute;
	bottom: 100%;
	transform-origin: right bottom;
	transform: skewY(-7deg);
	z-index: -1;
	pointer-events: none;
	left: 0;
}
.module-pricing-table.pricing-enlarge .module-pricing-table-content:before {
	transform-origin: left bottom;
	transform: skewY(7deg);
	height: 58px;
}
.module.module-pricing-table .module-pricing-table-features {
	border: none;
	font-weight: 500;
	padding: .45em 0 .3em;
}
.module.module-pricing-table .module-pricing-table-button {
	width: auto;
	padding: .9em 2.5em;
	border-radius: 50em;
	letter-spacing: 0.07em;
	box-shadow: 0px 7px 20px 0px rgba(0, 0, 0, 0.3);
	color: #fff;
}
.ui.module.module-pricing-table {
	overflow: hidden;
}
.ui.module-pricing-table.pricing-enlarge {
	overflow: visible;
}

/* BUTTONS MODULE
================================================ */
.module .module-buttons-item a {
	color: #fff;
	text-align: center;
	letter-spacing: 0.08em;
	font-size: 1.2em;
}
.module-buttons-item a {
	font-family: 'Raleway', sans-serif;	
	font-weight: bold;
	text-transform: uppercase;
}
.module-buttons-item a span {
	padding: .4em 1.2em;
}
input[type=reset], input[type=submit], button,
.module-pricing-table-button,
.module-buttons-item a {
	box-shadow: 0px 7px 20px 0px rgba(0, 0, 0, 0.3);
	background-image: linear-gradient( 135deg, rgb(80,35,206) 0%, rgb(123,34,230) 66%, rgb(165,32,254) 100%);
}
input[type=reset]:hover,
input[type=submit]:hover,
button:hover,
.module-pricing-table-button:hover,
.module-buttons-item a:hover {
	box-shadow: 0px 17px 30px 0px rgba(0, 0, 0, 0.3);
	transform: translateY(-5px);
}
.module.module-pricing-table .module-pricing-table-header.black,
.module-pricing-table-button.black,
.module-buttons-item .black {
	background-image: linear-gradient( 135deg, rgb(0,0,0) 0%, rgb(26,26,26) 66%, rgb(51,51,51) 100%);
}
.module.module-pricing-table .module-pricing-table-header.gray,
.module-pricing-table-button.gray,
.module-buttons-item .gray {
	background-image: linear-gradient( 135deg, rgb(68,68,68) 0%, rgb(94,94,94) 66%, rgb(119,119,119) 100%);
}
.module.module-pricing-table .module-pricing-table-header.blue,
.module-pricing-table-button.blue,
.module-buttons-item .blue {
	background-image: linear-gradient( 135deg, rgb(0,156,255) 0%, rgb(0,189,255) 66%, rgb(0,222,255) 100%);
}
.module.module-pricing-table .module-pricing-table-header.light-blue,
.module-pricing-table-button.light-blue,
.module-buttons-item .light-blue {
	background-image: linear-gradient( 135deg, rgb(35,184,206) 0%, rgb(34,219,229) 66%, rgb(32,254,251) 100%);
}
.module.module-pricing-table .module-pricing-table-header.green,
.module-pricing-table-button.green,
.module-buttons-item .green {
	background-image: linear-gradient( 135deg, rgb(65,184,56) 0%, rgb(65,196,96) 66%, rgb(64,207,135) 100%);
}
.module.module-pricing-table .module-pricing-table-header.light-green,
.module-pricing-table-button.light-green,
.module-buttons-item .light-green {
	background-image: linear-gradient( 135deg, rgb(35,206,99) 0%, rgb(34,230,131) 66%, rgb(32,254,163) 100%);
}
.module.module-pricing-table .module-pricing-table-header.purple,
.module-pricing-table-button.purple,
.module-buttons-item .purple {
	background-image: linear-gradient( 135deg, rgb(80,35,206) 0%, rgb(123,34,230) 66%, rgb(165,32,254) 100%);
}
.module.module-pricing-table .module-pricing-table-header.light-purple,
.module-pricing-table-button.light-purple,
.module-buttons-item .light-purple {
	background-image: linear-gradient( 135deg, rgb(71,35,206) 0%, rgb(114,101,226) 66%, rgb(157,167,245) 100%);
}
.module.module-pricing-table .module-pricing-table-header.brown,
.module-pricing-table-button.brown,
.module-buttons-item .brown {
	background-image: linear-gradient( 135deg, rgb(165,42,42) 0%, rgb(165,42,42) 66%, rgb(254,168,32) 100%);
}
.module.module-pricing-table .module-pricing-table-header.orange,
.module-pricing-table-button.orange,
.module-buttons-item .orange {
	background-image: linear-gradient( 135deg, rgb(206,131,35) 0%, rgb(230,142,34) 66%, rgb(254,152,32) 100%);
}
.module.module-pricing-table .module-pricing-table-header.yellow,
.module-pricing-table-button.yellow,
.module-buttons-item .yellow {
	background-image: linear-gradient( 135deg, rgb(206,180,35) 0%, rgb(230,200,34) 66%, rgb(254,220,32) 100%);
}
.module.module-pricing-table .module-pricing-table-header.red,
.module-pricing-table-button.red,
.module-buttons-item .red {
	background-image: linear-gradient( 135deg, rgb(206,35,35) 0%, rgb(230,34,34) 66%, rgb(254,32,32) 100%);
}
.module.module-pricing-table .module-pricing-table-header.pink,
.module-pricing-table-button.pink,
.module-buttons-item .pink {
	background-image: linear-gradient( 135deg, rgb(206,35,204) 0%, rgb(220,96,225) 66%, rgb(234,157,245) 100%);
}

/* Button Hover */
input[type=reset]:hover,
input[type=submit]:hover,
button:hover,
.module-pricing-table-button:hover,
.module .module-buttons-item a:hover {
	background-image: linear-gradient( 135deg, rgb(165,32,254) 0%, rgb(123,34,230) 66%, rgb(80,35,206) 100% );
}
.module-pricing-table-button.black:hover,
.module .module-buttons-item .black:hover {
	background-image: linear-gradient( 135deg, rgb(51,51,51) 0%, rgb(26,26,26) 66%, rgb(0,0,0) 100%);
}
.module-pricing-table-button.gray:hover,
.module .module-buttons-item .gray:hover {
	background-image: linear-gradient( 135deg, rgb(119,119,119) 0%, rgb(94,94,94) 66%, rgb(68,68,68) 100%);
}

.module-pricing-table-button.blue:hover,
.module .module-buttons-item .blue:hover {
	background-image: linear-gradient( 135deg, rgb(0,222,255) 0%, rgb(0,189,255) 66%, rgb(0,156,255) 100%);
}
.module-pricing-table-button.light-blue:hover,
.module .module-buttons-item .light-blue:hover {
	background-image: linear-gradient( 135deg, rgb(32,254,251) 0%, rgb(34,219,229) 66%, rgb(35,184,206) 100%);
}
.module-pricing-table-button.green:hover,
.module .module-buttons-item .green:hover {
	background-image: linear-gradient( 135deg, rgb(64,207,135) 0%, rgb(65,196,96) 66%, rgb(65,184,56) 100%);
}
.module-pricing-table-button.light-green:hover,
.module .module-buttons-item .light-green:hover {
	background-image: linear-gradient( 135deg, rgb(32,254,163) 0%, rgb(34,230,131) 66%, rgb(35,206,99) 100%);
}
.module-pricing-table-button.purple:hover,
.module .module-buttons-item .purple:hover {
	background-image: linear-gradient( 135deg, rgb(165,32,254) 0%, rgb(123,34,230) 66%, rgb(80,35,206) 100%);
}
.module-pricing-table-button.light-purple:hover,
.module .module-buttons-item .light-purple:hover {
	background-image: linear-gradient( 135deg, rgb(157,167,245) 0%, rgb(114,101,226) 66%, rgb(71,35,206) 100%);
}
.module-pricing-table-button.brown:hover,
.module .module-buttons-item .brown:hover {
	background-image: linear-gradient( 135deg, rgb(254,168,32) 0%, rgb(165,42,42) 66%, rgb(165,42,42) 100%);
}
.module-pricing-table-button.orange:hover,
.module .module-buttons-item .orange:hover {
	background-image: linear-gradient( 135deg, rgb(254,152,32) 0%, rgb(230,142,34) 66%, rgb(206,131,35) 100%);
}
.module-pricing-table-button.yellow:hover,
.module .module-buttons-item .yellow:hover {
	background-image: linear-gradient( 135deg, rgb(254,220,32) 0%, rgb(230,200,34) 66%, rgb(206,180,35) 100%);
}
.module-pricing-table-button.red:hover,
.module .module-buttons-item .red:hover {
	background-image: linear-gradient( 135deg, rgb(254,32,32) 0%, rgb(230,34,34) 66%, rgb(206,35,35) 100%);
}
.module-pricing-table-button.pink:hover,
.module .module-buttons-item .pink:hover {
	background-image: linear-gradient( 135deg, rgb(234,157,245) 0%, rgb(220,96,225) 66%, rgb(206,35,204) 100%);
}

/************************************************************************************
FOOTER
*************************************************************************************/
#footerwrap {
	color: rgba(255,255,255,.7);
	background-color: transparent;
	background-image: url(images/footer-bg.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
	border: none;
	padding-top: 120px;
}
#footer {
	font-size: .95em;
}
#footer a {
	color: #fff;
}
#footer a:hover {
	color: #ffd52b;
}

/* footer logo */
#footer-logo {
	margin-bottom: 0.6em;
	font-size: 2em;
	font-weight: 900;
}

/* back to top */
#pagewrap .back-top.back-top-float,
.footer-horizontal-left .back-top .arrow-up a,
.footer-horizontal-right .back-top .arrow-up a,
.footer-left-col .back-top .arrow-up a,
.footer-right-col .back-top .arrow-up a {
	background: rgb(165,32,254);
	background: linear-gradient(135deg, rgba(165,32,254,1) 0%,rgba(80,35,206,1) 65%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a520fe', endColorstr='#5023ce',GradientType=1 );
}
#pagewrap .back-top.back-top-float:hover .arrow-up {
	animation-duration: .5s;
	animation-delay: initial;
}
#pagewrap .back-top.back-top-float {
	z-index: 999;
}

/* footer widget */
.footer-left-col #footer .widget,
.footer-right-col #footer .widget {
	margin: 1em 0 1.5em;
}
body:not(.footer-block) .section-col {
	position: relative;
	padding-left: 36px;
	padding-right: 36px;
}
body:not(.footer-block) .section-col:before {
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	left: 0;
	border-left: 1px solid rgba(255,255,255,.2);
}

/* footer widgettitle */
.footer-widgets .widgettitle {
	color: #fff;
}
.footer-left-col .footer-widgets .social-links {
	text-align: right;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
.mobile_menu_active #headerwrap #main-nav a:hover,
.mobile_menu_active #headerwrap #main-nav ul a:hover {
	color: #ffd52b;
}

@media screen and (max-width: 680px) {
	h1,
	.page-title {
		font-size: 1.9em;
	}
	h2 {
		font-size: 1.7em;
	}
	h3 {
		font-size: 1.2em;
	}

.footer-left-col .footer-widgets .social-links {
		text-align: inherit;
	}
	
	.module-testimonial-slider .themify_builder_slider > li .testimonial-content {
		padding-left: 8px;
		padding-right: 8px;
	}
	.themify_builder_slider_wrap .carousel-wrap .carousel-nav-wrap .carousel-prev,
	.themify_builder_slider_wrap .carousel-wrap .carousel-nav-wrap .carousel-next,
	.module-testimonial-slider.themify_builder_slider_wrap .carousel-nav-wrap .carousel-prev,
	.module-testimonial-slider.themify_builder_slider_wrap .carousel-nav-wrap .carousel-next {
		font-size: .5em;
		padding: 0;
		transform: none;
	}
	.themify_builder_slider_wrap .carousel-prev:before,
	.themify_builder_slider_wrap .carousel-next:before,
	.module-testimonial-slider.themify_builder_slider_wrap .carousel-prev:before,
	.module-testimonial-slider.themify_builder_slider_wrap .carousel-next:before {
		border-width: 5px;
		margin: 0;
	}
	.themify_builder_slider_wrap .carousel-pager a,
	.module-testimonial-slider.themify_builder_slider_wrap .carousel-pager a {
		width: 12px;
		height: 12px;
	}
	.module.module-pricing-table .module-pricing-table-header {
		padding-bottom: 72px;
	}
	.module-pricing-table .module-pricing-table-content:before,
	.module-pricing-table.pricing-enlarge .module-pricing-table-content:before {
		height: 72px;
	}
}

Back to File Manager