@import url('reset.css');

::-moz-selection{ background-color: #edb5b5; color: #FFF;}
::selection{ background-color: #edb5b5; color: #FFF;}

*{-webkit-appearance: none; -webkit-text-size-adjust: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

a {text-decoration: none; color: #000; cursor: pointer; font-weight: bold;}
a:hover {color: #666;}

a.opacity {
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
  -o-transition: opacity .25s ease-in-out;
  transition: opacity .25s ease-in-out;
  border: none;
}

a:hover.opacity {
  opacity: 0.6;
  -moz-opacity: 0.6;
  filter: alpha(opacity=60);
  border: none;
}

a.opacityinverse {
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
  -o-transition: opacity .25s ease-in-out;
  transition: opacity .25s ease-in-out; border:none;
  opacity: 0.5;
  -moz-opacity: 0.5;
  filter: alpha(opacity=50);}
  
a:hover.opacityinverse {
  opacity: 1;
  -moz-opacity: 1;
  border: none;
}


body {
   background-color: #000;
   font-family: 'Belleza', sans-serif;
   color: #3a3a3a;
   font-size: 15px;
   line-height: 23px;
   letter-spacing: 0;
   font-weight: 400;
   -webkit-text-size-adjust: 100%;
   overflow-x: hidden;
}

h1 {font-size: 25px; line-height: 30px; color: #000; margin-bottom: 20px;}
h2 {font-size: 22px; line-height: 30px; color: #000; margin-bottom: 20px;}

.clear{clear: both;}
.left {position: relative; float: left;}
.right {position: relative; float: right;}

p {margin-bottom: 15px;}

.cover {
    -moz-background-size: cover !important;
    -webkit-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
  background-position: center center !important;
}

.animazione-ruota {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease; 
    transition: all 1s ease;
}

.animazione-ruota:hover {
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

strong {color: black;    -webkit-font-smoothing: antialiased;}
ul {list-style: initial}
ul li {margin-left: 20px; margin-bottom: 5px;}
ul li:last-child {margin-bottom: 0}

ul.grid {list-style: none;}
ul.grid li {margin: 0;}

/* --------------------------------------------------------------------------
        CSS BASE
--------------------------------------------------------------------------- */

.wrapper {position: relative; height: auto; overflow: hidden; max-width: 1200px; width: 100%; margin: 0 auto;}
.bgstretcher {cursor: copy; cursor: -webkit-zoom-in; cursor: -moz-zoom-in;}

#logo-container {position: relative; height: auto; overflow: hidden;}
#logo {position: relative; height: auto; overflow: hidden; width: 230px; height: 217px; margin: 0 auto;}
#logo-left {position: fixed; height: auto; overflow: hidden; width: 190px; cursor: copy; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; z-index: 2; display: none;}

#logo-tablet {display: none;}

#subtitle {position: relative; height: auto; overflow: hidden; margin: 30px auto 30px auto; width: 80%;}
#subtitle h2, #subtitle h2 p {text-align: center;}

#wrapper-right {position: absolute; top: 0; right: 0; background: #FFF; z-index: 2; width: 640px;}
#wrapper-right.home {visibility: hidden;}
#main-container {position: relative; height: auto; overflow: hidden; padding: 80px 50px 30px 50px;}
#main-container, #main-container p, #main-container h1 {text-align: justify;}

#open-close { z-index: 9999; background: #000 url("/frontend/img/simbolo-apri.png") center center no-repeat; cursor: copy; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; width: 18px; height: 100%; position: fixed; top: 0; right: 0; display: none;}

#footer {font-size: 12px; text-align: center; padding: 40px 50px 50px 50px; font-size: 10px; font-family: Helvetica, Arial, sans-serif;}
#footer a {font-weight: 400;}

.cursor-zoom-in {cursor: copy; cursor: -webkit-zoom-in !important; cursor: -moz-zoom-in !important;}
.cursor-zoom-out {cursor: copy; cursor: -webkit-zoom-out !important; cursor: -moz-zoom-out !important;}

.back a {font-size: 10px; font-family: Helvetica, Arial, sans-serif; text-decoration: none; font-weight: 300;}


#mobilebgstretcher {display: none;}

#cookieChoiceInfo {bottom: 0; top: inherit !important; font-size: 10px; line-height: 15px; padding-top: 10px !important; font-family: Helvetica, Arial, sans-serif;}
#cookieChoiceInfo a#cookieChoiceDismiss {margin-left: 8px !important;}

.galleria-image-nav {top: auto; bottom: 30px; display: none !important}
.galleria-image-nav-right { left: 20px;}

/* --------------------------------------------------------------------------
        TOP
--------------------------------------------------------------------------- */

#top {position: relative; height: auto; overflow:hidden; background: white; width: 100%; text-align: center; z-index: 999;}
#top .lang {float: left; display: inline-block; margin: 26px 0 0 50px; color: #999; text-transform:uppercase; font-size: 10px; font-family: Helvetica, Arial, sans-serif;}
#top .lang a {color: #999;}
#top .lang a.active {color: #000;}
#top .lang a:hover {color: #666;}
#top .social {float: right; display: inline-block; margin: 25px 50px 0 0;}
#top .social a.facebook {margin-right: 3px;}


/* --------------------------------------------------------------------------
        MENU
--------------------------------------------------------------------------- */

#menu, #menu ul {position: relative; height: auto; overflow: hidden; display: inline-block;}
#menu ul li{position: relative; height: auto; overflow: hidden; float: left; margin: 0 12px 0 12px; height: 55px;}
#menu ul li.active {background: url("/frontend/img/menu-hover.png") center top no-repeat;}
#menu ul li a{position: relative; line-height: 72px; padding-bottom: 2px; border-bottom: 1px solid #FFF; font-weight: 600; font-size: 14px; letter-spacing: 1px; -webkit-font-smoothing: antialiased;}
#menu ul li:hover a {border-bottom: 1px solid #333;}


/* --------------------------------------------------------------------------
        MATRIMONI
--------------------------------------------------------------------------- */

.grid {
overflow: hidden;
  padding: 0.5em 0 0 0.5em;
  max-width: 76em;
  margin: 0 auto;
}
.grid li {
  padding: 0 0.5em 0.5em 0;
}
.grid li > div {
  background: #808080;
  height: 333px;
  text-align: center;
                    
}
.grid li a {
  color: #fff;
                    display: inline-block;
                    height: 100%;
                    width: 100%;
                    background: rgba(0, 0, 0, 0.2);
                    line-height: 333px;
  -moz-transition: .25s ease-in-out;
  -webkit-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;                    
                    
}
.grid li a:hover {background: rgba(0, 0, 0, 0.5);}
.grid li {
  width: 25%;
}
.grid li.wide {
  width: 50%;
}

@media all and (min-width: 27em) {
  .grid li {
    width: 50%;
    float: left;
  }
        
  .grid li > div {
            background: #808080;
            height: 210px;
            text-align: center;
  }        
  .grid li a  {line-height: 210px;}
}

@media all and (min-width: 40em) {
  .grid li {
    width: 33.3333333%;
  }
  .grid li.wide {
    width: 66.666666%;
  }
}   
    

/* --------------------------------------------------------------------------
        FORM
--------------------------------------------------------------------------- */

label {font-weight:600; color: #000;}
input {position: relative; height: auto; overflow: hidden; width: 400px; border: 1px solid #dadada; background: #FFF; font-size: 12px; color: #999999; padding: 10px; display: block; margin-bottom: 15px; border-radius: 4px; font-family: Helvetica, Arial, sans-serif;}
textarea {position: relative; height: auto; overflow: hidden; display: block; width: 400px; font-size: 13px; border: 1px solid #dadada; background: #FFF; padding: 10px; height: 170px; margin-bottom: 15px; color: #999999; border-radius: 4px; font-family: Helvetica, Arial, sans-serif;}


input.submit {position: relative; margin-top: 20px; display: inline-block; border-radius: 4px; background: #000; color: #FFF; border: 0; cursor: pointer; font-weight: bold; text-transform: uppercase; font-size: 10px; padding: 10px 20px; width: 100px; text-align: center;  -webkit-appearance: none; letter-spacing: 4px; font-weight:400; font-family: Helvetica, Arial, sans-serif;}
input.submit:hover {background: #333;}
input:focus, select:focus, textarea:focus, button:focus {outline: none;}

  #contatti-left {float: none; width: auto;}
  #form {float: none; width: auto;}
  input, textarea {width: 100%; display: block;}

a.bottone {position: relative; margin-top: 20px; display: inline-block; border-radius: 4px; background: #000; color: #FFF; border: 0; cursor: pointer; font-weight: bold; text-transform: uppercase; font-size: 10px; padding: 6px 20px; text-align: center;  -webkit-appearance: none; letter-spacing: 4px; font-weight:400; font-family: Helvetica, Arial, sans-serif;}
a.bottone:hover {background: #333;}



/* --------------------------------------------------------------------------
        FADE IN / FADE OUT
--------------------------------------------------------------------------- */

/*.js #logo, .js .hideme, .js #menu, .js #main-content.home h1 {opacity: 0;}*/



/* --------------------------------------------------------------------------
        Smartphone
--------------------------------------------------------------------------- */

@media screen and (max-width: 1580px) {
  #footer .right {float: none; text-align: center;}
  #footer .left {float: none; text-align: center;}
}

@media screen and (max-width: 1465px) {
  #menu ul li {margin: 0 8px 0 8px;}
}


@media screen and (max-width: 1170px) {
  #menu ul li {margin: 0 5px 0 5px;}
}

@media screen and (max-width: 1135px) {
  #wrapper-right{min-width: 560px;}
}


@media screen and (max-width: 859px) {
  
  .mobile-hide {display: none;}
  #wrapper-right.home {visibility: visible;}
  
}
@media screen and (max-width: 1024px) {

  #wrapper-right{min-width: inherit;}
  
  #maximage {position: fixed; display: block; height: auto; overflow:hidden; width: 100%; top: 0; }
  #maximage, #maximage .mc-image {height: 500px; !important}
  #wrapper-right {width: 100% !important;  float: none; min-height: auto; position: relative; margin-top: 500px; top: auto; left: auto; right: auto;}
  #logo-left {display: none !important;}
  #menu {float: none}
  #menu ul li {margin: 0px 15px 0 15px;}
  #main-container {padding: 60px 20px 30px 20px}
  #main-container p, #main-container h2 {text-align:justify}
  #subtitle {margin-bottom: 0; width: 100%;}

  
    #logo-tablet {display: block; margin: 0 auto; position: absolute; top: 147px; width: 190px;}
    #logo-tablet img {width: 190px;}

    #supersized-loader {left:50% !important; }

}


/* iPads (portrait and landscape) ----------- */
   @media only screen 
   and (min-device-width : 768px) 
   and (max-device-width : 1024px) {
       
  #main-container {padding: 60px 50px 30px 50px}

   
}

@media screen and (max-width: 768px) {

 /*#menu ul li:first-child {display: none;}*/
    #menu ul li {margin: 0px 5px;} #menu ul li a {letter-spacing: 0px;}
    #maximage, #maximage .mc-image {height: 300px !important;}
    #wrapper-right {margin-top: 300px;}
    #top .lang {display: none;}
    #top .social {display: none;}
    .grid li {width: 100% !important;}
    #logo-tablet  {display: none}
    #menu ul li a {font-size: 13px;}
}


#maximage {position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 0;}