/* CSS Document */
body{
	background-color:#ecf0f1;	
}
.button-scroll{
    position: fixed;
    float: left;
    bottom: 2%;
    left: 2%;
    display: none;
    cursor: pointer;
}
header{
    background-image:url("../image/show-posts/bg-header.jpg");
	width:100%;
	height:200px;	
	float:left;
	box-shadow:0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.p-title{
	width:50%;
	height:200px;
	float:left;
	line-height:200px;	
}
.p-title p{
	color:#e74c3c;
	text-align:center;
	font-size:70px;
}
.nav{
	width:50%;
	height:200px;
	float:left;	
}
.nav-soshal{
	width:100%;
	height:130px;
	float:right;	
}
.nav-soshal ul{
    list-style-type: none;
    margin-top: 5px;
}
.nav-soshal ul li{
    float: right;
    border-top: 3px solid #3498db;
    margin-right: 5%;
    font-size: 36px;
    cursor: pointer;
}
.nav-soshal ul li:hover i{
    transition: 1.5s;
    transform: rotateX(360deg);
}
.nav-soshal ul li i{
    color: #FFFFFF;
    padding: 10px;
}
.nav-meno{
	width:100%;
	height:70px;
	float:left;	
}
.div-meno-ul{
	width:100%;
	height:65px;
}
.nav-meno ul{
	list-style-type:none;
	line-height:59px;	
	float:right;
}
.nav-meno ul li{
	float:right;
	padding-right:10px;
	padding-left:10px;
	border-radius:20px;
	border:3px solid #FFFFFF;
	margin-right:5px;
	cursor:pointer;
	transition:.7s;
}
.nav-meno ul li:hover{
	background-color:#FFFFFF;	
}
.vertical-pedia{
	background-color: #bdc3c7;
    width: auto;
    height: auto;
    padding: 10px;
    float: right;
    border: 3px solid #FFFFFF;
    border-radius: 20px;
    position: absolute;
    top: 200px;
    right: 1%;	
    display: none;
    z-index: 10;
}
.vertical-pedia ul{
	list-style-type:none;	
}
.vertical-pedia ul li{
	float:right;
}
.vertical-pedia ul li:hover{
	background-color:color:#2E2E2E;;
	color:#FFFFFF;
}
.nav-meno ul li:hover p{
	color:#464646;
}
.nav-meno ul li p{
	color:#FFFFFF;
	font-size:20px;	
}

/************** SLIDER ****************/
.div-slider{
    width: 90%;
    height: auto;
    float: left;
    margin-left: 5%;
    margin-top: 15px;
}
/********** SECTION ***********/
section{
	width: 100%;
    height: auto;
    float: left;
    margin-bottom: 10px;
}
.country-article1{
	width:33%;
	height:auto;
	float:left;
	margin-top:2%;	
}
.country-article1 img{
	width:100%;
	height:150px;	
}
.country-article1 p{
	color:#34495e;
	padding:5px;
	text-align:center;	
}
.country-article2{
	width:33%;
	height:auto;
	float:left;
	margin-left:.5%;
	margin-top:2%;	
}
.country-article2 img{
	width:100%;
	height:150px;	
}
.country-article2 p{
	color:#34495e;
	padding:5px;
	text-align:center;	
}
.country-article3{
	width:33%;
	height:auto;
	float:left;
	margin-left:.5%;
	margin-top:2%;	
}
.country-article3 img{
	width:100%;
	height:150px;	
}
.country-article3 p{
	color:#34495e;
	padding:5px;
	text-align:center;	
}
.div-about-coffee-tork{
	background-image:url(../image/show-posts/bg-coffee-post1.jpg);
	background-size:100% 100%;
	width:90%;
	height:auto;
	margin-top:10px;
	float:right;
	margin-right:5%;	
}
.div-about-coffee-tork p{
    background-color: rgba(38, 27, 15, 0.38);
	color:#FFFFFF;
	text-align:right;
	font-size:22px;
	padding:20px;	
}
/********** FAVAYED ***********/
.article-toggle{
    width: 100%;
    height: auto;
    float: left;
}
.ar-tog{
    background-color: #2ecc71;
    width: 49%;
    height: auto;
    float: right;
    margin-right: 1%;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    display: inline-block;
}
.ar-tog:hover{
    background-color: #27ae60;
    transition: .5s;
}
.ar-tog-header{
    width: 100%;
    height:50px;
    float: left;
    line-height: 50px;
    cursor: pointer;
}
.ar-tog-header p{
    text-align: center;
    color: #ffffff;
    font-size: 18px;
}
.ar-tog-section{
    background-color: #FFFFFF;
    width: 100%;
    height: auto;
    float: left;
    display: none;
}
.ar-tog-section p{
    text-align: justify;
    padding: 15px;
    font-size: 20px;
    color: #34495e;
}
.div-khavas{
    width: 100%;
    height: auto;
    float: left;
}
.div-khavas-1{
    width: 49%;
    height: auto;
    float: left;
    margin-left: 1%;
}
.div-khavas-2{
    width: 49%;
    height: auto;
    float: left;
    margin-left: 1%;
}
.side-mother{
    width: 100%;
    height: auto;
    float: left;
}
.side-mother p{
    color: darkred;
    text-align: center;
    padding: 5px;
    font-size: 25px;
}
.side-section{
    width: 100%;
    height: auto;
    float: left;
    border-top: 3px solid darkred;
}
.side-section p{
    text-align: justify;
    padding: 20px;
    font-size: 25px;
}
/******************************/
.div-pro-1{
    background-image: url(../image/show-posts/bg-turk.jpg);
    background-size: 100% 100%;
    width: 90%;
    height: auto;
    float: left;
    margin-left: 5%;
    margin-top: 20px;
}
.div-pro-1 p{
    background-color: rgba(38, 27, 15, 0.38);
    padding: 40px;
    font-size: 24px;
    color: #FFFFFF;
}
.div-pro-2{
    background-image: url(../image/show-posts/bg-french.jpg);
    background-size: 100% 100%;
    width: 90%;
    height: auto;
    float: left;
    margin-left: 5%;
    margin-top: 20px;
}
.div-pro-2 p{
    background-color: rgba(38, 27, 15, 0.38);
    padding: 40px;
    font-size: 24px;
    color: #FFFFFF;
}
.div-pro-3{
    background-image: url(../image/show-posts/bg-nescoffee2.jpg);
    background-size: 100% 100%;
    width: 90%;
    height: auto;
    float: left;
    margin-left: 5%;
    margin-top: 20px;
}
.div-pro-3 p{
    background-color: rgba(38, 27, 15, 0.38);
    padding: 40px;
    font-size: 24px;
    color: #FFFFFF;
}
footer{
	background-color:#FFFFFF;
	width:100%;
	height:auto;
	float:left;	
}
.sec-footer-left{
	width: 50%;
    height: 80px;
    float: left;
    line-height: 80px;
}
.sec-footer-left p{
    color: #34495e;
    font-size: 18px;
    text-align: center;
}
.sec-footer-right{
	width:50%;
	height:80px;
	float:left;
    line-height: 80px;
}
.sec-footer-right i{
    font-size: 40px;
    color: #34495e;
    padding: 20px;
    cursor: pointer;
}
.sec-footer-right i:hover{
    background-color: #ecf0f1;
    transition: 1.5s;
    transform: rotateY(360deg);
}
.title-about{
    font-size: 36px;
    color: chocolate;
    padding: 20px;
}
.ar-sec-about-1{
    background-image: url(../image/gallery/img9.jpg);
    background-size: 100% 100%;
    width: 90%;
    height:614px;
}
.ar-sec-about-1 p{
    background-color: rgba(38, 27, 15, 0.38);
    color: #FFFFFF;
    font-size: 35px;
    padding: 68px;
    line-height: 53px;
    text-align: center;
}
.div-gallery{
    width: 95%;
    height: auto;
    margin-top: 20px;
}
.div-gallery ul{
    list-style-type: none;
    padding: 0px;
}
.div-gallery ul li{
    float: right;
    padding: 1%;
    width: 48%;
}
.div-gallery ul li img{
    width: 100%;
}