/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Made by GREG.CH, developer Greg Lemmenmeier, May 2012.
PHP-generated CSS -3- file: auto-adapting, site-elements coloring, GZIP-compressed, UTF-8.
Incl. Media Queries for Responsive Design (auto-adapts to PC, iPad, phones, netbooks etc.)
*/

/* latin */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  src: local('Anton Regular'), local('Anton-Regular'), url(http://fonts.gstatic.com/s/anton/v8/o-91-t7-bPc7W26HmS2N4Q.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* latin */
@font-face {
  font-family: 'Coda';
  font-style: normal;
  font-weight: 400;
  src: local('Coda'), local('Coda-Regular'), url(http://fonts.gstatic.com/s/coda/v11/_xmjOXyFZCVnKmbBxb_PUA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}




/* R E S E T __________________________________________________________________________ */

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,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{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}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:none}table{border-collapse:collapse;border-spacing:0}


/* B A S I C S ________________________________________________________________________ */

html,
body {
font:15px/1.5 'Coda',Arial,sans-serif;
color:#222;
width:100%;
}

body {
background:#E5E5E5 0 0 repeat;
padding:0;
margin:0 auto;
margin-top:1.6em;
}
        @media screen and (max-width: 800px) {
        body {
        margin-top:0;
        }}

        body:before {
        content:"";
        position:fixed;
        top:-10px;
        left:0;
        width:100%;
        height:10px;
        z-index:100;
        -webkit-box-shadow: -3px 1px 18px rgba(0,0,40,1);
        -moz-box-shadow: -3px 1px 18px rgba(0,0,40,1);
        box-shadow: -3px 1px 18px rgba(0,0,40,1);
        }

        body:after {
        content:"";
        position:fixed;
        bottom:-10px;
        left:0;
        width:100%;
        height:10px;
        z-index:100;
        -webkit-box-shadow: 0 0px 18px rgba(255,255,255,1);
        -moz-box-shadow: 0 0px 18px rgba(255,255,255,1);
        box-shadow: 0 0px 18px rgba(255,255,255,1);
        }

#sitewrapper {
position:relative;
z-index:5;
background:#FFFFFF;
width:85%;
max-width:1010px;
margin-right:auto;
margin-left:auto;
padding-right:20px;
padding-left:20px;
border:60px dashed #E5E5E5;
box-shadow:2px 2px 40px #BBB;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:10px;
margin-bottom:44px;
}
        @media screen and (max-width: 1024px) {
        #sitewrapper {
        width:93%;
        border:0;
        padding-right:0;
        padding-left:0;
        margin:auto;
        margin-top:27px;
        }}

        @media screen and (max-width: 768px) {
        #sitewrapper {
        width:100%;
        padding:0px;
        margin:0;
        margin-top:39px;
        border:0;
        border-radius:26px;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        }}


#main
{
clear:both;
width:100%;
display:table;
table-layout:fixed;
}
        @media screen and (max-width: 480px) {
        #main {
        width:100%;
        padding:0;
        margin:0;
        background:none;
        }}

        /* bodytext gets side-margins on smartphones */
        @media only screen and (max-width: 800px) {
        p {
        line-height:160%;
        margin:0;
        padding:0 22px 0 22px;
        }}

.contentblock {
clear:left;
min-height:166px;
border-top:8px solid #919C9E;
border-left:5px solid #FFF;
margin-top:29px;
margin-bottom:50px;
}
        @media only screen and (max-width: 768px) {
        .contentblock {
        float:left;
        width:auto;
        padding:0px 22px 0 22px;
        }}

.contentblock .toplegend {
float:left;
color:#888;
font-size:0.8em;
letter-spacing:1px;
padding-left:10px;
padding-bottom:14px;
margin-top:-11px;
}
.contentblock .toplegend span {
padding:5px;
background-color:#FFFFFF;
}

.contentblock .references-picture-rwdbefore {
clear:left;
display:block;
float:left;
width:193px;
height:138px;
background:transparent url(bg_portfolio_screenshot.gif) no-repeat;
padding:11px 0 0 5px;
margin-top:1px;
margin-right:22px;
}
        @media only screen and (max-width: 768px) {
        .contentblock .references-picture-rwdbefore {
        display:none;
        }}

.contentblock .references-picture-rwdafter {
display:none;
}
        @media only screen and (max-width: 768px) {
        .contentblock .references-picture-rwdafter {
        display:block;
        clear:left;
        width:193px;
        height:138px;
        background:transparent url(bg_portfolio_screenshot.png) no-repeat;
        padding:11px 0 0 5px;
        margin-bottom:-5px;
        }}

.contentblock .skills-picture-rwdbefore {
display:block;
float:left;
width:193px;
height:148px;
margin-right:23px;
}
        @media only screen and (max-width: 768px) {
        .contentblock .skills-picture-rwdbefore {
        display:none;
        }}

.contentblock .skills-picture-rwdafter {
display:none;
}
        @media only screen and (max-width: 768px) {
        .contentblock .skills-picture-rwdafter {
        display:block;
        clear:left;
        width:193px;
        height:148px;
        margin-bottom:8px;
        }}


.contentblock .infosector {
display:block;
float:left;
width:32%;
background:#F2F2F2;
font-size:13px;
padding:2px;
border:1px solid #DDD;
border-bottom:0;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
box-shadow:2px 3px 3px #DDD;
}
        @media only screen and (max-width: 1200px) {
        .contentblock .infosector {
        width:99%;
        }}

        @media only screen and (max-width: 1024px) {
        .contentblock .infosector {
        font-size:14px;
        }}

        @media only screen and (max-width: 768px) {
        .contentblock .infosector {
        width:98%;
        margin-bottom:14px;
        }}

        @media only screen and (max-width: 768px) {
        .contentblock .infosector h1 {
        font-size:28px;
        }}

.contentblock .l1 {
        color:#FFF;
        background:#FF5A00;
        padding:0 5px 0 5px;
        margin-right:2px;
}

.contentblock .l2 {
color:#FFF;
background:#6B7678;
}

.contentblock .description {
display:block;
float:left;
width:38%;
min-height:98px;
font-size:13px;
color:#444444;
line-height:170%;
text-align:justify;
-moz-hyphens:auto;
hyphens:auto;
padding-left:20px;
margin-top:-4px;
margin-bottom:20px;
}

        @media only screen and (max-width: 1024px) {
        .contentblock .description {
        width:auto;
        font-size:15px;
        padding-left:0;
        margin-top:10px;
        }}

        @media only screen and (max-width: 1200px) {
        .contentblock .description {
        width:auto;
        padding-left:0;
        margin-top:10px;
        }}

        @media only screen and (max-width: 768px) {
        .contentblock .description {
        width:auto;
        font-size:15px;
        text-align:left;
        margin:8px;
        }}

.contentblock:hover {
color:#000;         height:auto;
border-top:8px solid #333;
text-shadow:0 1px 1px #777777;
}

h1 {
font:1.7em 'Anton',sans-serif;
color:#7A8387;
letter-spacing:0px;
text-transform:uppercase;
margin-top:23px;
margin-bottom:8px;
animation:pulse1 4.2s;
}
@keyframes pulse1 {
0% { color: #DDEAEC; }
100% { color: #7A8387; }
}
        @media only screen and (max-width:768px) {
        h1 {
        font:1.7em/1.1 'Anton',sans-serif;
        animation:none;
        }
        }

        @media only screen and (max-width:600px) {
        h1 {
        font:1.7em/1.3 'Anton',sans-serif;
        color:#A5B1B0;
        margin-top:10px;
        margin-bottom:10px;
        }}

h2
{
font:17px/1 'Anton',Impact,sans-serif;
color:#F60;
padding-bottom:30px;
}

.reactions_title {
font-size:11px;
font-weight:bold;
line-height:30px;
margin-top:5px;
}

h3
{
font:26px/1 'Anton',sans-serif;
color:#FFF;
letter-spacing:4px;
margin-bottom:0.8em;
text-shadow:0 2px 2px #000000;
}
        @media screen and (max-width: 497px) {
        h3 {
        margin-top:20px;
        }}

h4
{
margin-bottom:15px;
}

h4 a, h4 a:visited {
background:#222244;
}

p, ul {margin-bottom:0.8em}


hr {width:96%;margin-bottom:0.8em;border:none;border-top:1px solid #6B7678}


.italic {
font-family:Arial;
font-size:12px;
font-style:italic;
color:#777;
}

.clear
{
clear:both;
width:0;
height:0;
display:block;
overflow:hidden;
visibility:hidden;
}


.primarycolor {color:#FF5A00}
.secondarycolor {color:#6B7678}


#ticker {
width:277px;
height:225px;
background:#6B7678;
font-family:'Arial';
font-style:italic;
font-size:14px;
line-height:145%;
color:#FFF;
text-shadow:5px 1px 10px #333;
-moz-hyphens:auto;
hyphens:auto;
padding:15px 22px 20px 17px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border:2px dotted #FFDD66;
border-radius:8px;
cursor:pointer;
}
        @media screen and (max-width: 497px) {
        #ticker {
        width:86%;
        }}

#ticker:hover {
background:#FF6600;
color:#000;
}

#fadehover {
position:relative;
padding-top:130px;
cursor:pointer;
}
img.a {
position:absolute;
left:0;
top:0;
z-index:10
}
img.b {
position:absolute;
left:0;
top:0;
}

        @media only screen and (max-width:497px) {
        #goodlinks {
        display:none;
        }}


.gregpics img {
background:#BBB;
display:block;
float:left;
margin-right:3%;
margin-bottom:20px;
border:3px solid #FBDB6B;
box-shadow:10px 15px 18px #AAA;
-moz-border-radius:31px;
-webkit-border-radius:31px;
border-radius:25px;
}


@media screen {
.onlywhenprinting {
display:none;
}}


#gregmap {
height: 100%;
}

.iwin {
width:100%;max-width:400px;
font-family:Arial,sans-serif;
font-size:12px !important;
color:#000;
text-align:left;
padding:0;
overflow:hidden;
}

.iwintit {

font-size:13px !important;
color:#F60;
text-align:center;
border-bottom:1px solid #FF5A00;
}

.iwinimg {
float:left;
width:120px;
height:70px;
margin-right:7px;
border:3px double #777;
}


.decolink-eye a {
background-image: url("http://www.swissgreg.com/icon_eye.gif");
background-position:0 6px;
background-repeat:no-repeat;
padding-left:16px;
}


.decolink-eye a:hover {
background-image: url("http://www.swissgreg.com/icon_eye.gif");
background-position:0 -10px;
background-repeat:no-repeat;
padding-left:16px;
}


.decolink-screen a {
background-image: url("icon_screen.gif");
background-position:0 7px;
background-repeat:no-repeat;
padding-left:16px;
font-weight:bold;
}
.decolink-screen a:hover {
background-image: url("icon_screen.gif");
background-position:0 -12px;
background-repeat:no-repeat;
padding-left:16px;
}

.label1 {
background:#FF5A00;
color:#FFF;
padding:0 5px 0 5px;
}

.label2 {
background:#6B7678;
color:#FFF;
padding:0 5px 0 5px;
}

.justify {
text-align:justify;
}

.fontsize17 {
font-size:17px;
}


.u {
text-decoration:underline;
}


.nobreak {
white-space:pre;
}

a.tooltip {text-decoration:none}
a.tooltip span {display:none;text-decoration:none}
a.tooltip:hover span {display:block;position:absolute;bottom:28px;left:0px;width:265px;z-index:20;font-size:13px;font-weight:normal;color:#000000;text-decoration:none;text-align:left;line-height:120%;background:#FFFFAA;padding:4px;border:6px solid #909B9D;border-bottom:1px solid #CCC;border-radius:5px}

a.tooltip-left {text-decoration:none}
a.tooltip-left span {display:none;text-decoration:none}
a.tooltip-left:hover span {display:block;position:absolute;bottom:28px;right:0px;width:265px;z-index:20;font-size:13px;font-weight:normal;color:#000000;text-decoration:none;text-align:left;line-height:120%;background:#FFFFAA;padding:4px;border:6px solid #909B9D;border-bottom:1px solid #CCC;border-radius:5px}

/* T O O L B A R ________________________________________________________________________ */

#toolbar {
z-index:2;
position:absolute;
top:-5px;
left:0;
right:0;
height:103px;
background-image:url(http://www.swissgreg.com/bg.jpg);
font:15px/1.5 'Coda',Arial,sans-serif;
font-size:0.8em;
color:#FFF;
padding:6px 7% 100px 3%;
text-align:right;
letter-spacing:1px;
border-bottom:32px solid #FFDD66;
}
        @media only screen and (max-width:600px) {
        #toolbar {
        padding:10px 0 0 0;
        }}

        @media only screen and (min-width:600px) {
        #toolbar {
        padding-right:8%;
        }}

        @media only screen and (max-width:768px) {
        #toolbar {
        height:94px;
        border-bottom:65px solid #FFDD66;
        }}

        @media only screen and (min-width: 1200px) {
        #toolbar {
        padding-right:10%;
        }}

        @media only screen and (min-width: 1300px) {
        #toolbar {
        padding-right:21%;
        }}

#toolbar a {
display:inline-block;
color:#FFF;
text-decoration:none;
padding-top:3px;
padding-bottom:1px;
}

#toolbar .raised {
padding-top:3px;
display:inline-block;
color:#FFF;
font-weight:bold;
text-decoration:none;
text-shadow:1px 1px 3px #000000;
}
        @media only screen and (min-width: 600px) {
        #toolbar-contentwide {
        display:block;
        margin-top:2px;
        margin-right:13px;
        }
        #toolbar-contentnarrow {
        display:none;
        }}

        @media only screen and (max-width: 600px) {
        #toolbar-contentwide {
        display:none;
        }
        #toolbar-contentnarrow {
        display:block;
        font-size:13px;
        text-align:center;
        padding-top:3px;
        }}

        @media only screen and (max-width: 600px) {
        .colorselector {
        visibility:hidden;
        }}



/* H E A D E R ______________________________________________________________________ */

#header
{
position:relative;
padding-top:30px;
margin-bottom:40px;
}


#greglogo
{
width:204px;
height:83px;
margin-top:13px;
margin-bottom:-0px;
}
        @media screen and (max-width: 1060px) {
        #greglogo {
        margin-left:10px;
        }}

        @media screen and (max-width: 800px) {
        #greglogo {
        margin:20px 0 15px 28px;
        }}

        @media screen and (max-width: 600px) {
        #greglogo {
        margin:-14px 0 -12px 10px;
        }}

#greglogo:hover
{
animation: skew 3s infinite;
transform: skew(10deg);
animation-direction: alternate;
}
@keyframes skew {
0% {
transform: skewX(-10deg);
}
100% {
transform: skewX(10deg);
}}


/* N A V I G A T I O N  (TOP)_________________________________________________________ */

#topnavigation {
position:absolute;
right:0;
bottom:-7px;
font:1.5em 'Anton',sans-serif;
}
        @media screen and (max-width: 768px) {
        #topnavigation {
        width:100%;
        margin:auto;
        font-size:1.1em;
        position:relative;
        background:#FAFAFA;
        margin-bottom:-12px;
        }}

        @media screen and (max-width: 480px) {
        #topnavigation {
        width:100%;
        padding:0;
        margin:0;
        }}


#topnavigation ul {
float:right;
}
        @media screen and (max-width: 1010px) {
        #topnavigation ul {
        padding-bottom:10px;
        }}

        @media screen and (max-width: 768px) {
        #topnavigation ul {
        float:none;
        width:100%;
        display:table;
        table-layout:fixed;
        font-size:14px;
        padding-bottom:0;
        margin-bottom:0px;
        }
        #topnavigation ul li.current {
        border:1px solid #6B7678        }}

        @media screen and (max-width: 480px) {
        #topnavigation ul {
        float:none;
        width:100%;
        display:table;
        table-layout:fixed;
        font-size:12px;
        }}

#topnavigation ul li {
float:left;
display:inline-block;
}

        @media screen and (max-width: 768px) {
        #topnavigation ul li {
        float:none;
        width:100%;
        overflow:hidden;
        display:table-cell;
        text-align:center;
        background:#F7F7F7;
        font-size:1.5em;
        letter-spacing:1px;
        border:1px solid #BBB;
        border-left:none;
        }}

#topnavigation ul li a {
display:block;
padding:0.4em 0.9em;
text-decoration:none;
color:#FF5A00;
}
        @media screen and (max-width: 768px) {
        #topnavigation ul li a {
        font-size:0.9em;
        color:#FF6600;
        text-transform:uppercase;
        padding:10px 0 10px 0;
        }}

#topnavigation ul li a .sub {
display:block;
font-size:0.8em;
color:#B3BEC6;
}
        @media screen and (max-width: 1010px) {
        #topnavigation ul li a .sub {
        display:none;
        }}

#topnavigation ul li a:hover,
#topnavigation ul li.current a {
color:#fff;
background-color:#6B7678;
}

#topnavigation ul li.current a {
}
        @media screen and (max-width: 768px) {
        #topnavigation ul li.current a {
        border:1px solid #6B7678;
        }}

#topnavigation ul li a:hover .sub,
#topnavigation ul li.current .sub {
color:#CCC;
}


/* M A I N  +  IF A PAGE WITH SUBNAV ________________________________________________ */

#main.ifsubnavigation .subnav,
#main.ifsubnavigation .content {
        display:table-cell;
        vertical-align:top;
}
#main.ifsubnavigation .subnav {
        width:160px;
        font-size:16px;
        padding-right:22px;
}
#main.ifsubnavigation .content {
        padding-top:6px;
        padding-left:20px;
}
#main.ifsubnavigation .subnav select.menu {
        display:none;
}
#main.ifsubnavigation .subnav ul.menu li {
        border-bottom:1px solid #6B7678;
        font-family:Anton;
        white-space:pre;
}
#main.ifsubnavigation .subnav ul.menu li a,
.subnav .back {
        text-decoration:none;
        display:block;
        padding:17px 0.3em 0.1em 0.5em;
        margin-top:11px;
}
#main.ifsubnavigation .subnav ul.menu li.current a,
#main.ifsubnavigation .subnav ul.menu li a:hover,
.subnav .back {
        color:#FFF;
        background-color:#6B7678;
}

        @media screen and (max-width: 768px) {
        #main.ifsubnavigation .subnav,
        #main.ifsubnavigation .content {
        display:block;
        }
        #main.ifsubnavigation .subnav {
                width:auto;
                background-color:#6B7678;
                padding:10px;
                margin-top:-40px;
        }
        #main.ifsubnavigation .subnav ul.menu {
                display:none;
        }
        #main.ifsubnavigation .subnav select.menu {
                width:95%;
                display:block;
                padding:0;
                color:#6B7678;
                font-size:1.1em;
                background:#EFEFEF;
                border-color:#FF5A00;
                margin-top:10px;
        }}



/* L I N K S __________________________________________________________________________ */

a:link, a:visited {
color:#555555;
text-decoration:none;
outline:none;
-moz-transition:border-color 910ms ease 0s;
-webkit-transition:border-color 910ms ease 0s;
border-bottom:1px solid transparent;
}
a:hover {
position:relative;
bottom:1px;
border-color:#000000;
-moz-transition:all 0.2s linear 0s;
-moz-transition:border-color 0ms ease 0s;
-webkit-transition:all 0.2s linear 0s;
-webkit-transition:border-color 0ms ease 0s;
}
a:active {
bottom:0;
position:relative;
outline:none;
}
a img {
border:none
}
        @media screen and (max-width: 800px) {
        a:active {
        color:#000000;
        background:#FFFF00;
        }}

.linknewtab {
background-image:url(icon_newtab.png);
padding: 0 0 0 26px;
margin-left:5px;
background-position: 0 0;
background-repeat: no-repeat;
}



/* F O R M S __________________________________________________________________________ */

input,
textarea,
select
{
font:100% 'Coda',Arial,sans-serif;
color:#FFFFFF;
}


input[type=text],
input[type=search],
input[type=email],
input[type=url],
textarea
{
background:#6B7678;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
padding:6px;
border:5px solid #ABC;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:6px;
margin:auto;
margin-bottom:8px;
}


input:focus,
textarea:focus
{
-webkit-box-shadow:0 0 5px #FFF;
-moz-box-shadow:0 0 5px #FFF;
box-shadow:0 0 5px #FFF;
-webkit-transform: scale(1.01);
-moz-transform: scale(1.01);
transform: scale(1.01);
letter-spacing:1px;
text-shadow: 0px 1px 1px #000000;
}


input[type=submit]
{
font-family:verdana;
width:135px;
height:27px;
background:#FFDD66;
color:#000;
border:4px outset #F60;
border-top:1px solid #777;
border-radius:8px;
padding-top:0px;
margin:0 6px 2px 6px;
cursor:pointer;
}


input[disabled]
{
color:#999;
}

/* PAGE: HOME --------------------------------------------------------------------------------- */

#homeblocks {
width:100%;
margin:auto;
margin-top:-23px;
}
        /* Smartphones portrait/landscape */
        @media only screen and (max-width:800px) {
        #homeblocks {
        width:320px;
        }}

        /* Tablets landscape */
        @media only screen and (min-width:768px) {
        #homeblocks {
        width:730px;
        }}

        /* Desktop */
        @media only screen and (min-width:1280px) {
        #homeblocks {
        width:1040px;
        }}


#home-block-1 {
float:left;
width:320px;
height:340px;
}
        /* Tablets portrait */
        @media only screen and (min-width:768px) {
        #home-block-1 {
        padding:0 20px 0 20px;
        }}

        /* Desktop */
        @media only screen and (min-width:1280px) {
        #home-block-1 {
        padding:0 10px 0 0px;
        }}

#home-block-2 {
float:left;
width:320px;
height:340px;
}
        /* Tablets portrait */
        @media only screen and (min-width:768px) {
        #home-block-2 {
        padding:0 20px 0 20px;
        }}

        /* Desktop */
        @media only screen and (min-width:1280px) {
        #home-block-2 {
        padding:0 10px 0 8px;
        }}



#home-block-3 {
float:left;
width:320px;
height:340px;
}
        /* Tablets portrait */
        @media only screen and (min-width:768px) {
        #home-block-3 {
        padding:0 20px 0 20px;
        }}

        /* Desktop */
        @media only screen and (min-width:1280px) {
        #home-block-3 {
        padding:0 10px 0 10px;
        }}


#home-block-4 {
float:left;
width:320px;
height:340px;
}
        /* Tablets portrait */
        @media only screen and (min-width:768px) {
        #home-block-4 {
        padding:0 20px 0 20px;
        }}

        /* Desktop */
        @media only screen and (min-width:1280px) {
        #home-block-4 {
        padding:0 10px 0 0px;
        }}


#home-block-5 {
float:left;
width:320px;
height:340px;
}
        /* Tablets portrait */
        @media only screen and (min-width:768px) {
        #home-block-5 {
        padding:0 20px 0 20px;
        }}

        /* Desktop */
        @media only screen and (min-width:1280px) {
        #home-block-5 {
        padding:0 10px 0 8px;
        }}


#home-block-6 {
float:left;
width:320px;
height:340px;
}
        /* Tablets portrait */
        @media only screen and (min-width:768px) {
        #home-block-6 {
        padding:0 20px 0 20px;
        }}

        /* Desktop */
        @media only screen and (min-width:1280px) {
        #home-block-6 {
        padding:0 10px 0 10px;
        }}



/* PAGE: ABOUT ---------------------------------------------------------------------------- */

#timeline {
width:861px;
height:158px;
margin:auto;
margin-top:8px;
margin-left:-13px;
}
        @media only screen and (max-width: 1209px) {
        #timeline {
        display:none;
        }}

#timeline-vertical {
width:320px;
height:861px;
margin:20px 0 40px 0;
}
        @media only screen and (min-width: 1210px) {
        #timeline-vertical {
        display:none;
        }}



/* PAGE: REACTIONS -------------------------------------------------------------------------- */

#tiles {
list-style-type:none;
position:relative;
margin-top:-2px;
}

#tiles li {
display:none;
}
        @media only screen and (max-width: 768px) {
        #tiles li {
        margin-top:0px;
        margin-bottom:0;
        }}

.reactions-gridbox {
float:left;
width:230px;
background:#E8EDF0;
font-size:13px;
text-align:justify;
-moz-hyphens:auto;
hyphens:auto;
padding:5px;
padding-bottom:3px;
border:1px solid #BBB;
border-bottom:8px solid #6B7678;
-webkit-border-radius:3px;
-moz-border-radius:4px;
border-radius:6px;
margin:4px;
margin-bottom:18px;
}
        @media only screen and (max-width: 768px) {
        .reactions-gridbox {
        width:300px;
        font-size:16px;
        text-align:left;
        }}

        @media only screen and (max-width: 500px) {
        .reactions-gridbox {
        width:340px;
        font-size:16px;
        text-align:left;
        margin:0 0 18px -2px;
        }}

.reactions-gridbox h2 {
padding:0;
font-family:Arial,sans-serif;
color:#FFF999 !important;
background:#000;
text-transform:uppercase;
}

.reactions-gridbox:hover {
color:#000;
background:#FFF3A9;
text-shadow:1px 2px 2px #BBB;
border:1px solid #000;
border-bottom:8px solid #FF5A00;
}

.reactions-icon {
width:16px;
height:21px;
padding-top:5px;
margin-right:2px;
margin-bottom:-1px;
cursor:help;
}


/* PAGE: WEBLOG ------------------------------------------------------------------------- */


.img-weblog-thumbnail {
float:right;
width:103px;
width:103px;
margin-left:15px;
border:1px solid #000;
border-right:3px solid #000;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
        @media only screen and (max-width:768px) {
        .img-weblog-thumbnail {
        margin-right:5px;
        margin-left:5px;
        }}


.img-weblog {
float:right;
background:url(bg_img_weblog.png) bottom;
padding-bottom:20px;
margin-top:5px;
margin-left:22px;
border-top:1px solid #DDD;
}
        @media only screen and (max-width:768px) {
        .img-weblog {
        display:block;
        float:none;
        margin:auto;
        }}


.at {
max-width:100%;
margin-bottom:45px;
border:1px dashed #246;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-moz-box-shadow:3px 3px 5px 5px #89A;
-webkit-box-shadow:3px 3px 5px 5px #89A;
box-shadow:3px 3px 5px 5px #89A;
}


.blogpost-date {
background: url("weblog_datecircle.gif") repeat scroll 0 0 transparent;
float:left;
font-size:17px;
height:65px;
text-transform:uppercase;
width:65px;
margin-right:19px;
}
.blogpost-date > div {
float:left;
font-family:'Arial',sans-serif;
position:relative;
}
.blogpost-month {
color:#000000;
left:0;
text-align:right;
top:12px;
width:30px;
}
.blogpost-day {
color:#FFFFFF;
left:8px;
top:26px;
}


        @media only screen and (max-width:800px) {
        .weblog-text {
        font-family:'Coda',Arial;
        font-size:16px;
        color:#004;
        line-height:150%;
        }}


.video-container {
position:relative;
padding-bottom:56.25%;/*16/9ratio*/
height:0;
overflow:hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}


/* F O O T E R __________________________________________________________________________ */

#footer {
background-color:#213451;
font-size:13px;
color:#FFFFFF;
padding:20px;
-webkit-border-radius:12px;
-moz-border-radius:12px;
border-radius:8px;
border:4px dashed #FF5A00;
margin-bottom:35px;
}
        @media screen and (max-width: 600px) {
        #footer {
        padding:0;
        margin:0;
        }}

#footer-block-1 {
font-family:Arial;
width:31%;
float:left;
margin-top:15px;
margin-right:20px;
font-size:12px;
font-weight:bold;
color:#E3FFFF;
text-align:justify;
line-height:180%;
-moz-hyphens:auto;
hyphens:auto;
}
        @media screen and (max-width: 1050px) {
        #footer-block-1 {
        width:46%;
        float:left;
        padding-top:10px;
        border-left:0;
        margin-top:10px;
        }}

        @media screen and (max-width: 600px) {
        #footer-block-1 {
        width:100%;
        float:none;
        line-height:160%;
        margin-bottom:20px;
        margin:0;
        padding-bottom:20px;
        }}

        /* where you are */
        @media screen and (max-width: 600px) {
        #whereyouare {
        text-align:justify;
        padding:0 20px 0 20px;
        }}

#footer-block-2 {
width:31%;
float:left;
padding-left:35px;
margin-top:15px;
}
        @media screen and (max-width: 1050px) {
        #footer-block-2 {
        width:40%;
        float:left;
        padding-top:10px;
        border-left:0;
        margin-top:10px;
        }}

        @media screen and (max-width: 600px) {
        #footer-block-2 {
        width:100%;
        float:none;
        margin-bottom:20px;
        margin:0;
        padding:0;
        }}

.sitemaplink-active {
padding:1px 4px 1px 5px;
background:#6B7678;
border-left:1px solid #FF5A00;
margin-left:-5px;
}


#footer-block-3 {
width:30%;
float:left;
padding-left:3px;
margin-top:15px;
}
        @media screen and (max-width:1050px) {
        #footer-block-3 {
        clear:left;
        width:100%;
        padding-top:10px;
        border-top:1px solid #CCC;
        border-left:0;
        margin-top:10px;
        }}

        @media screen and (max-width:600px) {
        #footer-block-3 {
        width:95%;
        padding-left:15px;
        padding-left:15px;
        }}

#footer a {
color:#DDDDDD;
z-index:100;
}
        @media screen and (max-width:600px) {
        #footer a {
        font-size:15px;
        line-height:300%;
        border-bottom:1px solid #FFF;
        }}

#sitemap {
letter-spacing:3px;
line-height:170%;
}
        @media screen and (max-width:497px) {
        #sitemap {
        margin-left:15px;
        margin-bottom:15px;
        }}

        @media screen and (max-width:497px) {
        #sitemap a {
        margin-left:15px;
        line-height:220%;
        margin-bottom:15px;
        }}

#sitemap a:hover {
letter-spacing:4px;
}



/* B O T T O M __________________________________________________________________________ */

#bottom {
font-size:13px;
color:#000;
text-align:center;
line-height:100%;
}
        @media screen and (max-width:768px) {
        #bottom {
        display:none;
        }}

#bottom a, #bottom a:visited {
color:#FF5A00;
font-weight:bold;
text-decoration:underline;
z-index:50;
}

#bottom a:hover {
color:#000;
}

#backtotop a {
position:fixed;
right:6px;
bottom:13px;
font-size:30px;
color:#919C9E;
}
        @media screen and (max-width:800px) {
        #backtotop {
        display:none !important;
        }}

.x {
display:none;
}


/* F X __________________________________________________________________________ */

.animated {
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1.4s;
-moz-animation-duration:1.4s;
-ms-animation-duration:1.4s;
-o-animation-duration:1.4s;
animation-duration:1.4s;
}

@keyframes bounceIn {
0% {
        opacity: 0;
        transform: scale(.3);
}

50% {
        opacity: 1;
        transform: scale(1.05);
}

70% {
        transform: scale(.9);
}

100% {
        transform: scale(1);
}
}

.bounceIn {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-o-animation-name: bounceIn;
animation-name: bounceIn;
}


a[href^="http://maps.google.com/maps"]{display:none !important}
a[href^="https://maps.google.com/maps"]{display:none !important}

.gmnoprint a, .gmnoprint span, .gm-style-cc {
display:none;
}

/* ___________________________________________________________________________________________________ */
/* That was easy! Let me know if I can make a great website for you. Simply contact me at info@greg.ch */
/* ___________________________________________________________________________________________________ */