body { margin: 0; padding: 0; height: 100%; }

*{padding: 0;margin: 0;box-sizing: border-box;}

section{padding: 50px 0;}

html {

  scroll-behavior: smooth;

}



/* ------------------------------------------------------------------------- *

  !* Base

/* ------------------------------------------------------------------------- */



/* Typography */

body{line-height: 22px; font-family: 'Inter', sans-serif;}

a{color: #DE2169;}

a:hover{color: #F3B33A;}

a:hover{text-decoration: none;}

.border{border: 1px solid red!important}



.row.row_special {margin-left: 0; margin-right: 0;}

.container-fluid{padding: 0;}

 li{list-style: none;}

/*------------------------------------------------------------------------------

  !* Navbar

-----------------------------------------------------------------------------*/



#mainNav{box-shadow: 0px 0px 35px rgba(0,0,0,0.5);}

#logo{width: 70px;}



/*------------------------------------------------------------------------------

  !* Hero

-----------------------------------------------------------------------------*/

.hero{background: url("img/hero2.jpg"); background-position: center; background-size: cover; height: 100vh; position: relative;}

.hero .container{display: flex; justify-content: center;}

.hero h1{font-weight: bold; color: #ffffff; position: absolute; top:45%; font-size: 3.8em;}

.hero h3{font-weight: bold; color: #F3B33A; position: absolute; top:35%; font-size: 2em;}

.hero a{

  position: absolute; 

  top:60%; 

  padding: 15px 40px; 

  background-color: #DE2169; 

  border-radius:20px; 

  text-transform: uppercase; 

  color: #ffffff; 

  font-weight: bold; 

  letter-spacing: 5px; 

  box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.79);

  transition: all 0.8s;

}



.hero a:hover{background-color: #F3B33A; color: #343A40;}





/*------------------------------------------------------------------------------

  !* Block

-----------------------------------------------------------------------------*/

/*about*/

#about h2{font-weight: bold;}

#about p{ font-size: 22px; line-height: 30px;}

#about img{width: 400px;}



/*services*/

#services{background-color: #343A40;}

#services h2{color: #F3B33A; font-weight: bold; margin: auto; display: flex; justify-content: center;}

#services a{background: #fff; padding: 15px 30px; margin: auto; margin-top: 50px; margin-bottom: 20px; border-radius: 20px; color: #333333; font-weight: bold; letter-spacing: 3px; transition: 1s;}

#services a:hover{background-color: #F3B33A; color: #fff;}



.container__card{position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding-top: 80px; width: 80%; margin: auto;}

.container__card img{width: 240px; height: 240px;}

  svg#_1{margin-top: 70px;}

  svg#_2{margin-top: 25px;}

  svg#_3{height: 238px; width: 240px;}

  svg#_4{margin-top: 45px;}

.container__card .card{position: relative; width: 240px; height: 240px; margin-bottom: 50px;}

.container__card .card .face{position: absolute; top: 0; left: 0;width: 100%;height: 100%; transition: 0.5s; width: 240px;}

.container__card .card .face.face1{background: #fff; z-index: 1; transform-origin: bottom; width: 240px}

  .container__card .card:hover .face.face1{transform: translateY(-100%) rotateX(90deg); background: #ff0057; width: 240px}

.container__card .card .face.face2{display: flex; justify-content: center; align-items: center; padding: 20px; transform-origin: top; transform: translateY(100%) rotateX(90deg); width: 240px}

  .container__card .card:hover .face.face2{transform: translateY(0) rotateX(0deg);}

.container__card .content{-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}





/*brand*/

#brand{padding-top: 0;}

/*#brand .container-fluid{background-image: url("img/occhialisulibro.jpg"); background-attachment: fixed; background-size: cover; background-position: center;}*/



#brand h2{font-weight: bold; text-align: center; padding-top: 30px; padding-bottom: 50px; color:#F3B33A;}

#brand img{margin-bottom: 20px; width: 100%; max-height: 100px;}





/*------------------------------------------------------------------------------

  !* Contact

-----------------------------------------------------------------------------*/



/*contatti rapidi*/

#orari img{width: 46px; margin-bottom: 15px;}



/*Form*/

.btn{border: 1px solid #ced4da;}









/*------------------------------------------------------------------------------

  !* Footer

-----------------------------------------------------------------------------*/





/*------------------------------------------------------------------------------

  * Responsive

-----------------------------------------------------------------------------*/



/* ----------------------------- */

/* ! -- Desktop */

/* ----------------------------- */

@media (min-width: 1200px) {



  #logo img{padding-left: 50px;}



  .hero h1{font-size: 4.4em;}



  .container{max-width: 1300px;}

  #contact .container{max-width: 1100px;}

  #about img{margin-top: 100px;}

}



/* ----------------------------- */

/* ! -- Small Desktop */

/* ----------------------------- */



@media (max-width: 1250px) {



  #about img{padding-top: 50px;}



}



/* ----------------------------- */

/* ! -- Extra Small Desktop */

/* ----------------------------- */



@media (max-width: 1024px) {

  #about img {width: 300px;}

}





/* ----------------------------- */

/* ! -- Tablet */

/* ----------------------------- */



@media (max-width: 998px) {

  section{padding: 25px 0;}



  #about img{width: 220px;}

  #about h2{font-size: 2em;}





}



/* ----------------------------- */

/* ! -- Smarthphone */

/* ----------------------------- */



@media (max-width: 568px) {

  .hero h1{top:45%; font-size: 2.4em;}

  .hero h3{top:35%; font-size: 1.5em;}

  .hero span{padding: 10px 30px; font-size: 13px;}



  .container__card{justify-content: center;}



  #about p{font-size: 20px;}

  #about img{padding: 40px 5px; width: 250px;}

}