.right{float: right}
.left{float: left}
a,a:hover,a:visited,a:link{text-decoration: none;}
.linedivisor-x{
position:relative;
display:block;
width:68%;
height:1px;
margin:25px auto;
}
.contato>li{
position: relative;
display: inline-block;
border: 1px solid #fff;
border-radius:15px;
padding: 2px 20px;
text-align: center;
font-family: 'helveticaneuelight';
font-weight: bolder;
font-size: 20px;
color: #282828;
margin: 2px 0px;
}
.contato>li>a,.contato>li>span{color:#fff;}
.contato>li>a>span{font-size: 0.7em;}
body{background:#e41b47;overflow-x:hidden;}
#logo{
position: relative;
height: 225px;
box-shadow:inset 0px 0px 55px 19px rgba(0, 0, 0, 0.11);
}
#logo h1{position: absolute;color: #e41b47;color: transparent;cursor:pointer;}
#logo img{
position: absolute;
width:280px;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
}
#logo>.contato{position: absolute;right: 2%;bottom: 5%;}
#slogan{
position: relative;	
height: 90px;
background-color:#f0f0f0;
box-shadow:inset 0px 0px 55px 19px rgba(0, 0, 0, 0.11);
font-family:"Signika", sans-serif;
font-size:23px;
text-align: center;
text-transform: uppercase;
color: #e41b47;
}
#slogan>h2{font-weight:600;}
#slogan small{
display: block;
font-family: 'helveticaneuelight';
font-size: 18px;
font-weight: 100;
text-transform: none;
margin: 0px auto 0px;
top: 0px;
line-height: 10px;
}
#menu{background-color:#f1d1d1;}
#menu h3{
margin-top: 40px;
font-family:"Signika";
font-size:40px;
font-weight:600;
text-align:center;
text-transform:uppercase;
color:#000000;
}
#menu .wrap-opt{
position: relative;
width:350px;
margin:30px auto;	
}
#menu .wrap-opt>.title-opt{
position: relative;
width: 98%;
height: 70px;
margin: 0px auto;
background-color: #e41b47;
font-family: 'venera700';
font-size: 20.33px;
text-align: center;
text-transform: uppercase;
color: #ffffff;
line-height: 3.5em;
z-index: 5;
}
#menu .wrap-opt>.content-opt{
position: relative;
width: 98%;
height: 350px;
margin:10px auto 0px;
background-color: #ffffff;
box-shadow:inset 0px 0px 65px 35px rgba(0, 0, 0, 0.10);
    z-index: 5;
}
#menu .wrap-opt>.content-opt .img-opt{top:5%;position: relative;width:60%;cursor:pointer;transition:width 0.2s;}
#menu .wrap-opt>.content-opt .img-opt:hover{animation:pulse 0.6s 1;}
#menu .wrap-opt>.content-opt>.linedivisor-x{background-color:#e41b47;margin:-5px auto 25px;}
#menu .wrap-opt>.content-opt>.desc-opt{	
font-family: 'helveticaneuelight';
font-weight: bold;
font-size: 16px;
text-align: center;
text-transform: uppercase;
}
#titleproduct{
position: relative;	
height: 90px;
background-color:#f0f0f0;
box-shadow:inset 0px 0px 55px 19px rgba(0, 0, 0, 0.11);
font-family:"Signika", sans-serif;
font-weight: bold;
font-size:30px;
text-align: center;
text-transform: uppercase;
color: #e41b47;
line-height: 3.5em;
}
.product{
position: relative;
display: block;
width: 20%;
height: auto;
background-color: #fff;
color: #7C7C7C;
float: left;
cursor:pointer;
z-index: 1
box-shadow:0px 0px 0px 0px #555;
transition:all 500ms;
}
.product:hover{
box-shadow:-5px 5px 30px 3px #555;
z-index: 2;
transition:all 200ms ease;
}
.product:nth-child(even){background-color:#7c7c7c;color:#fff;}
.product>.title{
font-family:'helveticaneuelight';
font-size:14px;
font-weight: bold;
text-transform:uppercase;
letter-spacing: 1px;
margin:15px auto 20px;
}
#footer{
position:relative;
background: url('img/bg_shank.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;
}

#footer p{
font-family: 'venera700';
font-weight: normal;
font-size: 25px;
color: #fff;
margin-top: 20px;
}
#footer .contato{text-align: center;margin-top: 25px;margin-bottom: 40px;}
#footer>span{
position: relative;
display: block;
height: 65px;
background: #282828;
font-family: 'Ubuntu';
font-size: 11px;
color: #fff;
text-align: center;
line-height: 6.5em;
}
@keyframes pulse{
0%{transform:scale(1);}
50%{transform:scale(1.05);}
100%{transform:scale(1);}
}


/*SHOW OPT*/
.opt>.wrap-opt{opacity:1;transition:opacity 0.5s ease,left 0.5s ease;left:0px;visibility: visible;}
.showOpt>.opt:nth-of-type(3)>.wrap-opt{opacity: 0;visibility: hidden;transition:visibility 0.5s;}
.showOpt>.opt:nth-of-type(2)>.wrap-opt{left:-15%;}
#franchiselist{
position:absolute;
width: 100%;
height: 100%;
background-color:#fff;
top: 0px;
left: 0px;
z-index: 1;
border-radius: 5px;
opacity: 0;
box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.10);
transition:all 0.7s ease;
}
.showOpt #franchiselist{
opacity: 1;
left:120%;
box-shadow: inset 0px 0px 65px 35px rgba(0, 0, 0, 0.10);
}
#closedarea{
position: relative;
width: 100%;
height: 10%;
background-color:#E41B47;
font-family: 'venera700';
font-size: 20.33px;
text-align: center;
text-transform: uppercase;
color: #ffffff;
line-height: 2.5em;
cursor: pointer;
-webkit-user-select: none;  /* Chrome all / Safari all */
-moz-user-select: none;     /* Firefox all */
-ms-user-select: none;      /* IE 10+ */
user-select: none;          /* Likely future */
}
#listopt{
position: relative;
width: 100%;
height: 90%;
overflow-y:scroll;
}
#listopt>a{
position: relative;
display: block;
width:100%;
height:70px;
border-bottom: 1px solid #ddd;
box-shadow: #ddd 0px 2px 6px -1px;
transition:all 0.5s ease;
}
#listopt>a>.img,#listopt>a>.link{
position: relative;
height: 100%;
float:left;
}
#listopt>a>.img{width: 20%;}
#listopt>a>.link{
width: 80%;
color:#E31B47;
}
#listopt>a>.img>img{
position:absolute;
width: 90%;
left:0px;right:0px;
top:0px;bottom:0px;
margin:auto;
}
#listopt>a>.link>span{
position: relative;
display: inline-block;
width: 100%;
font-family: "Ubuntu";
font-weight: 600;
font-size: 2em;
text-align: center;
line-height: 2.5em;
}
#listopt>a:hover{
box-shadow: #ddd 0px 2px 6px 3px;
}

/*SHOW ALERT*/
#hiddenalert{
position:absolute;
display: block;
width:100%;
height:0%;
background-color:#ffffff;
box-shadow: inset 0px 0px 65px 35px rgba(0, 0, 0, 0.10);
opacity: 0;
z-index: 5;
left:0px;top:0px;
cursor:pointer;
animation: hidealert 1s 1;
}
#hiddenalert>span{
position: absolute;
display: inline-block;
margin: auto;
font-family: 'helveticaneuelight';
font-weight: bold;
font-size: 20px;
text-align: center;
text-transform: uppercase;
top: 0px;
bottom: 0px;
left: 0px;
width: 100%;
right: 0px;
height: 60px;
}
#hiddenalert.showAlert{
opacity: 1;
height: 100%;
animation: showalert 1s 1;
}
@keyframes showalert{
0%{opacity: 0;height: 0%;}
10%{height: 100%;opacity: 0;}
100%{opacity: 1;}
}
@keyframes hidealert{
0%{opacity: 1;height: 100%;}
90%{opacity: 0;height: 100%;}
100%{height: 0%;}
}