/*
Theme Name: hkpsychology.com
Description: AIOS mobile semi-custom theme.
Author: AgentImage
Author URI: http://www.agentimage.com
Version: 1.5.4
Tags: one-column, two-columns, right-sidebar, custom-menu, full-width-template, sticky-post
License: Proprietary
License URI: http://www.agentimage.com
Template: aios-starter-theme
*/

/*

TABLE OF CONTENTS

1. Custom CSS
2. IP styles
3. MEDIA QUERIES ARE AUTOMATICALLY REMOVED FROM THIS FILE, they must be placed in style-media-queries.css
  
*/


/*Fonts*/
@font-face {
    font-family: 'Vollkorn';
    src: url('css/fonts/Vollkorn-SemiBold.woff2') format('woff2'),
        url('css/fonts/Vollkorn-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Vollkorn';
    src: url('css/fonts/Vollkorn-Italic.woff2') format('woff2'),
        url('css/fonts/Vollkorn-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Vollkorn';
    src: url('css/fonts/Vollkorn-Bold.woff2') format('woff2'),
        url('css/fonts/Vollkorn-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Vollkorn';
    src: url('css/fonts/Vollkorn-BoldItalic.woff2') format('woff2'),
        url('css/fonts/Vollkorn-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Vollkorn';
    src: url('css/fonts/Vollkorn-Regular.woff2') format('woff2'),
        url('css/fonts/Vollkorn-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Vollkorn';
    src: url('css/fonts/Vollkorn-SemiBoldItalic.woff2') format('woff2'),
        url('css/fonts/Vollkorn-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
}

/*icons*/
@font-face {
  font-family: 'icomoon';
  src:  url('css/icons/icomoon.eot?z4jm7p');
  src:  url('css/icons/icomoon.eot?z4jm7p#iefix') format('embedded-opentype'),
    url('css/icons/icomoon.ttf?z4jm7p') format('truetype'),
    url('css/icons/icomoon.woff?z4jm7p') format('woff'),
    url('css/icons/icomoon.svg?z4jm7p#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-call-answer:before {
  content: "\e900";
}
.icon-envelope:before {
  content: "\e901";
}
.icon-maps-and-flags:before {
  content: "\e902";
}

/*******************************************************
 *
 * 1. Custom CSS
 *
 *******************************************************/

/* Global */

body{
	font-family: 'Mukta', Arial, Helvetica, Georgia, Sans-serif;
	font-size: 18px;
	background: #FFF;
	color: #404040;
	margin: 0;

    /* Remove the comment from line 85 to 86 if the font issue in safari occurs */
    /* -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; */
}

::selection {
    background: #255a4f;
    color: #fff;
}

a:hover {
    color: #d1a826;
}

/*jarallax fix*/
.jarallax {
    position: relative;
    z-index: 0;
}
.jarallax > .jarallax-img {
    position: absolute;
    object-fit: cover;
    /* support for plugin https://github.com/bfred-it/object-fit-images */
    font-family: 'object-fit: cover;';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.section-parallax {
    display: block;
    width: 100%;
}
.section-parallax-1 {
    height: 200px;
}
.section-parallax-2 {
    height: 360px;
    
}

.section-title {
    font: 600 36px/48px 'Vollkorn', serif;
    color: #255a4f;
    text-transform: uppercase;
    margin-bottom: 13px;
}
.section-subtitle {
    font: 500 30px/44px 'Vollkorn', serif;
    color: #255a4f;
}
    .section-subtitle:after {
        content: '';
        display: block;
        width: 50px;
        height: 2px;
        background: #f2d399;
        margin: 29px 0;
    }
    .section-subtitle.noline:after {
        display: none;
    }
    .section-subtitle.bold {
        font-weight: 600;
    }

a.btn-a {
    display: block;
    width: 160px;
    padding: 12px 0;
    border: 1px solid #d4ae34;
    text-align: center;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: .1em;
    color: #255a4f;
    transition: all .3s;
}

    a.btn-a:hover {
        color: #fff;
        background: #d4ae34;
    }

/*header*/
header.header-wrapper {
    background: #255a4f;
    padding: 43px 0 41px;
    z-index: 1;
    position: relative;
}
    .header-logo {
        font-size: 0;
    }
        .header-logo img {
            display: inline-block;
            max-width: 177px;
            margin: 0 22px;
        }

    .header-navigation {
        text-align: right;
    }
        #nav {
            padding: 23px 14px;
        }
            #nav li {
                position: relative;
            }
                #nav li a {
                    display: block;
                    position: relative;
                    font-size: 14px;
                    letter-spacing: .1em;
                    color: #f2d399;
                    text-transform: uppercase;
                    text-decoration: none;
                }
            #nav > li {
                display: inline-block;
                vertical-align: top;
                margin-left: 23.5px;
            }
                #nav > li:first-child {
                    margin-left: 0;
                }
                #nav > li > a {
                    padding: 8px 0;
                }
                    #nav > li > a:after {
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        height: 2px;
                        background: #f2d399;
                        -webkit-transform: scaleX(0);
                        -ms-transform: scaleX(0);
                        transform: scaleX(0);
                        -webkit-transition: all .3s;
                        -o-transition: all .3s;
                        transition: all .3s;
                    }
                    #nav > li:hover > a:after,
                    #nav > li.current_page_item > a:after {
                        -webkit-transform: scaleX(1);
                        -ms-transform: scaleX(1);
                        transform: scaleX(1);
                    }
                #nav .sub-menu {
                    list-style: none outside none;
                    margin: 0;
                    padding: 0;
                    position: absolute;
                    width:100%;
                    min-width:180px;
                    text-align: center;
                    transform: translateY(15px);
                    opacity: 0;
                    pointer-events: none;
                    transition: all .3s;
                }
                #nav > li > .sub-menu {
                    padding: 10px 0 0;
                    transform: translateX(-50%) translateY(15px);
                    left: 50%;
                }
                    #nav .sub-menu a {
                        color: #FFFFFF;
                        display: block;
                        padding: 10px;
                        transition: all .3s;
                        background: #173831;
                    }
                        #nav .sub-menu a:hover {
                            background: #d4ae34;
                            color: #fff;
                            text-decoration: none;
                        }
                        #nav .sub-menu .sub-menu {
                            margin-left: 100%;
                            top:0;
                        }
                            #nav li:hover > .sub-menu {
                                transform: translateY(0);
                                opacity: 1;
                                pointer-events: all;
                            }
                            #nav > li:hover > .sub-menu {
                                transform: translateX(-50%) translateY(0);
                                opacity: 1;
                                pointer-events: all;
                            }


/*section 1*/
section.section-1 {

}
    #slideshow {

    }
        #slideshow canvas {
            /*max-height: 578px;*/
        }

/*section 2*/
section.section-2 {
    padding: 81px 0 98px;
}
    #welcome {
        padding: 0 30px;
    }
        .welcome-text {
    
        }
            .welcome-text p {
                line-height: 30px;
                margin: 1.67em 0;
            }
            .welcome-text p:last-child {
                margin-bottom: 0;
            }

            .welcome-text .section-subtitle {
                color: #d1a826;
            }
        .welcome-img img {
            display: block;
            margin: 117px auto 0;
            max-width: 100%;
        }

/*section 3*/
section.section-3 {
    padding: 84px 0 0;
}
    #our-services {
        padding: 0 30px;
    }
        #our-services .section-title {
            margin-bottom: 69px;
        }
        .service-item {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;

            margin-bottom: 72px;       
        }
            .service-item:before, .service-item:after {
                display: none;
            }
            .service-item-text {
                padding-right: 30px;
            }
                .service-item-text .section-subtitle:after {
                    margin-top: 26px;
                }
                .service-item-text p {
                    line-height: 30px;
                    margin: 1.67em 0 1.85em;
                }
            .service-item-img {

            }
                .service-item-img img {
                    display: block;
                    margin-left: auto;
                    max-width: 100%;
                }

        .service-item:nth-child(odd) {
            -webkit-box-orient: horizontal;
            -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
        }
            .service-item:nth-child(odd) .service-item-text {
                padding-left: 30px;
                padding-right: 15px;
            }
            .service-item:nth-child(odd) .service-item-img img {
                margin-left: initial;
                margin-right: auto;
            }
        .service-item:last-child {
            margin-bottom: 0;
        }

section.section-4 {
    padding: 92px 0 93px;
}
    #meet-the-team {
        padding: 0 30px;
    }
        #meet-the-team .section-title {
            text-transform: initial;
            margin-bottom: 25px;
        }
    .team-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
        .team-list:before,
        .team-list:after {
            display: none;
        }
        .team-item {

        }
            .team-item > a {
                color: #404040;
            }
            .team-item-img {
                margin-bottom: 25px;
                position: relative;
                overflow: hidden;
            }
                .team-item-img canvas {
                    display: block;
                    width: 100%;
                    background-size: cover;
                    background-position: center;
                    -webkit-filter: grayscale(1);
                    filter: grayscale(1);
                    -webkit-transition: all .3s;
                    -o-transition: all .3s;
                    transition: all .3s;
                }
                .team-item-img canvas + img {
                    position: absolute;
                    top: 0;
                    left: 0;
                }
                .team-item-img img {                    
                    display: block;
                    width: 100%;
                    -webkit-filter: grayscale(1);
                    filter: grayscale(1);
                    -webkit-transition: all .3s;
                    -o-transition: all .3s;
                    transition: all .3s;
                }
                .team-item:hover .team-item-img img,
                .team-item:hover .team-item-img canvas {
                    -webkit-filter: grayscale(0);
                    filter: grayscale(0);
                }
            .team-item-name, .team-item-position {
                letter-spacing: .03em;
                line-height: 24px;
            }
            .team-item-name {
                font-weight: 700;
                font-size: 18px;                
                color: #d1a826;
            }
            .team-item-position {
                font-weight: 400;
                font-size: 16px;
            }
            .team-item-email,
            .team-item-phone,
            .team-item-address {
                position: relative;
                padding-left: 18px;
                line-height: 24px;
                font-size: 16px;
                letter-spacing: .03em;
            }
            .team-item-email i,
            .team-item-phone i,
            .team-item-address i {
                position: absolute;
                top: 5px;
                left: 0;
                font-size: 11px;
                font-style: normal!important;
            }


/*section 5*/
section.section-5 {
    padding: 91px 0 89px;
}
    #join-our-team {
        padding: 0 30px;
    }
        #join-our-team p {
            line-height: 30px;
        }
        #join-our-team .section-subtitle {
            margin-bottom: 18px;
        }
        .s5-left {
            padding: 0 19px;
        }
        .s5-center {
            padding: 0px 18px;
        }
        .s5-right {

        }
            .s5-right p {
                margin-bottom: 14px;
            }
            .s5-right svg {
                margin-right: 8px;
            }
            .s5-right i {
                font-size: 10px;
                margin-right: 14px;
                color: #255a4f;
                top: -2px;
                position: relative;
            }
            .s5-right em.ai-mobile-phone a {
                font-weight: 400;
            }
            .s5-right a {
                color: #f2d399;
                position: relative;
                font-weight: 700;
                -webkit-transition: all .3s;
                -o-transition: all .3s;
                transition: all .3s;
            }
                .s5-right a:hover {
                    color: #d1a826;
                }
                .s5-right a:after {
                    content: '';
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 100%;
                    height: 2px;
                    background: #d1a826;
                    -webkit-transform: scaleX(0);
                    -ms-transform: scaleX(0);
                    transform: scaleX(0);
                    -webkit-transition: all .3s;
                    -o-transition: all .3s;
                    transition: all .3s;
                }
            .s5-right a:hover:after {
                -webkit-transform: scaleX(1);
                -ms-transform: scaleX(1);
                transform: scaleX(1);
            }


/*footer*/
footer.footer-wrapper {
    background: #173831;
    min-height: 305px;
    color: #f2d399;
    padding: 74px 0 76px;
    font-size: 14px;
    line-height: 24px;
    text-transform: uppercase;
}
    .footer-wrapper .container {
        padding: 0 30px;
    }
        footer.footer-wrapper a {
            color: #eed097;
        }
        footer.footer-wrapper h3 {
            letter-spacing: .03em;
            margin-bottom: 11px;
        }
        .footer-left {
            letter-spacing: .03em;
        }
        .footer-center {
            
        }
            .footer-center a {
                position: relative;
            }
                .footer-center a:after {
                    content: '';
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 2px;
                    background: #eed097;
                    height: 1px;
                    transition: all .1s;
                }
                .footer-center a:hover:after {
                    bottom: -1px;
                }
        .footer-right {

        }
            .footer-right i {
                font-size: 10px;
                margin-right: 10px;
            }
            .footer-right p {
                margin-bottom: 11px;
                letter-spacing: .03em;
            }
                .footer-right p em.ai-mobile-phone {
                    letter-spacing: 0;
                }
            .footer-right a[class*="ai-font"] {
                font-size: 15px;
                display: inline-block;
                margin: 3px 15px 0 0;
                padding-bottom: 3px;
            }
                .footer-right a[class*="ai-font"]:last-child {
                    margin-right: 0;
                }
            .footer-right a[class*="ai-font"]:hover {
                border-bottom: 2px solid #eed097;
            }
 
/*******************************************************
 *
 * 2. IP Styles
 *
 *******************************************************/
 .ip-banner[style] {
    display: block;
 }
.ip-banner {
    position: relative;
    width: 100%;
    display: none;
}
    .ip-banner canvas{
        display: block;
        position: relative;
        z-index: 0;
        width: 100%;
        min-height: 267px;        
    }
    .ip-banner .container{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 2;
    }
        .ip-banner h1 {
            font-weight: 700;
            font-size: 32px;
            text-align: center;
            color: #FFF;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            line-height: 1.7;
        }
            .ip-banner h1 span{
                display: block;
                font-size: 24px;
                font-weight: 400;
                text-transform: none;
                letter-spacing: 0.01em;
            }
/* Adjust minimum height of page area */ 
#content-sidebar, #content-full{ min-height: 666px; }

/** Adjust width of content columns **/
#content-sidebar #content{ width: 77.08%; }
#content-full #content { width: 100%; }
#content {
    padding-bottom: 50px;
    padding-top: 22.5px;
}

/* Adjust width of sidebar */
.sidebar{ width: 20.83%; }

/* fullwidth template */
.page-template-template-fullwidth #content {
    padding-left: 15px;
    padding-right: 15px;
}
    .page-template-template-fullwidth #content ihf-search[data-eureka-id*=""].ihf-eureka {
        margin-left: -15px;
        margin-right: -15px;
    }

/* REMOVED PARALLAX ON MS EDGE */
/*.name-Microsoft_Edge .jarallax > div > div {
    position: absolute !important;
}*/
.name-Microsoft_Edge .jarallax, .mobile .jarallax  {
    transform: translateZ(0);
}
    .name-Microsoft_Edge .jarallax div[id*="jarallax-container"],
    .mobile .jarallax div[id*="jarallax-container"] {
        
    }
        .name-Microsoft_Edge .jarallax div[id*="jarallax-container"] > div,
        .mobile .jarallax div[id*="jarallax-container"] > div {
            transform: none!important;
            margin: 0!important;
            top: 0!important;
            bottom: 0!important;
            left: 0!important;
            right: 0!important;
            height: initial!important;
            width: initial!important;
        }

/* Adjust line height of page elements */
#content h4, aside h4,
#content p, aside p,
#content blockquote, aside blockquote,
#content ul, aside ul,
#content fieldset, aside fieldset,
#content form, aside form,
#content ol, aside ol,
#content dl, aside dl,
#content dir, aside dir,
#content menu, aside menu { line-height:1.7 }

/* Style .entry-title(post/page) and .archive-title(category/archive/etc) main headings (h1) */
#content .entry-title,
#content .archive-title { 
    font: 600 36px/48px 'Vollkorn', serif;
    color: #255a4f;
    display: none;
    margin-top: 0;
}
#content .entry .entry-title {
    display: block!important;
}
#content h2, 
#content h3,
#content h4,
#content h5,
#content h6 {
    font-family: 'Vollkorn', serif;
    color: #255a4f;
    font-weight: 400;
    margin: 1.25em 0;
}
#content h2 {
    font-size: 30px;
    line-height: 48px;
}

#content h3 {
    font-size: 24px;
    line-height: 30px;
}
#content h4 {
    font-size: 20px;
    line-height: 30px;
    margin: .6em 0;
}
.gold {
    color: #d1a826!important;
}
.line:after {
    content: '';
    display: block;
    width: 50px;
    height: 2px;
    background: #f2d399;
    margin: 31px 0 0;
}
.mukta {
    font-family: 'Mukta', Sans-serif!important;
    font-weight: 700!important;
    letter-spacing: .1em;
}
.uppercase {
    text-transform: uppercase;
}
#content .entry > *:first-child {
    margin-top: 0;
}
#content p#breadcrumbs {
    font-size: 16px;
    line-height: 30px;
    margin: 0 0 19px;
    color: #f2d399;
    padding: 23px 0;
}
    #content p#breadcrumbs a {
        color: #f2d399;       
    }
        #content p#breadcrumbs a:hover {
            color: #d1a826;
        }
    #content p#breadcrumbs > span > span {
        margin: 0 9px;
    }
    #content p#breadcrumbs > span > span:first-child {
        margin-left: 0;
    }
        #content p#breadcrumbs span > span:first-child a {
            font-weight: 700;
        }

#content ul {
    line-height: 30px;
    margin-left: 20px;
}
    #content ul li {
        margin: 0 0 10px;
        padding-right: 15px;
    }
    #content ul {
        margin-left: 30px;
    }
        #content ul ul li {
            margin-bottom: 0;
        }
#content ul.nobullets {
    list-style: none;
}
#content ul.nomargin {
    margin: 4px 0;
}

/* Styles for category/archive/search/etc subheadings (h2) */
#content .archive-subtitle { 
    font: 600 24px/48px 'Vollkorn', serif;
    color: #255a4f;
}
#inner-page-wrapper {
    margin-bottom: 0;
    overflow: hidden;
    z-index: initial;
}
    #inner-page-wrapper .container {
        padding: 0 30px;
    }
/*banner and title*/
.ip-banner[style] ~ #inner-page-wrapper .ip-title {
    display: none;
}
.ip-banner[style] ~ #inner-page-wrapper #content .entry-title,
.ip-banner[style] ~ #inner-page-wrapper #content .archive-title {
    display: block;
}
.ip-title {
    background: #1f4c43;
    font: 400 30px/48px 'Vollkorn', serif;
    color: #f2d399;
    padding: 50px 0;
}


/*image on right template*/
.page-template-template-image-on-right .ip-banner,
.page-template-template-image-on-right .ip-banner[style] ~ #inner-page-wrapper #content .entry-title,
.page-template-template-image-on-right .ip-banner[style] ~ #inner-page-wrapper #content .archive-title {
    display: none;
}
.page-template-template-image-on-right .ip-banner[style] ~ #inner-page-wrapper .ip-title {
    display: block;
}
.page-image-right + #content {
    padding-right: 15px;
}
.page-template-template-image-on-right #content-full {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
    .page-template-template-image-on-right #content-full:after {
        display: none;
    }
    .page-template-template-image-on-right #content-full #content {
        width: 58.33333333%;
    }
    .page-image-right {
        width: 41.66666667%;
        position: relative;
    }
        .image-bleed-right {
            position: absolute;
            left: 15px;
            top: 0;
            bottom: 0;
            width: calc( 100% + ( (100vw - 1140px) / 2 ) );
            background-size: cover;
            background-position: center;
        }


.ip-contact-form {
    max-width: 542px;
    position: relative;
}
    #content .form-title {
        margin-bottom: 20px;
    }
    .ip-contact-form input[type="text"],
    .ip-contact-form input[type="email"],
    .ip-contact-form input[type="tel"],
    .ip-contact-form textarea {
        width: 100%;
        font-size: 14px;
        letter-spacing: .1em;
        color: #404040;
        text-transform: uppercase;
        border: none;
        border-bottom: 1px solid #f2d399;
        background: #fff;
        outline: none;
        height: 54px;
        margin-bottom: 17.5px;
        padding: 0 12px;
    }
    .ip-contact-form textarea {
        border: 1px solid #f2d399;
        height: 180px;
        resize: none;
        margin-top: 33px;
        padding: 12px;
        -webkit-appearance: none;
        appearance: none;
    }
    .ip-contact-form input[type=submit] {
        display: block;
        width: 96px;
        height: 40px;
        border: 1px solid #d1a826;
        font-size: 14px;
        letter-spacing: .1em;
        text-transform: uppercase;
        background: #fff;
        color: #255a4f;
        margin-top: 12px;
        transition: all .3s;
    }
        .ip-contact-form input[type=submit]:hover {
            color: #fff;
            background: #d1a826;
        }

    .ip-contact-form div.wpcf7-response-output {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
    }

    div.wpcf7-response-output {
        margin: 0;
        text-align: center;
    }

#content p#breadcrumbs {
    margin-bottom: 0;
    padding: 0 0 22.5px;
}

.contact-page-parallax {
    height: 200px;
    width: initial;
    margin: 95px calc( ( 1110px - 100vw) / 2 ) 90px;
}

#content .ip-contact-form.page-contact {
    margin-left: auto;
    margin-right: auto;
}


/*practioner-details*/
.practitioner-details-wrap {
    margin-bottom: 12px;
}
    #content .practitioner-details-wrap .entry-title {
        margin-bottom: 14px;
    }
    #content .practitioner-details-wrap .practitioner-position {
        margin: 0 0 33px;
    }
    .practitioner-img {
        position: relative;
        max-width: 445px;
        width: 100%;
        margin-bottom: 30px;
    }
        .practitioner-img img {
            display: block;
            width: 100%;
        }
    .practitioner-details-right {
        position: relative;
    }
        #content .practitioner-details-right > *:first-child {
            margin-top: 0;
        }
        #content .practitioner-details-right p {
            margin: 1.6em 0;
        }

    a.read-more {
        color: #f2d399;
        font-size: 14px;
        letter-spacing: .1em;
    }
        a.read-more:hover {
            color: #d1a826;
        }

/* MEDIA QUERIES ARE AUTOMATICALLY REMOVED FROM THIS FILE, they must be placed in style-media-queries.css