/* CSS Style by Nicola Piedimonte a.k.a. Mountaize */

/* Base */

/* Typography */
@import url('https://fonts.googleapis.com/css?family=Montserrat:500|Open+Sans');

/* Slider Home */
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
}

.background-salato{ 
  background: url(../img/background.svg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.background-dolce{ 
  background: url(../img/dolce.svg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* NAV */
nav.menu {
    background-color: unset!important;
}

nav.menu ul a:hover {
    background-color: unset;
	color: #E7C650;
}

.z-depth-1, nav, .card-panel, .card, .toast, .btn, .btn-large, .btn-small, .btn-floating, .dropdown-content, .collapsible, .sidenav {
    -webkit-box-shadow: unset;
    box-shadow: unset;
}

nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i {
    line-height: 5vw;
}

nav.menu ul a {
	font-size: 1.15vw;
    color: #433D38;
    text-transform: uppercase;
}

/* NAV Mobile */
a.sidenav-trigger>i{
	color:#59514B;
}

/* ICO SOCIAL */
.social-li{
    position: relative;
	top: 0.2vw;
    vertical-align: middle;
    line-height: initial;
}

.social-li a{
	padding: 0 8px
}

.ico-social {
    height: 4vh;
    margin-top: 2.75vh;
}

.instagram-ico {
    margin-right: 15px;
}

.img-slogan{
	padding: 30px;
}


/* Logo */
.logo {
    width: auto;
    height: 5.5vw;
    padding: 0.60vw;
	margin: 0.3em;
}

nav .brand-logo {
    height: 100%;
}


/* Slider Home */
#slide2.flexslider{
	height: 0px!important;
}

#slide2.flexslider>ul>li{
	height: 100%!important;
}

.slider-row{
	margin-bottom: 0;
}

.flexslider {
	margin: 0;
	background: unset;
    border: unset;
}

.flex-viewport {
	height: 89vh
}

.loading .flex-viewport {
    max-height: 100%;
}

.flexslider .slides::after {
    height: 100% !important;
}

.flexslider .slides img {
    text-align: center;
    margin: 0 auto;
}

.flex-direction-nav a::before {
    font-size: 35px;
}

.slide-position {
    display: inherit;
    float: right;
    position: absolute;
    right: 30px;
	bottom: 35px;
}

.flexslider .slides > li {
    height: 89vh;
}

/* Numero Slide */
.slide-position{
	font-size: 1.5vw;
	margin-bottom: 1vh;
	color: #433D38
}

.divisore-contatore{
	color: #fff;
}

.current-slide1{
    font-size: 2vw;
    font-weight: bold;
	color: #59514B
}

/* Sofficino IMG */
.parent {
    position: relative;
    bottom: -17%;
}

.parent .center-wrapper {
    position: absolute;
    left: 50%;
}

.parent .center-wrapper .center-content {
    position: relative;
    left: -50%;
    width: 75vh;
}


/* Elementi Slide */
h1.nome-sofficino{
	margin: unset;
	font-size: 5vw;
	color: #59514B;
	font-family: 'Montserrat', sans-serif;
}

.panatura {
    background-color: #E7C650;
    padding: 5px 12px;
    margin: -13px;
    border-radius: 15px;
    font-size: 0.83vw;
	color: #59514B;
}

.ingredienti{
    font-size: 0.85vw;
    position: relative;
	margin-left: -15px;
	text-transform: uppercase;
}

.descrizione-top{
	width: 30vw;
	float: right;
}

.descrizione-bottom {
    position: absolute;
    float: left;
	bottom: 5px;
	font-size: 1vw;
	width: 33vw;
}

/* BUTTON ANIMATED MOBILE */
.ico {
  margin: 0 auto;
  text-align: center;
  width: 35px;
  height: 35px;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-filter: url("#goo");
          filter: url("#goo");
}
.ico .circle {
  background: #fff;
  border-radius: 50%;
  display: inline-block;
  height: 55px;
  width: 55px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  -webkit-transform-origin: 0%;
          transform-origin: 0%;
}
.ico .circle.circle-top {
  height: 15px;
  width: 20px;
  -webkit-animation: blob-1-anim 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
          animation: blob-1-anim 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
  z-index: 0;
  top: 0;
}
.ico .circle.circle-bottom {
  height: 20px;
  width: 23px;
  -webkit-animation: blob-2-anim 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
          animation: blob-2-anim 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;
  z-index: 9;
  bottom: 0px;
}
.ico .st-arrow {
  fill: #55544F;
  -webkit-animation: scrolly 3s cubic-bezier(0.77, 0, 0.175, 1) forwards infinite;
          animation: scrolly 3s cubic-bezier(0.77, 0, 0.175, 1) forwards infinite;
  -webkit-perspective: 9000px;
          perspective: 9000px;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}

.svg {
  z-index: 9;
  position: relative;
}

@-webkit-keyframes blob-1-anim {
  0% {
    -webkit-transform: translateX(-50%) translateY(0);
            transform: translateX(-50%) translateY(0);
  }
  14% {
    -webkit-transform: translateX(-50%) translateY(-8px);
            transform: translateX(-50%) translateY(-8px);
  }
  24% {
    -webkit-transform: translateX(-50%) translateY(0);
            transform: translateX(-50%) translateY(0);
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(0);
            transform: translateX(-50%) translateY(0);
  }
}

@keyframes blob-1-anim {
  0% {
    -webkit-transform: translateX(-50%) translateY(0);
            transform: translateX(-50%) translateY(0);
  }
  14% {
    -webkit-transform: translateX(-50%) translateY(-8px);
            transform: translateX(-50%) translateY(-8px);
  }
  24% {
    -webkit-transform: translateX(-50%) translateY(0);
            transform: translateX(-50%) translateY(0);
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(0);
            transform: translateX(-50%) translateY(0);
  }
}
@-webkit-keyframes blob-2-anim {
  0% {
    -webkit-transform: scale(1) translate(-50%, 10px);
            transform: scale(1) translate(-50%, 10px);
  }
  30% {
    -webkit-transform: scale(1) translate(-50%, 10px);
            transform: scale(1) translate(-50%, 10px);
  }
  70% {
    -webkit-transform: scale(1) translate(-50%, 10px);
            transform: scale(1) translate(-50%, 10px);
  }
  95% {
    -webkit-transform: scale(1) translate(-50%, 26px);
            transform: scale(1) translate(-50%, 26px);
  }
  100% {
    -webkit-transform: scale(1) translate(-50%, 10px);
            transform: scale(1) translate(-50%, 10px);
  }
}
@keyframes blob-2-anim {
  0% {
    -webkit-transform: scale(1) translate(-50%, 10px);
            transform: scale(1) translate(-50%, 10px);
  }
  30% {
    -webkit-transform: scale(1) translate(-50%, 10px);
            transform: scale(1) translate(-50%, 10px);
  }
  70% {
    -webkit-transform: scale(1) translate(-50%, 10px);
            transform: scale(1) translate(-50%, 10px);
  }
  95% {
    -webkit-transform: scale(1) translate(-50%, 26px);
            transform: scale(1) translate(-50%, 26px);
  }
  100% {
    -webkit-transform: scale(1) translate(-50%, 10px);
            transform: scale(1) translate(-50%, 10px);
  }
}
@-webkit-keyframes scrolly {
  0% {
    -webkit-transform: translate3d(0, -150%, 0) rotateX(90deg) scale(0.5) skewX(3deg);
            transform: translate3d(0, -150%, 0) rotateX(90deg) scale(0.5) skewX(3deg);
  }
  30% {
    -webkit-transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg);
            transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg);
  }
  70% {
    -webkit-transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg);
            transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg);
  }
  95% {
    -webkit-transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg);
            transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg);
  }
  100% {
    -webkit-transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg);
            transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg);
  }
}
@keyframes scrolly {
  0% {
    -webkit-transform: translate3d(0, -150%, 0) rotateX(90deg) scale(0.5) skewX(3deg);
            transform: translate3d(0, -150%, 0) rotateX(90deg) scale(0.5) skewX(3deg);
  }
  30% {
    -webkit-transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg);
            transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg);
  }
  70% {
    -webkit-transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg);
            transform: translate3d(0, 0, 0) rotateX(0deg) scale(1) skewX(0deg);
  }
  95% {
    -webkit-transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg);
            transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg);
  }
  100% {
    -webkit-transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg);
            transform: translate3d(0, 50%, 0) rotateX(-90deg) scale(0.5) skewX(-3deg);
  }
}


/* Footer */
.copyright {
	font-size: 0.85vw;
    float: right;
    right: 25px;
    position: absolute;
    bottom: 15px;
    color: #433D38;
    text-transform: uppercase;
}

.copyright-pages {
    	color: #433D38;
    	text-align: center;
    	padding: 2em 0;
    	position: relative;
		background-color: #E7C650;
}

.nicola-piedimonte{
	color: #59514B!important;
}



/* MEDIA QUERY */
/* DESKTOP */
@media (min-width: 993px){
	.nascondi-desktop{
		display: none;
	}
	
	html{
		overflow-x: hidden;
		overflow-y: hidden;
	}
	
	body{
		overflow-x: hidden;
		overflow-y: hidden;
	}
}

/* Landscape tablet */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

	html{
		overflow-x: hidden;
		overflow-y: hidden;
	}
	  
	.flex-direction-nav .flex-next {
   		right: unset;
	}
}

/* iPad safari */
@media screen and (-webkit-min-device-pixel-ratio:0) { 
	.descrizione-bottom {
		bottom: 1.35em!important;
	}
}


/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
	.nascondi-small-phone{
		display: none;
	}
}


/* MOBILE */
@media (max-width: 992px) {
	/* BASE */
	html{
		overflow-x: hidden;
		overflow-y: hidden;
	}
	
	body{
		overflow-x: hidden;
		overflow-y: hidden;
	}
	
	.nascondi-mobile{
		display: none;
	}
	
	.centra {
    	text-align: center;
	}
	
	/* NAV */
	nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i {
    	line-height: 50px;
	}
	
	.logo {
		width: auto;
		height: inherit;
		padding-top: 0.2em;
		top: 5px;
		position: relative;
	}
	
	.social-li{
		padding-left: 15px;
	}
	.social-li>a{
		float: left;
		padding: 0 10px!important;
	}
	
	.ico-social {
    	height: 2em;
    	margin: 1.4em;
	}
	
	/* SLIDER */
	.flexslider .slides > li {
    	height: 95vh;
	}
	
	.background-salato{ 
	  background: url(../img/background-mobile.svg) no-repeat left fixed; 
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  background-size: cover;
	}

	.background-dolce{ 
	  background: url(../img/dolce-mobile.svg) no-repeat left fixed;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  background-size: cover;
	}
	
	h1.nome-sofficino {
    	font-size: 3.2rem;
    	line-height: 1.2;
		margin-top: 0.4em;
    	text-align: center!important;
	}
	
	.descrizione-top {
    	width: unset;
    	float: unset;
	}
	
	.panatura {
    	top: 8px;
    	font-size: 0.9em;
    	position: relative;
	}
	
	.parent {
   		bottom: -10%;
	}
	
	.parent .center-wrapper .center-content {
    	width: 65vh;
	}
	
	.contenitore-info-mobile{
		background-color: #F5F5F5;
		padding: 2em!important;
	}
	
	.vai-descrizione {
		position: absolute;
		bottom: 70px;
		font-size: 11px;
		text-transform: uppercase;
	}
	
	.bottone-gel{
		position: absolute;
		bottom: 20px;
		display: block;
		text-align: center;
		margin: 0 auto;
		width: 100%;
	}
	
	.ico-arrow{
		background-color: #fff;
		border-radius: 25px;
		padding: 10px;
		color: #59514B;
	}
	
	.ingredienti-mobile{
    	font-size: x-large;
   	 	font-weight: 600;
		color: #59514B;
		text-transform: uppercase;
	}
	
	.section-arrow-ingredenti{
		margin-bottom: 0;
		opacity: 0;
	}
	
	.row-text-ingredienti{
		margin-bottom: 0
	}
	
	/* FOOTER */
	.copyright-mobile {
    	color: #433D38;
    	text-align: center;
    	padding: 2em 0;
    	position: relative;
		background-color: #E7C650;
	}
	
	.nicola-piedimonte{
		font-weight: 600;
	}
}