/* Theme Name: FEGEMS Theme URI: https://www.stamina.ch Description: FEGEMS Custom theme Author: Stamina SA – mickael houdebert Theme URI: https://www.stamina.ch Version: 1.04 License: no Licencing possibility Theme URI: https://www.stamina.ch Tags: Custom theme */ /* .,/(####(*. .##/,. ./(#, *#* /%%#(/,.., *#* #//(((%%/ .,,... ,/(((*,%( .(#/. /##%&&%%* .,*, *#&%%####,(&( .(##,,####. *%#./%#. /(. ##%%/%#/%&&%&# *#%/ (%%# /%#. *%/ (#. (#/#%%( .%@%(&/ ,#%( /%%* ,%%( .%/ *#. %# .&/%.*%%/&#. (%/ (%%.*(%##%, ,%* (#. ##, *%(#%#.*#, /%* ,#####* (#( *%( /%%/..... ,#* ,(%* .(%#, #%%#. /&&, .*(#((####* /(#%#* /%(. .*. /%#, #%( /, (#/ *%%. .** ..(#, .%%, ,,... /(/* .%%* ., .**,,. *#. .,.. *, .,*,/, ., .*. .*,/(, .**#. .(%/ .(#. /(* .#* ,( .#, /,. ./ /* * . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* Global from bbxdesign */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0;} table{ border-collapse:collapse; border-spacing:0;} fieldset,img{ border:0;} address,caption,cite,code,dfn,var{ font-style:normal; font-weight:normal;} ol,ul{ list-style:none;} caption,th{ text-align:left;} h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal; line-height:normal;} q:before,q:after{ content:''; font-family:Georgia, "Times New Roman", Times, serif} abbr,acronym{ border:0;} body,button,input,select,textarea{ color:#333; font-family:Arial,Verdana,sans-serif; font-size:12px; line-height:16px;} a{ color:#0072bc; cursor:pointer; text-decoration:none;} a:visited{ color:#8e599f;} a:hover{ text-decoration:underline;} /* Segon from bbxdesign */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0;} table{ border-collapse:collapse; border-spacing:0;} fieldset,img{ border:0;} address,caption,cite,code,dfn,var{ font-style:normal; font-weight:normal;} ol,ul{ list-style:none;} caption,th{ text-align:left;} h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal;} q:before,q:after{ content:'';} abbr,acronym{ border:0;} body,button,input,select,textarea{ color:#333; font-family:Arial,Verdana,sans-serif; font-size:12px; line-height:16px;} /* Balises block */ .post-content h1{ } .post-content h2{ } .post-content h3{ } .post-content h4{ } .post-content h5{ } .post-content h6{ } .post-content p{ } .post-content ul{ } .post-content ol{ } .post-content blockquote{ } .post-content pre{ } .post-content address{ } .post-content address{ } /* Balises inline */ .post-content strong{ } .post-content em{ } .post-content acronym{ } .post-content code{ } .post-content del{ } .post-content ins{ } /* Classes des images */ .alignleft{ display:inline; float:left;} .aligncenter{ clear:both; display:block; margin-left:auto; margin-right:auto;} .alignright{ display:inline; float:right;} .size-auto{ } .size-medium{ } .size-large{ } .size-full{ } .wp-caption{ } /* Légende de l'image */ .wp-caption img{ } .gallery{ } .gallery .gallery-item{ } /* Global Content -------------------------------------------------------------- */ .RebrandTextBold { font-family: RebrandTextBold; }.EloquiaDisplayLight { font-family: EloquiaDisplayLight; }.EloquiaDisplayRegular { font-family: EloquiaDisplayRegular; }.EloquiaDisplayMedium { font-family: EloquiaDisplayMedium; }.EloquiaDisplaySemiBold { font-family: EloquiaDisplaySemiBold; } /* Global Content -------------------------------------------------------------- */ body{ height:100%;} html{-webkit-text-size-adjust: 100%;scroll-behavior: smooth;overflow-x: hidden; /* Hide horizontal scrollbar */ height: 100%;} a, a:visited, a:active, a:hover{outline:none; color:#000;} a:hover{ text-decoration:none; cursor:pointer;} /*::-moz-selection { color: white; background: black; padding: 2px 0; } ::selection { color: white; background: black;padding: 2px 0; } */ img, object, embed, video { width: 100%; height: auto; } strong{ font-weight:600;} .Size1{ font-size: 4em;} .Size1demi{ font-size: 3em;} .Size2{ font-size: 2.2em;} .Size3{ font-size: 1.5em; line-height: 1.1em;} .Size4{ font-size: 1.3em;} .Size5{ font-size: 1em;} .Bold{font-family: "EloquiaDisplaySemiBold";} .SizePlus{ font-size:1.15em; line-height: 1.2em;} @media screen and (max-width: 720px) { .Size1{ font-size: 3em;} .Size1demi{ font-size: 2em;} .Size2{ font-size: 2em;} .Size3{ font-size: 1.3em; line-height: 1.1em;} .Size4{ font-size: 1.1em;} } .Desktop{ display:block;} .Mobile{ display:none;} @media screen and (max-width: 900px) { .Desktop{ display:none;} .Mobile{ display:block;} } .Grey{ color:#707173;font-family: "RebrandTextBold";} .Purple{color:#7b66a6;} .Blue{ color:#0d1046;} .White{ color:#fff;} .Yellow{color:#f6a93f;} .Green{color:#4aad68;} .Pink{color:#ea6b87;} .GreyTwo{ color:#707173;} .TitlePink{color:#EA6B87; text-transform: uppercase; font-family: "EloquiaDisplayRegular"; margin-bottom:0; padding-bottom:0; letter-spacing: 0.1em;} .TitlePink.Small{ font-size:1.2em;color:#EA6B87; margin-bottom:35px;} .TitlePink.Small.Space{ margin-bottom: 15px; margin-top: 35px;} .TitlePink.Small.NoMargin{ margin:0; margin-bottom: 5px;} /* KeyPoint -------------------------------------------------------------- */ .Keypoint{ width: 100%; display: inline-block; margin-bottom: 25px; margin-top: 25px;} .KeypointNumber, .KeypointText{ float: left;} .KeypointNumber{ width: 20%; border-radius:50%; width: 50px; height: 40px; text-align: center; padding-top: 10px;} .KeypointNumber.Pink{ border: 7px solid #f1adbb; } .KeypointNumber.Yellow{ border: 7px solid #f9cf9a; } .KeypointNumber.Green{ border: 7px solid #9cd0ac; } .KeypointNumber.Purple{ border: 7px solid #b4aaca; } .KeypointNumber span{ font-size: 1.6em;font-family: "RebrandTextBold"; color:#0d1046;} .KeypointText{ width: 70%; padding-left:25px;font-family: "RebrandTextBold"; padding-top:17px;} .KeypointNumber.Activities{ display: inline-block!important; float: none;} .ColSingle .KeyNumbersBloc{ padding-left:105px;} .ColSingle .KeyNumbersBloc.First{ position: relative;} .KeyNumbersBloc.Second{ position: relative;} .ImgKeyNumber.One{ position:absolute; z-index: -10;left: 50%;width: 550px;} .ImgKeyNumber.Second{ position: absolute; z-index: -10;width: 350px; left: 30%; top: 150px;} .ImgKeyNumber.Third{ position:absolute; z-index: -10;left: 90%; top:70%;width: 350px;} .ImgKeyNumber.Four{ position: absolute;z-index: -10; width: 350px; left: 30%; top: 150px;} .ChiffreClefs{} /* Facts -------------------------------------------------------------- */ .Facts{ width: 100%; display: inline-block; margin-bottom: 25px; /*margin-bottom: 25px; margin-top: 30px;*/} .FactNumber,.FactTitle{float: left;} .FactNumber{font-family: "RebrandTextBold"; height: 45px; margin-right: 10px;} .FactTitle{ vertical-align: bottom; /*height: 48px;*/ width: 100%; line-height: 1.2em; } .FactTitle span{ } .MarginBottom{ margin-bottom:35px;} .Spacer{ width: 100%; height: 32px;} .SpacerNumberTitle{height: 35px; width: 100; float: left;} .Small{ color:#7B66A6;} .Logos span{ display:inline-block; max-width: 120px; margin-right: 15px;} .Facts.Child{ margin-left: 10%; width: 90%;} .Facts.Child .Size1{ font-size:2em;} .Facts.Child .Spacer{height: 12px;} @media screen and (max-width: 720px) { .ColSingle .KeyNumbersBloc{ padding-left:0px;} .Spacer{ height:22px;} .Facts{ margin-bottom:15px;} .ImgKeyNumber.One{ left:30%;} .ImgKeyNumber.Third{ left:120%;} } /*#ThierryApotheloz, #NicolasWalder, #FlorianErard{ padding-top:35px;}*/ /* Accordion -------------------------------------------------------------- */ #accordion, #accordion2, #accordion3, #accordion4{ display: inline-block; width: 100%; margin: 0 0 35px 0;} /* Messages -------------------------------------------------------------- */ .Messages{ text-align:right!important;} .RoundImage.Messages{ margin-left:19%;} .RoundImage.Home{ margin-left:20%;} @media screen and (max-width: 900px) { .RoundImage.Home{ margin-left:0%;} .RoundImage.Messages{ margin:0 auto;} } .MenuMessages{ margin: 0!important; padding: 0!important; margin-top:25px!important;} .MenuMessages li { display: inline-block; line-height: 2em;} .MenuMessages li a{ background-color:#eeeeef; padding: 10px 40px; border-radius: 25px; margin-right: 15px; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -ms-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; } .MenuMessages li a:hover{ background-color:#0D1046; color:#fff;} .RoundImageLegend{ text-align: center; width: 80%;margin-left:19%;} .RoundImageLegend .Name{ margin-bottom: 15px; margin-top: 15px;} .Name{ font-size: 1.5em; font-family: "RebrandTextBold";} .Role{} .Rebrand{ font-family: "RebrandTextBold"; font-size: 1.1em;} @media screen and (max-width: 900px) { .RoundImage.Messages, .RoundImageLegend{margin:0 auto;} } @media screen and (max-width: 720px) { .MenuMessages{ text-align:left;} .MenuMessages li{ width: 100%; display: inline-block; margin-bottom: 15px;} .RoundImage.Messages, .RoundImageLegend{margin-left:10%;} } button{ font-size:2.5em; background-color:transparent; color:#000; padding: 25px 70px;} .post-content ul{ margin-left:20px; margin-bottom: 1em;} .post-content ul li{ list-style-type:disc;} body{ height: 100%; font-family:"EloquiaDisplayRegular"; color:#0d1046; font-size: 1.1em; line-height: 1.3em; font-style: normal; /*background-color: #F4F4F4;*/overflow-x: hidden; /* Hide horizontal scrollbar */ } body.blog{background-color:#fafafa;} body.blog .Banner{ display: none;} body.blog #Start{ padding-top: 70px;} body.blog, body.single{} .HeaderWrap{ width: 100%;} .Wrapper{ } .Wrapper.AlignLeft{ float:left;} .Wrapper.AlignCenter{ margin:0 auto;} .Wrapper.AlignRight{ float:right;} .FullHeight{ min-height:100%; position: relative; } /*.single .post-content p{color:#421712;}*/ .Section{ width:auto; max-width: 1180px; margin-bottom: 25px;margin:0 auto; position: relative; z-index: 10; } .RoundImage{ width: 80%; /*margin:0 auto;*/} .RoundImage img{border-radius: 50%;} @media (max-width: 768px){ .Wrapper{ padding-top:0px; } } .Section.Error{ margin-top: 18vh; /*height: 60vh;*/ text-align: center;} .Section.Site{ padding-top:15px; } .Section.Full{ width:100%;margin:0 auto; max-width: 100%; /*margin-bottom: 150px;*/ position: relative; /*text-align: center; */display: inline-block; z-index: 999; } .Section.Sixty{ width: 70%; } @media (max-width: 650px){ .Section.Sixty{ width: 100%; } } .Section.Sixty.Full{ width: 100%;} .Section.Sixty.Left{float: left; margin:0 auto;} .Section.Thirty{ width: 28%; } .Section.Thirty.Right{ float:right; } .page-template-About .Section.Sixty.Left{ float: none; display: inline-block; background-color:pink;} .page-template-About .Section.Thirty.Right{float: none;display: inline-block; background-color:yellow; height: 100%; vertical-align:bottom;} /* .FullHeight .Cols { position: relative;} .FullHeight .Cols .Col{ position: absolute; bottom: 0;}*/ .Section.Full.Bottom{ padding-top:35px;} .Section.Full.Head{ /*-webkit-box-shadow: 0px -4px 15px 5px rgba(0,0,0,0.72);*/ /*box-shadow: 0px -4px 15px 5px rgba(0,0,0,0.72); */z-index: 9999; /*position: fixed; top: 0;*/ } /*.Section.Full.Head.Invert{background-color:#C3A572;}*/ .Bloc{ display:inline-block; width: 100%;} .Bloc.Bottom{ vertical-align:bottom;} .page-template-About .Module .Section .Col img{ vertical-align:bottom;} .Page{ /*padding-top: 75px;*/} .Section.Half{ width: 50%;} .Section h2{ /*margin-top: 25px;*/} @media screen and (max-width: 1480px) { /*.Wrapper{ width:90%; /*padding:0 5%;* /}*/ .Section{ width:90%; /*padding:0 5%;*/} #Header { width:90%!important;/* background-color: red;*/} } @media screen and (max-width: 900px) { /*.Section.Full { margin-bottom:25px;}*/ } .tel{ max-width:100px; margin:0 auto; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -ms-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; filter: opacity(60%); -webkit-filter: opacity(60%); } .tel:hover{ filter: opacity(100%); -webkit-filter: opacity(100%); } .Copy{ display: inline-block;width:100%; text-align: center; font-size:0.8em; padding: 20px 0 10px 0;} .Copy a, .Copy a:visited{ color:#000; opacity: .4;} .Copy a:hover, .Copy a:focus{ text-decoration: underline; opacity: .7;} h1, h2, h3, h4, h5, h6{ font-family: "RebrandTextBold"; font-size: 2.2em; line-height: 1em; margin-bottom: 15px; } h3{ font-size:1.5em;padding: 0px 0 15px 0; line-height: 1em; } h4{ font-family: Times, "Times New Roman", "serif";font-size:1.7em; font-weight: bold; margin-bottom: 25px; } .blog h2{ padding: 15px 0 15px 0; /*font-weight: bold;*/} .page h2{ padding: 15px 0 15px 0; /*font-weight: bold;*/} .CentredText{ text-align: center!important;} p{ margin-bottom:1em;} .post-content{/*padding-bottom:4%;*/} #Map .Map{ height:500px;} .ActionButtonContainer{} .ActionButton{ background-color:#000; color: white; padding: .75rem 2.5rem; border: none; cursor: pointer; border-radius: 25px; font-size: 1em; width: auto; float:left; margin-top: 15px; margin-bottom: 35px; transition: all .3s ease; opacity: 0.3; } .ActionButton a{ color: white;} .ActionButton:hover { opacity: 1; padding: .75rem 3.5rem; -webkit-filter: drop-shadow(3px 3px 3px #999); filter: drop-shadow(3px 3px 3px #999); } @media screen and (max-width: 900px) { .ActionButton{float:none; display: inline-block; } .ActionButtonContainer{ text-align: center;} } .Module{ padding:45px 0;} .Module.NoPaddingBottom, .Module.last{ padding-top:45px; padding-bottom:0;} .Section.NoPaddingBottom{padding-bottom: 0 !important;} .Section.NoPaddingTop{padding-top: 0 !important;} .Module.NoPaddingTop{padding-top: 0 !important;} .Module.Color{ background-color:#eeebea; /*padding-bottom: 145px;*/} .Module ul{ margin-left: 15px;} .Module ul li{ list-style-type: disc;} .Module:last-child{ padding-bottom:0;} .Wrapper .Module:last-child{ padding-bottom:0!important;} @media screen and (max-width: 900px) { .ImageCol{display: none;} .ImageCol.First{display: block;} .page h2{font-size:1.6em; } /*.FullTitle h2{font-size:3em; }*/ } @media screen and (max-width: 500px) { .Module{ padding:10px 0;} } #Start { position: relative; margin-top: -5px; } #Start .fade-in { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.5s ease-in-out; } #Start .fade-in.active { opacity: 1; } .fade-container { opacity: 0; transition: opacity 0.5s ease-in; } .fade-in { opacity: 1; } /* Header -------------------------------------------------------------- */ #Logo{ z-index:9999; float:left; width: 20%; min-width: 230px; text-align: left; margin-top:15px; margin-left: -37px; } #Logo img{ min-width: 75px; max-width: 257px; height:auto; padding: 0px;} #Logo.Centred{ width:100%; text-align: center; display: inline-block;} #Logo.Centred img{ min-width: 75px; max-width: 280px; height:auto; padding: 0px;} .Head{ text-align:center; } #Header{ width: 100%; position: relative; display: inline-block; margin: 0 auto; } #Header .Social{ margin-top: 40px; width: 20%; text-align: right} @media screen and (max-width: 1350px) { #Header .Social{ display: none;} #Logo{margin-left: -1%;} } @media screen and (max-width: 768px) { #Logo{ float:left;} #Logo img{ min-width: 50px; max-width: 100%; height:auto; padding: 0; padding-bottom: 5px;} } .SiteInfos{ width:100%; text-align:center; display: none;} /* SLider / Banner ***************************************************************************************************/ /**********************************************************************************************************************/ .Slider{ /*background-color:pink;*/ display:block; height:35px; width:100%; min-height:170px; } .HideButtun{ display:none;} /* banner home */ .Banner{ background-position: center center; display: flex; align-items: center; justify-content: center; background-repeat: no-repeat; /*background-color:aquamarine;*/ background-size: cover;height: 70vh; } .Section.Banner.full{ width: 100%;} .Banner.Home{ /*padding-top:10vh;*/ position: relative; /*width: 100%; max-width: 100%;*/ margin:0 auto;} .Banner.OverSlider{} .Shadowed{ text-shadow: 4px 4px 18px rgba(0, 0, 0, 0.7);} .Banner h1, .Banner h2{text-align: center; } .Banner h1{color:#fff; font-weight: 700;font-size:3em;} .Banner h2{color:#fff; font-size:1.2em;} .Banner img{ width: 100%; height: auto;} .BannerTitle{ width: 100%; height: auto; text-align: left; padding-top:10%; text-transform: uppercase; /*padding-top: calc(180px - 15px);*/ } .BannerTitle h1, .BannerTitle h4{ color:#164c44;} .BannerTitle h4{ font-size:1.7em; text-transform: none; text-align: center; color:#ff5519;} .BannerTitle.Video{ z-index: 9999; position: absolute;} .Banner{ position: relative; /*margin-top: 80px!important;*/} .Banner video{width: 100%; height: 100%; position: absolute; object-fit: cover; z-index: 0; } /*.BannerOpacity{ position: absolute; width: 100%; height: 100%; background-color:rgba(255, 255, 255, 0.6); opacity: 0.6; top:0; z-index: 9999}*/ /* background video */ video { object-fit: cover; position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .video-wrapper { width: 100%; height: 100%; position: relative; overflow: hidden; text-align: center; display: flex; align-items: center; justify-content: center; } /* banner home*/ /**********************************************************************************************************************/ /* Scroll Me /**********************************************************************************************************************/ .Scroll{ position:absolute; bottom: 155px; width: 100%;} @-webkit-keyframes ani-mouse { 0% { opacity: 1; top: 29%; } 15% { opacity: 1; top: 50%; } 50% { opacity: 0; top: 50%; } 100% { opacity: 0; top: 29%; } } @-moz-keyframes ani-mouse { 0% { opacity: 1; top: 29%; } 15% { opacity: 1; top: 50%; } 50% { opacity: 0; top: 50%; } 100% { opacity: 0; top: 29%; } } @keyframes ani-mouse { 0% { opacity: 1; top: 29%; } 15% { opacity: 1; top: 50%; } 50% { opacity: 0; top: 50%; } 100% { opacity: 0; top: 29%; } } .scroll-btn { display: block; position: absolute; left: 0; right: 0; text-align: center; text-shadow: 2px 2px 9px rgba(0, 0, 0, 1); } .scroll-btn > * { line-height: 18px; font-size: 13px; font-weight: normal; color: #7f8c8d; color: #ffffff; font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 2px; } .scroll-btn > *:hover, .scroll-btn > *:focus, .scroll-btn > *.active { color: #ffffff; } .scroll-btn > *:hover, .scroll-btn > *:focus, .scroll-btn > *:active, .scroll-btn > *.active { opacity: 0.8; filter: alpha(opacity=80); } .scroll-btn .mouse { position: relative; display: block; width: 35px; height: 55px; margin: 0 auto 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 3px solid white; border-radius: 23px; text-shadow: 2px 2px 9px rgba(0, 0, 0, 1); } .scroll-btn .mouse > * { position: absolute; display: block; top: 29%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: white; border-radius: 50%; -webkit-animation: ani-mouse 2.5s linear infinite; -moz-animation: ani-mouse 2.5s linear infinite; animation: ani-mouse 2.5s linear infinite; text-shadow: 2px 2px 9px rgba(0, 0, 0, 1); } /** Menu Lang *********************************************************************************************************/ /**********************************************************************************************************************/ .MenuLang{ position: absolute; color:#C3A572;text-transform: uppercase; margin-top:14px; font-size: 0.8em; right: 25px;} .MenuLang ul{} .MenuLang ul li{ display: inline;} .MenuLang ul li a{ padding: 5px; color:#C3A572;} .MenuLang ul li a:hover{ color:#fff;} .MenuLang ul li.select a{color:#fff;} #Head.Invert .MenuLang {color:#421712;position: absolute; text-transform: uppercase; margin-top:14px; font-size: 0.8em; right: 25px;} #Head.Invert .MenuLang ul li a{color:#421712;} #Head.Invert .MenuLang ul li a:hover, #Head.Invert .MenuLang ul li.select a{color:#fff;} @media screen and (max-width: 1350px) { .MenuLang{display:none;} } @media screen and (max-width: 900px) { .Banner{height: 450px; } } @media screen and (max-width: 780px) { .Banner{height: 350px; } #Logo{max-width: 255px;} } @media screen and (max-width: 570px) { .Banner{height: 250px; } #Logo{max-width: 255px;} } .ModuleTitle{ width: 100%;margin-bottom:45px; } .center{text-align:center;} /**********************************************************************************************************************/ /* Footer /**********************************************************************************************************************/ #Footer{ min-height: 200px; width: 100%; /*margin-top: 150px;*/ margin-top:-7px; color:#000;font-size:0.85em; /*background-color:#e8e8e8; background-image: url("images/fnd-footer.svg"); background-size: 100%; background-position: center center; background-size: 100%; transition: background-size 0.5s ease;*/ } /*#Footer:hover{background-size: 105%;}*/ #Footer{ margin-bottom:0;z-index: 10; position: relative; /*box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);*/ } #Footer .Section{ margin-bottom:0; padding-bottom: 0!important;} #Footer .Left{ float: left;} #Footer .Right{ float: right;} #Footer .Right div{ float: right; margin-left: 25px;} #Footer a{} #Footer strong{ font-weight: normal; color:#000;} #SiteMap{ width:100%; display: none;} #SiteMap h2{} #SiteMap ul{} #SiteMap ul li{ display:table-cell;} #SiteMap ul li a{ padding:0px 10px;} @media screen and (max-width: 921px) { #Footer{ position: relative;} #Footer .Left{} #Footer .Right{ float: left;} #Footer .Right div{ float: left; margin-left:0; margin-right: 25px;} #Footer .Right div.Website{margin-top:15px;} } @media screen and (max-width: 721px) { #Footer .Right div{ display: inline-block; width: 100%; margin-bottom: 25px;} } #Footer .Section.Bottom {} #Footer .Section.Bottom p, #Footer .Section.Bottom ul li a { line-height: 1.5em;} #Footer .Section.Bottom a{ /*color:red;*/} .LogoTypo{float:left; margin-top: 25px; margin-right: 10px;} .LogoTypo img{ width: 75px; height: auto;} /**********************************************************************************************************************/ /* Payment /**********************************************************************************************************************/ .Conditions{ margin-top: 10px; text-align: center;} .Conditions a{margin-bottom: 5px; display: inline-block;} .LogoPayment{} .LogoPayment ul{ text-align: center;} .LogoPayment ul li{ display: inline-block; margin: 0 4px;} .LogoPayment ul li img.letsencrypt{height:30px; width:auto;} .LogoPayment ul li img{height:20px; width:auto;} #Footer .LogoPayment{ /*float: left;*/ text-align: center;} #Footer .LogoPayment ul{ text-align: center;} #Footer .LogoPayment ul li{} #Footer .LogoPayment ul li img.letsencrypt{} #Footer .LogoPayment ul li img{} .Phone{ float:left;} .Phone img{ max-width: 40px;} .Contacts{ /*float: left; margin-right: 45px;*/} /* Contacts -------------------------------------------------------------- */ #Head{ /*position: fixed; height: 70px; top: 0;*/ width: 100%; transition: all .3s ease;/* background-color:#D1D1D1; box-shadow: 0 1px 25px rgba(0,0,0, .1);*/ z-index: 10; } #Head.hide { top: -70px; } /**********************************************************************************************************************/ /* CTA /**********************************************************************************************************************/ .CtaContainer{ text-align:center;} .CtaContainer.Left{ text-align:left;} .CTA { display: inline-block;margin: 0 3%; width: 94%; } .CTA.Left { display: inline-block;margin: 0 0%; width:100%; } .CTA a{ color: #000; width: 450px; display: inline-block;} .CTA a:hover{color: #000;} button { position: relative; display: inline-block; cursor: pointer; outline: none; border: 0; vertical-align: middle; text-decoration: none; background: transparent; padding: 0; font-size: inherit; font-family: inherit; } button.learn-more { width: 200px; height: auto; } button.learn-more .circle { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: relative; display: block; margin: 0; width: 3rem; height: 3rem; background: #282936; border-radius: 1.625rem; } button.learn-more .circle .icon { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: absolute; top: 0; bottom: 0; margin: auto; background: #fff; } button.learn-more .circle .icon.arrow { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); left: 0.625rem; width: 1.125rem; height: 0.125rem; background: none; } button.learn-more .circle .icon.arrow::before { position: absolute; content: ""; top: -0.25rem; right: 0.0625rem; width: 0.625rem; height: 0.625rem; border-top: 0.125rem solid #fff; border-right: 0.125rem solid #fff; transform: rotate(45deg); } button.learn-more .button-text { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0.75rem 0; margin: 0 2rem 0 4rem; color: #282936; font-weight: 700; line-height: 1.6; text-align: center; text-transform: uppercase; } button:hover .circle { width: 100%; } button:hover .circle .icon.arrow { background: #fff; transform: translate(1rem, 0); } button:hover .button-text { color: #fff; } /**********************************************************************************************************************/ /* Single page /**********************************************************************************************************************/ .PostDetail{ width:60%; margin:0 auto;} .PostDetail, .PostInfos{ margin-top:30px;} .PostDetail h4{ border-bottom: 1px solid #421712; margin-bottom:25px; } .PostInfos{ width: 25%;float: right;} .PostInfos .Title{border-bottom: 2px solid #421712; color:#421712; margin-bottom:25px; padding-top:22px;font-size:0.7em;letter-spacing: 0.2em;} .PostInfos .Description{color:#C3A572; text-transform: uppercase; font-size:0.7em; letter-spacing: 0.2em;} .PostNavigation{ display:inline-block; background-color:pink; width: 100%;} /* data speed -------------------------------------------------------------- */ .WrapBox { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; top: 0px; left: 0px; } .box { -webkit-box-flex: none; -moz-box-flex: none; box-flex: none; -webkit-flex: none; -moz-flex: none; -ms-flex: none; flex: none; height: 200px; width: 200px; text-align: center; font-size: 25px; will-change: transform; } /**********************************************************************************************************************/ /* Effects /**********************************************************************************************************************/ /* Text Over Image */ .parallax { background-size: cover; background-position: center; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .parallax-content { text-align: center; color: #fff; } /**********************************************************************************************************************/ /* Social /**********************************************************************************************************************/ .SocialCol{ width: 100%; display: inline-block;} .SocialCol .Social{ float:left;} .Social{ /*position: absolute; margin-left: 135px;*/ float: right; } .Social div{ display:inline-block; margin-right: 5px;} .Social div a{ opacity: 0.3; transition: opacity 0.3s; /* Transition should take 0.3s */ -webkit-transition: opacity 0.2s; /* Transition should take 0.3s */padding: 5px 5px!important; /*background-color:yellow;*/ } .Social div a i{ color:#000; font-size: 1.3em;} .Social div a:hover{ opacity: 1;} #Footer .Social { padding-top: 0px; margin-top:0; text-align: center; float: none; width: 100%; display: inline-block; } #Footer .Social a{ /*padding:15px!important;*/ } #Footer .Social a img{/*-webkit-filter: invert(1); filter: invert(1);*/} #Footer .SocialLink div {float: right;} #Footer .Col{ width:70%; display: inline-block} #Footer .Col.Social{ width:25%;;} @media screen and (max-width: 900px) { #Footer .ColThree.SocialLink{width:100%!important; margin:0!important} #Footer .Social div {float: none;} #Footer .ColThree.Footer, #Footer .SocialLink div{ text-align:left;} .Copy{ text-align:center!important; padding-right:0px!important; } } @media screen and (max-width: 520px) { #TEAM .Col div.alignright{ float:left!important;} } /**********************************************************************************************************************/ /* animation /**********************************************************************************************************************/ .appear { -webkit-transition: all 0.4s; transition: all 0.4s; opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); } .appear.inview { opacity: 1; -webkit-transform: none; transform: none; -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } .appear2 { -webkit-transition: all 1.5s; transition: all 1.5s; opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } .appear2.inview2 { opacity: 1; -webkit-transform: none; transform: none; } .appear2.inview2:nth-child(1) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .appear2.inview2:nth-child(2) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .appear2.inview2:nth-child(3) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .appear2.inview2:nth-child(4) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .appear2.inview2:nth-child(5) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .appear3 { -webkit-transition: all 0.8s; transition: all 0.8s; opacity: 0; -webkit-transform: translateY(40px); transform: translateY(40px); } .appear3.inview { opacity: 1; -webkit-transform: none; transform: none; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } /************************/ .appear-left { -webkit-transition: all 0.4s; transition: all 0.4s; opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } .appear-left.inview { opacity: 1; -webkit-transform: none; transform: none; -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } .appear-right { -webkit-transition: all 0.4s; transition: all 0.4s; opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } .appear-right.inview { opacity: 1; -webkit-transform: none; transform: none; -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } .appear2-right { -webkit-transition: all 1.5s; transition: all 1.5s; opacity: 0; -webkit-transform: translateX(40px); transform: translateX(40px); } .appear2-right.inview2 { opacity: 1; -webkit-transform: none; transform: none; } .appear2-right.inview2:nth-child(1) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .appear2-right.inview2:nth-child(2) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .appear2-right.inview2:nth-child(3) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .appear2-right.inview2:nth-child(4) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; } .appear2-right.inview2:nth-child(5) { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .appear3-left { -webkit-transition: all 0.8s; transition: all 0.8s; opacity: 0; -webkit-transform: translateX(-80px); transform: translateX(-80px); } .appear3-left.inview { opacity: 1; -webkit-transform: none; transform: none; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } /**********************************************************************************************************************/ /* Content /**********************************************************************************************************************/ .Justify{ text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; } .Cols, .ColLine{ width: 100%; position: relative; display: flex; justify-content: space-between; } .Cols.AlignTop{ position: inherit; display: inline-block; justify-content: flex-start;} @media screen and (max-width: 900px) { .Cols, .ColLine{display: inline-block;} } .ColSingle.BackgroundColor, .Cols.BackgroundColor, .Module.BackgroundColor{ width:90%; padding:5%; background-color:#eeebea;/* margin-bottom: 105px;*/ } .ColSingle.BackgroundColor .NoPaddingLR, .Cols.BackgroundColor .NoPaddingLR, .Module.BackgroundColor .NoPaddingLR{padding-left:0; padding-right:0; padding:0;width:100%;} .Cols.HalfWidth{ width: 50%!important; margin: 0 auto;} .Module.BackgroundColor{ margin-bottom:45px; margin-top: 45px;} .Module.BackgroundColor.no-margin-bottom{ margin-bottom:0px;} .Module.BackgroundColor.last-in-sequence { margin-bottom: 45px; /* Restore margin-bottom for the last consecutive div */ } /*.Module.BackgroundColor:last-child { margin-bottom: 45px!important; } .Module.BackgroundColor + .Module.BackgroundColor { margin-bottom: 0; } .Module.BackgroundColor:not(:last-child) { margin-bottom:0; }*/ .Col.Single{ /*margin-bottom:35px;*/} .Col.Half{ float:left; width: 40%; margin-right: 5%;} @media screen and (max-width: 1100px) { .Col.Half{ width: 100%;} } @media screen and (max-width: 900px) { .Cols.HalfWidth{ width:90%!important;} } .ColTwo{ width: 45%; } .ColTwo.Sixty{ width: 60%;} .ColTwo.Fourty{ width: 40%;} .ColThree{ width: 30%; } .ColFour{ width: 23%; margin-bottom: 25px; } .ColTwo.NoBoxed.Left{width: 38%; margin-right: 7%;} .ColTwo.NoBoxed.Right{width: 38%;margin-left: 7%;} .ColTwo.Left{ margin-right: 5%;} .ColTwo.ImageLeftMobile{display: none;} .ColThree, .ColTwo, .ColFour{ text-align: left; /*background-color:pink;*/ vertical-align: top; display: inline-block; *display: inline; zoom: 1 } .ColThree img, .ColTwo img, .ColFour img{ /*width: 100%; height: auto;*/} /*.Module .ColThree img, .Module .ColTwo img, .Module .ColFour img{width: 100%; height: auto;}*/ .Vmiddle{ /*margin-left: 10%;;*/ position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } .Vmiddle.Half{ width:45%;} .ImageCol1.Desktop{} .ImageCol1.Mobile{ display: none;} /* .ColTwo.VerticalMiddle, .ColThree.VerticalMiddle, .ColFour.VerticalMiddle{ vertical-align: middle!important;}*/ .ColThree.Footer{ /*font-size:0.9em; line-height: 1.2em;*/ margin-bottom: 15px;} .stretch { width: 100%; display: inline-block; font-size: 0; line-height: 0 } .Thumbnail{ -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; -ms-transition:all .2s ease-out; -o-transition:all .2s ease-out; transition:all .2s ease-out; filter: opacity(100%); -webkit-filter: opacity(100%); background-color:#000;} .Thumbnail:hover{ transform: scale(1.015); filter: opacity(60%); -webkit-filter: opacity(60%); } .TitleColsMobile{display: none; } .TitleColsMobile.Desktop{display: block; } .ImageCol2.Mobile{ display: none; } @media screen and (max-width: 1500px) { .ColFourCol .Cols{ display: inline;} .Cols .ColFour{ width: 46%!important; margin-right: 4%; } .Cols .ColFour:nth-child(4) { margin-right: 0%;} } @media screen and (max-width: 900px) { .ColTwo.Sixty{ width: 100%;} .ColTwo.Fourty{ width: 100%;} .ColThree, .ColFour{ width: 46%;} .Cols .ColThree + .ColThree{ margin-left:4%;} .Cols .ColThree:nth-child(3) { margin-left:0%; } .Cols .ColFour:nth-child(2) { margin-right: 0%;} .ColTwo{ width: 100%; margin-bottom: 25px;} .ColorBloc, .ColorBlocRight{ display: none;} .SpacerColumnTitle, .SpacerColumnSubTitle{ display:none;} .ColTwo.NoBoxed.Right, .ColTwo.NoBoxed.Left{ width: 100%; margin-left:0;} .ColTwo.ImageLeft{ /*display:none;*/} .ColTwo.ImageLeftMobile{ display: block} .ColTwo.ColText{display:block!important;} .Vmiddle{ position: inherit; transform: none; } .Vmiddle.Half{ width:100%;} .ImageCol1.Desktop{display: none;} .ImageCol2.Mobile{ display: block; margin-top: 25px;} .ImageCol1.Mobile .ActionButtonContainer{display: none;} .ImageCol2 .ActionButtonContainer{display: block;} /*.ColLine.Titles{display:none;}*/ .TitleColsMobile{display: block;} } @media screen and (max-width: 760px) { .ColThree, .ColFour{ width: 100%; margin-bottom: 25px;} .ColThree:last-child, .ColFour:last-child{ width: 100%; margin-bottom: 0px;} .Cols .ColFour{ width: 100%!important; margin-right: 0%; } .Cols .ColThree + .ColThree{ margin-left:0%;} .ColThree.Footer{ text-align:center;} } @media screen and (max-width: 570px) { } .Separator{ width: 100%; clear: both;} .Separator span{ width: 100px; border-top:3px solid #ed672b; display: inline-block; margin-top: 35px; margin-bottom: 10px;} .Boxed{ position: relative; /*-webkit-box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.25); box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.25);margin: 100px 0;*/ margin-bottom: 50px; } .ColorBloc{ width: 98%; height: 114%; background-color: #ACACAC; position: absolute; left: -50%; margin-top: -3%; z-index: -1; max-height: 950px; } .ColorBlocRight{ width: 107%; height: 107%; background-color: #ACACAC; position: absolute; right: -50%; margin-top: -3%; z-index: -1; max-height: 950px; } /**********************************************************************************************************************/ /* Calendar /**********************************************************************************************************************/ .Calendar{ margin:55px 0 35px 0;} .Calendar h4{ margin-bottom: 15px;} .Line{ width: 100%; display: inline-block; line-height: 1.5em; padding:0.2em 0;} .Date{ width:100%; padding-left:1%; font-weight: bold;} .Event{ width: 70%;} .Date, .Event, .Place{ float: left;} @media screen and (max-width: 690px) { .Date{ width: 99%;} .Event{ width: 99%; padding-left:1%;} } /**********************************************************************************************************************/ /* News /**********************************************************************************************************************/ .News { margin-bottom: 0px; } .News .News{position: relative; margin-bottom: 25px; } .SingleNews{ margin-top: 70px; margin-bottom: 0;} .News.Blog, .PostContent.Blog{ margin-top:80px; display: inline-block; width: 100%;} /* Opacity #2 .News.Justify .Thumbnail { background: #1abc9c; } .News.Justify .News .Thumbnail { opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .News.Justify .News:hover .Thumbnail { opacity: .75; }*/ .News.Justify{text-align: justify; display: block; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines;} .News.Justify .News .Thumbnail:hover .News{ color:pink} .News a, .News h3.Title{ color: #000;text-decoration:none; font-weight:300!important;} .News h3.Title{ } .News a:hover, .News h3.Title{ text-decoration:none; color:#999;} .NewsHeader{ width: 100%; display: inline-block;} .NewsHeader .DateNews{ font-style: italic; padding-top:3px;} .News .NewsHeader .DateNews a{ color:#288b35; font-size:0.6em; } .Title{ /*text-transform: uppercase;*/ font-weight: 700; padding-top: 5px;} .ArticleExcerpt{ padding-top: 7px;} .Thumbnail{ height: 180px; background-size: cover!important; /*background-image: url('images/DefaultNews.png';);*/ } /* Page Navigation */ .wp-pagenavi{ font-size:1.3em; text-align: center;} .wp-pagenavi a, .wp-pagenavi span{ border:0px!important;} .wp-pagenavi .pages{ font-size:.7em;} @media screen and (max-width: 900px) { .News .News:nth-child(5){ display:none;} .blog .News .News:nth-child(5){ display:block;} } @media screen and (max-width: 790px) { .ColFour.News{ width:48%;} } @media screen and (max-width: 750px) { .News.Blog, .PostContent.Blog{ margin-top:15px;} .single .ShortLinks.Mobile{ margin-bottom:0;} } @media screen and (max-width: 600px) { .News .News:nth-last-child(-n+2) {margin-bottom:0;} /*.News .News:nth-child(4){ display:none;} .blog .News .News:nth-child(4){ display:block;}*/ } @media screen and (max-width: 460px) { .ColFour.News{ width:100%;} } /**********************************************************************************************************************/ /* Sidebar /**********************************************************************************************************************/ #HeaderSidebar, #FooterSidebar{ width:100%; display:block; clear:both; background-color:#ccc;} #HeaderSidebar div, #FooterSidebar div{ display:inline-table; margin:0 auto;} #SideBar, #SideBar2{ /*clear:left;*/ } .side{ clear:both; background-color:#fff;} #SideBar.left, #SideBar2.left{ width:30%; float:left; clear:left;} #SideBar.right, #SideBar2.right{ width:30%; float:right; background-color:#aaa; padding:5px; clear:right;} #SideBar.none, #SideBar2.none{} #SideBar2 .side{ margin-top:25px; background-color:#eee;} /**********************************************************************************************************************/ /* =Widgets /**********************************************************************************************************************/ .widget-area .widget ul ul { margin-left: 12px; margin-left: 0.857142857rem; } .widget_rss li { margin: 12px 0; margin: 0.857142857rem 0; } .widget_recent_entries .post-date, .widget_rss .rss-date { color: #aaa; font-size: 11px; font-size: 0.785714286rem; margin-left: 12px; margin-left: 0.857142857rem; } #wp-calendar { margin: 0; width: 100%; font-size: 13px; font-size: 0.928571429rem; line-height: 1.846153846; color: #686868; } #wp-calendar th, #wp-calendar td, #wp-calendar caption { text-align: left; } #wp-calendar #next { padding-right: 24px; padding-right: 1.714285714rem; text-align: right; } .widget_search label { display: block; font-size: 13px; font-size: 0.928571429rem; line-height: 1.846153846; } .widget_twitter li { list-style-type: none; } .widget_twitter .timesince { display: block; text-align: right; } /**********************************************************************************************************************/ /* Content /**********************************************************************************************************************/ .GlobalPage{ /*clear:both;*/} .PageContent{ display:inline-block;} .GlobalPage.left { width:60%; float:left;} .GlobalPage.right {width:60%; float:right;} .GlobalPage.full { width:100%;} /**********************************************************************************************************************/ /* MenuFooter /**********************************************************************************************************************/ .MenuFooter{ float: right; text-align: right;} .MenuFooter ul{} .MenuFooter ul li{ list-style-type: none;} .MenuFooter ul li a{ color:#000;} .MenuFooter ul li a:hover{} /**********************************************************************************************************************/ /* Submenu page /**********************************************************************************************************************/ .SubMenuPage{ } .SubMenuPage ul.ChildMenu {text-align:center;} .SubMenuPage ul.ChildMenu li{ display: inline-block; position: relative; padding: 7px 7px;} .SubMenuPage ul.ChildMenu li a{ font-weight:900; } .SubMenuPage ul.ChildMenu a::after { /* Stroke line from center --------------------------*/ position: absolute; bottom: -2px; left: 0; right: 0; margin: auto; width: 0%; content: '.'; color: transparent; background: #000; height: 2px; /*underline from left -------------------------- content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0.2em; background-color: #000; opacity: 0; transition: opacity 300ms, transform 300ms; transform: translate3d(-100%, 0, 0); */ } .SubMenuPage ul.ChildMenu a:hover::after, .SubMenuPage ul.ChildMenu a:focus::after, .SubMenuPage ul.ChildMenu li.current_page_item a::after{ /* Stroke line from center --------------------------*/ width: 100%; /*underline from left -------------------------- opacity: 1; transform: translate3d(0, 0.2em, 0); transform: translate3d(-100%, 0, 0); transform: translate3d(0, 0, 0); */ } .SubMenuPage ul.ChildMenu li a:after, .SubMenuPage ul.ChildMenu li a:before { transition: all .5s; } /* Primary Menu -------------------------------------------------------------- */ /*#access { float: left; width: 75%; font-weight: 700; /*background-color:#ccc;* / z-index: 100; position: relative; margin-top:14px; } #access.Sidebar{ width:100%;} #access .menu-header, div.menu { font-size: 13px; width: 100%; } #access .menu-header ul, div.menu ul { list-style: none outside none; padding: 0; margin: 0;/* display:inline-block;* / text-align: right; width:100%; } #access .menu-header li, div.menu li { display: inline-block;position: relative; } #access .menu-header li.AlignRight, div.menu li.AlignRight{ float:right;} #access .menu ul.AlignCenter{ text-align:center;} #access .menu ul.AlignCenter li{ float:none; display:inline-table;} #access .menu-header li.AlignLeft, div.menu li.AlignLeft{ float:left;} /* Hide home link * / #access ul li.page-item-5, #access ul li.page-item-112, #access ul li.page-item-3 { display:none;}*/ /**********************************************************************************************************************/ /* Primary Menu /**********************************************************************************************************************/ #access { /*width: 60%; /*background-color:yellow; * / float: left;*/ margin:25px 0;} #access a { color: #2E2E2E; text-decoration: none; display: inline-block; padding: 15px 10px; position: relative; font-size: 1em; } #access ul ul { display: none; float: left; left: 0;position: absolute; top: 28px; z-index: 99999; width:200px; } #access ul{ } #access ul li.current_page_ancestor ul{ /*display:block;*/ } #access ul li{display: inline-block; text-align: center; /*padding: 4px 6px;*/ position: relative; } #access ul li a{ color: #2E2E2E; text-decoration: none; display: inline-block; padding: 3px 0px; margin: 0 7px; position: relative; /*font-weight:900;*/ /*font-size: 0.9em;*/ /* Stroke line from center --------------------------*/ position: relative; } #access ul ul li { float:none; } #access ul ul ul {left: 100%;top: 0;} #access ul ul a {height: auto;line-height: 1em;padding: 10px;} #access li:hover > a, #access ul ul *:hover > a { color: #000; } #access a::after { /* Stroke line from center --------------------------*/ position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 0%; content: '.'; color: transparent; background: #000; height: 2px; /*underline from left -------------------------- content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0.2em; background-color: #000; opacity: 0; transition: opacity 300ms, transform 300ms; transform: translate3d(-100%, 0, 0); */ } #access a:hover::after, #access a:focus::after, #access li.current_page_item a::after, #access li.current_page_ancestor a::after{ /* Stroke line from center --------------------------*/ width: 100%; /*underline from left -------------------------- opacity: 1; transform: translate3d(0, 0.2em, 0); transform: translate3d(-100%, 0, 0); transform: translate3d(0, 0, 0); */ } #access ul li a:after, #access ul li a:before { transition: all .5s; } /* Keyframes */ @-webkit-keyframes fill { 0% { width: 0%; height: 1px; } 50% { width: 100%; height: 1px; } 100% { width: 100%; height: 100%; background: #333; } } /* Keyframes */ @-webkit-keyframes circle { 0% { width: 1px; top: 0; left: 0; bottom: 0; right: 0; margin: auto; height: 1px; z-index: -1; background: #eee; border-radius: 100%; } 100% { background: #aaa; height: 5000%; width: 5000%; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border-radius: 0; } } #access ul li:hover > ul {display: block;} #access ul li.current_page_item > a, #access ul li.current_page_ancestor > a, #access ul li.current-menu-ancestor > a, #access ul li.current-menu-item > a, #access ul li.current-menu-parent > a { color: #000; } * html #access ul li.current_page_item a, * html #access ul li.current_page_ancestor a, * html #access ul li.current-menu-ancestor a, * html #access ul li.current-menu-item a, * html #access ul li.current-menu-parent a, * html #access ul li a:hover { color: #000; } /* Color select Menu ancestor */ /* Justify The menu -------------------------------------------------------------- */ /* http://www.xoogu.com/files/2013/07/justified-menu-of-mu-mu.html */ #access .menu.JustifyMenu {/*display: table; position: relative; table-layout: auto; width: 100%;*/} #access .menu{ } #access .menu ul.AlignJustify{ /*text-align:justify; display: table; table-layout: fixed;*/ display: table; table-layout: fixed; position:relative; } #access .menu ul.AlignJustify li{ text-align:center; display: table-cell; position:relative; } #access .menu ul.AlignJustify li ul{ height: auto; position: relative; top: 100%; z-index: 1; /*display: none;*/ } /*#access .menu ul.AlignJustify li:hover ul { display:block;}*/ #access .menu ul.AlignJustify li ul li{ /*display: block;*/ display: block; text-align:center; } #access .menu-header li, div.menu .AlignJustify li {display: table-cell; float:none;} /* End of Justify Menu -------------------------------------------------------------- */ /* Vertical Menu -------------------------------------------------------------- */ #access .menu ul.Vertical{} #access .menu ul.Vertical li{ display:inline-block; width:100%;} #access .menu ul.Vertical li ul.children{ position:relative; display:block; top:0; } #access .menu ul.Vertical li ul.children li a{padding-left:15px;} #access ul.Vertical li:hover > ul, #access .menu ul.Vertical li.current_page_parent ul, #access .menu ul.Vertical li.current_page_ancestor ul{ display:block;} /* */ /* Primary Menu -------------------------------------------------------------- */ #MainMenu{ position:absolute; background-color:#fff; width:130px; z-index:800; right:0px; top:50px; padding:0 15px; visibility:hidden;} #MainMenu.open{ visibility:visible;} ul.Menu{display:inline-block; width:100%; } ul.Menu li{ } ul.Menu li a{ float:right; text-align:right; width:100%; line-height:1em; padding:10px 0; } ul.Menu li a.line{border-bottom:1px solid #000;} a#MenuButtun{} a#MenuButtun img:hover{ cursor:pointer;} .DownMenu{ float:right; position:absolute; margin-top:32px; left:90%;} /* Tiny Menu after logo -------------------------------------------------------------- */ .MobileMenu{ float: right; display: block; /*display:none;*/ position: absolute; top:25px; right: 55px; width: 250px; } .TitleBurger{ margin-top:42px; float: right; text-align: right; margin-right:15px;} .MobileMenu:hover{ cursor: pointer;} ul.RowMenu{ float:right; padding-top:10px; margin-right:5%;} .MobileMenu .RowMenu li{ list-style-type:none;} .MobileMenu .RowMenu li a.down{ background-image:url(images/icon-mobile.png);} .MobileMenu .RowMenu li a.up{ background-image:url(images/icon-mobile-hover.png);} .MobileMenu .RowMenu li a.down, .MobileMenu .RowMenu li a.up{ width:35px; height:32px; display:inline-block;} .MobileMenu .RowMenu li a.down:hover{background-image:url(images/icon-mobile-hover.png);} .MobileMenu .RowMenu li a.down:hover, .MobileMenu .RowMenu li a.up:hover{ text-decoration:none; cursor:pointer;} .HideButtun{ display:none;} /*******/ #MobileMenuContainer2 { position: absolute; right: -5%; top: 0; opacity: 0; transition: opacity 0.5s ease-in-out; width: 15%; min-width: 500px; height: 80vh; font-weight: 700; z-index: 1000; background-color: #f2d09a; padding: 10vh 5%; display: none; overflow: hidden; font-size: 1.2em; } #MobileMenuContainer2.show { display: block; opacity: 0; } #MobileMenuContainer2.visible { opacity: 1; z-index: 999; } #MobileMenuContainer2 ul {} #MobileMenuContainer2 ul li { list-style-type: disc; color:#fff; margin-bottom: 20px;} #MobileMenuContainer2 ul li a{color:#0d1046;font-family: "RebrandTextBold"; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -ms-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; } #MobileMenuContainer2 ul li a:hover{color:#f6a93f;} #MobileMenuContainer2 ul ul { margin-left:15px; margin-top: 15px;} #MobileMenuContainer2 ul ul li { list-style-type: none;} #MobileMenuContainer2 ul ul li a{font-family: "EloquiaDisplayLight"; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -ms-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; } #MobileMenuContainer2 ul ul li a:hover{ color:#f6a93f;} @media screen and (max-width: 728px) { #MobileMenuContainer2 { width: 100%; } #MobileMenuContainer2 ul { width: 60%; margin:0 auto; } .TitleBurger{ display: none;} } @media screen and (max-width: 600px) { #MobileMenuContainer2 { width: 100%; } #MobileMenuContainer2 ul { width: 60%; margin:0 auto; margin-left: 30%; } } .content.nav { position: relative; z-index: 1; } .shadow { position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; box-shadow: inset 0px 10px 10px -10px rgba(0, 0, 0, 0.3), inset 0px -10px 10px -10px rgba(0, 0, 0, 0.3), inset 10px 0px 10px -10px rgba(0, 0, 0, 0.3), inset -10px 0px 10px -10px rgba(0, 0, 0, 0.3); z-index: 0; } #MobileMenuContainer .menu-primary-menu-container{width: 100%; display: inline-block; float: none; margin: 0; } #MobileMenuContainer .menu{ /*padding-top:15px;*/ display: inline-block; float: none; width: 100%;} .MenuMobileLabel{ text-transform:uppercase; letter-spacing:0.1em;} #MobileMenuContainer ul{ margin:0;} #MobileMenuContainer ul li{ float:none; width:100%; font-size:18px; line-height:1.8em; font-weight: bold; text-align:center; text-transform:uppercase; list-style-type:none; /*border-bottom: 1px solid #777;*/ } #MobileMenuContainer ul li{ padding:7px 0px; background-repeat:no-repeat; background-position:center bottom; border-bottom: 0px solid #C3A572; } #MobileMenuContainer ul li a{ color:#000; font-weight:400; /*display:none; */ text-decoration:none; font-weight:bold; width: 100%; position: relative;} #MobileMenuContainer ul li a:hover, #MobileMenuContainer ul li.current_page_item a{ text-decoration:none; color:#000; text-decoration: underline; display: inline-block;} #MobileMenuContainer ul li ul{ } #MobileMenuContainer ul li a, #MobileMenuContainer ul li.page-item, #MobileMenuContainer ul li.page-item ul{ /*display:none;*/} #MobileMenuContainer ul li ul li ul li.current_page_item a{ text-decoration:underline;} #Header #MobileMenuContainer ul li.page_item{ } #Header #MobileMenuContainer ul li.current_page_ancestor{ display:block} #Header #MobileMenuContainer ul li.current_page_ancestor ul li{ display:block} #MobileMenuContainer ul li.current_page_parent ul.children li a, #MobileMenuContainer ul li.current_page_parent, #MobileMenuContainer ul li.current_page_parent ul{ display:block;} #MobileMenuContainer ul li ul li ul{ background-color: #f0f0f0; box-shadow: inset 0px 11px 8px -10px #D7D7D7, inset 0px -11px 8px -10px #D7D7D7; } @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-moz-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) { .MobileMenu .RowMenu li a.down{ background-image:url(images/icon-mobilex2.png);background-size:cover;} .MobileMenu .RowMenu li a.up{ background-image:url(images/icon-mobile-hoverx2.png);background-size:cover;} .MobileMenu .RowMenu li a.down:hover{background-image:url(images/icon-mobile-hoverx2.png);background-size:cover;} } @media screen and (max-width: 1350px) { #access{ display:none;} .MobileMenu{ display:block;z-index: 9999999; position: relative; top:-120px;} } /* Nav icon mobile */ /* Icon 1 */ #nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 { width: /*45px*/50px; height: 50px; border:3px solid #f6a93f; border-radius: 50%; margin-top: 26px; position: relative; float: right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; z-index: 999999; cursor: pointer; } #nav-icon3:hover{ cursor:pointer!important;} #nav-icon1 span, #nav-icon3 span, #nav-icon4 span { display: block; position: absolute; height: 4px; width: 4px; background: #f6a93f; border-radius: 5px; opacity: 1; left: 22px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } #Head.Invert #nav-icon3 span{background:#f6a93f;} #nav-icon3:hover span {background:#f6a93f!important;} /* Icon 3 */ #nav-icon3 span:nth-child(1) { top: 13px; } #nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) { top: 23px; } #nav-icon3 span:nth-child(4) { top: 33px; } #nav-icon3.open span:nth-child(1) { top: 10px; width: 0%; left: 50%; } #nav-icon3.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); width: /*45px*/35px; left:7px; } #nav-icon3.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); width: /*45px*/35px; left:7px; } #nav-icon3.open span:nth-child(4) { top: 10px; width: 0%; left: 50%; } /**********************************************************************************************************************/ /* Search Form /**********************************************************************************************************************/ #form input#submit, #form input#s{} #form input#submit{ } #form input#s{ } /**********************************************************************************************************************/ /* Breadcrump /**********************************************************************************************************************/ #BreadcrumbContainer{ width:100%; display:inline-block; background-color:pink;} #crumbs{} #crumbs span{display: inline-flex; margin-right:10px;} .CrumbDelimiter{} /**********************************************************************************************************************/ /* Comments /**********************************************************************************************************************/ .post-comments{ margin-top:20px;} .comments-template{ /*border-top:2px solid pink;*/ margin:10px 0px;} .CommentsContainer{} #commentform{} p{} p.CommentAutor{} p.CommentEmail{} /* h3 Title */ #comments{} /* h3 Title */ #respond{} .commentlist{} .commentlist li{} .commentmetadata{} .commentmetadata a{} .nocomments{} /* Form Errors -------------------------------------------------------------- */ input.error, textarea.error{ /* border:1px solid red;*/ background-color:#FFD1D6; border:1px solid #ccc; padding:2px; } label.error{ color:red; display:none;} /**********************************************************************************************************************/ /* Slider /**********************************************************************************************************************/ #full-width-slider { width: 100%; color: #000; height: 70vh!important; } .coloredBlock { padding: 12px; background: rgba(255,0,0,0.6); color: #FFF; width: 200px; left: 20%; top: 5%; } .infoBlock { position: absolute; top: 30px; right: 30px; left: auto; max-width: 25%; padding-bottom: 0; background: #FFF; background: rgba(255, 255, 255, 0.8); overflow: hidden; padding: 20px; } .infoBlockLeftBlack { color: #FFF; background: #000; background: rgba(0,0,0,0.75); left: 30px; right: auto; } .infoBlock h4 { font-size: 20px; line-height: 1.2; margin: 0; padding-bottom: 3px; } .infoBlock p { font-size: 14px; margin: 4px 0 0; } .infoBlock a { color: #FFF; text-decoration: underline; } .photosBy { position: absolute; line-height: 24px; font-size: 12px; background: #FFF; color: #000; padding: 0px 10px; position: absolute; left: 12px; bottom: 12px; top: auto; border-radius: 2px; z-index: 25; } .photosBy a { color: #000; } .fullWidth { max-width: 1400px; margin: 0 auto 24px; } /* @media screen and (max-width: 1350px) { #full-width-slider {height: 20% !important;} }*/ @media screen and (min-width: 1430px) and (max-width:2590px) { .heroSlider .rsOverflow, .royalSlider.heroSlider {height: 70vh !important;} #full-width-slider { height:70vh!important;} } @media screen and (min-width: 1090px) and (max-width:1500px) { .heroSlider .rsOverflow, .royalSlider.heroSlider { height: 50vh !important;} #full-width-slider { height:50vh!important;} } @media screen and (min-width: 800px) and (max-width:1090px) { .heroSlider .rsOverflow, .royalSlider.heroSlider { height: 450px !important;} #full-width-slider { height:450px!important;} } @media screen and (min-width: 600px) and (max-width:800px) { .heroSlider .rsOverflow, .royalSlider.heroSlider { height: 350px !important;} #full-width-slider { height:350px!important;} } /* @media screen and (max-width: 950px) { .royalSlider.heroSlider, .royalSlider.heroSlider .rsOverflow { /*height: 550px !important;* / height: 45vh !important; } #full-width-slider { /*height:550px!important;* / height: 45vh !important;} }*/ @media screen and (min-width: 0px) and (max-width: 600px) { .royalSlider.heroSlider, .royalSlider.heroSlider .rsOverflow {height: 250px !important;} #full-width-slider { height: 250px !important;} } /**********************************************************************************************************************/ /* Module 2 Col Image /**********************************************************************************************************************/ .SpacerColumn{ height: 125px;} .SpacerColumnTitle{ height: 69px;} .SpacerColumnSubTitle{ height: 41px;} /**********************************************************************************************************************/ /* Module 2 Col Image /**********************************************************************************************************************/