/*
Theme Name: JAK_VIL_Search
Theme URI: 127.0.0.1
Description: Viljandi Jakobsoni Kooli vilistlaste otsing
Author: Rando Rooberg | Arvutinurk.ee kiired ja vihased kodulehed ja e-poed www.arvutinurk.ee
Author URI: https://www.arvutinurk.ee/
Version: 1.0
License: Arvutinurk.ee | Mõeldud kasutamiseks ainult Viljandi Jakobsoni Koolile
*/

* { box-sizing: border-box;}

body {background-color: #fff; font-size: 17px; line-height: 2; color: #000; font-family: 'Rubik', sans-serif; font-weight: 400;}

img {max-width: 100%; height: auto;}

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

iframe, video  {width: 100%; margin: 0; padding: 0;}
figure {margin: 0!important;}
strong {font-weight: 700;}

h1, h2, h3, h4, h5, h6 {color: #000; line-height: 1.2; font-weight: 700;}

h1 { font-size: 40px!important; display: inline-block;}
h2 { font-size: 30px;}
h3 { font-size: 25px;}
h4 { font-size: 17px!important;}
h5 { font-size: 15px; }
h6 { font-size: 15px; }

a {color: #087E8C; font-weight: 600; text-decoration: underline;}
a:hover {color: #000; text-decoration: none; }

input, select, textarea {width: 100%; padding: 20px; border: 3px solid #ccc; box-sizing: border-box;}
input:focus, select:focus, textarea:focus, option:focus {outline: none!important; border-color: #087E8C;}

.container {position: relative; width: 1400px; max-width: 100%; padding: 0 10px;}

#header {display: flex; width: 100%; justify-content: center;}
#header .container {display: flex; flex-wrap: wrap;}

#footer {display: flex; width: 100%; justify-content: center;}
#footer .container {display: flex; flex-wrap: wrap; justify-content: right;}

#top-header {width: 100%; display: flex; flex-wrap: wrap; align-items: center; margin-top: 25px;}
#logo {width: 30%;}

#system-info {margin-left: auto;}

#filter-content-block {display: flex; flex-wrap: wrap; justify-content: center; width: 100%; margin: 0 0 25px 0;}
#filter-content-block .container {display: flex; flex-wrap: wrap;}
#filter-content-block form {width: 100%; margin: 0; padding: 0;}
#filter-content-block ul {list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; width: 100%;}
#filter-content-block li {width: 19.2%; margin-left: 1%;}
#filter-content-block li:nth-child(2) {margin: 0;}
#filter-content-block li:first-of-type {margin: 0; width: 100%;}

#main-block {display: flex; width: 100%; justify-content: center; margin-top: 35px;}
#main-block .container {display: flex; flex-wrap: wrap;}

#alumni-desc-block {width: 100%; display: flex; flex-wrap: wrap; background-color: #087E8C; border: 1px solid #087E8C; color: #fff; padding: 10px 0; text-align: center;}
.alumni-top {width: 15.83%; margin-left: 1%;}
.alumni-top:first-of-type {margin-left: 0;}

#alumni {width: 100%; text-align: center; border: 1px solid #ccc;}
.graduate {width: 100%; display: flex; flex-wrap: wrap; padding: 10px 0;}
.graduate:nth-child(even) {background-color: #EEEEEE;}
.graduate-info {width: 15.83%; margin-left: 1%;}
.graduate-info:nth-child(2) {margin-left: 0;}
.alumni-bottom {display: none;}

#pagination {margin: 25px 0; display: flex; flex-wrap: wrap; width: 100%; justify-content: right;}
.nav-links {display: flex; flex-wrap: wrap;}
#pagination a {display: inline-block; color: #fff; text-decoration: none; margin: 10px 5px; padding: 0 15px; border: 1px solid #087E8C; background-color: #087E8C; -webkit-transition-duration: 0.7s; transition-duration: 0.7s;}
.current {display: inline-block; color: #fff; margin: 10px 5px; padding: 0 15px; border: 1px solid #FF0100; background-color: #FF0100;}
.dots {display: inline-block; color: #000; margin: 10px 5px; padding: 0 15px; border: 1px solid #eee; background-color: #eee;}
#pagination a:hover {text-decoration: none; color: #000; background-color: #fff;}
#pagination a:last-of-type {margin-right: 0;}

.sf-field-post-meta-lend, .sf-field-post-meta-aasta, .sf-field-post-meta-klass, .sf-field-post-meta-suund, .sf-field-post-meta-klassijuhataja, .sf-field-post-meta-lopmed {display: none!important;}

.searchandfilter label {display: block!important;}

.lopmed {display: none!important;}

#open-filters {margin-top: 35px; margin-bottom: 10px;}
#open-filters span {background-color: #087E8C; color: #fff; font-weight: 600; padding: 25px; cursor: pointer; -webkit-transition-duration: 0.7s; transition-duration: 0.7s;}
#open-filters span:hover {border-radius: 10px;}
.its-open-now {display: block!important;}

#reset-filters {margin-top: 35px; margin-bottom: 10px; margin-left: 15px;}
#reset-filters a {background-color: #FF0100; color: #fff; font-weight: 600; padding: 25px; text-decoration: none; -webkit-transition-duration: 0.7s; transition-duration: 0.7s;}
#reset-filters a:hover {border-radius: 10px;}

@media (max-width: 900px){
h4 {font-size: 15px!important;}
#alumni-desc-block {display: none;}	
#alumni {text-align: left; border: none; display: flex; flex-wrap: wrap; margin-top: -25px;}
.graduate {margin-top: 25px; width: 100%; padding: 0;}
.graduate:nth-child(even) {background-color: #fff;}
.graduate-info {width: 50%; margin-left: 0!important; background-color: #eee; padding: 2.5px 10px;}
.alumni-bottom {display: block; width: 50%; padding: 2.5px 10px; font-weight: 600; color: #fff; background-color: #087E8C;}

#logo {width: 40%;}

#system-info {font-size: 13px; width: 60%; text-align: right;}	
	
#filter-content-block li {width: 49.5%; margin-left: 1%;}
#filter-content-block li:nth-child(3n+1), #filter-content-block li:nth-child(5n+1) {margin-left: 0;}
#filter-content-block li:nth-child(6n+1) {margin-left: 1%;}

#open-filters {width: 49.5%;}
#open-filters span {padding: 25px 0; width: 100%; display: block; text-align: center;}

#reset-filters {margin-left: 5px; width: 49.5%; margin-left: 1%;}
#reset-filters a {padding: 25px 0; width: 100%; display: block; text-align: center;}
}

@media (max-width: 400px){

#system-info {font-size: 10px;}	
	
}