/**
 * Use by theme editor
 * DONT CHANGE THIS FILE
 */
html {
  font-family: sans-serif;
}

body {
  font-size: 16px;
  background-color: #ffffff;
  color: #212121;
  font-weight: 400;
}

/**
 * Typography
 */
h1 {
  color: #212121;
  margin: 0 auto 40px;
}
h2 {
  color: #616161;
  margin: 0 auto 38px;
}
h3 {
  color: #757575;
  margin: 0 auto 35px;
}
h4 {
  color: #9E9E9E;
  margin: 0 auto 30px;
}
h5 {
  color: #BDBDBD;
  margin: 0 auto 30px;
}
h6 {
  color: #BDBDBD;
  margin: 0 auto 30px;
}
p,
ol,
ul,
table{
    margin: 0 0 20px;
}
th,
td{
    border: 1px solid;
    padding: 10px;
}
tr:nth-of-type(2n){
    background-color: #f1f1f1;
}
a{
    transition: all 0.4s ease-in-out;
}

/**
 * Strip common gap
 */
.strip-row {
  margin-bottom: 75px;
}

/**
 * Linke Options
 */
.link-option-1 {
    border-style: solid;
    border-width: 0 0 1px;
    padding: 0;
    box-sizing: border-box;
}
.link-option-2{
    position: relative;
    padding: 0 20px 0 0;
    box-sizing: border-box;
}
.link-option-2:after {
    font-family: 'icomoon';
    content: '\e9e4';
    font-size: 14px;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.link-option-3{
    position: relative;
    padding: 0 25px 0 0;
    box-sizing: border-box;
}
.link-option-3:after {
    font-family: 'icomoon';
    content: '\eb50';
    font-size: 18px;
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/**
 * Link as Button Options
 */
.link-as-button-option-1,
.primary-button,
button.primary-button {
    border-style: solid;
    border-width: 1px;
    padding: 6px 16px;
    box-sizing: border-box;
    display: inline-block;
}

.link-as-button-option-2,
.secondary-button,
button.secondary-button {
    border-style: solid;
    border-width: 1px;
    padding: 6px 16px;
    box-sizing: border-box;
    display: inline-block;
}

.link-as-button-option-3,
button{
    border-style: solid;
    border-width: 1px;
    padding: 6px 16px;
    box-sizing: border-box;
    display: inline-block;
}
.primary-button,
.secondary-button,
button{
    -webkit-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

/**
 * Rotator arrows
 */
.arrows-wrapper .slick-arrow{
    border-style: solid;
    box-sizing: border-box;
}
 
/**
 * Rotator pagers
 */
.pager-wrapper li{
    -webkit-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

/**
 * Remove hover from touch devices
 */
@media (hover: hover) {
    a:hover { color: inherit; }
}
@media (hover: none) {
    a:hover { color: inherit; }
}


/* 
CMS editor default style formats
DON'T REMOVE THIS SECTION 
*/

/**style_formats**

   { "title": "Text formats" },        
   { "title": "Badge", "inline": "span", "styles": { "display": "inline-block", "border": "1px solid #2276d2", "border-radius": "5px", "padding": "2px 5px", "margin": "0 2px", "color": "#2276d2" } },    
   { "title": "Link formats" },
   { "title": "Link Option 1", "selector": "a", "classes": "link link-option-1" },
   { "title": "Link Option 2", "selector": "a", "classes": "link link-option-2" },
   { "title": "Link Option 3", "selector": "a", "classes": "link link-option-3" },
   { "title": "Link as Button Option 1", "selector": "a", "classes": "link-as-button link-as-button-option-1" },       
   { "title": "Link as Button Option 2", "selector": "a", "classes": "link-as-button link-as-button-option-2" },
   { "title": "Link as Button Option 3", "selector": "a", "classes": "link-as-button link-as-button-option-3" },
   { "title": "Wrap Image With Link", "selector": "a", "classes": "wrap-image-with-link" },
   { "title": "Image formats" },       
   { "title": "Image Left", "selector": "img", "styles": { "float": "left", "margin": "0 10px 0 10px" } },        
   { "title": "Image Right", "selector": "img", "styles": { "float": "right", "margin": "0 0 10px 10px" } }

**style_formats**/



/**templates**
{ "title": "Text on Background", "description": "Text on Background", "content": "<div class=\"on-background\">\n<h3>Lorem ipsum dolor sit amet<\/h3>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus elementum pellentesque. Phasellus scelerisque facilisis sollicitudin. Maecenas tincidunt cursus malesuada. Cras rhoncus, dui at semper accumsan, massa erat finibus odio, ac auctor mi massa non risus. Fusce pharetra congue augue at dapibus. Vestibulum finibus quam eget erat volutpat mattis.<\/p>\n<p><a href=\"#\" class=\"link link-option-1\">Read More<\/a><\/p>\n<\/div>"},

{ "title": "HTML all elements", "description": "HTML all elements", "content": "<div class=\"typo-wrapper\" style=\"display: flex;flex-flow: row wrap;\"><div class=\"default\" style=\"width: 50%;box-sizing: border-box;padding: 20px 30px;\"><h3 id=\"headings\" style=\"color: #1818fb;font-weight: bold;margin: 30px auto 35px;\">Headings<\/h3>\n<h1>Heading 1<\/h1>\n<h2>Heading 2<\/h2>\n<h3>Heading 3<\/h3>\n<h4>Heading 4<\/h4>\n<h5>Heading 5<\/h5>\n<h6>Heading 6<\/h6>\n<p><a href=\"#\" class=\"link-option-1\">Link Option One<\/a><\/p>\n<p><a href=\"#\" class=\"link-option-2\">Link Option Two<\/a><\/p>\n<p><a href=\"#\" class=\"link-as-button-option-1\">Button Option One<\/a><\/p>\n<p><a href=\"#\" class=\"link-as-button-option-2\">Button Option Two<\/a><\/p>\n<p class=\"top\"><a href=\"#top\">[top]<\/a><\/p>\n<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --><hr \/>\n<h3 id=\"paragraphs\" style=\"color: #1818fb;font-weight: bold;margin: 30px auto 35px;\">Paragraph<\/h3>\n<p>Lorem ipsum dolor sit amet, <a href=\"#\" title=\"test link\">test link<\/a> adipiscing elit. Praesent mattis, massa quis luctus fermentum, <strong>bold<\/strong> mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.<\/p>\n<p>Lorem ipsum dolor sit amet, <em>emphasis<\/em> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.<\/p>\n<p class=\"top\"><a href=\"#top\">[top]<\/a><\/p>\n<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --><hr \/>\n<h3 id=\"lists\" style=\"color: #1818fb;font-weight: bold;margin: 30px auto 35px;\">Lists<\/h3>\n<h3>Ordered List<\/h3>\n<ol>\n<li>List Item 1<\/li>\n<li>List Item 2<\/li>\n<li>List Item 3<\/li>\n<\/ol>\n<h3>Unordered List<\/h3>\n<ul>\n<li>List Item 1<\/li>\n<li>List Item 2<\/li>\n<li>List Item 3<\/li>\n<\/ul>\n<p class=\"top\"><a href=\"#top\">[top]<\/a><\/p><\/div><div class=\"on-background\" style=\"width: 50%;box-sizing: border-box;padding: 20px 30px;background: var(--color__primary-bg-color);\"><h3 id=\"on_background\" style=\"color: #1818fb;font-weight: bold;margin: 30px auto 35px;\">On Background<\/h3>\n<h1>Heading 1<\/h1>\n<h2>Heading 2<\/h2>\n<h3>Heading 3<\/h3>\n<h4>Heading 4<\/h4>\n<h5>Heading 5<\/h5>\n<h6>Heading 6<\/h6>\n<p><a href=\"#\" class=\"link-option-1\">Link Option One<\/a><\/p>\n<p><a href=\"#\" class=\"link-option-2\">Link Option Two<\/a><\/p>\n<p><a href=\"#\" class=\"link-as-button-option-1\">Button Option One<\/a><\/p>\n<p><a href=\"#\" class=\"link-as-button-option-2\">Button Option Two<\/a><\/p>\n<p class=\"top\"><a href=\"#top\">[top]<\/a><\/p>\n<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --><hr \/>\n<h3 id=\"paragraph\" style=\"color: #1818fb;font-weight: bold;margin: 30px auto 35px;\">Paragraph<\/h3>\n<p>Lorem ipsum dolor sit amet, <a href=\"#\" title=\"test link\">test link<\/a> adipiscing elit. Praesent mattis, massa quis luctus fermentum, <strong>bold<\/strong> mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.<\/p>\n<p>Lorem ipsum dolor sit amet, <em>emphasis<\/em> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.<\/p>\n<p class=\"top\"><a href=\"#top\">[top]<\/a><\/p>\n<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --><hr \/>\n<h3 id=\"lists\" style=\"color: #1818fb;font-weight: bold;margin: 30px auto 35px;\">Lists<\/h3>\n<h3>Ordered List<\/h3>\n<ol>\n<li>List Item 1<\/li>\n<li>List Item 2<\/li>\n<li>List Item 3<\/li>\n<\/ol>\n<h3>Unordered List<\/h3>\n<ul>\n<li>List Item 1<\/li>\n<li>List Item 2<\/li>\n<li>List Item 3<\/li>\n<\/ul>\n<p class=\"top\"><a href=\"#top\">[top]<\/a><\/p><\/div><\/div>\n<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --><hr \/>\n<h3 id=\"forms\" style=\"color: #1818fb;font-weight: bold;margin: 30px auto 35px;\">Form Elements<\/h3>\n<div class=\"form-wrapper\">\r\n\t<div class=\"cms-form-holder\">\r\n\t\t<form class=\"cms-form form-sample\" action=\"\" method=\"post\" autocomplete=\"on\" enctype=\"multipart\/form-data\" novalidate=\"novalidate\">\r\n\t<div class=\"fb-text form-group field-text-1597807865924 item-1\">\r\n<label class=\"fb-text-label\">\r\nText Field \r\n<\/label>\r\n\t<input class=\"form-control\" type=\"text\" name=\"text-1597807865924\">\r\n\t<\/div>\r\n\t<div class=\"fb-select form-group field-select-1597807867983 item-2\">\r\n<label class=\"fb-text-label\">\r\nSelect \r\n<\/label>\r\n<div class=\"fb-inner fb-select-inner\">\r\n<select class=\"form-control\" name=\"select-1597807867983\">\r\n<option value=\"option-1\" selected=\"selected\">Option 1<\/option>\r\n<option value=\"option-2\">Option 2<\/option>\r\n<option value=\"option-3\">Option 3<\/option>\r\n<\/select>\r\n<\/div>\r\n<\/div>\r\n<div class=\"fb-radio-group form-group field-radio-group-1598862366482 item-5\">\r\n<label class=\"fb-text-label\">\r\nRadio Group \r\n<\/label>\r\n<div class=\"radio-group\">\r\n<div class=\"radio fb-cr\">\r\n<input name=\"radio-group-1598862366482\" value=\"option-1\" type=\"radio\">\r\n<span class=\"fb-helper fb-radio-helper fa\"><\/span>\r\n<label>Option 1<\/label>\r\n<\/div>\r\n<div class=\"radio fb-cr\">\r\n<input name=\"radio-group-1598862366482\" value=\"option-2\" type=\"radio\">\r\n<span class=\"fb-helper fb-radio-helper fa\"><\/span>\r\n<label>Option 2<\/label>\r\n<\/div>\r\n<div class=\"radio fb-cr\">\r\n<input name=\"radio-group-1598862366482\" value=\"option-3\" type=\"radio\">\r\n<span class=\"fb-helper fb-radio-helper fa\"><\/span>\r\n<label>Option 3<\/label>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"fb-checkbox-group form-group field-checkbox-group-1598862372599 item-6\">\r\n<label class=\"fb-text-label\">\r\nCheckbox Group \r\n<\/label>\r\n<div class=\"checkbox-group\">\r\n<div class=\"checkbox fb-cr\">\r\n<input name=\"checkbox-group-1598862372599[]\" value=\"option-1\" type=\"checkbox\" checked=\"checked\">\r\n<span class=\"fb-helper fb-checkbox-helper fa\"><\/span>\r\n<label>Option 1<\/label>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"fb-file form-group field-file-1598862776071 item-7\">\r\n<label class=\"fb-text-label\">\r\nFile Upload \r\n<\/label>\r\n<div class=\"fb-inner fb-file-inner\">\r\n<input class=\"form-control\" type=\"file\" name=\"file-1598862776071\">\r\n<\/div>\r\n<\/div>\r\n\t<\/form>\r\n<\/div><a href=\"#top\">[top]<\/a><\/p>\n<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --><hr \/>\n<h3 id=\"icons\" style=\"color: #1818fb;font-weight: bold;margin: 30px auto 35px;\">Icons<\/h3>\n<div style=\"width: 300px;height: 45px;display: flex;flex-flow: row;justify-content: space-between;margin: 0 0 100px;\"><div style=\"width: 45%;padding: 50px 50px;box-sizing: border-box;\"><div style=\"position: relative;\">\r\n<div class=\"nav-arrow-group arrows-wrapper\"><div class=\"prev nav-left slick-arrow\"><span class=\"line-one\"><\/span><span class=\"line-two\"><\/span><\/div><div class=\"next nav-right slick-arrow\"><span class=\"line-one\"><\/span><span class=\"line-two\"><\/span><\/div><\/div><\/div><\/div><div class=\"on-background\" style=\"width: 45%;padding: 50px 50px;box-sizing: border-box;background: var(--color__primary-bg-color);\"><div style=\"position: relative;\"><div class=\"nav-arrow-group arrows-wrapper\"><div class=\"prev nav-left slick-arrow\"><span class=\"line-one\"><\/span><span class=\"line-two\"><\/span><\/div><div class=\"next nav-right slick-arrow\"><span class=\"line-one\"><\/span><span class=\"line-two\"><\/span><\/div><\/div><\/div><\/div><\/div>\n<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --><hr \/>\n<h3 id=\"tables\" style=\"color: #1818fb;font-weight: bold;margin: 30px auto 35px;\">Tables<\/h3>\n<table cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td>Heading 1<\/td>\n<td>Heading 2<\/td>\n<td>Heading 3<\/td>\n<\/tr>\n<tr>\n<td>Cell 1-1<\/td>\n<td>Cell 2-1<\/td>\n<td>Cell 3-1<\/td>\n<\/tr>\n<tr>\n<td>Cell 1-2<\/td>\n<td>Cell 2-2<\/td>\n<td>Cell 3-2<\/td>\n<\/tr>\n<tr>\n<td>Cell 1-3<\/td>\n<td>Cell 2-3<\/td>\n<td>Cell 3-3<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"top\"><a href=\"#top\">[top]<\/a><\/p>\n<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - --><hr \/>\n<h3 id=\"breadcrumb\" style=\"color: #1818fb;font-weight: bold;margin: 30px auto 35px;\">Breadcrumb<\/h3>\n<div class=\"row strip-row clearfix r2g-breadcrumb\">\r\n<div class=\"breadcrumb-nav\"><a href=\"\/\">Home<\/a><span>\/<\/span><a href=\"#\" class=\"active\">Lorem ipsum<\/a><\/div>\r\n<\/div>\n<h3 id=\"footer\" style=\"color: #1818fb;font-weight: bold;margin: 30px auto 35px;\">Footer Background<\/h3>\n<div style=\"width: 200px; height: 100px; margin: 0 0 30px; background-color:var(--color__footer-bg-color)\"><\/div>\n<div style=\"background-color:#b9b9b9; padding: 30px 20px\">\n<div style=\"display: flex; flex-flow: row wrap;\">\n<div style=\"width: 33%;\">\n<h3 id=\"default_background\" style=\"color: #1818fb; font-weight: bold;margin: 30px auto 35px; width: 100%;\">Default Backgrounds<\/h3>\n<div style=\"width: 200px; height: 100px; margin: 0 0 30px; background-color:var(--color__default-bg-color)\"><\/div>\n<\/div>\n<div style=\"width: 33%;\">\n<h3 id=\"primary_background\" style=\"color: #1818fb; font-weight: bold;margin: 30px auto 35px; width: 100%;\">Primary Backgrounds<\/h3>\n<div style=\"width: 200px; height: 100px; margin: 0 0 30px; background-color:var(--color__primary-bg-color)\"><\/div>\n<\/div>\n<div style=\"width: 33%;\">\n<h3 id=\"secondary_background\" style=\"color: #1818fb; font-weight: bold;margin: 30px auto 35px; width: 100%;\">Secondary Backgrounds<\/h3>\n<div style=\"width: 200px; height: 100px; margin: 0 0 30px; background-color:var(--color__secondary-bg-color)\"><\/div>\n<\/div>\n<\/div>\n<div style=\"display: flex; flex-flow: row wrap;\">\n<div style=\"width: 33%;\">\n<h3 id=\"overlay_option_one\" style=\"color: #1818fb; font-weight: bold;margin: 30px auto 35px; width: 100%;\">Overlay Option One<\/h3>\n<div style=\"width: 200px; height: 100px; margin: 0 0 30px; background-color:var(--color__overlay-color-one)\"><\/div>\n<\/div>\n<div style=\"width: 33%;\">\n<h3 id=\"overlay_option_two\" style=\"color: #1818fb; font-weight: bold;margin: 30px auto 35px; width: 100%;\">Overlay Option Two<\/h3>\n<div style=\"width: 200px; height: 100px; margin: 0 0 30px; background:var(--color__overlay-color-two)\"><\/div>\n<\/div>\n<\/div>\n<div style=\"display: flex; flex-flow: row wrap;\">\n<div style=\"width: 33%;\">\n<h3 id=\"default_border\" style=\"color: #1818fb; font-weight: bold; margin: 30px auto 35px;\">Default Border<\/h3>\n<div style=\"width: 200px; height: 100px; margin: 0 0 30px; border: 1px solid var(--color__default-border-color)\"><\/div>\n<\/div>\n<div style=\"width: 33%;\">\n<h3 id=\"primary_border\" style=\"color: #1818fb; font-weight: bold; margin: 30px auto 35px;\">Primary Border<\/h3>\n<div style=\"width: 200px; height: 100px; margin: 0 0 30px; border: 1px solid var(--color__primary-border-color)\"><\/div>\n<\/div>\n<div style=\"width: 33%;\">\n<h3 id=\"secondary_border\" style=\"color: #1818fb; font-weight: bold; margin: 30px auto 35px;\">Secondary Border<\/h3>\n<div style=\"width: 200px; height: 100px; margin: 0 0 30px; border: 1px solid var(--color__secondary-border-color)\"><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>"},

    { "title": "Two column content", "description": "Two column content", "content": "<div class=\"two-col-content\" data-cse_class_to_apply=\" .content-wrapper .two-col-content\" data-cse_name=\"Two Column Wrapper\">\n<div class=\"left-col\" data-cse_class_to_apply=\" .content-wrapper .two-col-content .left-col\" data-cse_name=\"Left Column Wrapper\">\n<h1>Lorem ipsum dolor sit amet<\/h1><\/div>\n<div class=\"right-col\" data-cse_class_to_apply=\" .content-wrapper .two-col-content .right-col\" data-cse_name=\"Right Column Wrapper\">\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus elementum pellentesque. Phasellus scelerisque facilisis sollicitudin. Maecenas tincidunt cursus malesuada. Cras rhoncus, dui at semper accumsan, massa erat finibus odio, ac auctor mi massa non risus. Fusce pharetra congue augue at dapibus. Vestibulum finibus quam eget erat volutpat mattis.<\/p>\n<p><a href=\"#\" class=\"link link-option-1\">Read More<\/a><\/p>\n<\/div><\/div>"},
    
    { "title": "H1 with Two Lines", "description": "H1 with Two Lines", "content": "<h1><span class=\"line-one\">Lorem ipsum<\/span><span class=\"line-two\">dolor sit amet<\/span><\/h1>"},
    
    { "title": "H2 with Two Lines", "description": "H2 with Two Lines", "content": "<h2><span class=\"line-one\">Lorem ipsum<\/span><span class=\"line-two\">dolor sit amet<\/span><\/h2>"},
    
    { "title": "H3 with Two Lines", "description": "H3 with Two Lines", "content": "<h3><span class=\"line-one\">Lorem ipsum<\/span><span class=\"line-two\">dolor sit amet<\/span><\/h3>"},
    
    
     { "title": "OMS Add to Cart Button", "description": "OMS Add to Cart Button", "content": "<div class=\"add-to-cart-btn-area\"><div class=\"get-add-cart-button\" data-id=\"DCB_Unique Key_DCB\"><\/div><\/div>"},


     { "title": "Contact Details with Icons", "description": "Contact Details with Icons", "content": "<p class=\"contact-item\"><span><i class=\"icon icon-i-65-locate-place-fill\"><\/i>Villa Emilià, Address line 2, Sri Lanka.<\/span><\/p>\n<p class=\"contact-item\"><span><i class=\"icon icon-i-84-phone-call-fill\"><\/i><a href=\"tel:+94(0)812415137\">+94 (0) 81 241 5137<\/a><\/span><\/p>\n<p class=\"contact-item\"><span><i class=\"icon icon-i-93-mobile-fill\"><\/i><a href=\"tel:+94710000000\">071 000 0000<\/a><\/span><\/p>\n<p class=\"contact-item\"><span><i class=\"icon icon-i-49-fax-fill\"><\/i>+94 (0) 81 241 5137<\/span><\/p>\n<p class=\"contact-item\"><span><i class=\"icon icon-i-39-e-mail-fill\"><\/i><a href=\"mailto:info@villaemilia.com\">info@villaemilia.com<\/a><\/span><\/p>"}

**templates**/