/* ==================================== */
/* ============ SÕNASTIK ============== */
/* ==================================== */

/* === Menu === */
.sonastik .menu { padding-bottom: 12px; padding-top: 12px; }
.sonastik .menu span,
.sonastik .menu a { display:inline-block; position:relative; width:100%; margin:0; padding:10px 20px; line-height:25px; color:#225560; transition:0.2s; text-decoration:none; }
.sonastik .menu a.arrow:after { content:''; background:url(../../img/toidutare_uus/icon_arrow_right_blue.svg) 50% 50% no-repeat; width:30px; position:absolute; top:0; bottom:0; right:0; }

.sonastik .menu a:hover { background:#d8f0f5; }

.sonastik .menu a.active { background:#8dc8d4; color:#fff; }
.sonastik .menu a.arrow.active:after { background:url(../../img/toidutare_uus/icon_arrow_down_white.svg) 50% 50% no-repeat; }

.sonastik .menu a.child_link { color:#63a6b4; }
.sonastik .menu a.child_link:hover,
.sonastik .menu a.child_link.active:hover{ color:#63a6b4; background:#fff; padding-left:32px; }
.sonastik .menu a.child_link:hover:before { content:""; width:4px; position:absolute; left:20px; background:#d8f0f5; top:9px; bottom:9px;  transition:0.2s;}

.sonastik .menu a.child_link.active{  color:#63a6b4; background:#fff; padding-left:32px; }
.sonastik .menu a.child_link.active:before { content:""; width:4px; position:absolute; left:20px; background:#8dc8d4; top:9px; bottom:9px; transition:0.2s;}


.sonastik .menu_select { display:inline-block; width:100%; padding:10px 30px 10px 15px; line-height:25px; margin:6px 0 0 0; border:1px solid #d6e0e2; color:#63a6b4;  background:url("../../img/toidutare_uus/icon_select_blue_background.png") 100% 50% no-repeat; }

@media (min-width: 768px){
	.sonastik .menu_select { padding:10px 20px; }
}

/* === Nimekiri === */

.sonastik .otsing { display:inline-block; position:relative; width:100%; margin:0; padding:0; border:1px solid #d6e0e2;}
.sonastik .otsing { margin-top: 12px; }
.sonastik .otsing input { display:inline-block; position:relative; width: calc(100% - 40px); margin:0; padding:9px 15px 9px 15px; border:none; line-height:25px; color:#225560; text-decoration:none; }
.sonastik .otsing button { display:inline-block; position:relative; width:40px; height:43px; float: right; margin:0; padding:0px; border:0;  background:url(../../img/toidutare_uus/minu_toidutare/filter-icon.png) 50% 50% no-repeat; cursor:pointer; transition:0.2s;}
.sonastik .otsing button:hover { background-color:#f2f2f2;}

.sonastik .nimekiri { padding-bottom:12px; } 

.sonastik .tulemused { margin-top:12px; } 
.sonastik .tulemused > h2 { text-align:center; margin:40px 20px; color:#8dc7d4; font-size:25px; }
	
.sonastik .tulemused .item { display: flex; align-items: center; width:100%; margin:0; padding:10px 0; border-bottom:1px solid #d6e0e2; transition:0.2s; cursor:pointer; text-decoration:none; } 
.sonastik .tulemused .item img { height:60px; margin: 0 5px; width:auto; } 
.sonastik .tulemused .item h2 { color:#225560; font-size: 20px; margin:0; padding: 0 10px 0 20px; display: inline-block; line-height: 25px; max-height: 75px; overflow: hidden; }  
.sonastik .tulemused .item:hover { background:#fdfdfd; } 


.sonastik .paginator { width:100%; margin:0; padding:20px 0; text-align:center; }
.sonastik .paginator input { background:none; border:none; margin:0 3px; padding:5px; color:#63a6b4; cursor:pointer; transition:0.2s; }
.sonastik .paginator input.hover,
.sonastik .paginator input:hover { color:#225560; }

.sonastik .paginator .dots { color:#aec1c5; margin:0px 10px; }

@media (min-width: 768px){
	.sonastik .tulemused .item img { height:80px; margin:0;} 
	.sonastik .tulemused .item h2 { width: calc(100% - 120px); }  
}

/* === Header and body === */
.sonastik .title-top { text-align:Center; margin: 0; padding: 15px 0 0 0;}
.sonastik .title-top .actions { border:none; border-bottom:1px solid #d6e0e2; margin: 20px 0 0; padding-bottom:30px; }
.sonastik .title-top .image { margin:0 -15px; }
.sonastik .title-top .image img { width:100%; }
.sonastik .title-top h1 { color:#205560; font-size:20px; margin: 10px 0px; padding: 0 20px; }
.sonastik .title-top .bread a { font-size:14px; color:#61a5b4;}

.sonastik .body { color:#275964; font-size:14px; }

.sonastik .body img { max-width:100%; }

.sonastik .author { padding:5px; color:#77949a; font-size:12px; display: inline-block; }

.sonastik .trivia { margin:20px 0; color:#225560; }
.sonastik .trivia h3 { text-align:center; color:#225560; padding: 10px 0; margin: 10px 0; font-size:22px; border-bottom:4px solid #8dc8d4; position:relative; }
.sonastik .trivia h3:after { content:url(../../img/toidutare_uus/line_arrow_down_blue.png); position:absolute; bottom: -11px; margin-left:-7px; left:50%; }

@media (min-width: 768px){
	.sonastik .title-top { padding: 0;}
	.sonastik .title-top h1 { color:#205560; font-size:38px; }
	.sonastik .title-top .bread a { font-size:20px; }
	.sonastik .title-top .actions { margin: 20px 0 48px; }
	.sonastik .body { font-size:16px; }
	
	.sonastik .author { font-size:14px; }
}

/* === Actions and Comments === */
.sonastik .actions { width:100%; text-align: center; margin: 40px 0 48px; border-top:1px solid #d6e0e2; }
.sonastik .actions a { padding: 0px 3px; text-decoration: none;}
.sonastik .actions span { padding:1px 10px; background:#fff; display:inline-block; margin-top:-18px;}


.total_comments { text-align:center; width:100%; font-size: 16px; text-transform:uppercase; color:#63a6b4; text-decoration: none; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; display: inline-block; padding: 4px; }
.total_comments span{  text-transform:uppercase; color:#fff; background:#8bc7d4; border-radius: 100px; padding: 5px 10px; margin-left: 5px; }
.total_comments:hover { opacity: 0.8; text-decoration: none; }


/* === Related === */
.related { padding: 0px 15px; }
.related h2 { font-family: 'Fira Sans Condensed', sans-serif; text-align:center; margin: 10px 0 39px; }
.related h2:before { content:""; display:inline-block; border:1px solid #d6e0e2; border-left:0; border-right:0; height: 4px; position: absolute; left:15px; right:20px;  margin-top: 9px; z-index: 1; }
.related h2 span { color:#225560; font-size:20px; padding: 21px 20px 15px 20px; background:#fff; z-index: 1; position:relative; text-transform: uppercase; font-weight: normal; }

.related a { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; text-align: center; margin-top: 25px; padding: 0px 5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.related a:hover { opacity: 0.8; text-decoration: none; }

.related a img { width:33%;  margin-left:2%;}

.related h4 { cursor:pointer; color:#225560; font-size:18px; width:60%; line-height: 20px; margin: 0 0 0 6%; padding:0 10px; position:relative; text-align:left; }
.related h4 span { color:#225560; font-size:18px; margin-bottom:10px; }

@media (min-width: 767px){ 
    .related a { display: block; }
    .related a img { width: 100%; margin-left:0; }
    .related a h4 { width:auto; text-align:center; margin:0; font-size:16px; padding:20px 10px 5px 10px;}
    .related a h4 span { font-size:16px; }
}


/* === Tags === */
.sonastik .tags { margin-top:20px; margin-bottom:20px; text-align:center;}
.sonastik .tags h2 { font-family: 'Fira Sans Condensed', sans-serif; text-align:center; margin:10px 0 15px; padding: 18px 0px;}
.sonastik .tags h2:before { content:""; display:inline-block; border:1px solid #d6e0e2; border-left:0; border-right:0; height: 4px; position: absolute; left:15px; right:20px;  margin-top: 9px; z-index: 1; }
.sonastik .tags h2 span { color:#225560; font-size:20px; padding:15px 20px 15px 20px; background:#fff; z-index: 1; position:relative; text-transform: uppercase; font-weight: normal;}

.sonastik .tags a { display:inline-block; background:#8dc8d4; color:#fff; padding:0px 15px; cursor:pointer; transition:0.2s; margin:4px; line-height:32px; text-transform:uppercase; font-size:16px; text-decoration:none; }
.sonastik .tags a:hover { background:#63a6b4; }

@media (min-width: 767px){
	.sonastik .tags h2 span { font-size:16px; }
    .sonastik .tags a { font-size:12px; line-height:24px; padding:0px 12px; margin:3px;}
}
@media (min-width: 1024px){
	.sonastik .tags h2 span { font-size:20px; }
    .sonastik .tags a { font-size:16px; line-height:32px; padding:0px 15px; margin:4px;}
}


/* === Comments === */
.comments { margin-top:20px; margin-bottom:20px;}
.comments h2 { font-family: 'Fira Sans Condensed', sans-serif; text-align:center; margin:10px 0 15px; padding: 18px 0px;}
.comments h2:before { content:""; display:inline-block; border:1px solid #d6e0e2; border-left:0; border-right:0; height: 4px; position: absolute; left:15px; right:20px;  margin-top: 9px; z-index: 1; }
.comments h2 span { color:#225560; font-size:20px; padding:15px 20px 15px 20px; background:#fff; z-index: 1; position:relative; text-transform: uppercase; font-weight: normal;}

.comments .comment { width:100%; padding: 0 0 24px 0px; font-size:16px; color:#205560; border-bottom:1px solid #d6e0e2;}
.comments .comment .comment-details { text-align: right; color:#aec1c5; line-height:30px;}
.comments .comment .comment-details strong { float:left;  color:#63a6b4; font-weight:normal; }
.comments .comment .comment-details strong a { color:#63a6b4; text-decoration:none; transition:0.2s;}
.comments .comment .comment-details strong a:hover { opacity: 0.8;}

.comments .gray_pages {width:100%; text-align: center; margin:26px 0px 40px;}
.comments .gray_pages a { color:#63a6b4; text-decoration: underline; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; margin:0px 3px;}
.comments .gray_pages a.hover, 
.comments .gray_pages a.dots,
.comments .gray_pages a:hover { color:#225560; text-decoration: none; }

.comments .error { width: 100%; display: inline-block; text-align: center; margin: 10px 0; color: red; }

.comments .add-comment-box input,
.comments .add-comment-box textarea { border:1px solid #d6e0e2; padding:3px 10px; line-height:30px; margin:5px 0px; color:#205560; max-width:100%; }
.comments .add-comment-box textarea { width:100%; min-height:200px; resize: vertical; }
.comments .add-comment-box #recaptcha_widget { text-align: center; margin-top:10px; }
.comments .add-comment-box #recaptcha_image { margin: 10px auto; }
.comments .add-comment-box #recaptcha_widget a { color:#205560; padding:0px 0px 0px 20px; margin: 0px 10px; }
.comments .add-comment-box #recaptcha_widget a.reload { background:url("../../img/toidutare_uus/icon_refresh.svg") 0% 50% no-repeat; background-repeat:no-repeat; }
.comments .add-comment-box #recaptcha_widget a.help { background:url("../../img/toidutare_uus/icon_question.svg") 0% 50% no-repeat; background-repeat:no-repeat; }

.comments .add-comment-box .comment-btn { margin: 20px 0 70px 0; text-align: center; }
.comments .add-comment-box .comment-btn > span { display: inline-block; padding:10px 23px; color:#fff; text-transform: uppercase; background:#8dc8d4; border-radius: 25px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; cursor:pointer;}
.comments .add-comment-box .comment-btn > span:hover { opacity: 0.8;}

.comments .add-comment-box .g-recaptcha > div { margin:0px auto; }

@media (min-width: 767px){
    .comments .comment .comment-details { line-height:40px;}
}
@media (min-width: 1024px){
    .comments .comment .comment-details { line-height:50px;}
}

/* === Uued retseptid === */
.uued_retseptid { padding-top:20px; }
.uued_retseptid h2 { font-family: 'Fira Sans Condensed', sans-serif; text-align:center; margin:10px 0 20px; cursor:pointer; width: 100%; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
.uued_retseptid h2:hover { opacity:0.8;}
.uued_retseptid h2:before { content:""; display:inline-block; border:1px solid #d6e0e2; border-left:0; border-right:0; height: 4px; position: absolute; left:15px; right:20px;  margin-top: 9px; z-index: 1; }
.uued_retseptid h2 span { color:#63a6b4; font-size:20px; padding:5px 15px 5px; background:#fff; z-index: 1; position:relative; text-transform: uppercase;}

.uued_retseptid .item { position:relative; margin-bottom:10px; text-align:center; text-decoration: none;}
.uued_retseptid .item img{ width:80%; }

.uued_retseptid .item.large > h4 { cursor:pointer; position:absolute; bottom:0; left:25px; right:25px; background:#fff; padding:20px; margin:0; text-align:center; color:#225560; font-size:16px;}
.uued_retseptid .item.large > h4 span { font-family: 'Fira Sans Condensed', sans-serif; color:#63a6b4; font-size:16px; text-transform:uppercase; }

.uued_retseptid .item.small > h4 { cursor:pointer; margin-top:10px; color:#225560; font-size:16px; line-height: 24px; }
.uued_retseptid .item.small > h4 span{ font-family: 'Fira Sans Condensed', sans-serif; color:#63a6b4; text-transform:uppercase; }

.uued_retseptid a { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
.uued_retseptid a:hover { opacity: 0.8; }

@media (min-width: 767px){
    .uued_retseptid .item.large { padding-right: 15px; padding-left: 15px; }
    .uued_retseptid .item.large > img { width:100%; }
    .uued_retseptid .item.large > h4 { font-size:32px; }
    .uued_retseptid .item.large > h4 span { font-size:20px; }
    
    .uued_retseptid .item.small { text-align:left; padding: 0 15px 0 0;  display: -webkit-box;  display: -ms-flexbox;  display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
    .uued_retseptid .item.small > img { width:50%; }
    .uued_retseptid .item.small > h4 { font-size:20px; line-height: inherit; width:50%; display: inline-block; padding:0px 10px 0px; float: right;}
    .uued_retseptid .item.small > h4 span{ font-size:18px; }
}


/* === Uued uudised === */
.uued_uudised { margin-top:20px; margin-bottom:20px;}
.uued_uudised h2 { font-family: 'Fira Sans Condensed', sans-serif; text-align:center; margin:10px 0 0; }
.uued_uudised h2:before { content:""; display:inline-block; border:1px solid #d6e0e2; border-left:0; border-right:0; height: 4px; position: absolute; left:15px; right:20px;  margin-top: 9px; z-index: 1; }
.uued_uudised h2 span { color:#63a6b4; font-size:20px; padding:15px 20px 15px 20px; background:#fff; z-index: 1; position:relative; text-transform: uppercase; font-weight: normal; }

.uued_uudised a { -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; text-align: center; margin-top: 25px; padding: 0 5px;  display: -webkit-box;  display: -ms-flexbox;  display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-decoration: none;}
.uued_uudised a:hover { opacity: 0.8; text-decoration: none; }

.uued_uudised a img { width:33%; margin-left:2%; }

.uued_uudised h4 { cursor:pointer; color:#225560; font-size:16px; line-height: 20px; margin: 0 0 0 6%; padding:0 10px; position:relative; width:60%; text-align:left;}
.uued_uudised h4 span { color:#225560; font-size:14px; margin-bottom:10px;}

@media (min-width: 767px){
    .uued_uudised a { display: block; }
    .uued_uudised a img { width:auto; max-width: 100%; margin-left:0; }
    .uued_uudised a h4 { width:auto; text-align:center; margin:0; font-size:16px; padding:20px 10px 5px 10px; }
    .uued_uudised a h4 span { font-size:16px; }
}
@media (min-width: 1023px){
    
}