/*
         BlueSearch.io CSS
         ======================
         Grundfarben: #dadb0e Gelb-Gr�n / #003974 (Blau dunkel) / #0d57a3 (Blau) / #83d0f5 (Blau Hell)
*/

/* Links */
a:link, a:visited {
        text-align: left;
         font-size: 1.0em;
         color: #003974;
         font-weight: normal;
         text-decoration:underline;
}

a:hover {
         font-weight: normal;
         color: #000000;
         text-decoration:none;
}

a.button:link, a.button:visited {
         display: inline-block;
         text-align: left;
         font-size: 1.2em;
         font-weight: bold;
         text-shadow: #930e00 1px 1px 1px;
         color: #FFFFFF;
         padding: 5px 35px 5px 15px;
         margin: 5px 0px 2px 0px;
         background-color: #bd1220;
         text-decoration:none;

         -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
}

a.button:hover {
         text-shadow: #2b2b2b 1px 1px 1px;
         color: #FFFFFF;
         background-color: #252525;
         text-decoration:none;
}


/* �berschriften */
h1 {
         font-family: 'Nunito Sans';
         font-size: 2.2em;
         font-weight: bold;
         text-align: center;
         color: #003974;
         margin: 0px 0px 10px 0px;
         padding: 0px 0px 0px 0px;
         vertical-align:top;
}

h2 {
         font-family: 'Nunito Sans';
         font-size: 1.8em;
         font-weight: bold;
         text-align: left;
         color:#0d57a3;
         margin: 10px 0px 10px 0px;
         padding: 0px 0px 0px 0px;

         vertical-align:top;
         text-decoration:none;
}

h3 {
         font-family: 'Nunito Sans';
         font-size: 1.4em;
         font-weight: bold;
         text-align:left;
         color:#000000;
         margin: 5px 0px 5px 0px;
         padding: 0px 0px 0px 0px;
         vertical-align:top;
}

h4 {
         font-family: 'Nunito Sans';
         font-size: 1.2em;
         font-weight: bold;
         text-align:left;
         color:#000000;
         margin: 5px 0px 5px 0px;
         padding: 0px 0px 0px 0px;
         vertical-align:top;
}


/* Standarts */
body {
         background:#003974;
         font-size: 1.0em;
         vertical-align:top;
         text-align:left;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
         min-width: 320px;
}

body, tr, td, div {
         font-family: 'Nunito Sans';
         font-size: 1.0em;
         color: #1c375d;
         vertical-align:top;
         text-align:left;
}

.left            { float:left; }
.right           { float:right; }
.a_l             { text-align: left; }
.a_c             { text-align: center; }
.a_r             { text-align: right; }
img              { border: 0px; }
img.content_left { float: left; width: calc(50% - 50px); height: auto; margin-right: 50px; margin-bottom: 20px; }
img.content_right{ float: right; width: calc(50% - 50px); height: auto; margin-left: 50px; margin-bottom: 20px; }
.clear           { clear:both; line-height:0.0em; height: 0px; display: block; background-color: #FFDF00; }
.pad             { padding: 10px; }
.white           { color: #FFFFFF; }
.small           { font-size: 0.8em; }
video.content_left { float: left; width: calc(50% - 50px); height: auto; margin-right: 50px; margin-bottom: 20px; }


/* Seite */
#wrapper {
         width: 100%;
         margin: 0px auto;
         max-width: 1920px;
                  -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25);
         -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25);
         box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.25);
}

#wrapper.bg { background: #FFFFFF; }

.in {
         width: calc(100% - 50px);
         max-width: 980px;
         margin: 0px auto;
         padding: 0px 25px;
}

#header {
         background: #FFFFFF;
         background: rgb(131,208,245);
         background: -moz-linear-gradient(top,  rgba(131,208,245,1) 0%, rgba(255,255,255,1) 90%);
         background: -webkit-linear-gradient(top,  rgba(131,208,245,1) 0%,rgba(255,255,255,1) 90%);
         background: linear-gradient(to bottom,  rgba(131,208,245,1) 0%,rgba(255,255,255,1) 90%);
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#83d0f5', endColorstr='#ffffff',GradientType=0 );
         min-height: 50px;
         padding-bottom: 50px;
}

#header.no {
         background: #FFFFFF;
         background: rgb(255,255,255);
         background: -moz-linear-gradient(top,  rgba255,255,255,1) 0%, rgba(255,255,255,1) 90%);
         background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 90%);
         background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 90%);
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
         min-height: 50px;
         padding-bottom: 50px;
}

#header .menu {
         display: block;
         width: calc(100% - 20px);
         padding: 10px 20px 10px 0px;
         text-align: right;
}

#header .menu a {
         display: inline-block;
         margin: 10px 10px;
         padding-bottom: 3px;
         font-size: 0.9em;
         color: #ffffff;
         text-align: center;
         text-decoration: none;
         text-shadow: 1px 1px 0px rgba(0,0,0,0.1);
         border-bottom: 2px transparent solid;
}
#header .menu a:hover { border-bottom: 2px #003974 solid; color: #003974; }
#header.no .menu a { color: #AFAFAF; }
#header.no .menu a:hover { border-bottom: 2px #003974 solid; color: #003974; }

#logo {
         max-width: 500px;
         margin: 0px auto;
         padding: 20px 0px;

         text-align: center;
}
#logo img {
         display: inline-block;
         width: 100%;
         max-width: 200px;
         height: auto;
         padding: 0;
         margin: 0;
}
#logo a { text-decoration: none; }
#logo a span {
         display: block;
         font-family: 'Nunito Sans';
         font-size: 3.0em;
         color: #FFFFFF;
         text-align: center;
         text-decoration: none;
         margin-top: -20px;
         line-height: 1.0em;
         text-shadow: rgba(0,0,0,0.3) 1px 0px 10px;
}
#logo a span:hover { color: #003974; }
#logo a span u { text-decoration: none; color: #0d57a3; }

/* Seite */
#site {
         width: 100%;
         background: #FFFFFF;
         margin: 0px 0px 0px 0px;
         padding: 20px 0px 20px 0px;
         min-height: 100px;
}

#site h2 { padding-top: 50px; }

#content {
         float: left;
         width: calc(100% - 320px);
}

#sitebar {
         float: right;
         width: 300px;
}

/* Footer */
#footer {
         display: block;
         width: calc(100% - 50px);
         background: #1F6EBE url(../images/bg_footer.png) top center no-repeat;
         background-size: 100%;
         margin: 0px 0px 0px 0px;
         padding: 250px 25px 25px 25px;
}

#footer, #footer .a_l {
         color: #FFFFFF !important;
         font-size: 1.0em;
}

#footer a, #footer a:link, #footer a:visited {
         color: #FFFFFF;
         font-size: 0.8em;
         text-decoration: none;
}

#footer a:hover {
         font-weight: normal;
         color: #CED7E6;
}

#footer_small {
         display: block;
         width: calc(100% - 50px);
         margin: 0px 0px 0px 0px;
         padding: 10px 25px 0px 25px;
         background: transparent url(../images/footer.png) bottom center repeat-x;
}
#footer_small .in .left, #footer_small a, #footer_small a:link, #footer_small a:visited { color: #0d57a3; }
#footer_small .in { background: transparent url(../images/bg_fish.png) top right no-repeat; padding-bottom: 70px; }

/* Seitenanzeige */
#pages {
         width: 100%;
         line-height:30px;
         padding: 5px 0px;
         text-align: center;
}

#pages a:link, #pages a:visited {
         display: inline-block;
         height: 30px;
         width: 30px;

         font-size: 1.0em;
         color: #2F2F2F;
         font-weight: bold;
         text-decoration:none;
         text-align:center;

         padding: 0px 2px 2px 2px;
         margin: 2px 2px;
         background: #FFFFFF;

         -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
}

#pages a:first-child, #pages a:last-child { background: #003974; color: #FFFFFF; }
#pages a:hover, #pages a.active { background: #83d0f5; color: #FFFFFF; }

#pages div {
         display: inline-block;
         height: 27px;
         width: 27px;

         font-size: 1.0em;
         color: #FFFFFF;
         font-weight: bold;
         text-decoration:none;
         text-align:center;
         text-shadow: #940a15 1px 1px 0px;

         padding: 0px 0px 2px 0px;
         margin: 2px 1px;
         background: #bd1220;

         border: 1px #bd1220 solid;
         -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
}

/* Startseite */
#start {
         width: 100%;
         background: #0d57a3 url(../images/bg_start_top.jpg) top center no-repeat;
         background-size: 100%;

         margin: 0px 0px 0px 0px;
         padding: calc(100% / 7) 0px 10px 0px;
         min-height: 200px;
}
#start h1 { color: #FFFFFF; }
#start .start { color: #83d0f5; max-width: 800px; margin: 20px auto; }

#start .start div[class^="button_"] {
         display: inline-block;
         background: #FFFFFF;

         margin: 5px;
         padding: 5px 25px 5px 5px;

         color: #717171;

         -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
         border-radius: 50px;

         cursor: pointer;
         transition: all 1.0s;
}
#start .start div[class^="button_"] b { display: block; font-size: 1.2em; color: #0d57a3; }
#start .start div[class^="button_"] .text { display: inline-block; margin: 0px 0px 0px 10px; }
#start .start div[class^="icon_"]{ display: inline-block;  width: 50px; height: 50px; background: #0d57a3; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; }
#start .start .button_1 div[class^="icon_"]{ background: #0d57a3 url(../images/gs_icon_search.png) center center no-repeat; background-size: 70%; }
#start .start .button_1 b{ color: #002b58; }
#start .start .button_2 div[class^="icon_"]{ background: #002b58 url(../images/gs_icon_recycle.png) center center no-repeat; background-size: 70%; }
#start .start div[class^="button_"]:hover { -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.25); -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.25); box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.25); }

#start_content {
         width: 100%;
         background: #002b58 url(../images/bg_start_center.png) top center no-repeat;
         background-size: 100%;
         margin: 0px 0px 0px 0px;
         padding: calc(100% / 12) 0px 20px 0px;
         color: #FFFFFF;
}
#start_content .info { color: #FFFFFF; }
#start_content h2 { color: #dadb0e; }

/* Sonstiges */
#w { position: fixed; display: none; top: 0; left: 0; background: #000000; color: #FFFFFF; padding: 5px 10px; }
#shadow { display: none; position: fixed; top: 0; left: 0; z-index: 100; background-color: rgba(0, 0, 0, 0.55); width: 100vw; height: 100vh; cursor: pointer; }


/* Suche */
#search {
         display: block;
         background: #0d57a3;
         width: 80%;
         max-width: 600px;
         height: 60px;

         margin: 10px auto;
         padding: 0px;

         -webkit-box-shadow: 0px 20px 20px -20px rgba(0,0,0,0.75);
         -moz-box-shadow: 0px 20px 20px -20px rgba(0,0,0,0.75);
         box-shadow: 0px 20px 20px -20px rgba(0,0,0,0.75);

         -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
         border-radius: 50px;
}

#search input[type="text"]{
         width: calc(100% - 50px - 40px);
         height: calc(55px - 10px);
         padding-left: 15px;

         font-size: 1.2em;
         color: #FFFFFF;

         margin: 4px 0px 0px 5px;

         -webkit-border-top-left-radius: 50px;
         -webkit-border-bottom-left-radius: 50px;
         -moz-border-radius-topleft: 50px;
         -moz-border-radius-bottomleft: 50px;
         border-top-left-radius: 50px;
         border-bottom-left-radius: 50px;
}

#search input[type="submit"]{
         float: right;
         margin: 6px 8px 2px 2px;
         padding: 0px 0px 0px 0px;
         height: 48px;
         width: 44px;

         -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
         border-radius: 50px;

         -webkit-box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.25);
         -moz-box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.25);
         box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.25);
}

#search_info {
         text-align: center;
         padding-top: 20px;
         color: #898989;
         font-size: 0.8em;
}

#search_results { height: 120px; margin-bottom: 20px; }

#search_results .logo_icon {
         display: block;
         float:left;
         width: 70px;
         height: 70px;
         background: transparent url(../images/bluesearch_icon.svg) center center no-repeat;
         background-size: 100%;
}
#search_results #search {
         display: block;
         float: right;
         width: calc(100% - 90px);
         max-width: calc(100% - 90px);
         height: 55px;
         margin: 8px 0px 0px 0px;
}

#search input[type="text"]{ height: calc(50px - 12px); }
#search input[type="submit"]{ height: 43px; }

#search_results .search_options {
         display: block;
         float:left;
         margin: 10px 0px 10px 100px;
}

#search_results .search_options a, #search_results .search_options a.button:link, #search_results .search_options a.button:visited {
         display: inline-block;
         text-align: left;
         font-size: 1.2em;
         font-weight: normal;
         color: #003974;
         padding: 5px 10px 5px 10px;
         margin: 5px 0px 5px 0px;
         background-color: #EFEFEF;
         text-decoration:none;

         -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
}
#search_results .search_options a.active { background-color: #83d0f5; }

#search_results .search_options a.button:hover {
         text-shadow: #2b2b2b 1px 1px 1px;
         color: #FFFFFF;
         background-color: #83d0f5;
         text-decoration:none;
}

#search_results #search_info { text-align: right; padding-top: 10px; padding-right: 20px; }

#results_info { background-color: #003974; padding: 7px 0px; }
#results_info .in { color: #FFFFFF; }

/* Ergebnisse */
#results {
         width: 100%;
         background: #FFFFFF;
         margin: 0px 0px 0px 0px;
         padding: 20px 0px 20px 0px;
         min-height: 100px;
}


#results .items {
         float: left;
         width: calc(100% - 300px);
}

#results .item {
         margin: 10px 10px 20px 10px;
         display: block;
         color: #2F2F2F;
}

#results .item a { display: block; color: #2F2F2F; }
#results .item i { display: inline-block; width: calc(100% - 50px); color:#003974; padding: 2px; }
#results .item span { display: inline-block; padding: 2px 3px; margin-right: 5px; font-size: 0.6em; border: 1px #7F7F7F solid; color: #7F7F7F;-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }


/* Formulare */
input, textarea {
         background-color: #0d57a3;
         border: 0px #0d57a3 solid;

         font-family: 'Nunito Sans';
         font-size: 1.1em;
         color: #FFFFFF;
         vertical-align: top;

         padding: 5px 10px;
         margin: 2px 0px;

         -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
}
input:focus, select:focus, textarea:focus, button:focus { outline: none; }
::placeholder { color: #83d0f5; opacity: 1; }
:-ms-input-placeholder { color: #83d0f5; }
::-ms-input-placeholder { color: #83d0f5; }

select {
         border: 0px #0a6f33 solid;
         background-color: #0a6f33;

         font-size: 1.0em;
         color: #000000;
         vertical-align: top;

         padding: 5px 5px;
         margin: 2px 0px;
}

input[type="submit"] {
         background: #83d0f5 url(../images/gs_icon_search.png) center center no-repeat;
         background-size: 65%;

         border: 0px #057e9f solid;
         padding: 5px 5px 5px 5px;
         margin: 2px 0px;

         font-size: 1.1em;
         font-weight: bold;
         text-shadow: #870d17 1px 1px 0px;
         color: #FFFFFF;

         cursor: pointer;
         -webkit-box-shadow: inset 2px 2px 4px 0px rgba(50, 50, 50, 0.0);
         -moz-box-shadow:    inset 2px 2px 4px 0px rgba(50, 50, 50, 0.0);
         box-shadow:         inset 2px 2px 4px 0px rgba(50, 50, 50, 0.0);
}

input[type="submit"]:hover {
         color: #FFFFFF;
         text-shadow: #000000 1px 1px 0px;
         background: #a8cc84 url(../images/gs_icon_search.png) center center no-repeat;
         background-size: 70%;

}

/*
///////////////////////////////////
        Media-Querys
///////////////////////////////////
*/

@media (max-width: 990px) {
         #start #world { width: 100%; height: calc(100vw / 2); background-size: 80%; }
         #site h2 { padding-top: 20px; }
}

@media (max-width: 800px) {
         img.content_left { display: inline-block; float: none; width: 80%; height: auto; margin: 0px 10%; }
         video.content_left { display: inline-block; float: none; width: 80%; height: auto; margin: 0px 10%; }
         #site h2 { padding-top: 10px; text-align: center; }
         #site .info { text-align: center; }
         #logo img { max-width: 160px; }
         #logo a span { font-size: 2.4em; }

         #results { background-size: 80%; }
         #results .items { float: none; width: calc(100% - 0px); }
         .ads_sky { display: none; }
         .ads_leader { width: 100%; overflow: hidden !important; }
}

@media (max-width: 640px) {
         #search { width: 90%; }
         #logo img { max-width: 120px; }
         #logo a span { font-size: 2.0em; }
}

@media (max-width: 460px) {

}

@media (max-width: 360px) {

}

#flags {
        display: flex;
        position: fixed;
}
#flags .language-option-flag {
        padding: 4px;
        height: 30px;
        width: 30px;
        filter: saturate(0%);
}
#flags .language-option-flag:hover {
        cursor: pointer;
}

#flags .language-option-flag.active {
        filter: saturate(100%);
}

#text-content {
  margin-top: -288px;
  border-radius: 50px;
  max-width: 1300px;
  padding: 50px;
  background-color: #ffffff2b;
  text-align:left;
}

#text-content #main-caption{
  margin-bottom: 50px;
  text-align: left;
  color: #dadb0e;
  font-size: 3rem;
}

#text-content p {
  font-size: 1.3rem;
  color: white;
}

#text-content a {
  color: white;
}

#text-content li {
  color: white;
  font-size: 1.3rem;
}