php js css php js css

Changes

Changes to Design: New 2019 test

24096
Today 2:07am
Vendeville, Mathieu
Modified design
24098
Today 2:07am
Vendeville, Mathieu
Modified design
Js:
Id:
7
7
Type:
web
web
Is Archived:
0
0
Title:
New 2019 test
New 2019 test
Html:
<!doctype html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Fonts-->
<link href="https://fonts.googleapis.com/css?family=Asap:400,400i,700,700i&amp;subset=latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:400,600&amp;subset=latin-ext" rel="stylesheet">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">-->

<link rel="stylesheet" href="/media/website_designs/7/css/bootstrap.min.css" />
<link rel="stylesheet" href="/media/website_designs/7/css/flickity.css" media="screen"/>
<link rel="stylesheet" href="/media/website_designs/7/css/style.css" />

<link rel="apple-touch-icon" sizes="57x57" href="/media/website_designs/7/img/favi/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/media/website_designs/7/img/favi/apple-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/media/website_designs/7/img/favi/apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/media/website_designs/7/img/favi/apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/media/website_designs/7/img/favi/apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/media/website_designs/7/img/favi/apple-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/media/website_designs/7/img/favi/apple-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/media/website_designs/7/img/favi/apple-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/media/website_designs/7/img/favi/apple-icon-180x180.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/media/website_designs/7/img/favi/android-icon-192x192.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/media/website_designs/7/img/favi/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/media/website_designs/7/img/favi/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/media/website_designs/7/img/favi/favicon-16x16.png" />
<link rel="manifest" href="/media/website_designs/7/img/favi/manifest.json" />
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/media/website_designs/7/img/favi/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

<script src="/media/website_designs/7/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="/media/website_designs/7/js/main.js"></script>
<script src="/media/website_designs/7/js/jquery.flexisel.js"></script>
<script src="/media/website_designs/7/js/instafeed.min.js"></script>

<script>
jQuery(function($) {
//caches a jQuery object containing the header element
var lastScrollTop = 0;
var menu = $(".menuContainer");
var menuHeight = $(".menuHeight");
var menuPadding = $("#main-Menu");

$(window).scroll(function() {
var st = $(window).scrollTop();
if (st > 40) {
menu.addClass("shadowMenu");
menuHeight.addClass("menuHeightSmall");
menuPadding.addClass("mainMenuPadding");
} else {
menu.removeClass("shadowMenu");
menuHeight.removeClass("menuHeightSmall");
menuPadding.removeClass("mainMenuPadding");
}
lastScrollTop = st;
});
});

</script>

</head>
<body>
<ss:navigation:mobile id="mobile_nav" autopopulatelevel="2" rootpage="/2019-test/">
<ss:navigation:item at="start" page="/commerce/order/" autopopulatelevel="0" >
Test
</ss:navigation:item>
<ss:navigation:item at="end" page="/commerce/order/" autopopulatelevel="0" >
<i class="fa fa-shopping-cart"></i>
</ss:navigation:item>
<ss:navigation:item at="end" autopopulatelevel="0" >
<ss:standard:link opendialogid="search_popup">
<i class="fa fa-search"></i>
</ss:standard:link>
</ss:navigation:item>
<ss:navigation:item at="end" page="tel:(021) 431 0677" autopopulatelevel="0" >
<i class="fa fa-phone"></i> Call today!
</ss:navigation:item>
</ss:navigation:mobile>


<ss:forms:dialogbox id="search_popup" width="60%">
<h1>Search</h1>
<form method="get" action="/search/">
<ss:forms:row type="one_column">
<ss:forms:editbox class="searchBox col-xs-12" name="query" type="text" placeholder="Search" transformations="tolower" />
</ss:forms:row>
<ss:forms:row type="one_column" align="center">
<ss:forms:submitbutton value="Go!" />
</ss:forms:row>
</form>
</ss:forms:dialogbox>

<ss:forms:dialogbox id="phone_popup" width="60%">
<div class="row">
<div class="col-xs-12 col-sm-6">
<h1>Contact us</h1>
<br/>
<hr/>
<div class="row">
<div class="col-xs-3 text-center">
<h3><i class="fab fa-whatsapp"></i></h3>
</div>
<div class="col-xs-9">
<p>
Whatsapp Hotline <br />
<strong>(852) 6153 8466</strong>
</p>
</div>
</div>

<div class="row">
<div class="col-xs-3 text-center">
<h3><i class="fas fa-map-marker-alt"></i></h3>
</div>
<div class="col-xs-9">
<p>
Wan Chai Centre <br />
<strong>(852) 2527 7825</strong>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-3 text-center">
<h3><i class="fas fa-map-marker-alt"></i></h3>
</div>
<div class="col-xs-9">
<p>
Jordan Centre <br />
<strong>(852) 2730 3257</strong>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-3 text-center">
<h3><i class="fas fa-map-marker-alt"></i></h3>
</div>
<div class="col-xs-9">
<p>
Sha Tin Centre <br />
<strong>(852) 2634 0861</strong>
</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<br/>
<ss:standard:image src="/media/website_designs/7/img/phone-popup.png" alt="call us" width="400px"/>
</div>
</div>
</ss:forms:dialogbox>


<ss:forms:dialogbox id="login_popup" width="60%">
<ss:logic:if test="!(\Components\Customers\Contacts::currentIsLoggedIn())">
<h3 style="text-align: center;">Existing Member?</h3>
<p style="text-align: center;">
If you already have an account with us, you can login below.
</p>
<ss:forms:form norefresh="true" contactmode="login">
<ss:forms:row label="E-mail Address">
<ss:forms:editbox id="contact_email" datacolumn="contact_email" validations="mandatory" transformations="tolower" parse="value" value="\Components\Customers\Contacts::currentGetColumn('contact_email')" />
</ss:forms:row>
<ss:forms:row label="Password">
<ss:forms:password id="contact_password" datacolumn="contact_password" validations="mandatory" />
</ss:forms:row>
<ss:forms:row type="one_column" align="center">
<ss:forms:submitbutton value="Login" />
</ss:forms:row>
</ss:forms:form>
<small>- <a href="/community/lost_password/">Forgot / Lost Password</a></small>
</ss:logic:if>
<ss:logic:else>
<h3 style="text-align: center;">Bonjour!</h3>
<p style="text-align: center;">
You are currently logged in as <strong><ss:personalisation:fullname /></strong>. <br/>
If you would like to change your login information, please choose from the options below.
</p>
<p style="text-align: center;">
<a href="/community/profile/"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> My Profile</a><br />
<a href="/community/logout/" onclick="return confirm('Are you sure you wish to logout?\n\nYou only need to logout if you are using a public computer and are concerned about your privacy.\nUnlike some sites, this site does not require you to logout after each session.');"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Logout</a>
</p>
</ss:logic:else>
</ss:forms:dialogbox>

<div class="menuContainer fixed-top whitebg">
<div class="container navbar">
<div class="centered menuHeight">
<div class="logoContainer hidden-xs hidden-sm">
<a href="/2019-test/"><ss:standard:image src="/media/website_designs/7/img/logo-3.png" alt="" width="100%" /></a>
</div>
<div class="logoSmallContainer hidden-md hidden-lg">
<ss:standard:image src="/media/website_designs/7/img/logoSmall4.png" alt="" width="100%" />
</div>
<div class="centered hidden-sm">
<ss:navigation:primary openonhover="true" class="horNav" id="main-Menu" rootpage="/2019-test/" autopopulatelevel="2" classlicurrent="selected" orientation="horizontal" includeparentpagelevel="0" >
</ss:navigation:primary>
</div>
<div class="rightMenu centered">
中文
<ss:standard:link opendialogid="search_popup"><i class="fas fa-search"></i></ss:standard:link>
<i class="fab fa-facebook-f hidden-xs hidden-sm"></i>
<i class="fab fa-instagram hidden-xs hidden-sm"></i>
<ss:standard:link opendialogid="login_popup"><i class="far fa-user"></i></ss:standard:link>
<ss:standard:link opendialogid="phone_popup"><i class="fas fa-phone"></i></ss:standard:link>
<a href="/commerce/order/"><i class="fas fa-shopping-bag"></i></a>
<ss:navigation:mobilelink opens="mobile_nav"><i class="fa fa-bars hidden-md hidden-lg"></i></ss:navigation:mobilelink>
</div>
</div>
</div>
</div>


<div class="banner container-fluid">
<ss:logic:if test="\Components\Website\Pages::currentPageId() == '/2019-test/'" >
<ss:layout:rotator id="featured_rotator" startatrandom="true" transition="fade" movenextid="bannerMoveNext" movepreviousid="bannerMovePrevious" classcontrols="bottom center round mycustom">
<ul>
<ss:data:repeater parsenow="datafilter" datasource="\Components\Website\Posts::getAllForCategory(23)" as="post" datafilter="array(array('post_is_offline', '=', 0))">
<li>
<a href="[? $post['post_content_url'] ?]"><ss:standard:image src="'/media/website_posts/' + $post['post_id'] + '/' + $post['post_icon']" alt="$post['post_title']" parsenow="src,alt" class="imageCulture"/>
<!----></a>
<div class="cover"></div>
<div class="maskBottom"></div>
<div class="maskTop"></div>
<div class="textbanner">
<div class="container containerBanner" >
<div class="row">
<div class="col-xs-12 col-sm-6">
<h1 style="text-align: left;">[? $post['post_title'] ?]</h1>
<p style="text-align: left;">
[? $post['post_content_short'] ?]
</p>
<br/>
<a href="[? $post['post_content_url'] ?]" class="turquoise">Learn More</a>
</div>
</div>
</div>
</div>
</li>

</ss:data:repeater>
</ul>
</ss:layout:rotator>
<a id="bannerMovePrevious" href="#">
<img alt="Previous Item" src="/media/website_designs/6/img/left-arrow2.png" />
</a>
<a id="bannerMoveNext" href="#">
<img alt="Next Item" src="/media/website_designs/6/img/right-arrow2.png" />
</a>
</ss:logic:if>
</div>


<div class="container padding-top120">
<ss:regions:content />
</div>
<hr/>
<div class="container">
<div class="row">
<div class="col-xs-6">
<p>Footer 1</p>
</div>
<div class="col-xs-6">
<p>Footer 2</p>
</div>
</div>
</div>

<script src="/media/website_designs/7/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="/media/website_designs/7/js/vendor/bootstrap.min.js"></script>
<script src="/media/website_designs/7/js/jquery.flexisel.js"></script>
<script src="/media/website_designs/7/js/main.js"></script>
<script src="/media/website_designs/7/js/flickity.pkgd.min.js"></script>

<ss:standard:script at="head" includejquery="true" />
<ss:logic:if test="!(\Framework\DOM\CurrentContext::getIsInEditMode())">
<ss:standard:script at="head" includejquery="true" />
<script type="text/javascript">
window.$ = jQuery;
$(window).load(function() {
$("#flexiselDemo1").flexisel();

$("#flexiselDemo2").flexisel({
visibleItems: 4,
itemsToScroll: 3,
animationSpeed: 200,
infinite: true,
navigationTargetSelector: null,
autoPlay: {
enable: false,
interval: 5000,
pauseOnHover: true
},
responsiveBreakpoints: {
portrait: {
changePoint:480,
visibleItems: 1,
itemsToScroll: 1
},
landscape: {
changePoint:640,
visibleItems: 2,
itemsToScroll: 2
},
tablet: {
changePoint:768,
visibleItems: 3,
itemsToScroll: 3
}
},
loaded: function(object) {
console.log('Slider loaded...');
},
before: function(object){
console.log('Before transition...');
},
after: function(object) {
console.log('After transition...');
},
resize: function(object){
console.log('After resize...');
}
});

$("#flexiselDemo3").flexisel({
visibleItems: 5,
itemsToScroll: 1,
autoPlay: {
enable: true,
interval: 5000,
pauseOnHover: true
}
});

$("#flexiselDemo4").flexisel({
infinite: false
});

});
</script>

<script src="/media/website_designs/7/js/vendor/bootstrap.min.js"></script>
<script src="/media/website_designs/7/js/main.js"></script>
<script src="/media/website_designs/7/js/jquery.flexisel.js"></script>
</ss:logic:if>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Fonts-->
<link href="https://fonts.googleapis.com/css?family=Asap:400,400i,700,700i&amp;subset=latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:400,600&amp;subset=latin-ext" rel="stylesheet">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">-->

<link rel="stylesheet" href="/media/website_designs/7/css/bootstrap.min.css" />
<link rel="stylesheet" href="/media/website_designs/7/css/flickity.css" media="screen"/>
<link rel="stylesheet" href="/media/website_designs/7/css/style.css" />

<link rel="apple-touch-icon" sizes="57x57" href="/media/website_designs/7/img/favi/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/media/website_designs/7/img/favi/apple-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/media/website_designs/7/img/favi/apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/media/website_designs/7/img/favi/apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/media/website_designs/7/img/favi/apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/media/website_designs/7/img/favi/apple-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/media/website_designs/7/img/favi/apple-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/media/website_designs/7/img/favi/apple-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/media/website_designs/7/img/favi/apple-icon-180x180.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/media/website_designs/7/img/favi/android-icon-192x192.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/media/website_designs/7/img/favi/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/media/website_designs/7/img/favi/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/media/website_designs/7/img/favi/favicon-16x16.png" />
<link rel="manifest" href="/media/website_designs/7/img/favi/manifest.json" />
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/media/website_designs/7/img/favi/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

<script src="/media/website_designs/7/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="/media/website_designs/7/js/main.js"></script>
<script src="/media/website_designs/7/js/jquery.flexisel.js"></script>
<script src="/media/website_designs/7/js/instafeed.min.js"></script>

<script>
jQuery(function($) {
//caches a jQuery object containing the header element
var lastScrollTop = 0;
var menu = $(".menuContainer");
var menuHeight = $(".menuHeight");
var menuPadding = $("#main-Menu");

$(window).scroll(function() {
var st = $(window).scrollTop();
if (st > 40) {
menu.addClass("shadowMenu");
menuHeight.addClass("menuHeightSmall");
menuPadding.addClass("mainMenuPadding");
} else {
menu.removeClass("shadowMenu");
menuHeight.removeClass("menuHeightSmall");
menuPadding.removeClass("mainMenuPadding");
}
lastScrollTop = st;
});
});

</script>

</head>
<body>
<ss:navigation:mobile id="mobile_nav" autopopulatelevel="2" rootpage="/2019-test/">
<ss:navigation:item at="start" page="/commerce/order/" autopopulatelevel="0" >
Test
</ss:navigation:item>
<ss:navigation:item at="end" page="/commerce/order/" autopopulatelevel="0" >
<i class="fa fa-shopping-cart"></i>
</ss:navigation:item>
<ss:navigation:item at="end" autopopulatelevel="0" >
<ss:standard:link opendialogid="search_popup">
<i class="fa fa-search"></i>
</ss:standard:link>
</ss:navigation:item>
<ss:navigation:item at="end" page="tel:(021) 431 0677" autopopulatelevel="0" >
<i class="fa fa-phone"></i> Call today!
</ss:navigation:item>
</ss:navigation:mobile>


<ss:forms:dialogbox id="search_popup" width="60%">
<h1>Search</h1>
<form method="get" action="/search/">
<ss:forms:row type="one_column">
<ss:forms:editbox class="searchBox col-xs-12" name="query" type="text" placeholder="Search" transformations="tolower" />
</ss:forms:row>
<ss:forms:row type="one_column" align="center">
<ss:forms:submitbutton value="Go!" />
</ss:forms:row>
</form>
</ss:forms:dialogbox>

<ss:forms:dialogbox id="phone_popup" width="60%">
<div class="row">
<div class="col-xs-12 col-sm-6">
<h1>Contact us</h1>
<br/>
<hr/>
<div class="row">
<div class="col-xs-3 text-center">
<h3><i class="fab fa-whatsapp"></i></h3>
</div>
<div class="col-xs-9">
<p>
Whatsapp Hotline <br />
<strong>(852) 6153 8466</strong>
</p>
</div>
</div>

<div class="row">
<div class="col-xs-3 text-center">
<h3><i class="fas fa-map-marker-alt"></i></h3>
</div>
<div class="col-xs-9">
<p>
Wan Chai Centre <br />
<strong>(852) 2527 7825</strong>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-3 text-center">
<h3><i class="fas fa-map-marker-alt"></i></h3>
</div>
<div class="col-xs-9">
<p>
Jordan Centre <br />
<strong>(852) 2730 3257</strong>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-3 text-center">
<h3><i class="fas fa-map-marker-alt"></i></h3>
</div>
<div class="col-xs-9">
<p>
Sha Tin Centre <br />
<strong>(852) 2634 0861</strong>
</p>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<br/>
<ss:standard:image src="/media/website_designs/7/img/phone-popup.png" alt="call us" width="400px"/>
</div>
</div>
</ss:forms:dialogbox>


<ss:forms:dialogbox id="login_popup" width="60%">
<ss:logic:if test="!(\Components\Customers\Contacts::currentIsLoggedIn())">
<h3 style="text-align: center;">Existing Member?</h3>
<p style="text-align: center;">
If you already have an account with us, you can login below.
</p>
<ss:forms:form norefresh="true" contactmode="login">
<ss:forms:row label="E-mail Address">
<ss:forms:editbox id="contact_email" datacolumn="contact_email" validations="mandatory" transformations="tolower" parse="value" value="\Components\Customers\Contacts::currentGetColumn('contact_email')" />
</ss:forms:row>
<ss:forms:row label="Password">
<ss:forms:password id="contact_password" datacolumn="contact_password" validations="mandatory" />
</ss:forms:row>
<ss:forms:row type="one_column" align="center">
<ss:forms:submitbutton value="Login" />
</ss:forms:row>
</ss:forms:form>
<small>- <a href="/community/lost_password/">Forgot / Lost Password</a></small>
</ss:logic:if>
<ss:logic:else>
<h3 style="text-align: center;">Bonjour!</h3>
<p style="text-align: center;">
You are currently logged in as <strong><ss:personalisation:fullname /></strong>. <br/>
If you would like to change your login information, please choose from the options below.
</p>
<p style="text-align: center;">
<a href="/community/profile/"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> My Profile</a><br />
<a href="/community/logout/" onclick="return confirm('Are you sure you wish to logout?\n\nYou only need to logout if you are using a public computer and are concerned about your privacy.\nUnlike some sites, this site does not require you to logout after each session.');"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Logout</a>
</p>
</ss:logic:else>
</ss:forms:dialogbox>

<div class="menuContainer fixed-top whitebg">
<div class="container navbar">
<div class="centered menuHeight">
<div class="logoContainer hidden-xs hidden-sm">
<a href="/2019-test/"><ss:standard:image src="/media/website_designs/7/img/logo-3.png" alt="" width="100%" /></a>
</div>
<div class="logoSmallContainer hidden-md hidden-lg">
<ss:standard:image src="/media/website_designs/7/img/logoSmall4.png" alt="" width="100%" />
</div>
<div class="centered hidden-sm">
<ss:navigation:primary openonhover="true" class="horNav" id="main-Menu" rootpage="/2019-test/" autopopulatelevel="2" classlicurrent="selected" orientation="horizontal" includeparentpagelevel="0" >
</ss:navigation:primary>
</div>
<div class="rightMenu centered">
中文
<ss:standard:link opendialogid="search_popup"><i class="fas fa-search"></i></ss:standard:link>
<i class="fab fa-facebook-f hidden-xs hidden-sm"></i>
<i class="fab fa-instagram hidden-xs hidden-sm"></i>
<ss:standard:link opendialogid="login_popup"><i class="far fa-user"></i></ss:standard:link>
<ss:standard:link opendialogid="phone_popup"><i class="fas fa-phone"></i></ss:standard:link>
<a href="/commerce/order/"><i class="fas fa-shopping-bag"></i></a>
<ss:navigation:mobilelink opens="mobile_nav"><i class="fa fa-bars hidden-md hidden-lg"></i></ss:navigation:mobilelink>
</div>
</div>
</div>
</div>


<div class="banner container-fluid">
<ss:logic:if test="\Components\Website\Pages::currentPageId() == '/2019-test/'" >
<ss:layout:rotator id="featured_rotator" startatrandom="true" transition="fade" movenextid="bannerMoveNext" movepreviousid="bannerMovePrevious" classcontrols="bottom center round mycustom">
<ul>
<ss:data:repeater parsenow="datafilter" datasource="\Components\Website\Posts::getAllForCategory(23)" as="post" datafilter="array(array('post_is_offline', '=', 0))">
<li>
<a href="[? $post['post_content_url'] ?]"><ss:standard:image src="'/media/website_posts/' + $post['post_id'] + '/' + $post['post_icon']" alt="$post['post_title']" parsenow="src,alt" class="imageCulture"/>
<!----></a>
<div class="cover"></div>
<div class="maskBottom"></div>
<div class="maskTop"></div>
<div class="textbanner">
<div class="container containerBanner" >
<div class="row">
<div class="col-xs-12 col-sm-6">
<h1 style="text-align: left;">[? $post['post_title'] ?]</h1>
<p style="text-align: left;">
[? $post['post_content_short'] ?]
</p>
<br/>
<a href="[? $post['post_content_url'] ?]" class="turquoise">Learn More</a>
</div>
</div>
</div>
</div>
</li>

</ss:data:repeater>
</ul>
</ss:layout:rotator>
<a id="bannerMovePrevious" href="#">
<img alt="Previous Item" src="/media/website_designs/6/img/left-arrow2.png" />
</a>
<a id="bannerMoveNext" href="#">
<img alt="Next Item" src="/media/website_designs/6/img/right-arrow2.png" />
</a>
</ss:logic:if>
</div>


<div class="container padding-top120">
<ss:regions:content />
</div>
<hr/>
<div class="container">
<div class="row">
<div class="col-xs-6">
<p>Footer 1</p>
</div>
<div class="col-xs-6">
<p>Footer 2</p>
</div>
</div>
</div>

<script src="/media/website_designs/7/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="/media/website_designs/7/js/vendor/bootstrap.min.js"></script>
<script src="/media/website_designs/7/js/jquery.flexisel.js"></script>
<script src="/media/website_designs/7/js/main.js"></script>
<script src="/media/website_designs/7/js/flickity.pkgd.min.js"></script>

<ss:standard:script at="head" includejquery="true" />
<ss:logic:if test="!(\Framework\DOM\CurrentContext::getIsInEditMode())">
<ss:standard:script at="head" includejquery="true" />
<script type="text/javascript">
window.$ = jQuery;
$(window).load(function() {
$("#flexiselDemo1").flexisel();

$("#flexiselDemo2").flexisel({
visibleItems: 4,
itemsToScroll: 3,
animationSpeed: 200,
infinite: true,
navigationTargetSelector: null,
autoPlay: {
enable: false,
interval: 5000,
pauseOnHover: true
},
responsiveBreakpoints: {
portrait: {
changePoint:480,
visibleItems: 1,
itemsToScroll: 1
},
landscape: {
changePoint:640,
visibleItems: 2,
itemsToScroll: 2
},
tablet: {
changePoint:768,
visibleItems: 3,
itemsToScroll: 3
}
},
loaded: function(object) {
console.log('Slider loaded...');
},
before: function(object){
console.log('Before transition...');
},
after: function(object) {
console.log('After transition...');
},
resize: function(object){
console.log('After resize...');
}
});

$("#flexiselDemo3").flexisel({
visibleItems: 5,
itemsToScroll: 1,
autoPlay: {
enable: true,
interval: 5000,
pauseOnHover: true
}
});

$("#flexiselDemo4").flexisel({
infinite: false
});

});
</script>

<script src="/media/website_designs/7/js/vendor/bootstrap.min.js"></script>
<script src="/media/website_designs/7/js/main.js"></script>
<script src="/media/website_designs/7/js/jquery.flexisel.js"></script>
</ss:logic:if>
</body>
</html>
Css:
/*  ___________________________________ Basics  ___________________________________ */

@font-face {
font-family: 'louis_george_cafebold';
src: url('/media/website_designs/7/fonts/louis_george_cafe_bold-webfont.woff2') format('woff2'),
url('/media/website_designs/7/fonts/louis_george_cafe_bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'louis_george_cafbold_italic';
src: url('/media/website_designs/7/fonts/louis_george_cafe_bold_italic-webfont.woff2') format('woff2'),
url('/media/website_designs/7/fonts/louis_george_cafe_bold_italic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

body {
font-family: 'Asap', sans-serif;
height: 100%;
position:absolute;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
color: #333;
}

a {
color: #e21837;
}

.noRedLink a,
.noRedLink {
color: #333;
}

a:hover,
a:focus {
text-decoration: none;
}

hr {
border: 1px solid #cee8e3;
}

dialogbox {
padding: 29px;
}

dialogboxclose {
top: 6px;
right: 12px;
}

img {
max-width: 100%;
}

/* ___________________________________ Fonts ___________________________________ */

#main-content-area h1,
h1 {
/*font-family: 'Asap', sans-serif;*/
font-family: 'louis_george_cafebold';
font-size: 75px;
font-weight: 600;
/*text-transform: uppercase;*/
}

#main-content-area h2, h2 {
font-size:45px;
margin:30px 0;
font-style: italic;
}

#main-content-area h3,
h3 {
font-family: 'louis_george_cafebold';
margin-top: 0;
font-size: 47px;
line-height: 49px;
}

#main-content-area h4,
h4 {
font-size: 30px;
font-style: italic;
}

#main-content-area h5,
h5 {
font-weight: 700;
font-style: italic;
font-size: 24px;
margin-bottom: 20px;
line-height: 22px;
}

#main-content-area p,
p {
font-weight: 300;
font-size: 20px;
margin-bottom: 20px;
line-height: 22px;
}


/* ___________________________________ menu ___________________________________ */

.menuContainer {
}
.menuHeight {
height:80px;
width: 100%;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.menuHeightSmall {
height:75px;
}
.navbar {
margin-bottom:0px;
}
.fixed-top {
position: fixed;
width:100%;
z-index:10;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.shadowMenu{
box-shadow: 0px 16px 56px -30px rgba(0,0,0,0.75);
webkit-box-shadow: 0px 16px 56px -30px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 16px 56px -30px rgba(0,0,0,0.75);
}
.whitebg {
background-color:white;
}

.white a, .white, .white i, .white a i{
color:white;
}

.logoContainer {
width:240px;
}
.logoSmallContainer {
width:77px;
}
.rightMenu > * {
color: #333;
margin-left:15px;
font-size:16px;
}
.rightMenu {
margin-right:10px;
}

#main-Menu li a{
margin-right:15px;
color: #333;
font-size:16px;
padding:28px 0;
border-top: 4px solid rgba(255, 0, 0, 0);
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}

.mainMenuPadding > li > a {
padding-top:25px!important;
padding-bottom:26px!important;
}

#main-Menu > li:hover > a{
border-top: 4px solid #e21837;
}

#main-Menu li ul li a {
border-top:0;
padding: 20px;
margin-right:0;
}

#main-Menu li ul li {
margin-right:0;
}

#main-Menu li > ul {
background-color:white;
-webkit-box-shadow: 2px 4px 72px 0px rgba(0,0,0,0.21);
-moz-box-shadow: 2px 4px 72px 0px rgba(0,0,0,0.21);
box-shadow: 2px 4px 72px 0px rgba(0,0,0,0.21);
}

#main-Menu li ul li a:hover {
border-top:0;
background-color:#333;
color:white;
}

.s8-navigationPrimaryMobile {
display:none;
}

/* ___________________________________ Home page slider ___________________________________ */

#featured_rotator img , .cover, .maskBottom, .maskTop {
height: 700px;
}

.banner {
position: relative;
margin-top: 101px;
width:100%;
margin-bottom: -70px;
}

.cover {
position: absolute;
width:100%;
top:0;
left:0;
background: rgb(66,15,61);
background: linear-gradient(117deg, rgba(66,15,61,1) 0%, rgba(0,87,79,1) 100%);
opacity:0.5;
}

.maskBottom {
position: absolute;
width:100%;
bottom:-2px;
right:-4px;
background: url('/media/website_designs/7/img/maskbottom.png') no-repeat right bottom;
background-size: 110%;
}

.maskTop {
position: absolute;
width:100%;
top:-1px;
left:-3px;
background: url('/media/website_designs/7/img/masktop3.png') no-repeat left top;
background-size: 100%;
}

.containerBanner{
color:white;
}

.textbanner {
position: absolute;
color:white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

#bannerMovePrevious,
#bannerMoveNext {
bottom: 50%;
position: absolute;
opacity: 0;
}

.banner:hover #bannerMovePrevious,
.banner:hover #bannerMoveNext,
.topBanner:hover #TopbannerMovePrevious,
.topBanner:hover #TopbannerMoveNext {
opacity: 0.5;
}

.banner:hover #bannerMovePrevious:hover,
.banner:hover #bannerMoveNext:hover,
.topBanner:hover #TopbannerMovePrevious:hover,
.topBanner:hover #TopbannerMoveNext:hover {
opacity: 1;
}

#bannerMovePrevious,
#TopbannerMovePrevious {
left: 30px;
}

#bannerMoveNext,
#TopbannerMoveNext {
right: 30px;
}

#bannerMovePrevious img,
#bannerMoveNext img,
#TopbannerMovePrevious img,
#TopbannerMoveNext img {
width: 35px;
}

#featured_rotator img {
object-fit:cover;
width:100%;
max-height:100%;
}


/* ___________________________________ Cultural slider ___________________________________ */

.bannerCultural {

}

.turquoise-bg{
background-color:#C6F5F5;
padding-top:80px;
padding-bottom:80px;
position:relative;
}

#bannerMovePrevious1,
#bannerMoveNext1 {
bottom: 50%;
position: absolute;
}

#bannerMovePrevious1 {
left: 10px;
}

#bannerMoveNext1 {
right: 10px;
}

#bannerMovePrevious1 img,
#bannerMoveNext1 img {
width: 35px;
}

#cultural_rotator .imageCulture {
object-fit:cover;
width:100%;
height:400px;
-webkit-box-shadow: -1px 6px 128px -15px rgba(0,0,0,0.42);
-moz-box-shadow: -1px 6px 128px -15px rgba(0,0,0,0.42);
box-shadow: -1px 6px 128px -15px rgba(0,0,0,0.42);
}

.topMaskCultural {
position:absolute;
height:300px;
width:101%;
top:-6px;
left:-3px;
background: url('/media/website_designs/7/img/masktopcultural.png') no-repeat left top;
background-size: 100%;
}

.bottomMaskCultural {
position: absolute;
height:300px;
width:110%;
bottom:-1px;
right:0px;
background: url('/media/website_designs/7/img/maskbottomcultural.png') no-repeat right bottom;
background-size: 110%;
}

/* ___________________________________ Library ___________________________________ */

.yellow-bg{
background-color:#fff9c5;
padding-top:80px;
padding-bottom:80px;
position:relative;
}

/* ___________________________________ Post display ___________________________________ */

.boxed {
box-shadow: 0px 0px 15px #ececec;
padding-bottom: 5px;
overflow: auto;
border-radius: 4px;
margin-top:10px;
margin-bottom:0px;
transition: all 0.2s ease;
background-color:white;
}

.boxed:hover {
box-shadow: 0px 0px 15px #b5b5b5;
margin-top:0px;
margin-bottom:10px;
}
.boxed:hover img {
filter: grayscale(75%);
}
.boxed h2, .boxed h3, .boxed h4, .boxed h5, .boxed .btn-red {
margin: 20px;
}
.boxed p {
margin: 20px 20px 10px 20px;
}

.boxed .turquoiseborder {
margin: 20px;
}

.upcomingEvents {
position: absolute;
z-index: -2;
height: 700px;
width: 100%;
top: 4px;
left: -3px;
background: url(/media/website_designs/7/img/bg-bbr2.jpg) no-repeat right top;
background-size: 648px;
}


/* ___________________________________ FORM STYLES + Buttons ___________________________________ */

input,
textarea {
padding: 10px 12px;
font-size: 15px;
font-family: 'Source Sans Pro', sans-serif;
}

.turquoise {
margin-top: 0;
margin-bottom: 10px;
border: 2px solid #75d7cc;
background: #75d7cc;
padding: 10px 30px;
font-size: 23px;
font-weight: 400;
font-family: 'Source Sans Pro',sans-serif;
color: #ffffff;
transition: all 0.2s ease;
display: inline-block;
}

.turquoise:hover {
border: 2px solid white;
background: white;
color: #75d7cc;
}

.turquoiseborderwhite {
margin-top: 0;
border: 2px solid #75d7cc;
margin-bottom: 10px;
padding: 10px 30px;
font-size: 23px;
font-weight: 400;
font-family: 'Source Sans Pro',sans-serif;
color: #ffffff;
transition: all 0.2s ease;
display: inline-block;
}
.turquoiseborderwhite:hover {
color: #ffffff;
background-color: #75d7cc;
}

.turquoiseborder {
margin-top: 0;
margin-bottom: 10px;
border: 2px solid #75d7cc;
padding: 10px 30px;
font-size: 23px;
font-weight: 400;
font-family: 'Source Sans Pro',sans-serif;
color: #333;
transition: all 0.2s ease;
display: inline-block;
}

.turquoiseborder:hover {
color: #ffffff;
background-color: #75d7cc;
}


.blueborder {
margin-top: 0;
margin-bottom: 10px;
border: 2px solid #425893;
padding: 10px 30px;
font-size: 23px;
font-weight: 400;
font-family: 'Source Sans Pro',sans-serif;
color: #425893;
transition: all 0.2s ease;
display: inline-block;
}

.blueborder:hover {
color: #ffffff;
background-color: #425893;
}

.boxed .rouge {
font-size: 18px;
}

button[type=submit], .btn-red, .red-btn, .rouge {
margin-top: 0;
background-color: #d91f2f;
border: 0px solid #d91f2f;
padding: 10px 30px;
font-size: 23px;
font-weight: 400;
font-family: 'Source Sans Pro',sans-serif;
color: #ffffff;
display: inline-block;
}
.btn-red, .red-btn, .rouge {
margin-top:20px;
position:relative;
}
.btn-red:hover, .red-btn:hover, .rouge:hover {
color: #ffffff;
background-color: #be1a28;
}

.btn-red:visited, .red-btn:visited, .rouge:visited {
color: #ffffff;
}
.btn-red:focus, .red-btn:focus, .rouge:focus {
color: #ffffff;
}

.dataShowMore {
margin-top: 0;
border: 2px solid #75d7cc;
padding: 10px 30px;
font-size: 23px;
font-weight: 400;
font-family: 'Source Sans Pro',sans-serif;
color: #425893;
transition: all 0.2s ease;
}

.dataShowMore:visited {

}

.dataShowMore:hover {
color: #ffffff;
background-color: #75d7cc;
}

.dataShowMore::before,
.dataShowMore::after {
background-image: url('/media/website_designs/6/img/arrow2.png');
}

div.formRow {
/*background: none; font-size: 1.25em; color:#425893;*/
font-size: 1.25em;
color: #425893;
margin-bottom: 5px;
background-color: #e9f6f3;
padding: 10px;
border-radius: 5px;
}



/* ___________________________________ magins & paddings ___________________________________ */


.margin-top20 {
margin-top: 20px!important;
}

.margin-top40 {
margin-top: 40px!important;
}

.margin-bottom20 {
margin-bottom: 20px!important;
}

.margin-bottom40 {
margin-bottom: 40px;
}

.margin-bottom60 {
margin-bottom: 60px;
}

.margin-bottom80 {
margin-bottom: 80px;
}


.margin-top-bottom40 {
margin-top: 40px;
margin-bottom: 40px;
}

.inline {
display: inline-block;
}

.padding-top120 {
padding-top:120px;
}


/* ___________________________________ flex layout ___________________________________ */

.flexheight {
display: flex; /* or inline-flex */
flex-direction:column;
justify-content: space-between;
}

/* ___________________________________ Content ___________________________________ */

.fullheight {
min-height: 100%;
}

.fullheightGreen {
background: rgb(255,234,253);
background: linear-gradient(129deg, rgba(255,234,253,1) 0%, rgba(206,249,245,1) 100%);
min-height: 100%;
}
.fullheightBlue {
background-color: blue;
min-height: 100%;
}
.centered {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
}
.bluediv {
width:200px;
background-color: blue;
padding:20px;
margin-left:10px;
}

.socialnet {
width: 40px;
height: 40px;
background-color: #333333;
color: #eff7f1;
padding: 9px;
margin:0 10px 10px 0;
display:inline-block;
box-sizing: border-box;
}

.offset {
margin-left:-10px;
}

/* ___________________________________ Bootstrap added ___________________________________ */


.p-3 {
padding: 1rem!important;
}

.mb-5, .my-5 {
margin-bottom: 3rem!important;
}

.shadow-lg {
box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
}

.position-absolute {
position: absolute!important;
}

.bg-white {
background-color:white;
}

.rounded {
border-radius: .25rem!important;
}

/* ___________________________________ Flexisel Our partner slider ___________________________________ */

.nbs-flexisel-inner {
background:none;
border:none;
}
.nbs-flexisel-nav-left, .nbs-flexisel-nav-right {
padding: 2px 10px 4px 10px;
background: rgba(66,88,147,1);
}


/* ___________________________________ Insta Widget ___________________________________ */

#rudr_instafeed{
list-style:none
}
#rudr_instafeed li{
float:left;
width:200px;
height:200px;
margin:10px
}
#rudr_instafeed li img{
max-width:100%;
max-height:100%;
}

/* ___________________________________ RESPONSIVE BREAKPOINT STYLES ___________________________________ */


@media screen and (max-width:991px) {
#featured_rotator h1 {
font-size:40px;
}
button[type=submit], .btn-red, .red-btn, .rouge, .blueborder, .turquoise, .turquoiseborder, .turquoiseborderwhite {
font-size:16px;
padding: 6px 21px;
}
.rightMenu > * {
color: #333;
}
.logoSmallContainer {
width: 90px;
}
.s8-navigationPrimary {
display:none;
}
}
@media screen and (max-width: 767px) {
dialogbox {
width:80%!important;
}
#featured_rotator img , .cover, .maskBottom, .maskTop {
height: 600px;
}
}
/*  ___________________________________ Basics  ___________________________________ */

@font-face {
font-family: 'louis_george_cafebold';
src: url('/media/website_designs/7/fonts/louis_george_cafe_bold-webfont.woff2') format('woff2'),
url('/media/website_designs/7/fonts/louis_george_cafe_bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'louis_george_cafbold_italic';
src: url('/media/website_designs/7/fonts/louis_george_cafe_bold_italic-webfont.woff2') format('woff2'),
url('/media/website_designs/7/fonts/louis_george_cafe_bold_italic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

body {
font-family: 'Asap', sans-serif;
height: 100%;
position:absolute;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
color: #333;
}

a {
color: #e21837;
}

.noRedLink a,
.noRedLink {
color: #333;
}

a:hover,
a:focus {
text-decoration: none;
}

hr {
border: 1px solid #cee8e3;
}

dialogbox {
padding: 29px;
}

dialogboxclose {
top: 6px;
right: 12px;
}

img {
max-width: 100%;
}

/* ___________________________________ Fonts ___________________________________ */

#main-content-area h1,
h1 {
/*font-family: 'Asap', sans-serif;*/
font-family: 'louis_george_cafebold';
font-size: 75px;
font-weight: 600;
/*text-transform: uppercase;*/
}

#main-content-area h2, h2 {
font-size:45px;
margin:30px 0;
font-style: italic;
}

#main-content-area h3,
h3 {
font-family: 'louis_george_cafebold';
margin-top: 0;
font-size: 47px;
line-height: 49px;
}

#main-content-area h4,
h4 {
font-size: 30px;
font-style: italic;
}

#main-content-area h5,
h5 {
font-weight: 700;
font-style: italic;
font-size: 24px;
margin-bottom: 20px;
line-height: 22px;
}

#main-content-area p,
p {
font-weight: 300;
font-size: 20px;
margin-bottom: 20px;
line-height: 22px;
}


/* ___________________________________ menu ___________________________________ */

.menuContainer {
}
.menuHeight {
height:80px;
width: 100%;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.menuHeightSmall {
height:75px;
}
.navbar {
margin-bottom:0px;
}
.fixed-top {
position: fixed;
width:100%;
z-index:10;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.shadowMenu{
box-shadow: 0px 16px 56px -30px rgba(0,0,0,0.75);
webkit-box-shadow: 0px 16px 56px -30px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 16px 56px -30px rgba(0,0,0,0.75);
}
.whitebg {
background-color:white;
}

.white a, .white, .white i, .white a i{
color:white;
}

.logoContainer {
width:240px;
}
.logoSmallContainer {
width:77px;
}
.rightMenu > * {
color: #333;
margin-left:15px;
font-size:16px;
}
.rightMenu {
margin-right:10px;
}

#main-Menu li a{
margin-right:15px;
color: #333;
font-size:16px;
padding:28px 0;
border-top: 4px solid rgba(255, 0, 0, 0);
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}

.mainMenuPadding > li > a {
padding-top:25px!important;
padding-bottom:26px!important;
}

#main-Menu > li:hover > a{
border-top: 4px solid #e21837;
}

#main-Menu li ul li a {
border-top:0;
padding: 20px;
margin-right:0;
}

#main-Menu li ul li {
margin-right:0;
}

#main-Menu li > ul {
background-color:white;
-webkit-box-shadow: 2px 4px 72px 0px rgba(0,0,0,0.21);
-moz-box-shadow: 2px 4px 72px 0px rgba(0,0,0,0.21);
box-shadow: 2px 4px 72px 0px rgba(0,0,0,0.21);
}

#main-Menu li ul li a:hover {
border-top:0;
background-color:#333;
color:white;
}

.s8-navigationPrimaryMobile {
display:none;
}

/* ___________________________________ Home page slider ___________________________________ */

#featured_rotator img , .cover, .maskBottom, .maskTop {
height: 700px;
}

.banner {
position: relative;
margin-top: 101px;
width:100%;
margin-bottom: -70px;
}

.cover {
position: absolute;
width:100%;
top:0;
left:0;
background: rgb(66,15,61);
background: linear-gradient(117deg, rgba(66,15,61,1) 0%, rgba(0,87,79,1) 100%);
opacity:0.5;
}

.maskBottom {
position: absolute;
width:100%;
bottom:-2px;
right:-4px;
background: url('/media/website_designs/7/img/maskbottom.png') no-repeat right bottom;
background-size: 110%;
}

.maskTop {
position: absolute;
width:100%;
top:-1px;
left:-3px;
background: url('/media/website_designs/7/img/masktop3.png') no-repeat left top;
background-size: 100%;
}

.containerBanner{
color:white;
}

.textbanner {
position: absolute;
color:white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

#bannerMovePrevious,
#bannerMoveNext {
bottom: 50%;
position: absolute;
opacity: 0;
}

.banner:hover #bannerMovePrevious,
.banner:hover #bannerMoveNext,
.topBanner:hover #TopbannerMovePrevious,
.topBanner:hover #TopbannerMoveNext {
opacity: 0.5;
}

.banner:hover #bannerMovePrevious:hover,
.banner:hover #bannerMoveNext:hover,
.topBanner:hover #TopbannerMovePrevious:hover,
.topBanner:hover #TopbannerMoveNext:hover {
opacity: 1;
}

#bannerMovePrevious,
#TopbannerMovePrevious {
left: 30px;
}

#bannerMoveNext,
#TopbannerMoveNext {
right: 30px;
}

#bannerMovePrevious img,
#bannerMoveNext img,
#TopbannerMovePrevious img,
#TopbannerMoveNext img {
width: 35px;
}

#featured_rotator img {
object-fit:cover;
width:100%;
max-height:100%;
}


/* ___________________________________ Cultural slider ___________________________________ */

.bannerCultural {

}

.turquoise-bg{
background-color:#C6F5F5;
padding-top:80px;
padding-bottom:80px;
position:relative;
}

#bannerMovePrevious1,
#bannerMoveNext1 {
bottom: 50%;
position: absolute;
}

#bannerMovePrevious1 {
left: 10px;
}

#bannerMoveNext1 {
right: 10px;
}

#bannerMovePrevious1 img,
#bannerMoveNext1 img {
width: 35px;
}

#cultural_rotator .imageCulture {
object-fit:cover;
width:100%;
height:400px;
-webkit-box-shadow: -1px 6px 128px -15px rgba(0,0,0,0.42);
-moz-box-shadow: -1px 6px 128px -15px rgba(0,0,0,0.42);
box-shadow: -1px 6px 128px -15px rgba(0,0,0,0.42);
}

.topMaskCultural {
position:absolute;
height:300px;
width:101%;
top:-6px;
left:-3px;
background: url('/media/website_designs/7/img/masktopcultural.png') no-repeat left top;
background-size: 100%;
}

.bottomMaskCultural {
position: absolute;
height:300px;
width:110%;
bottom:-1px;
right:0px;
background: url('/media/website_designs/7/img/maskbottomcultural.png') no-repeat right bottom;
background-size: 110%;
}

/* ___________________________________ Library ___________________________________ */

.yellow-bg{
background-color:#fff9c5;
padding-top:80px;
padding-bottom:80px;
position:relative;
}

/* ___________________________________ Post display ___________________________________ */

.boxed {
box-shadow: 0px 0px 15px #ececec;
padding-bottom: 5px;
overflow: auto;
border-radius: 4px;
margin-top:10px;
margin-bottom:0px;
transition: all 0.2s ease;
background-color:white;
}

.boxed:hover {
box-shadow: 0px 0px 15px #b5b5b5;
margin-top:0px;
margin-bottom:10px;
}
.boxed:hover img {
filter: grayscale(75%);
}
.boxed h2, .boxed h3, .boxed h4, .boxed h5, .boxed .btn-red {
margin: 20px;
}
.boxed p {
margin: 20px 20px 10px 20px;
}

.boxed .turquoiseborder {
margin: 20px;
}

.upcomingEvents {
position: absolute;
z-index: -2;
height: 700px;
width: 100%;
top: 4px;
left: -3px;
background: url(/media/website_designs/7/img/bg-bbr2.jpg) no-repeat right top;
background-size: 648px;
}


/* ___________________________________ FORM STYLES + Buttons ___________________________________ */

input,
textarea {
padding: 10px 12px;
font-size: 15px;
font-family: 'Source Sans Pro', sans-serif;
}

.turquoise {
margin-top: 0;
margin-bottom: 10px;
border: 2px solid #75d7cc;
background: #75d7cc;
padding: 10px 30px;
font-size: 23px;
font-weight: 400;
font-family: 'Source Sans Pro',sans-serif;
color: #ffffff;
transition: all 0.2s ease;
display: inline-block;
}

.turquoise:hover {
border: 2px solid white;
background: white;
color: #75d7cc;
}

.turquoiseborderwhite {
margin-top: 0;
border: 2px solid #75d7cc;
margin-bottom: 10px;
padding: 10px 30px;
font-size: 23px;
font-weight: 400;
font-family: 'Source Sans Pro',sans-serif;
color: #ffffff;
transition: all 0.2s ease;
display: inline-block;
}
.turquoiseborderwhite:hover {
color: #ffffff;
background-color: #75d7cc;
}

.turquoiseborder {
margin-top: 0;
margin-bottom: 10px;
border: 2px solid #75d7cc;
padding: 10px 30px;
font-size: 23px;
font-weight: 400;
font-family: 'Source Sans Pro',sans-serif;
color: #333;
transition: all 0.2s ease;
display: inline-block;
}

.turquoiseborder:hover {
color: #ffffff;
background-color: #75d7cc;
}


.blueborder {
margin-top: 0;
margin-bottom: 10px;
border: 2px solid #425893;
padding: 10px 30px;
font-size: 23px;
font-weight: 400;
font-family: 'Source Sans Pro',sans-serif;
color: #425893;
transition: all 0.2s ease;
display: inline-block;
}

.blueborder:hover {
color: #ffffff;
background-color: #425893;
}

.boxed .rouge {
font-size: 18px;
}

button[type=submit], .btn-red, .red-btn, .rouge {
margin-top: 0;
background-color: #d91f2f;
border: 0px solid #d91f2f;
padding: 10px 30px;
font-size: 23px;
font-weight: 400;
font-family: 'Source Sans Pro',sans-serif;
color: #ffffff;
display: inline-block;
}
.btn-red, .red-btn, .rouge {
margin-top:20px;
position:relative;
}
.btn-red:hover, .red-btn:hover, .rouge:hover {
color: #ffffff;
background-color: #be1a28;
}

.btn-red:visited, .red-btn:visited, .rouge:visited {
color: #ffffff;
}
.btn-red:focus, .red-btn:focus, .rouge:focus {
color: #ffffff;
}

.dataShowMore {
margin-top: 0;
border: 2px solid #75d7cc;
padding: 10px 30px;
font-size: 23px;
font-weight: 400;
font-family: 'Source Sans Pro',sans-serif;
color: #425893;
transition: all 0.2s ease;
}

.dataShowMore:visited {

}

.dataShowMore:hover {
color: #ffffff;
background-color: #75d7cc;
}

.dataShowMore::before,
.dataShowMore::after {
background-image: url('/media/website_designs/6/img/arrow2.png');
}

div.formRow {
/*background: none; font-size: 1.25em; color:#425893;*/
font-size: 1.25em;
color: #425893;
margin-bottom: 5px;
background-color: #e9f6f3;
padding: 10px;
border-radius: 5px;
}



/* ___________________________________ magins & paddings ___________________________________ */


.margin-top20 {
margin-top: 20px!important;
}

.margin-top40 {
margin-top: 40px!important;
}

.margin-bottom20 {
margin-bottom: 20px!important;
}

.margin-bottom40 {
margin-bottom: 40px;
}

.margin-bottom60 {
margin-bottom: 60px;
}

.margin-bottom80 {
margin-bottom: 80px;
}


.margin-top-bottom40 {
margin-top: 40px;
margin-bottom: 40px;
}

.inline {
display: inline-block;
}

.padding-top120 {
padding-top:120px;
}


/* ___________________________________ flex layout ___________________________________ */

.flexheight {
display: flex; /* or inline-flex */
flex-direction:column;
justify-content: space-between;
}

/* ___________________________________ Content ___________________________________ */

.fullheight {
min-height: 100%;
}

.fullheightGreen {
background: rgb(255,234,253);
background: linear-gradient(129deg, rgba(255,234,253,1) 0%, rgba(206,249,245,1) 100%);
min-height: 100%;
}
.fullheightBlue {
background-color: blue;
min-height: 100%;
}
.centered {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
}
.bluediv {
width:200px;
background-color: blue;
padding:20px;
margin-left:10px;
}

.socialnet {
width: 40px;
height: 40px;
background-color: #333333;
color: #eff7f1;
padding: 9px;
margin:0 10px 10px 0;
display:inline-block;
box-sizing: border-box;
}

.offset {
margin-left:-10px;
}

/* ___________________________________ Bootstrap added ___________________________________ */


.p-3 {
padding: 1rem!important;
}

.mb-5, .my-5 {
margin-bottom: 3rem!important;
}

.shadow-lg {
box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
}

.position-absolute {
position: absolute!important;
}

.bg-white {
background-color:white;
}

.rounded {
border-radius: .25rem!important;
}

/* ___________________________________ Flexisel Our partner slider ___________________________________ */

.nbs-flexisel-inner {
background:none;
border:none;
}
.nbs-flexisel-nav-left, .nbs-flexisel-nav-right {
padding: 2px 10px 4px 10px;
background: rgba(66,88,147,1);
}


/* ___________________________________ Insta Widget ___________________________________ */

#rudr_instafeed{
list-style:none
}
#rudr_instafeed li{
float:left;
width:200px;
height:200px;
margin:10px
}
#rudr_instafeed li img{
max-width:100%;
max-height:100%;
}

/* ___________________________________ RESPONSIVE BREAKPOINT STYLES ___________________________________ */


@media screen and (max-width:991px) {
#featured_rotator h1 {
font-size:40px;
}
button[type=submit], .btn-red, .red-btn, .rouge, .blueborder, .turquoise, .turquoiseborder, .turquoiseborderwhite {
font-size:16px;
padding: 6px 21px;
}
.rightMenu > * {
color: #333;
}
.logoSmallContainer {
width: 90px;
}
.s8-navigationPrimary {
display:none;
}
}
@media screen and (max-width: 767px) {
dialogbox {
width:80%!important;
}
#featured_rotator img , .cover, .maskBottom, .maskTop {
height: 600px;
}
}
Php Source:

															

														
Mobile Function:
none
none
Mobile Value:

															

														
Google Analytics Id:

															

														
Ajax Navigation: