﻿/*base caskad*/
* {margin:0; padding:0}
html {background-color:#eaeaea;}
body {background-color:#fff; width:900px; margin:13px auto 0 auto;}
#wrapper {width:100%;}
#content {width:575px; float:left; padding:10px 5px 0 20px; text-align:justify; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:19px; margin-bottom:10px}
#colums {width:255px;border-left:1px #333 dotted; display:inline-block;margin-left:14px; padding:5px 10px 0px 20px; font-family:Arial, Helvetica, sans-serif}
#content p {text-indent:20px; margin-bottom:8px}
#content a {color:#601000}
#content a:visited{color:#a05050}

h1 {color:#000; font-size:28px; text-align:center; margin-bottom:14px; line-height:30px}
h2 {color:#561000; font-size:23px; text-align:center; margin-bottom:10px; line-height:25px}
h3 {color:#000; font-size:14px; margin-bottom:10px;line-height:17px; border-left:4px #000 double; padding-left:10px;margin-left:20px;font-style:italic}
h4 {color:#561000; font-size:18px; text-align:center; margin-bottom:10px;line-height:21px}
h5 {color:#000; font-size:13px; margin-bottom:10px; font-weight:normal;width:40%;margin-left:59%;}
h6 {color:#561000; font-size:14px; text-align:right; margin-bottom:10px; width:80%; margin-left:19%; border-top:1px #561000 dotted; padding-top:5px; font-style:italic; font-weight:normal}

.imgleft {width:200px; float:left;margin:3px 15px 5px 0; font-size:13px; font-weight:bold; font-style:italic; text-align:center; color:#444}
.imgleft img {float:left; width:200px; }
.imgright img {float:right; width:200px;}
.imgright {width:200px; float:right;margin:3px 0 5px 15px; font-size:13px; font-weight:bold; font-style:italic; text-align:center; color:#444}

.imgcenter img {width:90%; margin:3px 0;}
.imgcenter {width:100%; text-align:center; font-size:13px; font-weight:bold; font-style:italic; text-align:center; color:#444}

/*header*/
.head {width:860px; margin-bottom:15px; margin-left:20px; margin-right:20px}
.head p:first-child {font-weight:bold; font-size:50px; font-family:'Monotype Corsiva'; text-align:center; padding:15px 0 0; margin-bottom:0;}
.two { font-style:italic; color:#771510; font-family:Arial, Helvetica, sans-serif; text-align:right; padding:0 15px 13px 0; font-size:15px}
.head img {width:100%; border-top:4px #000 solid;}

/*items block*/
#menu { width:100%; background-color:#000; text-align:center}
#menu a {color:#ccc; font-family:Arial, Helvetica, sans-serif; font-size:14px; display:inline-block;padding:7px 7px 8px; text-decoration:none;}
#menu a:hover {background-color:#444; color:#fff}

/*links in text block*/
.nav a{display:block; padding:5px 5px 5px 20px; text-decoration:none; margin-left:0px!important; text-indent:0px; font-size:13px; border-bottom:1px #561000 dotted}
.nav {border-left:1px #561000 dotted;}

.nav a:hover{background-color:#704020;color:#fff!important;}

.buttonup {
position:fixed;
bottom:20px;
right:50px;
}


#footer {clear:both; border-top:4px #000 solid; margin:10px 20px 0; padding-top:15px; font-family:Arial, Helvetica, sans-serif; font-size:15px; padding-bottom:15px}
#footer table {margin-bottom:10px}
#footer a {color:#911110; text-decoration:none}
#footer td:last-child{ text-align:right;}
#footer a b{display:none}


/*font-family for header*/
@font-face {
	font-family: 'Monotype Corsiva';
	src: url('../fonts/monotype_corsiva.eot'); /* IE 9 Compatibility Mode */
	src: url('../fonts/monotype_corsiva.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
		url('../fonts/monotype_corsiva.woff2') format('woff2'), /* Super Modern Browsers */
		url('../fonts/monotype_corsiva.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */
		url('../fonts/monotype_corsiva.ttf') format('truetype'), /* Safari, Android, iOS */
		url('../fonts/monotype_corsiva.svg#monotype_corsiva') format('svg'); /* Chrome < 4, Legacy iOS */
}

/*right bar*/
.bar_topic {font-family:'Monotype Corsiva'; font-size:25px; font-weight:bold; text-align:center}
.social a {display:block;padding:3px; text-decoration:none; color:#561000}
.social img {width:25px; padding-right:7px}
.social a:hover {background-color:#ccc; color:black}

/*slider*/
#slider_bl {width:60%; margin:0 auto;}


/*///////////////////////////SLIDER/////////////////////////////////////*/
#slider_bl .wrapper{max-width:60em;margin:1em auto;position:relative}#slider_bl input{display:none}#slider_bl .inner{width:500%;line-height:0}#slider_bl article{width:20%;float:left;position:relative}#slider_bl article img{width:100%}#slider_bl .slider-prev-next-control{height:50px;position:absolute;top:50%;width:100%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%)}#slider_bl .slider-prev-next-control label{display:none;width:40px;height:40px;border-radius:50%;background:#fff;opacity:.7}#slider_bl .slider-prev-next-control label:hover{opacity:1}#slider_bl .slider-dot-control{position:absolute;width:100%;bottom:0;text-align:center}#slider_bl .slider-dot-control label{cursor:pointer;border-radius:5px;display:inline-block;width:10px;height:10px;background:#bbb;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}#slider_bl .slider-dot-control label:hover{background:#ccc;border-color:#777}#slider_bl .info{position:absolute;font-style:italic;line-height:20px;opacity:0;color:#000;text-align:left;-webkit-transition:all 1s ease-out .6s;-moz-transition:all 1s ease-out .6s;transition:all 1s ease-out .6s}#slider_bl .info h3{color:#fcfff4;margin:0 0 5px;font-weight:400;font-size:1.5em;font-style:normal}#slider_bl .info.top-left{top:30px;left:30px}#slider_bl .info.top-right{top:30px;right:30px}#slider_bl .info.bottom-left{bottom:30px;left:30px}#slider_bl .info.bottom-right{bottom:30px;right:30px}#slider_bl .slider-wrapper{width:100%;overflow:hidden;border-radius:5px;box-shadow:1px 1px 4px #666;background:#fff;background:#fcfff4;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;transition:all .5s ease-out}#slider_bl .slider-wrapper .inner{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-transition:all .8s cubic-bezier(.77,0,.175,1);-moz-transition:all .8s cubic-bezier(.77,0,.175,1);transition:all .8s cubic-bezier(.77,0,.175,1)}#slider_bl #slide1:checked~.slider-prev-next-control label:nth-child(2)::after,#slider_bl #slide1:checked~.slider-prev-next-control label:nth-child(5)::after,#slider_bl #slide2:checked~.slider-prev-next-control label:nth-child(1)::after,#slider_bl #slide2:checked~.slider-prev-next-control label:nth-child(3)::after,#slider_bl #slide3:checked~.slider-prev-next-control label:nth-child(2)::after,#slider_bl #slide3:checked~.slider-prev-next-control label:nth-child(4)::after,#slider_bl #slide4:checked~.slider-prev-next-control label:nth-child(3)::after,#slider_bl #slide4:checked~.slider-prev-next-control label:nth-child(5)::after,#slider_bl #slide5:checked~.slider-prev-next-control label:nth-child(1)::after,#slider_bl #slide5:checked~.slider-prev-next-control label:nth-child(4)::after{font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;margin:0;line-height:38px;font-size:3em;display:block;color:#777}#slider_bl #slide1:checked~.slider-prev-next-control label:nth-child(2)::after,#slider_bl #slide2:checked~.slider-prev-next-control label:nth-child(3)::after,#slider_bl #slide3:checked~.slider-prev-next-control label:nth-child(4)::after,#slider_bl #slide4:checked~.slider-prev-next-control label:nth-child(5)::after,#slider_bl #slide5:checked~.slider-prev-next-control label:nth-child(1)::after{content:"\f105";padding-left:15px}#slider_bl #slide1:checked~.slider-prev-next-control label:nth-child(2),#slider_bl #slide2:checked~.slider-prev-next-control label:nth-child(3),#slider_bl #slide3:checked~.slider-prev-next-control label:nth-child(4),#slider_bl #slide4:checked~.slider-prev-next-control label:nth-child(5),#slider_bl #slide5:checked~.slider-prev-next-control label:nth-child(1){display:block;float:right;margin-right:5px}#slider_bl #slide1:checked~.slider-prev-next-control label:nth-child(5),#slider_bl #slide2:checked~.slider-prev-next-control label:nth-child(1),#slider_bl #slide3:checked~.slider-prev-next-control label:nth-child(2),#slider_bl #slide4:checked~.slider-prev-next-control label:nth-child(3),#slider_bl #slide5:checked~.slider-prev-next-control label:nth-child(4){display:block;float:left;margin-left:5px}#slider_bl #slide1:checked~.slider-prev-next-control label:nth-child(5)::after,#slider_bl #slide2:checked~.slider-prev-next-control label:nth-child(1)::after,#slider_bl #slide3:checked~.slider-prev-next-control label:nth-child(2)::after,#slider_bl #slide4:checked~.slider-prev-next-control label:nth-child(3)::after,#slider_bl #slide5:checked~.slider-prev-next-control label:nth-child(4)::after{content:"\f104";padding-left:8px}#slider_bl #slide1:checked~.slider-dot-control label:nth-child(1),#slider_bl #slide2:checked~.slider-dot-control label:nth-child(2),#slider_bl #slide3:checked~.slider-dot-control label:nth-child(3),#slider_bl #slide4:checked~.slider-dot-control label:nth-child(4),#slider_bl #slide5:checked~.slider-dot-control label:nth-child(5){background:#333}#slider_bl #slide1:checked~.slider-wrapper article:nth-child(1) .info,#slider_bl #slide2:checked~.slider-wrapper article:nth-child(2) .info,#slider_bl #slide3:checked~.slider-wrapper article:nth-child(3) .info,#slider_bl #slide4:checked~.slider-wrapper article:nth-child(4) .info,#slider_bl #slide5:checked~.slider-wrapper article:nth-child(5) .info{opacity:1}#slider_bl #slide1:checked~.slider-wrapper .inner{margin-left:0}#slider_bl #slide2:checked~.slider-wrapper .inner{margin-left:-100%}#slider_bl #slide3:checked~.slider-wrapper .inner{margin-left:-200%}#slider_bl #slide4:checked~.slider-wrapper .inner{margin-left:-300%}#slider_bl #slide5:checked~.slider-wrapper .inner{margin-left:-400%}@media only screen and (max-width:850px) and (min-width:450px){#slider_bl .slider-wrapper{border-radius:0}}@media only screen and (max-width:450px){#slider_bl .slider-wrapper{border-radius:0}#slider_bl .slider-wrapper .info{opacity:0}}@media only screen and (min-width:850px){#slider_bl body{padding:0 80px}}

.info>p {color:#fff; background-color:rgba(0,0,0,0.55); padding: 4px 10px; text-indent:0px !important; border-radius:8px 0;}
/*///////////////////////////SLIDER/////////////////////////////////////*/


/* mobil phone latest version CSS - max size screen 900px width */

/*////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////*/
@media only screen and (max-width: 920px) and (min-width: 420px){
body{width:100%;}
#wrapper {width:100%;}
#content {width:100%; float:none; padding:0; margin-bottom:10px}
#content p {margin-left:15px; margin-right:15px}
#colums {width:100%;border-top:1px #333 dotted; border-left:none; display:block;margin-left:0; padding:0;}
.head {width:100%; margin:0 0 15px 0;}
.head p:first-child {font-weight:bold; font-size:50px; font-family:'Monotype Corsiva'; text-align:center; padding:15px 0 0; margin-bottom:0;}
.two { font-style:italic; color:#771510; font-family:Arial, Helvetica, sans-serif; text-align:right; padding:0 15px 13px 0; font-size:15px}
.head img {width:100%; border-top:4px #000 solid;}

.social {text-align:center}
.social a {display:inline-block;padding:3px; text-decoration:none; color:#561000}
.social a span {display:none}
.social img {width:25px; padding-right:0px;}
.social a:hover {background-color:#ccc; color:black; border-radius:5px;}

h1, h2, h3 {margin-left:8px; margin-right:8px}
h4 {padding-left:5px;margin-left:10px; margin-right:10px}
.imgleft {width:150px;}
.imgleft img {width:150px; }
.imgright img {width:150px;}
.imgright {width:150px;}

.buttonup {
position:fixed;
bottom:10px;
right:15px;
opacity: 0.3;
}

}
@media only screen and (max-width: 419px) and (min-width: 160px){
body{width:100%;}
#wrapper {width:100%;}
#content {width:100%; float:none; padding:0; margin-bottom:10px}
#content p {margin-left:15px; margin-right:15px}
#colums {width:100%;border-top:1px #333 dotted; border-left:none; display:block;margin-left:0; padding:0;}
.head {width:100%; margin:0 0 15px 0; }
.two { font-style:italic; color:#771510; font-family:Arial, Helvetica, sans-serif; text-align:right; padding:0 15px 13px 0; font-size:15px}
.head img {width:100%; border-top:4px #000 solid;}
.two { font-style:italic; color:#771510; font-family:Arial, Helvetica, sans-serif; text-align:right; padding:0 15px 13px 0; font-size:13px}
.head p:first-child {font-weight:bold; font-size:30px; font-family:'Monotype Corsiva'; text-align:center; padding:15px 0 0; margin-bottom:0;}
#footer {font-size:12px;}
#footer a span{display:none}
#footer a b{display: block}

.social {text-align:center}
.social a {display:inline-block;padding:3px; text-decoration:none; color:#561000}
.social a span {display:none}
.social img {width:23px; padding-right:0px}
.social a:hover {background-color:#ccc; color:black; border-radius:5px;}

h1, h2, h3 {margin-left:8px; margin-right:8px}
h4 {padding-left:5px;margin-left:10px; margin-right:10px}
.imgleft {width:150px;}
.imgleft img {width:150px; }
.imgright img {width:150px;}
.imgright {width:150px;}

.buttonup {
position:fixed;
bottom:10px;
right:15px;
opacity: 0.3;
}

}
@media only screen and (max-width: 570px) and (min-width: 160px){
#menu a {color:#ccc; font-family:Arial, Helvetica, sans-serif; font-size:14px; display:block;padding:6px 6px 7px; text-decoration:none; border-bottom:1px #555 dotted}
#menu a:last-child{border-bottom:none}
#menu a:hover {background-color:#444; color:#fff}

}