php js css php js css

Changes

Changes to Design: Wave - Monsieur Graphic template

34740
Today 6:07am
Vendeville, Mathieu
Modified design
34742
Today 6:07am
Vendeville, Mathieu
Modified design
Html:
Id:
7
7
Type:
web
web
Is Archived:
0
0
Title:
Wave - Monsieur Graphic template
Wave - Monsieur Graphic template
Css:
/*  ___________________________________ Basics  ___________________________________ */

html, body {
height: 100%;
margin: 0;
}
.fullContainer {
min-height: 100%;
}

@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%;
}

.footer {
min-height: 420px;
margin-top: -420px;
}

.footer a {
color:#333;
}

.footer hr {
border: 1px solid white;
}

.contentRegion {
padding-bottom: 450px;
}

.breadcrumbs a{
color:#b7b7b7;
}

.icon-post70 {
width: 60%;
margin: auto;
}

.postNav {
margin-bottom: 30px;
}


/* ___________________________________ Fonts ___________________________________ */

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

/*text-transform: uppercase;*/
}

.h1Style {
position: absolute;
top:34px;
left: 0;
width: 185px;
height: 26px;
z-index: -1;
-ms-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
transform: rotate(-21deg);
background-color: #3bdfdf;
opacity:0.3;
}

#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, .mainContent li {
font-weight: 300;
font-size: 20px;
margin-bottom: 20px;
line-height: 22px;
}

big {
font-family: 'louis_george_cafebold';
font-size: 28px;
line-height: 32px;
}


/* ___________________________________ 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;
top: 0;
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: 13px 18px;
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;
}

/* ___________________________________ Mobile Menu ___________________________________ */


div.navigationMobileOverlay {
position: absolute;
-webkit-backface-visibility: hidden;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: #000;
opacity: 0.4;
-webkit-overflow-scrolling: touch;
overflow-y: auto;
z-index: 20;
}

ul.navigationMobile, ul.navigationMobile ul {
list-style: none;
margin: 0;
padding: 0;
}

.navigationMobile li a {
display: block;
padding: 17px 4px 17px 8px;
border-bottom: 1px solid #CFF4F4;
text-align:center;
font-size: 17px;
color:#333;
}


/* ___________________________________ 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:-1px;
background: url('/media/website_designs/7/img/maskbottomcultural.png') no-repeat right bottom;
background-size: 110%;
}

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

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

/* ___________________________________ Bg ___________________________________ */

.yellow-bg{
background-color:#fff9c5;
position:relative;
}

.pink-bg {
background-color:#fdeaea;
position:relative;
}

.imgKids-bg{
background: url('/media/website_designs/7/img/content/children.jpg') no-repeat center center;
position:relative;
height:400px;
background-size: cover;
}

.imgteens-bg{
background: url('/media/website_designs/7/img/content/teensbanner3.jpg') no-repeat center center;
position:relative;
height:400px;
background-size: cover;
}

.imgCorp-bg {
background: url('/media/website_designs/7/img/content/corporatebanner.jpg') no-repeat center center;
position:relative;
height:400px;
background-size: cover;
}

.imgCorp2-bg {
background: url('/media/website_designs/7/img/content/corporatebanner2.jpg') no-repeat center center;
position:relative;
height:400px;
background-size: cover;
}

.imgPrivate-bg {
background: url('/media/website_designs/7/img/content/privatebanner.jpg') no-repeat center center;
position:relative;
height:400px;
background-size: cover;
}
.imgWork-bg {
background: url('/media/website_designs/7/img/content/workshopbanner.jpg') no-repeat center center;
position:relative;
height:400px;
background-size: cover;
}

.imgAdults-bg {
background: url('/media/website_designs/7/img/content/home-test.jpg') no-repeat center center;
position:relative;
height:400px;
background-size: cover;
}

.imgAdults2-bg {
background: url('/media/website_designs/7/img/content/girl-learn-french.jpg') no-repeat center center;
position:relative;
height:400px;
background-size: cover;
}

.imgLF-bg {
background: url('/media/website_designs/7/img/content/paris2.jpg') no-repeat center center;
position:relative;
height:400px;
background-size: cover;
}

.imgExam-bg {
background: url('/media/website_designs/7/img/content/exambanner.jpg') no-repeat center center;
position:relative;
height:400px;
background-size: cover;
}

.imgExam2-bg {
background: url('/media/website_designs/7/img/content/exambanner2.jpg') no-repeat center center;
position:relative;
height:400px;
background-size: cover;
}

.imgLibrary-bg {
background: url('/media/website_designs/7/img/content/librarybanner.jpg') no-repeat center center;
position:relative;
height:400px;
background-size: cover;
}

.imgLibrary2-bg {
background: url('/media/website_designs/7/img/content/culturethequebanner2.jpg') no-repeat center center;
position:relative;
height:400px;
background-size: cover;
}

.imgParoles-bg {
background: url('/media/website_designs/7/img/content/parolesbanner.jpg') no-repeat center center;
position:relative;
height:400px;
background-size: cover;
}

.fancy-right {
width:410px;
height:600px;
top:0px;
right:0px;
background: url('/media/website_designs/7/img/content/fancy-bg.png') no-repeat left top;
background-size: 410px;
}
.fancy-left {
width:410px;
height:600px;
top:0px;
left:0px;
background: url('/media/website_designs/7/img/content/fancy-bg.png') no-repeat right top;
background-size: 410px;
}

/* ___________________________________ 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 img {
width:100%;
height:250px;
object-fit: cover;
}

.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;
}


.boxedPubli {
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;
text-align:center;
}

.boxedPubli img {
width:100%;
height:350px;
object-fit: cover;
}

.boxedPubli p {
margin: 20px 20px 10px 20px;
}

.LibIcon {
width: 60%;
height: 271px;
object-fit: cover;
}

.whiteBorder td {
border: 2px solid white;
}

/* ___________________________________ FORM STYLES + Buttons ___________________________________ */

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

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

/* ___________________________________ Pop ups ___________________________________ */

#search_popup {
background: #C6F5F5 url('/media/website_designs/7/img/content/fancy-bg.png') no-repeat right top;
background-size: 410px;
}

#search_popup input,
#search_popup textarea {
padding: 15px 20px;
font-size: 20px;
font-family: 'Source Sans Pro', sans-serif;
color:#333;
border:none;
}

#phone_popup {
background: #C6F5F5 url('/media/website_designs/7/img/content/fancy-bg.png') no-repeat right top;
background-size: 410px;
}

#phone_popup i {
color: white;
}

#login_popup {
background: #C6F5F5 url('/media/website_designs/7/img/content/fancy-bg.png') no-repeat 120% 70%;
background-size: 410px;
}

/* ___________________________________Buttons ___________________________________ */

.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: #333;
transition: all 0.2s ease;
}

.dataShowMore:visited {

}

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

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

/* ___________________________________ 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;
}
.padding30 {
padding-top:30px;
padding-bottom:30px;
}
.padding80 {
padding-top:80px;
padding-bottom:80px;
}
.margin-top-bottom40 {
margin-top: 40px;
margin-bottom: 40px;
}

.inline {
display: inline-block;
}

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

.padding-bottom15 {
padding-bottom:15px;
}


/* ___________________________________ 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;
}

.navIcons {

}

.TextIcon {
background-color:white;
display: inline-block;
padding-left:20px;
padding-right:20px;
text-align: center;
transition: all 0.2s ease;
}

a .navIcons {
color:#425893;
}

a .navIcons:hover .TextIcon{
background-color:#425893;
color:white;
}

/* ___________________________________ 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;
}

.position-relative {
position: relative;
}

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

.rounded {
border-radius: .25rem!important;
}
.padding-0{
padding-right: 0px;
padding-left: 0px;
}

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}

.col-xs-5ths {
width: 20%;
float: left;
}

@media (min-width: 768px) {
.col-sm-5ths {
width: 20%;
float: left;
}
}

@media (min-width: 992px) {
.col-md-5ths {
width: 20%;
float: left;
}
}

@media (min-width: 1200px) {
.col-lg-5ths {
width: 20%;
float: left;
}
}

/* ___________________________________ Flexisel Our partner slider ___________________________________ */

.nbs-flexisel-inner {
background:none;
border:none;
}

.nbs-flexisel-inner img {
width:100%;
height: 75px;
object-fit:contain;
}

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


/* ___________________________________ Insta Widget ___________________________________ */

.image-wrapper .image-box .figure{
width: 20%!important;
border-style: dotted solid;
}

.insta a img{
border-style: dotted solid!important;
}

/* ___________________________________ 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;
}
.fancy-right, .fancy-left {
width:210px;
}
#login_popup {
background: #C6F5F5 url(/media/website_designs/7/img/content/fancy-bg.png) no-repeat 13% 270%;
background-size: 410px;
}
}
/*  ___________________________________ Basics  ___________________________________ */

html, body {
height: 100%;
margin: 0;
}
.fullContainer {
min-height: 100%;
}

@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%;
}

.footer {
min-height: 420px;
margin-top: -420px;
}

.footer a {
color:#333;
}

.footer hr {
border: 1px solid white;
}

.contentRegion {
padding-bottom: 450px;
}

.breadcrumbs a{
color:#b7b7b7;
}

.icon-post70 {
width: 60%;
margin: auto;
}

.postNav {
margin-bottom: 30px;
}


/* ___________________________________ Fonts ___________________________________ */

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

/*text-transform: uppercase;*/
}

.h1Style {
position: absolute;
top:34px;
left: 0;
width: 185px;
height: 26px;
z-index: -1;
-ms-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
transform: rotate(-21deg);
background-color: #3bdfdf;
opacity:0.3;
}

#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, .mainContent li {
font-weight: 300;
font-size: 20px;
margin-bottom: 20px;
line-height: 22px;
}

big {
font-family: 'louis_george_cafebold';
font-size: 28px;
line-height: 32px;
}


/* ___________________________________ 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;
top: 0;
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: 13px 18px;
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;
}

/* ___________________________________ Mobile Menu ___________________________________ */


div.navigationMobileOverlay {
position: absolute;
-webkit-backface-visibility: hidden;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: #000;
opacity: 0.4;
-webkit-overflow-scrolling: touch;
overflow-y: auto;
z-index: 20;
}

ul.navigationMobile, ul.navigationMobile ul {
list-style: none;
margin: 0;
padding: 0;
}

.navigationMobile li a {
display: block;
padding: 17px 4px 17px 8px;
border-bottom: 1px solid #CFF4F4;
text-align:center;
font-size: 17px;
color:#333;
}


/* ___________________________________ 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:-1px;
background: url('/media/website_designs/7/img/maskbottomcultural.png') no-repeat right bottom;
background-size: 110%;
}

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

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

/* ___________________________________ Bg ___________________________________ */

.yellow-bg{
background-color:#fff9c5;
position:relative;
}

.pink-bg {
background-color:#fdeaea;
position:relative;
}

.imgKids-bg{
background: url('/media/website_designs/7/img/content/children.jpg') no-repeat center center;
position:relative;
height:400px;
background-size: cover;
}

.imgteens-bg{
background: url('/media/website_designs/7/img/content/teensbanner3.jpg') no-repeat center center;
position:relative;
height:400px;
background-size: cover;
}

.imgCorp-bg {
background: url('/media/website_designs/7/img/content/corporatebanner.jpg') no-repeat center center;
position:relative;
height:400px;
background-size: cover;
}

.imgCorp2-bg {
background: url('/media/website_designs/7/img/content/corporatebanner2.jpg') no-repeat center center;
position:relative;
height:400px;
background-size: cover;
}

.imgPrivate-bg {
background: url('/media/website_designs/7/img/content/privatebanner.jpg') no-repeat center center;
position:relative;
height:400px;
background-size: cover;
}
.imgWork-bg {
background: url('/media/website_designs/7/img/content/workshopbanner.jpg') no-repeat center center;
position:relative;
height:400px;
background-size: cover;
}

.imgAdults-bg {
background: url('/media/website_designs/7/img/content/home-test.jpg') no-repeat center center;
position:relative;
height:400px;
background-size: cover;
}

.imgAdults2-bg {
background: url('/media/website_designs/7/img/content/girl-learn-french.jpg') no-repeat center center;
position:relative;
height:400px;
background-size: cover;
}

.imgLF-bg {
background: url('/media/website_designs/7/img/content/paris2.jpg') no-repeat center center;
position:relative;
height:400px;
background-size: cover;
}

.imgExam-bg {
background: url('/media/website_designs/7/img/content/exambanner.jpg') no-repeat center center;
position:relative;
height:400px;
background-size: cover;
}

.imgExam2-bg {
background: url('/media/website_designs/7/img/content/exambanner2.jpg') no-repeat center center;
position:relative;
height:400px;
background-size: cover;
}

.imgLibrary-bg {
background: url('/media/website_designs/7/img/content/librarybanner.jpg') no-repeat center center;
position:relative;
height:400px;
background-size: cover;
}

.imgLibrary2-bg {
background: url('/media/website_designs/7/img/content/culturethequebanner2.jpg') no-repeat center center;
position:relative;
height:400px;
background-size: cover;
}

.imgParoles-bg {
background: url('/media/website_designs/7/img/content/parolesbanner.jpg') no-repeat center center;
position:relative;
height:400px;
background-size: cover;
}

.fancy-right {
width:410px;
height:600px;
top:0px;
right:0px;
background: url('/media/website_designs/7/img/content/fancy-bg.png') no-repeat left top;
background-size: 410px;
}
.fancy-left {
width:410px;
height:600px;
top:0px;
left:0px;
background: url('/media/website_designs/7/img/content/fancy-bg.png') no-repeat right top;
background-size: 410px;
}

/* ___________________________________ 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 img {
width:100%;
height:250px;
object-fit: cover;
}

.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;
}


.boxedPubli {
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;
text-align:center;
}

.boxedPubli img {
width:100%;
height:350px;
object-fit: cover;
}

.boxedPubli p {
margin: 20px 20px 10px 20px;
}

.LibIcon {
width: 60%;
height: 271px;
object-fit: cover;
}

.whiteBorder td {
border: 2px solid white;
}

/* ___________________________________ FORM STYLES + Buttons ___________________________________ */

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

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

/* ___________________________________ Pop ups ___________________________________ */

#search_popup {
background: #C6F5F5 url('/media/website_designs/7/img/content/fancy-bg.png') no-repeat right top;
background-size: 410px;
}

#search_popup input,
#search_popup textarea {
padding: 15px 20px;
font-size: 20px;
font-family: 'Source Sans Pro', sans-serif;
color:#333;
border:none;
}

#phone_popup {
background: #C6F5F5 url('/media/website_designs/7/img/content/fancy-bg.png') no-repeat right top;
background-size: 410px;
}

#phone_popup i {
color: white;
}

#login_popup {
background: #C6F5F5 url('/media/website_designs/7/img/content/fancy-bg.png') no-repeat 120% 70%;
background-size: 410px;
}

/* ___________________________________Buttons ___________________________________ */

.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: #333;
transition: all 0.2s ease;
}

.dataShowMore:visited {

}

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

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

/* ___________________________________ 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;
}
.padding30 {
padding-top:30px;
padding-bottom:30px;
}
.padding80 {
padding-top:80px;
padding-bottom:80px;
}
.margin-top-bottom40 {
margin-top: 40px;
margin-bottom: 40px;
}

.inline {
display: inline-block;
}

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

.padding-bottom15 {
padding-bottom:15px;
}


/* ___________________________________ 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;
}

.navIcons {

}

.TextIcon {
background-color:white;
display: inline-block;
padding-left:20px;
padding-right:20px;
text-align: center;
transition: all 0.2s ease;
}

a .navIcons {
color:#425893;
}

a .navIcons:hover .TextIcon{
background-color:#425893;
color:white;
}

/* ___________________________________ 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;
}

.position-relative {
position: relative;
}

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

.rounded {
border-radius: .25rem!important;
}
.padding-0{
padding-right: 0px;
padding-left: 0px;
}

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}

.col-xs-5ths {
width: 20%;
float: left;
}

@media (min-width: 768px) {
.col-sm-5ths {
width: 20%;
float: left;
}
}

@media (min-width: 992px) {
.col-md-5ths {
width: 20%;
float: left;
}
}

@media (min-width: 1200px) {
.col-lg-5ths {
width: 20%;
float: left;
}
}

/* ___________________________________ Flexisel Our partner slider ___________________________________ */

.nbs-flexisel-inner {
background:none;
border:none;
}

.nbs-flexisel-inner img {
width:100%;
height: 75px;
object-fit:contain;
}

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


/* ___________________________________ Insta Widget ___________________________________ */

.image-wrapper .image-box .figure{
width: 20%!important;
border-style: dotted solid;
}

.insta a img{
border-style: dotted solid!important;
}

/* ___________________________________ 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;
}
.fancy-right, .fancy-left {
width:210px;
}
#login_popup {
background: #C6F5F5 url(/media/website_designs/7/img/content/fancy-bg.png) no-repeat 13% 270%;
background-size: 410px;
}
}
Js:
jQuery('.commerceProductsOrderBox').insertBefore('div.mainContent > h1');

if (!$( "h1" ).hasClass( "noBlue" )){
$( "h1" ).append( "<div class='h1Style'></div>" );
}
jQuery('.commerceProductsOrderBox').insertBefore('div.mainContent > h1');

if (!$( "h1" ).hasClass( "noBlue" )){
$( "h1" ).append( "<div class='h1Style'></div>" );
}
Php Source:
<?php function determineHeaderImages() { 
$strPage = \Components\Website\Pages::currentPageId();
while($strPage) {
if(file_exists('media/website_pages' . $strPage . 'header-images/')) {
$arrFiles = \Components\Website\Media::getChildren('website_pages' . $strPage . 'header-images/');
if(count($arrFiles)) { return $arrFiles;
}}
$strPage = \Framework\Components\TextualIds::getParent($strPage); } return array();
}

function youMayAlsoLikeGeneral() {
$strCurrentPageId = \Components\Website\Pages::currentPageId();
$arrNoSideNavPages = array();
$arrNoSideNavPages[] = '/community/profile/';
$arrNoSideNavPages[] = '/placement-tests/';
$arrNoSideNavPages[] = '/af/';
$arrNoSideNavPages[] = '/commerce/';
$arrNoSideNavPages[] = '/products/';
$arrNoSideNavPages[] = '/order-a-course/';
foreach($arrNoSideNavPages as $strPageId) {
if(strpos($strCurrentPageId, $strPageId) === 0) {
return false; } } return true; }
?>
<?php function determineHeaderImages() { 
$strPage = \Components\Website\Pages::currentPageId();
while($strPage) {
if(file_exists('media/website_pages' . $strPage . 'header-images/')) {
$arrFiles = \Components\Website\Media::getChildren('website_pages' . $strPage . 'header-images/');
if(count($arrFiles)) { return $arrFiles;
}}
$strPage = \Framework\Components\TextualIds::getParent($strPage); } return array();
}

function youMayAlsoLikeGeneral() {
$strCurrentPageId = \Components\Website\Pages::currentPageId();
$arrNoSideNavPages = array();
$arrNoSideNavPages[] = '/community/profile/';
$arrNoSideNavPages[] = '/placement-tests/';
$arrNoSideNavPages[] = '/af/';
$arrNoSideNavPages[] = '/commerce/';
$arrNoSideNavPages[] = '/products/';
$arrNoSideNavPages[] = '/order-a-course/';
foreach($arrNoSideNavPages as $strPageId) {
if(strpos($strCurrentPageId, $strPageId) === 0) {
return false; } } return true; }
?>
Mobile Function:
none
none
Mobile Value:

															

														
Google Analytics Id:

															

														
Ajax Navigation: