/*
Theme Name: Ferromodellismo
Author: Filippo Giacometti
Version: 1.0
Text Domain: Ferromodellismo
*/

@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,300|Noto+Serif|family=Patua+One';
 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html, body {
    height:100%;
}

body {
	font-family: 'Open Sans', sans-serif;
	width:100%;
	font-size:1rem;
	color:#222;
	font-weight:normal;
	line-height:1.5;
	margin:0 auto;
}
/*tipografia*/

h1,h2,h3,h4 {font-family: 'Noto Sans', sans-serif;color:#000;line-height:1.1}
h1 {font-size:4.5rem}
h2 {font-size:3.5rem}
h3 {font-size:2.2rem}
h4 {font-size:1.5rem}
h5,h6 {font-size:.8rem;color:#CCC}
p  {font-size:1rem}
.title {margin:1.5rem 0 0 0}
a {
  text-decoration: none;
  color:#222;
  -webkit-transition:.4s ease;
  -moz-transition:.4s ease;
  -o-transition:.4s ease;
  transition:.4s ease;
}
/*colori*/
.white {color:#FFF}
.black {color:#000}
.light-grey {background:#F7F7F7}
.dark-grey {background:#262626}
.bc-white {background:#FFF}
.bc-black {background:#000}

/*menu*/
.nav {
  inset: 0;
  z-index:9;
}
.menu-container {
	max-width:1400px;
	height:8em;
	padding:0 1em 1em 1em;
	margin:0 auto;
	}
.menu li {flex-grow:1;text-align:center;border:.1em #262626 dotted;border-right:none}
.menu li:last-child {border-right:.1em #262626 dotted}
.menu a {
  padding:1em;
  font-size:.8em;
  text-transform:uppercase;
  display:block;
  font-weight:300
}
 .menu span {padding-left:.5em}
 .menu svg {width:1em;height:1em;}
 .menu li ul {z-index:-1}
.logo a {font-weight:700;font-size:2em;height:4em;font-family: 'Patua One', serif}
.logo a:before {content:"Ferromodellismo.org"}
.logo-img {width:25em;margin-bottom:-.25em;margin-left:2em}
.menu-icon {display: none;}
.vertical {
  animation: vertical 1s ease;
  transform-origin: 50% 50%;
}

@keyframes vertical {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }

  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@media screen and (min-width:950px) {
.menu li ul {
  position:absolute;
  top:7em;
  width:10em;
  visibility:hidden;
  opacity:0;
}
.menu li:hover > ul {
	opacity:1;
    visibility:visible;
}
.menu li ul li {border-right:.1em #262626 dotted;border-top:0;}
}
/*contenitori base*/
main {
min-height: -moz-calc(100vh - 8em);
min-height: -webkit-calc(100vh - 8em);
min-height: -o-calc(100vh - 8em);
min-height: calc(100vh - 8em)
}
.container {
	max-width:1400px;
	margin:1em auto;
	padding:1rem
}
/*post-nav*/
 .post-nav a span {font-weight:bolder}
 .post-nav svg {display:none}
 .post-nav a:nth-child(2){border-left:solid .2rem #F7F7F7;border-right:solid .2rem #F7F7F7}
 .post-nav a {height:6em}
/*effetti*/
.fx-fade {   -webkit-transition:.3s ease;
  -moz-transition:.3s ease;
  -o-transition:.3s ease;
  transition:.3s ease;}
.fade a:hover {background:#F7F7F7}
.blur {-webkit-filter: blur(5px);filter: blur(5px)}
.fx-4 a::after {
	position: absolute;
	top: 100%;
	left: 50%;
	width: 0;
	height: 4px;
	background:#ae3a4a;
	content: '';
	opacity: 0;
	-webkit-transition: left 0.3s, width 0.3s, opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}
.fx-4 a:hover::after,
.fx-4 a:focus::after {
	opacity: 1;
  width: 100%;
  left: 0;
}
.fx-border section {border-top:.4em solid transparent}
.fx-border a:hover > section {border-color:#ae3a4a}
/* elementi base per immagini, video, sfondi*/

img {max-width:100%;height:auto}
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height:0;
	}
.video-container embed, .video-container iframe, .video-container object {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%}
.over {width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}
.opacity {opacity:.5}
.relative {position:relative}
.top-index {z-index:10}
.parallax {	background-clip: content-box; /*per posizionare lo sfondo all'angolo del .box*/
	overflow: hidden; /*per nascodere l'ala e la scritta quando fuoriescono dal .box*/
	background-attachment: fixed; /*per bloccare lo sfondo su scroll*/}
.sf {
	-webkit-background-size:cover;
    -moz-background-size: cover;
    background-size:cover;
	background-position:center;
	background-repeat: no-repeat;
	}
.sf-bottom {background-position:bottom}
.sf-top {background-position:top}
.sf-left {background-position:left}
.sf-right {background-position:right}
 /*icon*/

 .icon svg {
  width:3em;
  height:3em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor}

/* pagination */
.pagination {
clear:both;
padding:20px 0;
position:relative;
font-size:11px;
line-height:13px;
}
.pagination span, .pagination a {
margin:.1rem;
padding:1rem;
width:auto;
background:#FFF
}
.pagination .current{
background:#ae3a4a;
color:#FFF
}

/*post*/
@media screen and (min-width:1150px) {
.post section {min-height:10em}
.img-container {
  overflow: hidden;
  height:18em;
}
.img-content {
  width: 1150px;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left:-575px;
}
.post img {
  display: block;
}
}
/* testo singolo*/
.testo-articolo>h1 {font-size:2rem}
.testo-articolo {
    padding:0 .5rem 0 .5rem;
    max-width: 55rem;
    margin: 0 auto 5rem
}
.testo-articolo p,
.testo-articolo li {
    font-size: 1.25rem;
    line-height: 2.2rem
}
/* button */
.button {
	width:10rem;
	height:3rem
}
/*input*/
.search svg {width:.8em;
  height:.8em;margin:1em 0em 1em 1em;fill:#B7B7B7}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
  border:none;
}
.input-area,input[type="search"]
 {	border:none;
	padding:1em;
}
input:focus {
    outline: 0;
}
input:not([type="button"]):focus,
input:not([type="button"]):active {
    border-color:none;
}
textarea:focus,
input:focus {
    outline: 0;
}
/*footer*/

footer {min-height:25vh}
/*QUICK COMMAND*/

/*no-type-list*/

.no-list {list-style: none}

/*vertical align*/
.middle {
	-webkit-align-items:center;
	align-items:center
	}
.bottom {
	align-items:flex-end
	}
/*text align*/
.center {
	text-align:center
	}
.right {
	text-align:right
	}
.testo-articolo h3,
.uppercase {text-transform:uppercase}
.left {text-align:left}
.justify {
	text-align:justify
	}
/* container for content*/
.content-text {
	padding:0% 4% 0% 4%
	}
/*heights*/
.h100 {height:100%}
.height-100 {height:100vh}
.height-60 {height:60vh}
.height-50 {height:50vh}
.height-30 {height:30vh}
.height-25 {height:25vh}
.height-15 {height:15vh}
.height-10 {height:10vh}
/*disable padding and margin*/
.no-padding {
	padding:0000
	}
.no-padding-rl {
	padding:2% 0% 2% 0%
	}
.no-padding-tb {
	padding:0% 2% 0% 2%
	}
.content {
	padding:2%;
	}

/*flex-box*/

.flex {
	display: -moz-box;
    display: -ms-flexbox;
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;
	-webkit-justify-content:space-between;
	justify-content:space-between;
}
.flex-around {
	-webkit-justify-content:space-around;
	justify-content:space-around
	}
.flex-start {
	-webkit-justify-content:flex-start;
	justify-content:flex-start
	}
.flex-center {
	-webkit-justify-content:center;
	justify-content:center
	}
.flex-end {
	-webkit-justify-content:flex-end;
	justify-content:flex-end
	}
.flex-wrap {
	-webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
	}
.flex-column {
	flex-flow: column;
	-webkit-flex-flow: column;
	}
.column-reverse {
	flex-flow: column-reverse;
	-webkit-flex-flow: column-reverse;
	}
.wrap-reverse {
	flex-flow: row-reverse wrap;
   -webkit-flex-flow: row-reverse wrap
	}
.reverse {
   flex-flow: row-reverse ;
   -webkit-flex-flow: row-reverse
}


/*lazy load*/

.lazy-load, .lazy-loaded {
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  -ms-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
  opacity: 0;
}
.lazy-loaded { opacity: 1; }


.content,
.masonry,
.col-gr,
.col {
	margin:.9vh 0% .9vh 0%}
.margin {
	margin:.9vh .5% .9vh .5%
	}
.col-mx {min-width:100vw;max-width:100%;}
.col-gr-ng,
.col-ng,
.no-margin {
	margin:0000 auto
	}
/*column no margin*/
.col-n1,
.col-ng1 {
	width:8.333333333333333%
	}
.col-n2,
.col-ng2 {
	width:16.66666666666667%
	}
.col-n3,
.col-ng3 {
	width:25%;
}
.col-n4 {
	width:33.33333333333333%
	}
.col-n5 {
	width:41.66666666666667%
	}
.col-n6 {
	width:50%
	}
.col-n7 {
	width:58.33333333333333%
	}
.col-n8 {
	width:66.66666666666667%
	}
.col-n9 {
	width:75%
	}
.col-n10 {
	width:83.33333333333333%
	}
.col-n11 {
	width:91.66666666666667%
	}
.col-12,
.col-n12 {
	width:100%
	}
/* column with margin*/
.col-1,
.col-g1 {
	width:7.333333333333333%
	}
.col-2,
.col-g2 {
	width:15.66666666666667%
	}
.col-g3 {width:22%}
.col-3 {
	width:24%
	}
.col-4 {
	width:32.33333333333333%
	}
.col-5 {
	width:40.66666666666667%
	}
.col-6 {
	width:49%
	}
.col-7 {
	width:57.33333333333333%
	}
.col-8 {
	width:65.66666666666667%
	}
.col-9 {
	width:74%
	}
.col-10 {
	width:82.33333333333333%
	}
.col-11 {
	width:90.66666666666667%
	}
@media screen and (min-width:3000px) {
 .container {
	 max-width:1900px
	 }
}
@media screen and (max-width:1150px) {
.container {
	margin:1rem 0 1rem 0 auto;
}
.reverse {
	flex-flow: row wrap;
	-webkit-flex-flow: row wrap;
	}
col-ng1 {width:25%}
.col-g1 {
	width:24%
	}
.col-ng2 {width:33.33333333333333%}
.col-g2 {
	width:32.33333333333333%
	}
.col-ng3 {
	width:50%
	}
.col-g3 {
	width:47%
	}
.post img,
.col-ng,
.col,
.last {
	width:100%
	}
}

@media screen and (device-aspect-ratio: 9/16), screen and (max-width:950px) {
.page,.testo-articolo {
	margin:0000
}
h1 {font-size:2.4rem}
h2 {font-size:1.4rem}
h3 {font-size:1.2rem}
h4 {font-size:1.1rem}
h5 {font-size:.9rem}
p  {font-size:1rem}

.menu-container {height:3.8em;-webkit-align-items:center;
	align-items:center;padding-bottom:0}
.testo-articolo {padding:0000}
.testo-articolo p,.testo-articolo li {font-size:1rem}
.col-gr-ng,
.col-gr,
.menu,.mobile,.menu li,.col {
	width:100%;border:none;text-align:left
	}
.menu {display:none;background:#FFF}
.menu-icon svg,.menu-icon {height:2rem;width:2rem}
.menu-icon {display:block}
.responsive {
   position:absolute;
   display:block;
   top:3.8em;
   height:calc(100vh - 3.8em);
   left:0;
   overflow-y:scroll;
 }
 .menu li:last-child {border:none}
 .menu li ul {text-align:left}
 .menu li ul li a {color:#A1A1A1;font-size:.9em;padding-left:2em}
 .menu a, .menu .input-area,input[type="search"] {margin:0;font-size:1.1em;}
 .logo-img, .menu span {display:none}
 .logo a:before {content:"FE"}
 /*button*/
.button {
	width:100%
}
 /*post-nav*/
.post-nav svg {display:block}.post-nav div {display:none}.post-nav a {height:5em}
}