/*
Theme Name: Elysium Spa
Author: Shravani
/**
 * Table of Contents
 * 1.0 - Reset
 * 2.0 - Default Styles 
 * 3.0 - Custom Styles  
 * 4.0 - Media Queries
*/
 /*      ********** Reset Code **********
 * Resetting and rebuilding styles have been helped along thanks to the fine work of
 * Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
 * along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
 * and Blueprint http://www.blueprintcss.org/
 */

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, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 62.5%;
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

*,
*:before,
*:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}


article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
	display: block;
}

ol,
ul {
	list-style: none;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}

caption,
th,
td {
	font-weight: normal;
	text-align: left;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
}

blockquote,
q {
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	quotes: none;
}

a:focus {
	outline: 2px solid #c1c1c1;
	outline: 2px solid rgba(51, 51, 51, 0.3);
}

a:hover,
a:active {
	outline: 0;
}

a img {
	border: 0;
}
html,
button,
input,
select,
textarea {
	font-family: "Source Sans Pro", Helvetica, sans-serif;
    font-weight: normal;
}


/**
 * 2.0 - Default Styles
 */
p{
    padding-bottom: 10px;
    font-size: 15px;
line-height:1.3em
}

.clear {
    clear: both;
}
strong{font-weight:bold}
em{font-style: italic;}
/* hedings */
h1{
    font-size: 22px;
   
}
h2{
    font-size: 30px;
    color: #3c8b89;
    padding-bottom: 10px;
}
h3{
    font-size: 16px;
    color: #fff;
    background-color: #20C3C1;
    text-align: left;
    padding: 5px ;
    
}
h4{
    font-size: 15px;
    color: #20C3C1;
    padding-bottom: 5px ;
    
}
/* Images */
img{
    max-width: 100%;
    
}
.alignleft {
	float: left;
}

.alignright {
	float: right;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.alignleft {
	margin: 5px 20px 5px 0;
}
img.alignright {
	margin: 5px 0 5px 20px;
}
img.aligncenter {
	margin: 5px 20px;
}
/* 
 **  3.0 Custom Styles **
*/
body, html {
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    font-size:10px;
    background-color: #eaeaea;
    width: 100%;
color:#363636;
}
/*  Header with Logo and Navigtion bar */
header{
    width: 100%;
    background: rgba(60, 139, 137, 0.7); 
    height: 68px;
    position: fixed;
    top: 0;
z-index:9999;
}
.logobar{
    width: 1040px;
    max-width: 100%;
    margin: 0 auto;
    
}
.logo{
    width: 25%;
    float:left;
    clear: right;
}
nav{
    width: 75%;
    float: left;
    text-align: right;
    font-weight: normal;
}
.nav-menu li {
	display: inline-block;
	position: relative;
 }
.nav-menu li a {
	color: #fff;
    font-size: 16px;
	display: inline-block;
    margin-right: 8px;
    padding: 25px 15px;
    text-decoration: none;
}
.nav-menu li:hover > a,
.nav-menu li a:hover {
	background-color: #ea9629;
    padding: 25px 15px;
}
.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
	color: #fff;
    background-color: #ea9629;
    padding: 25px 15px;
}
#mfToggleMenu {
			display:none;
}
/* Homepage Styles */
/* homepage image division with subtitle */
.homepage-image{
   position: absolute;
   background: rgba(60, 139, 137, 0.7); 
   margin-top: -46px;
   width: 100%;
}
.homepage-image h1{
    width: 1040px;
    max-width: 100%;
    margin: 0 auto;
    padding: 10px 0;
    color: #fff;
    font-style: italic;
}
.homepage-contentimg{margin:0 auto; text-align:center} 
/* Homepage content division */
.homepage-contentwrapper{
    width: 1040px;
    max-width: 100%;
    margin: 0 auto;
    padding:20px 0 ;
}
.homepage-contentwrapper h2 {
    display: none;
}

.contentdata{
    width: 73%;
    clear: right;
    float: left;
    font-size: 15px;
    padding-bottom: 50px;
}
/* sidebar widget styling */
.sidebar{
    width: 25%;
    float: right;
    
}
.widget {
    margin-bottom: 10px !important;
    border: 1px solid#ffcc00;
    background-color: #fff;
    
}
.widget p{
    font-size: 14px;
    line-height: 1.5em;
}
.widget .title {
    background-color: #ea9629;
    padding: 10px 15px;
font-size:16px;
    
}
.widget-area .textwidget {
    padding: 10px 15px;
}
.widget-area .textwidget a{
    display: block;
    background-color: #20C3C1;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    padding: 5px;
    text-align: center;
    width: 88%;
    margin-left:0;
}

/* Index page Styling */
.contentwrapper{
    width: 1040px;
    max-width: 100%;
    margin: 0 auto;
    padding: 140px 0 50px 0 ;
 }
.contentwrapper h1{
    font-size: 22px;
    color: #3c8b89;
    padding-bottom: 10px;
    font-style: italic;
}
/* Services Page styles*/
.services{
    width: 100%;
    background-color: #fff;
    
}

.services-list{
   width: 100%;
   padding: 0 10px 20px 10px;
   
}

.servie-add-on{
    font-size: 15px;
    width:90%;
    border: 3px solid #20C3C1;
    padding: 10px;
}
.service-name{
    color: #20C3C1;
    font-size: 16px;
    clear:right;
    float: left;
    padding-right: 40px;
    
}
.services-list ul li{
   padding: 5px 0 ;
}
/* Contact form */
.contentdata .wpcf7{
   color: #20C3C1;
}
.contentdata .wpcf7 h3 {
    font-size: 22px;
 }
.wpcf7-form-control{margin:5px 0 10px 0 !important;}

/* footer Styles*/

footer{
background: #3c8b89;
    background: -webkit-gradient(linear, left top, left bottom, from(#3c8b89), to(#24ddda));
    background: -webkit-linear-gradient(top, #3c8b89, #24ddda);
    background: -moz-linear-gradient(top, #3c8b89, #24ddda);
    background: -ms-linear-gradient(top, #3c8b89, #24ddda);
    background: -o-linear-gradient(top, #3c8b89, #24ddda);
font-family: "Source Sans Pro", Helvetica, sans-serif;
}
footer p{
    text-align: center;
    color: #fff;
    padding-top: 5px;
}
footer a{
    text-decoration: none;
    color: #fff;
}


/**
 * 4.0 Media Queries
 */

/*
 * Does the same thing as <meta name="viewport" content="width=device-width">,
 * but in the future W3C standard way. -ms- prefix is required for IE10+ to
 * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor
 * the meta tag. See https://core.trac.wordpress.org/ticket/25888.
 */
/**
 * 15.6 Desktop Large 1240px
 */

@media screen and (max-width: 1080px) {
header{
    height: 60px;
    top: 0;
    
}
.logobar {
        width:98%;
        padding: 0 10px;
    }
.logo{
    width: 25%;
    padding-left: 5px;
}
nav{
    width: 75%;
    float: right;
}
.nav-menu li a {
	padding: 10px 5px 10px 5px!important;
}
.nav-menu li:hover > a,
.nav-menu li a:hover {
	background-color: #ea9629;
    padding: 20px 5px !important;
}
.nav-menu .current_page_item > a,
.nav-menu .current_page_ancestor > a,
.nav-menu .current-menu-item > a,
.nav-menu .current-menu-ancestor > a {
	padding: 20px 5px !important;
}

.homepage-image h1{
    font-size: 20px;
    color: #fff;
    padding-left: 20px;
    
}
.homepage-contentwrapper {
    padding: 10px 20px 10px 20px;
    }
.contentwrapper{
    width:98%;
    padding: 130px 20px 50px 20px;
}
.copyrightbar{
        width: 96%;
        padding: 2%;
        text-align: center;
}
.sidebar{
    width: 30%;
    float: right;
    
}
.contentdata{
    width: 70%;
    clear: right;
    float: left;
}
.widget-area .textwidget a {
    width: 100%;
    margin: auto;
    }
}

@media screen and (max-width: 767px) {
 header {
        height: 80px;
        position: relative;
 }
.logo {
        width: 98%;
        float: none;
        text-align: center;
        padding: 0 10px;
}
nav{
    width: 100%;
    text-align: center;
}
 .nav-menu ul li {
    display: block !important;
    width: 50%;
    margin: auto;
    }
  
.nav-menu {
        display: none;
        background-color: rgba(60, 139, 137, 0.7);
    }
.nav-menu ul li {
        display: block !important;
 }
.nav-menu li {
    width: 100%;
 }
.nav-menu li a {
        width: 100%;
        display: block !important;
        padding: 5px !important;
        margin-bottom: 5px;
 }
.nav-menu li:hover > a, .nav-menu li a:hover {
        background-color: #ea9629;
        padding: 10px 5px !important;
    }

 .nav-menu .current_page_item > a,
 .nav-menu .current_page_ancestor > a,
 .nav-menu .current-menu-item > a, 
 .nav-menu .current-menu-ancestor > a {
        padding: 10px 5px !important;
    }
 #mfToggleMenu {
        display: block;
    }

    #mfToggleText {
        display: inline-block;
        margin-left: 10px;
    }

#mfToggleMenu {
    cursor: pointer;
        color: #fff; /*Colour for show and hide menu in mobile versions*/
        text-decoration: none;
        padding: 10px;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 18px;
        text-align: right;
        background-color: rgba(60, 139, 137, 0.7); /*Background colour for show and hide menu in mobile versions*/
        text-align: center;
}

.homepage-contentimg {
        display: none;
 }
.homepage-contentimg h1{
    font-size: 16px;
    color: #3c8b89;
    background-color: #eaeaea;
    margin-top: 60px;
}
.homepage-contentwrapper{
        width: 98%;
        padding: 100px 20px 10px 20px;
        
    }
.homepage-contentwrapper h2 {
     display: block;
     color: #3c8b89;
     font-size: 20px; 
     padding-top: 20px; 
}
.contentwrapper {
        width: 98%;
        padding: 1%;
        margin: 0 !important;
        padding: 0 10px 50px 30px !important;
    }
.contentwrapper h1{
    font-size: 20px; 
    padding-top: 10px;
}

.contentdata {
        width: 100%;
        clear: right;
        float: left;
        padding: 10px 0 50px 0 ;
    }
.sidebar {
        width: 95%;
        float: left;
        font-size: 18px;
        padding: 5px 5px 5px 25px;
        text-align: center;
    }
.widget-area .textwidget a {
    width: 50%;
    margin: auto;
    }
.contentdata .wpcf7 {
        width: 100%;
    }
.contentdata .wpcf7 h3 {
    font-size: 18px;
 }
}
@media screen and (max-width: 530px) {
    nav {
        width: 100%;
        padding-top: 20px;
    }
 .nav-menu ul li {
    display: block !important;
    width: 100%;
    }
  
.nav-menu li a {
    width: 100%;
    display: block !important;
    
    }  
.homepage-contentwrapper{
    width: 98%;
    padding: 80px 20px 10px 20px;
}
.contentwrapper{
    width: 98%;
    padding: 10px 10px 10px 20px !important;
}
.contentwrapper h1{
    font-size: 20px;
    padding-top: 10px;
}
.contentdata{
    width: 100%;
    float: none;
    text-align: left;
}
.services-pricelist{
   width: 100%;
 }
.service-name{
    width: 50%;
    padding-left: 5px;
}
.service-price{
    width: 50%;
    padding-left: 20px;
}
.sidebar{
    width: 100%;
    margin:auto;
    float: left;
    text-align: center;
    font-size: 18px;
    padding: 5px  !important;
    
}
.widget-area .textwidget a {
    width: 90%;
    margin: auto;
    }
footer
{
    width:100%;
    padding: 5px 15px;
   
}
.contentdata .wpcf7 {
        width: 100%;
    }
 .wpcf7-form-control{
    width: 80%;
    margin:5px 0 10px 0 !important;}   
}