/* Some stylesheet reset */ #nav, #nav ul { margin: 0; padding: 0; line-height: 1; list-style: none; } /* The main container (the navigation bar) */ #nav { display: block; position: relative; width: 100%; height: 50px; font-family: 'Josefin Sans', Helvetica, Arial, sans-serif; background: rgba(255, 255, 255, .9); text-align: left; } /* The main links containers */ #nav>li { float: left; display: block; padding: 0; position: relative; } /* Hiding the links used for toggling the menu in mobile mode */ #nav #toggleMenu, #nav #hideMenu { display: none; } /* The links which contain submenus need more space to the right for the arrow which indicates the submenus */ #nav>li.dropdown>a { padding-right: 48px; } /* The main navigation links */ #nav>li>a { padding: 16px 22px; display: block; text-decoration: none; font-size: 18px; color: #404040; -webkit-transition: color .2s ease-in; -moz-transition: color .2s ease-in; -ms-transition: color .2s ease-in; -o-transition: color .2s ease-in; transition: color .2s ease-in; } /* Changing the color of the links on hover */ #nav li:hover>a { color: #000000; } /* General styling for the :after & :before pseudo-elements */ #nav li:after, #nav li:before, #nav a:after, #nav a:before { position: absolute; display: block; content: ""; } /* The circle of the indicator */ #nav>li.dropdown::after { height: 14px; width: 14px; border: 2px solid #A0A0A0; top: 16px; right: 14px; border-radius: 12px; -webkit-transition: all .2s ease-in; -moz-transition: all .2s ease-in; -ms-transition: all .2s ease-in; -o-transition: all .2s ease-in; transition: all .2s ease-in; } /* The arrow of the indicator */ #nav>li.dropdown::before { height: 4px; width: 4px; border: 2px solid #A0A0A0; border-top: none; border-left: none; top: 21px; right: 20px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; transition: all .2s; } /* The hover state of the indicator */ #nav>li.dropdown:hover::after, #nav>li.dropdown:hover::before { -webkit-transform: scale(0.85) rotate(45deg); -ms-transform: scale(0.85) rotate(45deg); -moz-transform: scale(0.85) rotate(45deg); -o-transform: scale(0.85) rotate(45deg); transform: scale(0.85) rotate(45deg); border-color: #000000; } /* The pseudo-element used for the wave animation */ #nav>li.dropdown>a::after { height: 18px; width: 18px; top: 16px; right: 14px; border-radius: 12px; } /* When the link is hovered, the wave animation starts */ #nav>li.dropdown:hover>a::after { -webkit-animation: waveAnimation 1.3s ease-out 75ms; -moz-animation: waveAnimation 1.3s ease-out 75ms; animation: waveAnimation 1.3s ease-out 75ms; } /* The wave animation */ @-webkit-keyframes waveAnimation { 0% { opacity: 0.3; box-shadow: 0 0 0 1px rgba(255,255,255,0.0); } 40% { opacity: 0.5; box-shadow: 0 0 0 1px rgba(255,255,255,0.35); } 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.35); -webkit-transform: scale(2); opacity: 0; } } @-moz-keyframes waveAnimation { 0% { opacity: 0.3; box-shadow: 0 0 0 1px rgba(255,255,255,0.0); } 40% { opacity: 0.5; box-shadow: 0 0 0 1px rgba(255,255,255,0.35); } 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.35); -moz-transform: scale(2); opacity: 0; } } @keyframes waveAnimation { 0% { opacity: 0.3; box-shadow: 0 0 0 1px rgba(255,255,255,0.0); } 40% { opacity: 0.5; box-shadow: 0 0 0 1px rgba(255,255,255,0.35); } 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.35); transform: scale(2); opacity: 0; } } /* The submenus */ #nav ul { display: block; position: absolute; left: -9999px; background: rgba(255, 255, 255, .9); opacity: 0; -webkit-transition: opacity .32s ease-in; -moz-transition: opacity .32s ease-in; -ms-transition: opacity .32s ease-in; -o-transition: opacity .32s ease-in; transition: opacity .32s ease-in; } /* Showing the submenus when the parent is hovered */ #nav>li:hover>ul { left: 0; opacity: 1; } #nav ul li { display: block; padding: 0; } /* The submenu links */ #nav ul li a { color: #404040; text-decoration: none; display: block; padding: 10px 22px; width: 150px; font-size: 16px; border-top: 1px solid rgba(180, 180, 180, .1); -webkit-transition: color .2s ease-in; -moz-transition: color .2s ease-in; -ms-transition: color .2s ease-in; -o-transition: color .2s ease-in; transition: color .2s ease-in; } /* Hiding the level 2+ submenus */ #nav ul ul { display: none; } /* Styles for the mobile devices */ @media screen and (max-width: 600px) { #nav { max-width: 768px; height: auto; } #nav>li { float: none; border-top: 1px solid rgba(180, 180, 180, .1); } #nav li { display: none; } #nav ul { position: relative; left: auto; opacity: 1; background: #FFFFFF; background: #FFFFFF; border-top: 1px solid rgba(180, 180, 180, .1); } #nav ul li a { border-top: none; padding-left: 35px; width: 100%; } #nav>#toggleMenu { display: block; z-index: 999; } #nav:target>#toggleMenu { display: none; } #nav:target>#hideMenu { display: block; z-index: 999; } #nav #hideMenu>a { color: #000000; z-index: 999; } #nav #toggleMenu>a { z-index: 999; } #nav:target li { display: block; } #nav>li.dropdown::after { right: 22px; border-color: #000000; } #nav>li.dropdown::before { right: 28px; border-color: #000000; } #nav>li.dropdown>a::after { right: 22px; } #toggleMenu::after, #hideMenu::after { height: 20px; width: 20px; border: 2px solid #A0A0A0; top: 13px; right: 22px; border-radius: 16px; -webkit-transition: all .2s ease-in; -moz-transition: all .2s ease-in; -ms-transition: all .2s ease-in; -o-transition: all .2s ease-in; transition: all .2s ease-in; z-index: -1; } #toggleMenu::before, #hideMenu::before { height: 2px; width: 10px; border-top: 2px solid #A0A0A0; border-bottom: 2px solid #A0A0A0; top: 20px; right: 29px; z-index: -1; } #hideMenu::after, #hideMenu::before { border-color: #000000; } #toggleMenu>a::after, #hideMenu>a::after { height: 2px; width: 10px; background: #A0A0A0; top: 28px; right: 29px; z-index: -1; } #hideMenu>a::after { background: #000000; } } /*custom styles */ #header ul { list-style: none; margin:5; position: absolute; right: 10px; } #header li { display: inline; } #header li a { display: inline-block; padding-right: 0.5em; padding-left: 0.5em; padding-bottom: 0.5em; padding-top: 0.5em; font-size: 11px; color: #404040; border-radius: 50%; background: #F0F0F0; border: solid 1px #E0E0E0; border-width: 2px 2px 2px 2px; width: 0.8em; height: 0.8em; } #header li a:hover { padding-right: 0.5em; padding-left: 0.5em; padding-bottom: 0.5em; padding-top: 0.5em; font-size: 11px; color: #404040; border-radius: 50%; background: white; border: solid 1px #D0D0D0; border-width: 2px 2px 2px 2px; width: 0.8em; height: 0.8em; } #header #selected a { color: #505050; background: white; border: solid 1px #E0E0E0; border-width: 2px 2px 2px 2px; pointer-events: none; cursor: default; } #pagination p { display: inline; margin: 5px 5px 5px 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 10px; padding-left: 10px; border-radius: 5px 5px 5px 5px; background: white; border: solid 1px #D0D0D0; } #pagination a { display: inline; color: #505050; font-size: 18px; } :focus {outline:none;} ::-moz-focus-inner {border:0;} /*! * Justified Gallery - v3.5.4 * http://miromannino.github.io/Justified-Gallery/ * Copyright (c) 2015 Miro Mannino * Licensed under the MIT license. */ @-webkit-keyframes justified-gallery-show-caption-animation{from{opacity:0}to{opacity:.7}}@-moz-keyframes justified-gallery-show-caption-animation{from{opacity:0}to{opacity:.7}}@-o-keyframes justified-gallery-show-caption-animation{from{opacity:0}to{opacity:.7}}@keyframes justified-gallery-show-caption-animation{from{opacity:0}to{opacity:.7}}@-webkit-keyframes justified-gallery-show-entry-animation{from{opacity:0}to{opacity:1}}@-moz-keyframes justified-gallery-show-entry-animation{from{opacity:0}to{opacity:1}}@-o-keyframes justified-gallery-show-entry-animation{from{opacity:0}to{opacity:1}}@keyframes justified-gallery-show-entry-animation{from{opacity:0}to{opacity:1}}.justified-gallery{width:100%;position:relative;overflow:hidden}.justified-gallery>a,.justified-gallery>div{position:absolute;display:inline-block;overflow:hidden;opacity:0;filter:alpha(opacity=0)}.justified-gallery>a>img,.justified-gallery>div>img,.justified-gallery>a>a>img,.justified-gallery>div>a>img{position:absolute;top:50%;left:50%;margin:0;padding:0;border:0}.justified-gallery>a>.caption,.justified-gallery>div>.caption{display:none;position:absolute;bottom:0;padding:5px;background-color:#000;left:0;right:0;margin:0;color:#fff;font-size:12px;font-weight:300;font-family:sans-serif}.justified-gallery>a>.caption.caption-visible,.justified-gallery>div>.caption.caption-visible{display:initial;opacity:.7;filter:"alpha(opacity=70)";-webkit-animation:justified-gallery-show-caption-animation 500ms 0 ease;-moz-animation:justified-gallery-show-caption-animation 500ms 0 ease;-ms-animation:justified-gallery-show-caption-animation 500ms 0 ease}.justified-gallery>.entry-visible{opacity:1;filter:alpha(opacity=100);-webkit-animation:justified-gallery-show-entry-animation 500ms 0 ease;-moz-animation:justified-gallery-show-entry-animation 500ms 0 ease;-ms-animation:justified-gallery-show-entry-animation 500ms 0 ease}.justified-gallery>.spinner{position:absolute;bottom:0;margin-left:-24px;padding:10px 0;left:50%;opacity:initial;filter:initial;overflow:initial}.justified-gallery>.spinner>span{display:inline-block;opacity:0;filter:alpha(opacity=0);width:8px;height:8px;margin:0 4px;background-color:#000;border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px} body { font-size: 18px; font-family: 'Josefin Sans', Helvetica, Arial, sans-serif; } .tiny { font-size: 12px; /* 75% of the baseline */ font-family: 'Josefin Sans', Helvetica, Arial, sans-serif; } .small { font-size: 15px; /* 75% of the baseline */ font-family: 'Josefin Sans', Helvetica, Arial, sans-serif; } .smallplus { font-size: 16px; /* 75% of the baseline */ font-family: 'Josefin Sans', Helvetica, Arial, sans-serif; } .large { font-size: 20px; /* 125% of the baseline */ font-family: 'Josefin Sans', Helvetica, Arial, sans-serif; } h1 { font-size: 35px; font-family: 'Dancing Script', Georgia, Times, serif; } h2 { font-size: 25px; font-family: 'Dancing Script', Georgia, Times, serif; } div.horizontalRule { min-height: 1px; clear:both; width:100%; border-bottom:1px solid #d1d1d1; height:1px; padding-top:5px; margin-top:5px; margin-bottom:5px; } a { text-decoration:none; } img{ border-radius:0px; } a:hover { color:#999999; -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; }