/*
Descrizione: 	Responsive Site based on HTML5, CSS3 and Font Awesome.
Versione:     1.0
Autore:     	Francesco Ascione
Sito:         www.noncicasco.tk
*/

/*---General--*/

html, body{padding: 0; margin: 0; font-family: acumin-pro, sans-serif; font-weight: 400; font-style: normal; height: 100%;}
b{font-weight: 900; font-style: italic;}
em{font-style: italic;}
strong{font-weight: bold;}
a{text-decoration: none; cursor: pointer;}
.image{margin: 15px auto;}
.article__text ol{list-style-type: decimal;}
.article__text ul{list-style-type: disc;}
.article__text ol, .article__text ul{display: block; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 40px;}
.title{font-weight: bold!important; font-size: 30px!important; margin: 5px auto;}
.text{font-size: 16px;}
.text-centered{text-align: center;}
.line-small{display: block; height: 2px; width: 100%;}

/*---Navbar--*/

.navbar{width: 100%; min-height: 170px; height: auto; float: left;}

.navbar__left{float: left; width: 25%;}
.navbar__logo{float: left; width: auto; height: 170px;}
.navbar__logo img{height: 170px;}

.navbar__middle{float: left; width: 50%;}
.navbar__menu{width: 100%; text-align: center;}
.navbar__menu ul{width: 100%;}
.navbar__menu li{float: left; width: 25%; margin-top: 50px;}
.navbar__menu a{display: block; text-align: center; font-size: 20px; font-weight: 900; transition: 0.5s;}
.navbar__search-input{height: 30px; display: block; overflow: hidden; float: left; width: 100%; margin-top: 40px; border-radius: 12px;}
.navbar__search-input-text{height: 30px; text-align: left; padding: 5px 0px 5px 5px; width: 90%; outline: none; border: none; font-size: 15px; box-sizing: border-box; float: left;}
.navbar__search-input-submit{width: 5%; outline: none; border: none; padding: 5px 5px 5px 0px; font-size: 15px; margin: 2.5px 10px 2.5px 0px; text-align: center; cursor: pointer; box-sizing: border-box; float: right;}

.navbar__right{float: right; width: 25%;}
.button-user{float: right; margin: 17.5px 17.5px 0px 0px; height: 30px; width: 30px; border-radius: 50%;}
.button-user i{padding: 7px 8px;}

/*---Pre-Page---*/

.pre-page{width: 50%; padding: 10px; margin: 0 auto; box-sizing: border-box;}
.pre-page__image{float: left; width: auto; height: 110px;}
.pre-page__image img{width: auto; height: 110px;}
.pre-page__text{float: left; width: 70%; font-size: 40px; font-weight: bold; margin: 35px 0px;}

/*---Menu---*/

.menu{display: none; overflow: hidden; height: 0;}

/*---Container---*/

.container{clear: both;}

/*---Home---*/

.home{max-width: 1200px; margin: 0 auto;}

/*---Content--*/

.content{padding: 0; text-align: justify; width: 66%; float: left; margin: 2%; border-radius: 6px; box-sizing: border-box;}
.content__articles{width: 100%; height: auto; box-sizing: border-box;}
.article{width: 90%; margin: 30px auto; height: auto;}
.article-left{overflow: hidden; float: left; width: 30%; box-sizing: border-box; padding: 10px;}
.article-left img{max-width: 100%; width: auto;}
.article-right{float: left; width: 70%; box-sizing: border-box; padding: 10px;}
.content__top-left, .sidebar__top-left{float: left; padding: 10px;}
.content__top-right, .sidebar__top-right{float: right; padding: 10px; font-weight: bold;}

/*---Sidebar---*/

.sidebar{padding: 0; text-align: justify; width: 26%; float: left; margin: 2%; border-radius: 6px; box-sizing: border-box;}
.article-popular{margin: 30px auto; width: 90%; padding: 10px; box-sizing: border-box;}
.article-popular img{width: 100%; height: auto;}

/*---Sigle---*/

.content__article{padding: 20px;}
.content__article img{width: 100%; height: auto;}

/*---Footer---*/

.footer{height: auto; clear: both;}
.footer__copy{font-size: 16px; margin: 0; padding: 30px; float: left;}
.footer__top{font-size: 20px; margin: 0; padding: 30px; float: right; cursor: pointer; transition: 0.6s; text-align: right;}

/*---Motion---*/

.pagination{height: 30px; width: 68px;}
.motion{height: 100%; width: 32px; margin: 1px; float: left; padding: 7px 9px; box-sizing: border-box;}

/*---Media Tablets---*/

@media(max-width: 998px){

	/*---Navbar---*/

	.navbar{min-height: 60px;}
	.navbar__menu{height: 0; overflow: hidden; padding: 0;}
	.navbar__logo{height: 60px;}
	.navbar__logo img{height: 60px;}
	.navbar__left, .navbar__right{width: 20%;}
	.navbar__middle{width: 60%;}
	.navbar__search-input{margin-top: 17.5px;}

	/*---Pre-Page---*/

	.pre-page{width: 100%;}
	.pre-page__image{height: 70px;}
	.pre-page__image img{height: 70px;}
	.pre-page__text{font-size: 30px; margin: 20px 0px;}

	/*---Menu---*/

	.menu{width: 100%; text-align: center; height: auto;}
	.menu ul{width: 100%;}
	.menu li{float: left; width: 24%; margin: 0.5%;}
	.menu a{display: block; text-align: center; font-size: 13px; font-weight: 900; transition: 0.5s; padding: 10px;}

	/*---Content---*/

	.content{float: none; width: 90%; margin: 20px auto;}
	.article-left{float: none; width: 100%;}
	.article-left img{width: 100%;}
	.article-right{float: none; width: 100%;}

	/*---Sidebar---*/

	.sidebar{float: none; width: 90%; margin: 20px auto;}

}

/*---Media Smartphones---*/

@media(max-width: 767px){
	.footer__copy, .footer__top{float: none;}
	.footer__top{padding: 12px;}
}

/*---Reset---*/

::placeholder{color: #BCBCBC;}
.clearfix:after{visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.clearfix{display: inline-block;}
* html .clearfix{height: 1%;}
.clearfix{display: block;}

/*---Color---*/

.b-yellow{background: #ffe13a}
.b-whiteblue{background: #00a8ff}
.b-grey{background: #efefef}
.b-black{background: #1a1a1a}
.b-white{background: #ffffff;}
.c-white{color: #ffffff;}
.c-yellow{color: #ffe13a}
.c-whiteblue{color: #00a8ff}
.c-grey{color: #efefef}
.c-black{color: #1a1a1a}