/* Clearfix */ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clear{ clear:both; } .fl{ float:left; } .fr{ float:right; } a{ text-decoration:none; color:#447C17; } body { background-color:#eeeeFF; font-family: 'PT Sans', Arial, sans-serif; margin:0px auto; overflow-y:scroll; overflow-x:hidden; font-size: 1em; } .wrapper{ max-width:1000px; margin:0px auto; } .logoh{ font-weight:bold; font-size:20px; text-align:center; } .logoh img{ display: block; width:320px; } .adholderhead{ display: block; float:left; min-width:320px; width: calc(100% - 320px); height:50px; } .adholder728{ width:70%; max-width:728px; } .adholder728 img{ display: block; width:100%; max-width:728px; } .holder{ margin: 5px auto 0; background-color:#1E8EE4; border: 1px solid #7b6a56; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 3px; } .newbg { background-color: #1E8EE4 !important; /*height:50px;*/ } nav.menu{ } nav.menu li a { color:#447C17; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display:flex; align-items:center; height:100%; } nav.menu ol, ul { list-style: outside none none; margin: 0; padding: 0; } nav.menu li{ -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; height:40px; background: #ffffff; border: 1px solid black; border-radius: 10%; box-sizing: border-box; display: block; float: left; margin: 0.2%; padding: 0.5%; text-align: left; width: 19.6%; border-radius: 3px; color:#666; font-weight:bold; /* font-size: 0.9em; line-height: 0.9em; */ } nav.menu li:hover{ background: #ffffff; } nav.menu li a img{ display:inline-block; height:100%; width:auto; margin-right: 2%; vertical-align: top; float:left; } .searchholder{ text-align:center; margin:10px; } .searchholder2{ width:60%; float:right; margin-top:-27px; /* margin-bottom:-8px; */ } #search{ width:40%; height:28px; } #sbutt { background-color: #4CAF50; /* Green */ background-image: url('./images/search.png'); background-repeat: no-repeat; border: none; color: white; text-align: center; text-decoration: none; display: inline-block; color: transparent; height: 34px; width: 34px; } .maintitle{ font-size:1.2em; line-height: 1.4em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left:5px; margin-bottom: 5px; background-color: #fff !important; color:#447C17; } .main{ } .grid{ -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid black; border-radius: 3px; background-color: #fff; float:left; width:19%; /*height: 230px;*/ overflow:hidden; margin: 0.5%; padding: 0.5%; margin-bottom: 15px; } .grid:hover{ background-color: #fff; } .sgrid{ -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid black; border-radius: 3px; background-color: #fff; float:left; /*height: 230px;*/ overflow:hidden; margin: 0.5%; padding: 0.5%; width:49%; } .sgrid:hover{ background-color: #fff; } .grid2{ -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid black; border-radius: 3px; background-color: #fff; float:left; width:19%; /*height: 230px;*/ overflow:hidden; margin: 0.5%; padding: 0.5%; } .grid2:hover{ background-color: #fff; } .jkep{ overflow:hidden; position: relative; width: 100%; height: 0; padding-bottom: 55%; } .jkep img{ width:100%; } .jcim h2{ margin:0; color:#447C17; font-size: 1em; line-height: 1.4em; text-shadow: 1px 1px 1px #fff; } .jleir{ font-size: 1em; line-height: 1.4em; } .jmaintitle{ text-align:center; } .mypager{ padding-top:15px; clear:both; font-size:1.2em; text-align:center; } .mypager a, span{ -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid black; border-radius: 3px; background-color: #ffffff; color: #447C17; font-size:1.5em; padding: 0 10px 0 10px; display:inline-block; height: 34px; vertical-align: bottom; margin: 0 2px 0 2px; } .mypager a img{ height:34px; } .lapozasStatic{ color:#000000 !important; } .tagholder{ text-align: center; } .tag{ -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid black; border-radius: 3px; background-color: #ffffff; color: #447C17; font-size:1.6em; padding: 0 10px 0 10px; display:inline-block; vertical-align: bottom; margin: 3px; } .iframecontainer{ display: table; float: left; text-align: center; width: 100%; } .iframecontainer iframe{ margin-left:auto; margin-right:auto; } .iframecontainer div{ margin-left:auto; margin-right:auto; } .iframecontainer2{ position: relative; padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ padding-top: 25px; height: 0; margin-bottom: 6px; } .iframecontainer2 iframe { position: absolute; top: 0; left: 0; width: 100%!important; height: 100%!important; } .jdescript{ clear:both; margin-top:6px !important; margin-bottom:6px !important; padding-top:3px; padding-bottom:3px; background-color:lightgrey; } .iframecontainer2{ max-width: calc(100% - 320px); /* Firefox */ max-width: -moz-calc(100% - 320px); /* WebKit */ max-width: -webkit-calc(100% - 320px); /* Opera */ max-width: -o-calc(100% - 320px); /* Standard */ max-width: calc(100% - 320px); display: block; float: left; text-align: center; width: 100%; position:relative; } .notoverlayimg{ width: 10vw; height:auto; } .overlayimg{ display: block; margin-left: auto; margin-right: auto; left: 0; right: 0; width:75px; height:75px; position:absolute; top:163px; } .bottomimg{ display: block; /*height: 400px;*/ margin-left: auto; margin-right: auto; overflow: hidden; position: relative; width: 25vw; } .f_item{ -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; /*border: 1px solid black; border-radius: 3px; background-color: #ccc;*/ color: #fff; float:left; width:24%; /*height: 230px;*/ overflow:hidden; margin: 0.5%; padding: 0.5%; } .footer p{ padding-left:5px; margin-top:0px; margin-bottom:5px; font-size:0.8em; } .bottomad{ text-align: center; padding-top:5px; } .side1 { float: right; width: 320px; text-align:center; } .side1 h3{ margin: 0; } .side1 .grid{ width:80%; margin-left:10% } .toggle{ display:none; /* min-height: 20px; */ } .mymenu{ display:block; } @media only screen and (max-width: 799px){ .side1 { width:100%; } .iframecontainer2{ width:100%; max-width:100%; } /* Mobile first queries */ .mymenu{ display: none;} /*.mymenu { display: block; width: 100%; margin: 0; }*/ /*#toggle, .toggle { display: none; }*/ .mymenu > li { display: block; width: 100%; margin: 0; } .mymenu > li > a { display: block; width: 100%; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mymenu{ display: none;} nav.menu { } nav.menu li{ font-size: 1em; height:40px; width:33.33333%; margin:0; } .mymenu > li { display: block; width: 100%; margin: 0; } .mymenu > li > a { display: block; width: 100%; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .toggle{ font-weight:bold; display: block; padding-top: 10px; padding-bottom: 10px; /*background-image: url("images/nav-icon.png"); */ background-repeat: no-repeat; background-position: left 10px top 10px; text-align: left; padding-left:7px; font-size: 1.1em; color: #ddddff; } .toggle:hover:after{ background-color: #45ABD6; } @media only screen and (max-width: 750px){ } @media (max-width: 750px) { .mymenu{ display: none;} .mhide{ display: none !important;} .notoverlayimg{ width: 20vw; } body{ font-size: 0.9em; } .grid{ width:24%; /*height:190px;*/ } .grid2{ width:24%; /*height:190px;*/ } nav.menu li{ font-size: 1em; height:40px; width:33.33333%; margin:0; } .mymenu > li { display: block; width: 100%; margin: 0; } .mymenu > li > a { display: block; width: 100%; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .toggle{ font-weight:bold; display: block; padding-top: 10px; padding-bottom: 10px; /*background-image: url("images/nav-icon.png"); */ background-repeat: no-repeat; background-position: left 10px top 10px; text-align: left; padding-left:7px; font-size: 1.1em; color: #ddddff; } .toggle:hover:after{ background-color: #45ABD6; } .jcim h2{ margin:0; /* font-size:0.9em; */ font-size:16px; } .jleir{ font-size:0.8em; } } @media (max-width: 550px) { #search{ width:60%; } .notoverlayimg{ width: 30vw; } body{ font-size: 0.8em; } .grid{ width:32.3333%; /*height:190px;*/ } .grid2{ width:32.3333%; /*height:190px;*/ } .jcim h2{ margin:0; /* font-size:0.8em; */ font-size: 16px; } .jleir{ font-size:0.7em; } .bottomimg{ width: 30vw; height:auto; } .overlayimg{ width:56px; height:56px; top:147px; } } @media (max-width: 420px) { body{ font-size: 0.8em; } nav.menu li{ width:100%; font-size: 1.4em; line-height: 2em; } .grid{ width:49%; /*height:200px;*/ } .grid2{ width:49%; /*height:200px;*/ } .bottomimg{ width: 45vw; height:auto; } .overlayimg{ width:56px; /*height:56px;*/ top:122px; } } .ratio-container { position: relative; } .ratio-container:after { content: ''; display: block; height: 0; width: 100%; /* 16:9 = 56.25% = calc(9 / 16 * 100%) */ /* padding-bottom: 56.25%; */ padding-bottom: 72%; content: ""; } .ratio-container > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* unknown ration variation */ .unknown-ratio-container > * { max-width: 100%; max-height: 100%; width: auto; height: auto; }