Current path: home/webdevt/www/wdp/wp-content/themes/quadric/assets/css/scss/
?? Go up: /home/webdevt/www/wdp/wp-content/themes/quadric/assets/css
/*------------------------------------------------------------------
* This is main css file for theme. It is broken into following sections:
* 1. Reset
* 2. Reset browser specific styles
* 3. General styles
* 4. Grid system styles
* 5. Row Style
* 6. VC Override
* 7. Animations styles
* 8. Comments styles
* 9. Pagination styles
* 10. General slider styles
* 11. 404 page styles
* 12. Back to top styles
* 13. Floating Background styles
* 14. Logo styles
* 15. Main Menu styles
* 16. Headers styles
* 17. Footer styles
* 18. Title styles
* 19. Side area styles
* 20. Search styles
* 21. Portfolio styles
* 22. Shortcodes styles
* 23. Sidebar styles
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
* Color codes
* Background: #ffffff (white)
* Content: #575757 (dark gray)
* Header h1: #333333 (dark gray)
* Header h2: #333333 (dark gray)
* Header h3: #333333 (dark gray)
* Header h4: #575757 (dark gray)
* Header h5: #333333 (dark gray)
* Header h6: #333333 (dark gray)
* Header Background: #ffffff (white)
* Footer Top Background: #19171b (black)
* Footer Bottom Background: #000000 (black)
* Content Border: #efefef (gray)
* a (standard): #fb3644 (red)
* a (hover): #fb3644 (red)
-------------------------------------------------------------------*/
/* ==========================================================================
1. Reset default styles - start
========================================================================== */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,
ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{
background: transparent;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
outline: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display: block;
}
blockquote {
quotes: none;
}
blockquote:before,blockquote:after {
content: '';
content: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
border: medium none;
vertical-align: middle;
}
table th{
border: 0;
padding: 5px 7px;
text-align: center;
}
table td {
padding: 5px 10px;
text-align: center;
}
a img {
border: none;
}
img,.wp-caption{
max-width: 100%;
height: auto;
}
/* ==========================================================================
Reset default styles - end
========================================================================== */
/* ==========================================================================
2. Remove browser specific styles - start
========================================================================== */
li,a,div,span{
-webkit-tap-highlight-color:transparent;
}
input[type=text]::-ms-clear { display: none; width : 0; height: 0; }
input[type=text]::-ms-reveal { display: none; width : 0; height: 0; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }
/* ==========================================================================
#Remove browser specific styles - End
========================================================================== */
/* ==========================================================================
3. General styles that are used in our theme - start
Here are defined global styles on body element, on container elements that hold every page,
headings and links, inputs, core wp styles and default pagination styles
========================================================================== */
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.clear:after {
clear: both;
content: "";
display: block;
}
html {
height: 100%;
margin: 0 !important;
@include edgtfTransition(all 0.33s ease-out);
overflow-y: scroll !important; /* to prevent page jumping on ajax and when there is not enough content */
}
body {
font-family: 'Raleway', sans-serif;
font-size: 14px;
line-height: 26px;
color: $default-text-color;
font-weight: 400;
background-color: $default-background-color;
overflow-x: hidden !important;
-webkit-font-smoothing: antialiased;
}
h1 {
font-size: 40px;
line-height: 1.65em; /* 66px/40px */
font-weight: 700;
text-transform: uppercase;
}
h2 {
font-size: 30px;
line-height: 1.2em; /* 36px/30px */
font-weight: 700;
}
h3 {
font-size: 18px;
line-height: 1.5em; /* 27px/18px */
font-weight: 600;
text-transform: uppercase;
}
h4 {
font-size: 18px;
line-height: 1.6666666666666666666666666666667em; /* 26px/18px */
font-weight: 400;
}
h5 {
font-size: 16px;
line-height: 1.4375em; /* 23px/16px */
font-weight: 700;
text-transform: uppercase;
}
h6 {
font-size: 14px;
line-height: 1.4285714285714285714285714285714em; /* 20px/14px */
font-weight: 600;
text-transform: uppercase;
}
h1, h1 a,
h2, h2 a,
h3, h3 a,
h5, h5 a,
h6, h6 a{
color: #333;
}
h4, h4 a {
color: $default-text-color;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{
font-family: inherit;
font-size: inherit;
font-weight: inherit;
font-style: inherit;
line-height: inherit;
letter-spacing: inherit;
text-transform: inherit;
}
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover{
color: $first-main-color;
}
a,
p a {
color: $first-main-color;
text-decoration: none;
cursor: pointer;
-webkit-transition: color 0.15s ease-out;
-moz-transition: color 0.15s ease-out;
-o-transition: color 0.15s ease-out;
-ms-transition: color 0.15s ease-out;
transition: color 0.15s ease-out;
}
input[type='submit'],
.woocommerce input[type='button'],
.woocommerce-page input[type='button'] {
-webkit-appearance: none;
}
ul, ol {
list-style-position:inside;
}
pre {
background-color: $default-background-color;
padding: 15px;
max-width: 100%;
white-space: pre-wrap;
word-wrap: break-word;
margin: 15px 0;
}
dt {
font-size: 15px;
font-weight: 700;
margin-bottom: 10px;
}
dd {
margin-bottom: 15px;
}
//
//p{
// margin: 10px 0px;
//}
sub, sup {
font-size: 75%;
height: 0;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
top: 0.5ex;
}
sup {
bottom: 0.5ex;
}
.wp-caption-text {
margin: 0;
font-style: italic;
}
table {
width: 100%;
}
table thead tr, table tbody tr, table tfoot tr {
border: 1px solid #e6e6e6;
}
table tbody th {
border-right: 1px solid #e6e6e6;
}
blockquote:not(.edgtf-blockquote-shortcode) {
padding: 0;
border: none;
font-style: italic;
font-size: 17px;
line-height: 1.6em;
margin: 20px 0;
}
blockquote cite {
font-style: normal;
font-weight: 500;
}
/* Webkit */
::selection {
background: $first-main-color;
color: $default-background-color;
}
/* Gecko/Mozilla */
::-moz-selection {
background: $first-main-color;
color: $default-background-color;
}
.wp-caption,
.wp-caption-text,
.sticky,
.gallery-caption,
.bypostauthor{
opacity: 1;
}
.alignleft {
float: left;
margin: 0 20px 20px 0;
}
.alignright {
float: right;
margin: 0 0 20px 20px;
}
.aligncenter {
display: block;
margin: 10px auto;
}
.text-align-right {
text-align: right;
}
.text-align-left {
text-align: left;
}
.text-align-center {
text-align: center;
}
.alignwide {
margin-left: auto;
margin-right: auto;
clear: both;
}
@include ipad-landscape {
.alignwide {
width: 100%;
max-width: 100%;
}
}
.alignfull {
position: relative;
left: -1rem;
width: calc( 100% + (2 * 1rem));
max-width: calc( 100% + (2 * 1rem));
clear: both;
}
@include ipad-landscape {
.alignfull {
left: calc( -12.5% - 75px);
width: calc( 125% + 150px);
max-width: calc( 125% + 150px);
margin-top: calc(2 * 1rem);
margin-bottom: calc(2 * 1rem);
}
}
.meta {
display: none;
}
.edgtf-wrapper {
background-color: $default-background-color;
position: relative;
z-index: 1000;
@include edgtfTransition(left 0.33s cubic-bezier(0.694, 0.0482, 0.335, 1));
left: 0px;
.edgtf-wrapper-inner{
width: 100%;
overflow: hidden;
}
}
.edgtf-content{
margin-top: 0;
position: relative;
z-index: 100;
background-color: $default-background-color; /*this is needed because of the uncovering footer*/
ul ul,
ol ol {
padding: 0 0 0 15px;
}
ol ul,
ul ol,
ul ul,
ol ol {
margin: 0;
}
//ul,
//ol {
// margin: 15px 0;
//}
}
.edgtf-boxed{
overflow: hidden !important; /* this is because content jumping while using accordion and display:inline-block on 'body.edgtf-boxed .edgtf-wrapper' */
.edgtf-wrapper{
display: inline-block;
vertical-align: middle;
width: 100%;
.edgtf-wrapper-inner {
width: $grid-width-boxed;
overflow: visible;
margin: auto;
}
}
.edgtf-content {
overflow: hidden;
}
.edgtf-footer-inner{
width: $grid-width-boxed;
margin: auto;
}
.edgtf-page-header .edgtf-sticky-header,
.edgtf-page-header .edgtf-fixed-wrapper.fixed{
width: $grid-width-boxed;
left: auto;
}
}
.edgtf-container{
background-color: $default-background-color;
position: relative;
padding: 0;
width: 100%;
z-index:100;
&:before{
content: " ";
display: table;
}
&:after{
content: " ";
display: table;
clear: both;
}
}
.edgtf-container-inner{ //not in parent selector since this class is used for positioning other elements in grid
width: $grid-width;
margin: 0px auto;
}
.edgtf-content > .edgtf-content-inner > .edgtf-container > .edgtf-container-inner{
padding-top: 70px;
}
.edgtf-full-width {
position: relative;
z-index: 100;
}
@media only screen and (min-width: 1400px){
.edgtf-grid-1300{
.edgtf-grid,
.edgtf-container-inner,
.edgtf-grid-section .edgtf-section-inner,
.edgtf-footer-top-border-holder.edgtf-in-grid,
.edgtf-footer-bottom-border-holder.edgtf-in-grid{
width: $grid-width-1300;
}
}
.edgtf-grid-1300.edgtf-boxed{
.edgtf-footer-inner,
.edgtf-wrapper-inner{
width: $grid-width-1300 + 50px;
}
.edgtf-page-header .edgtf-sticky-header,
.edgtf-page-header .edgtf-fixed-wrapper.fixed{
width: $grid-width-1300 + 50px;
left: auto;
}
}
}
@media only screen and (min-width: 1300px){
.edgtf-grid-1200{
.edgtf-grid,
.edgtf-container-inner,
.edgtf-grid-section .edgtf-section-inner,
.edgtf-footer-top-border-holder.edgtf-in-grid,
.edgtf-footer-bottom-border-holder.edgtf-in-grid{
width: $grid-width-1200;
}
}
.edgtf-grid-1200.edgtf-boxed{
.edgtf-footer-inner,
.edgtf-wrapper-inner{
width: $grid-width-1200 + 50px;
}
.edgtf-page-header .edgtf-sticky-header,
.edgtf-page-header .edgtf-fixed-wrapper.fixed{
width: $grid-width-1200 + 50px;
left: auto;
}
}
}
@media only screen and (min-width: 1200px){
.edgtf-grid-1000{
.edgtf-grid,
.edgtf-container-inner,
.edgtf-grid-section .edgtf-section-inner,
.edgtf-footer-top-border-holder.edgtf-in-grid,
.edgtf-footer-bottom-border-holder.edgtf-in-grid{
width: $grid-width-1000;
}
}
.edgtf-grid-1000.edgtf-boxed{
.edgtf-footer-inner,
.edgtf-wrapper-inner{
width: $grid-width-1000 + 50px;
}
.edgtf-page-header .edgtf-sticky-header,
.edgtf-page-header .edgtf-fixed-wrapper.fixed{
width: $grid-width-1000 + 50px;
left: auto;
}
}
}
@media only screen and (min-width: 1000px){
.edgtf-grid-800{
.edgtf-grid,
.edgtf-container-inner,
.edgtf-grid-section .edgtf-section-inner,
.edgtf-footer-top-border-holder.edgtf-in-grid,
.edgtf-footer-bottom-border-holder.edgtf-in-grid{
width: $grid-width-800;
}
}
.edgtf-grid-800.edgtf-boxed{
.edgtf-footer-inner,
.edgtf-wrapper-inner{
width: $grid-width-800 + 50px;
}
.edgtf-page-header .edgtf-sticky-header,
.edgtf-page-header .edgtf-fixed-wrapper.fixed{
width: $grid-width-800 + 50px;
left: auto;
}
}
}
/* ==========================================================================
#General styles that are used in our theme - end
========================================================================== */
/* ==========================================================================
4. Grid system styles - start
* Here are defined styles for grid system that is used outside Visual Composer
========================================================================== */
.edgtf-two-columns-66-33{
width: 100%;
.edgtf-column1 {
width: 66.66%;
float: left;
.edgtf-column-inner {
padding: 0 20px 0 0;
}
}
.edgtf-column2 {
width: 33.33%;
float: left;
.edgtf-column-inner{
padding: 0 0 0 20px;
}
}
}
.edgtf-two-columns-33-66{
width: 100%;
.edgtf-column1{
width: 33.33%;
float: left;
.edgtf-column-inner{
padding: 0 20px 0 0;
}
}
.edgtf-column2{
width: 66.66%;
float: left;
.edgtf-column-inner{
padding: 0 0 0 20px;
}
}
}
.edgtf-two-columns-75-25{
width: 100%;
.edgtf-column1{
width: 75%;
float: left;
.edgtf-column-inner{
padding: 0 20px 0 0;
}
}
.edgtf-column2{
width: 25%;
float: left;
.edgtf-column-inner{
padding: 0 0 0 20px;
}
}
}
.edgtf-two-columns-25-75{
width: 100%;
.edgtf-column1{
width: 25%;
float: left;
.edgtf-column-inner{
padding: 0 20px 0 0;
}
}
.edgtf-column2{
width: 75%;
float: left;
.edgtf-column-inner{
padding: 0 0 0 20px;
}
}
}
.edgtf-two-columns-50-50{
width: 100%;
> .edgtf-two-columns-50-50-inner{
margin: 0 -15px;
}
.edgtf-column{
width: 50%;
float: left;
.edgtf-column-inner{
padding: 0 15px;
}
}
}
.edgtf-three-columns {
width: 100%;
> .edgtf-three-columns-inner{
margin: 0 -15px;
}
.edgtf-column{
width: 33.33%;
float: left;
.edgtf-column-inner{
padding: 0 15px;
}
}
}
.edgtf-four-columns{
width: 100%;
> .edgtf-four-columns-inner{
margin: 0 -15px;
}
.edgtf-column{
width: 25%;
float: left;
.edgtf-column-inner{
padding: 0 15px;
}
}
}
.edgtf-five-columns{
width: 100%;
> .edgtf-five-columns-inner{
margin: 0 -15px;
}
.edgtf-column{
width: 20%;
float: left;
.edgtf-column-inner{
padding: 0 15px;
}
}
}
.edgtf-footer-top-holder {
.edgtf-two-columns-50-50 > .edgtf-two-columns-50-50-inner,
.edgtf-four-columns > .edgtf-four-columns-inner,
.edgtf-three-columns > .edgtf-three-columns-inner {
margin: 0 -50px;
}
.edgtf-two-columns-50-50,
.edgtf-three-columns,
.edgtf-four-columns {
.edgtf-column .edgtf-column-inner {
padding: 0 50px;
}
}
.edgtf-column:first-child {
.edgtf-column-inner {
border-left: none;
}
}
.edgtf-column-inner {
border-left: 1px solid #25262e;
}
}
body.woocommerce.woocommerce-page{
.edgtf-two-columns-66-33.woocommerce_with_sidebar .edgtf-column1 .edgtf-column-inner,
.edgtf-two-columns-75-25.woocommerce_with_sidebar .edgtf-column1 .edgtf-column-inner{
padding-left: 40px;
}
.edgtf-two-columns-33-66.woocommerce_with_sidebar .edgtf-column2 .edgtf-column-inner,
.edgtf-two-columns-25-75.woocommerce_with_sidebar .edgtf-column2 .edgtf-column-inner{
padding-right: 40px;
}
.full_width{
.edgtf-two-columns-66-33.woocommerce_with_sidebar .edgtf-column1 .edgtf-column-inner,
.edgtf-two-columns-75-25.woocommerce_with_sidebar .edgtf-column1 .edgtf-column-inner{
padding-left: 0;
}
.edgtf-two-columns-33-66.woocommerce_with_sidebar .edgtf-column2 .edgtf-column-inner,
.edgtf-two-columns-25-75.woocommerce_with_sidebar .edgtf-column2 .edgtf-column-inner{
padding-right: 0;
}
}
}
@include keyframes(preload-background) {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
.edgtf-preload-background{
background-repeat: repeat !important;
background-color: transparent !important;
background-attachment: scroll !important;
background-size: inherit !important;
@include animation(preload-background, 40s, infinite, linear, 0s);
}
.edgtf-grid{
width: $grid-width;
margin: 0 auto;
}
.edgtf-vertical-align-containers {
position: relative;
height: 100%;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
&.edgtf-25-50-25 {
.edgtf-position-left,
.edgtf-position-right {
width: 25%;
}
.edgtf-position-center {
width: 50%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.edgtf-position-left-inner,
.edgtf-position-center-inner,
.edgtf-position-right-inner {
width: 98%;
}
}
&.edgtf-33-33-33 {
.edgtf-position-left,
.edgtf-position-center,
.edgtf-position-right {
width: 33.33%;
}
.edgtf-position-center {
width: 50%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.edgtf-position-left-inner,
.edgtf-position-center-inner,
.edgtf-position-right-inner {
width: 98%;
}
}
&.edgtf-50-50 {
.edgtf-position-left,
.edgtf-position-right {
width: 50%;
}
.edgtf-position-left-inner,
.edgtf-position-center-inner,
.edgtf-position-right-inner {
width: 98%;
}
}
.edgtf-position-left {
position: relative;
float: left;
z-index: 2;
height: 100%;
}
.edgtf-position-center {
height: 100%;
width: 100%;
position: absolute;
left: 0;
text-align: center;
z-index: 1;
}
.edgtf-position-right {
position: relative;
float: right;
z-index: 2;
height: 100%;
text-align: right;
}
.edgtf-position-left-inner,
.edgtf-position-center-inner,
.edgtf-position-right-inner {
vertical-align: middle;
display: inline-block;
}
.edgtf-position-right.edgtf-has-widget .edgtf-position-right-inner{
height: 100%;
}
.edgtf-position-left:before,
.edgtf-position-center:before,
.edgtf-position-right:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
margin-right: 0; /* adjusts for spacing */
}
}
/* ==========================================================================
Grid system styles - end
========================================================================== */
/* ==========================================================================
5. Row styles - start
========================================================================== */
.edgtf-section {
position:relative;
}
.edgtf-full-section-inner{
position: relative;
z-index: 20;
}
.edgtf-grid-section .edgtf-section-inner {
width: 1100px;
margin: 0 auto;
position: relative;
z-index: 20;
}
.edgtf-section-inner-margin{
margin-left: -15px;
margin-right: -15px;
}
.edgtf-content-aligment-left {
text-align: left;
}
.edgtf-content-aligment-center {
text-align: center;
}
.edgtf-content-aligment-right {
text-align: right;
}
/* #Parallax section styles - start
========================================================================== */
.edgtf-parallax-section-holder{
position: static;
padding: 0px;
background-repeat: no-repeat;
background-color: transparent;
background-position: center 0px;
background-attachment: fixed;
overflow: hidden;
&.edgtf-vertical-middle-align{
display: table;
width: 100%;
margin-right: 0;
margin-left: 0;
}
.edgtf-parallax-content-outer{
display: table-cell;
height: 100%;
vertical-align: middle;
padding: 100% 0;
}
.touch &.edgtf-parallax-section-holder-touch-disabled{
height: auto !important;
min-height: 100px;
background-position: center top !important;
background-attachment: scroll;
background-size: cover;
}
}
section.parallax_section_holder.vertical_middle_align .parallax_content_outer{
display: table-cell;
height: 100%;
vertical-align: middle;
padding: 100% 0;
}
/* #Video section styles - start
========================================================================== */
.edgtf-section {
.edgtf-mobile-video-image {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
display: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 10;
}
.edgtf-video-overlay {
height: 3000px;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 11;
&.edgtf-active {
background-image: url("img/pixel-video.png");
background-position: 0px 0px;
background-repeat: repeat;
opacity: 1;
}
}
.edgtf-video-wrap {
top: 0px;
left: 0px;
overflow: hidden;
position: absolute;
width: 100%;
z-index: 10;
.mejs-container .mejs-controls {
display: none!important;
}
.mejs-poster {
background-size: cover !important;
-moz-background-size: cover !important;
-webkit-background-size: cover !important;
-o-background-size: cover !important;
}
.mejs-container {
background-color: transparent!important;
background-image: none!important;
height: auto !important;
}
.mejs-mediaelement{
background: none !important;
border: 0px !important;
}
.mejs-container .mejs-poster img {
max-width: none!important;
width: 100%!important;
}
}
}
/* ==========================================================================
#Row styles - end
========================================================================== */
/* ==========================================================================
#Screen reader text - begin
========================================================================== */
/* Text meant only for screen readers. */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 0px;
width: 1px;
overflow: hidden;
&:focus {
clip: auto !important;
display: block;
top: 5px;
left: 5px;
width: auto;
height: auto;
padding: 15px 23px 14px;
color: #21759b;
font-size: 14px;
font-weight: bold;
line-height: normal;
text-decoration: none;
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
z-index: 100000; /* Above WP toolbar. */
}
}
/* ==========================================================================
#Screen reader text - end
========================================================================== */
/* ==========================================================================
6. VC Override - Start
========================================================================== */
.wpb_row,
.wpb_content_element,
ul.wpb_thumbnails-fluid > li,
.last_toggle_el_margin, .wpb_button {
margin-bottom: 0 !important;
}
/*** Fix for Visual composer bag on firefox ***/
.wpb_single_image .vc_figure {
max-width: 100%;
}
/* ==========================================================================
#VC Override - End
========================================================================== */