@import url('https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Ubuntu:300,300i,400,400i,500,500i,700,700i');

@font-face {
  font-family: 'scentofsicily';
  src: url('fonts/scentofsicily.eot'); /* IE9 Compat Modes */
  src: url('fonts/scentofsicily.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/scentofsicily.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/scentofsicily.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/scentofsicily.svg#svgFontName') format('svg'); /* Legacy iOS */
}

BODY {font-family: 'Raleway', sans-serif; font-weight:300;font-size:90%; color: #333; margin: 0;padding:0;background:#fff; text-align:justify; line-height:1.23; -webkit-text-size-adjust: 100%;}
a:link, a:visited, a:before, a:after, a *, a *:before, a *:after, input {text-decoration:none;-moz-transition: all 0.2s linear;-webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;}
a:link, a:visited {color:#018DC4}
a:hover {text-decoration:none;color:#E9610D}

main > header > h1, main > article > header > h1 {font-size:28px; text-transform:uppercase; text-align:center}

/* form e img */
header, main, footer, figure, blockquote {display:block;margin:0}
body > header {position:relative;min-width:320px;text-align:center}
main {padding:20px 0 0 0;max-width:1200px;margin:0 auto}
*, *:after, *:before {-webkit-box-sizing: border-box; box-sizing: border-box;-webkit-font-smoothing: antialiased;-webkit-appearance:none;}
p {margin:10px 0; color:#666}
.imgdx {float:right;margin:5px 0 0 5px}
.imgsx {float:left;margin:8px 5px 0 0}
h1, h2, h3, h4 {margin:0;font-weight:300;color:#018DC4}
h1{text-transform: uppercase;text-align: center;padding: 20px 0; font-size:20px}
.content h1 {font-size:22px;margin:0 auto 15px auto;text-transform:uppercase;text-align:center}
b, strong {font-weight: 600}
ul {margin:0;padding:0;list-style:none}
img {border:0}
form {margin:0}
*:focus {outline:none}
.clearfix:after {content: ""; display: table; clear: both;*zoom: 1}
.center {text-align:center; clear:both}
.ico-admin {display:block; background:#eee; text-align:center; height:30px; line-height:30px; font-size:15px; font-weight:400}
.ErrorMessage {display:block;border-top:2px solid #e91e1e;text-align:right;font-size:12px;font-weight:500;padding:4px 0 0 0;margin-top: -1px;position: absolute;width: 100%;left: 0; bottom: -20px;}
.Privacy.ValidaPrivacy a{color:#e91e1e}
.Privacy.ValidaPrivacy label:after{content:'*';color:#e91e1e;font-size: 30px;}

input[type="submit"] {border:0;height:34px;padding:0 10px;font-size:16px;text-transform:uppercase;cursor:pointer;background:#F2C100;color:#fff;}
input[type="submit"]:disabled, input[type="submit"]:disabled:hover, input[type="submit"]:disabled:hover {background:#ccc;color:#fff;cursor:text}
input[type="submit"]:hover {background:#E9610D;}
input[type="submit"]:active {background:#E9610D; color:#000}

input[type="text"], input[type="password"],  select,  textarea {width: 100%;max-width: 100%;height: 40px;padding: 0 5px;font-family: 'Raleway', sans-serif;font-size:15px;box-shadow: 0 0 0 1px #d5d5d5;transition: all 0.2s ease-out;border:none;}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input:-webkit-autofill:focus {box-shadow: 0 0 0 2px #828C92;outline:none;-moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear;}

.login-block > div, .password-recovery-page > div, .password-recovery-page .body > div{position:relative;margin: 0 0 20px 0;}
.login-block > div label, .customer-pass-recovery > div .label, .password-recovery-page > div label {margin:10px 0 5px 0;font-weight: 500;display: inline-block;}
#hlForgotPassword{position: absolute;right: 0;bottom: 0;border: 1px solid #018DC4;color: #018DC4;padding: 6px;margin: 4px;line-height: 18px;}
#hlForgotPassword:hover{background:#018DC4; color:#fff; cursor:pointer}
#hlForgotPassword:before{content: 'D';display:block;float:left;font-family: scentofsicily;font-size: 18px;margin-right: 5px;}
#hlForgotPassword:hover:before{background: url(/App_Themes/Os2theme/images/padlock-hover.svg) no-repeat; background-size:100%}

.DateOrder:before{content: ''; float: left; margin-right: 5px; line-height: 15px; background: url(/App_Themes/Os2theme/images/calendar.svg) no-repeat; width: 35px; height: 35px; background-size: 100%;}
/* style checkbox radio*/
.inputs label{position: relative;}
input[type="radio"] {border-radius:10px}
input[type="radio"]:after{width: 8px!important;height: 8px; margin-left: -4px!important; background-color: #fff; border-radius: 10px;}
input[type="checkbox"], input[type="radio"] {width: 18px;height: 18px; box-shadow: 0 0 0 0 #4b4d51 inset; transition: all 0.2s ease-in-out; position: relative; cursor: pointer;vertical-align: -4px;outline: 0;border: 1px solid #d9d9d9;box-sizing: border-box;padding: 0;margin-right: 10px;}
input[type="checkbox"]:after, input[type="radio"]:after {width: 10px;height: 8px;margin-left: -5px;margin-top: -4px;background-image: url(/App_Themes/Os2theme/images/checkbox-tick.svg),none;}
input[type="checkbox"]:after, input[type="radio"]:after {content: "";display: block;position: absolute; top: 50%; left: 50%; -webkit-transform: scale(0.2);transform: scale(0.2);transition: all 0.2s ease-in-out 0.1s; opacity: 0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}
input[type="checkbox"]:checked, input[type="radio"]:checked { box-shadow: 0 0 0 10px #4b4d51 inset; border:none }
input[type="checkbox"]:checked:after, input[type="radio"]:checked:after {-webkit-transform: scale(1.3);transform: scale(1.3);opacity: 1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);}
span.Privacy > input[type="checkbox"] {background-color:#fff;}
::-webkit-input-placeholder {color: #ccc; font-style: italic;}
:-moz-placeholder { /* Firefox 18- */ color: #ccc;opacity: 1;  font-style: italic;}
::-moz-placeholder {  /* Firefox 19+ */  color: #ccc;opacity: 1;  font-style: italic;}
:-ms-input-placeholder { color: #ccc;  font-style: italic;}

input:-webkit-autofill, 
textarea:-webkit-autofill,
select:-webkit-autofill
 {
  border: 1px solid #d5d5d5;
  -webkit-text-fill-color: #666;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
  transition: background-color 5000s ease-in-out 0s;
}

*{	box-sizing:border-box;	-moz-box-sizing:border-box;}
  
/* structure */   
.wrapper{width: 92%; margin: 0 auto;}
#logo{ text-align:center;}
header{ padding:15px 0; position:relative}
header ul{ margin: 0 auto; text-align: right;display: inline-block;}
header ul li{float:left;line-height: 30px;}
header ul.languagelist {position:absolute; top:20px; right:0}
header ul.languagelist li a{margin:0}
header ul.languagelist li:first-child a:after {content:'/'; margin: 0 3px}
.header-links {text-align: left;}
.header-links li a:before {font-family:scentofsicily;font-size: 30px;float:left;}
.header-links li a.account::before {content:'t';}
.header-links li a.ico-login::before {content:'F';}
.header-links li a.ico-logout::before {content:'G';}

header ul li a {margin: 0 20px 0 5px;font-size:16px;}	
#page-header{background:#f3f3f3;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;padding:20px 0;}
#content {margin: 10px 0;}
aside {	margin:40px 0;}

/*** Account ***/
.resetpassword, .backtoOrders{font-size: 14px;text-align: center;display: block;line-height: 30px;color: #fff !important;font-weight: 600;background: #018DC4;padding: 5px 10px;}
.resetpassword {float:right;background: #f2c102;}
.backtoOrders {float:left;margin: 10px 0;}
.resetpassword:hover {background: #E9610D;}
.backtoOrders:hover{color:#f2c102 !important; cursor:pointer}
.resetpassword:before, .backtoOrders:before {font-family: scentofsicily;font-size: 20px;float: left;margin: 0 5px 0 0;}
.resetpassword:before {content: 'D';font-weight: 400;}
.backtoOrders:before {content: 'b';-ms-transform: rotate(7deg); /* IE 9 */-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */transform: rotate(180deg);font-size: 15px;}
.account-page .button {text-align:center}
.customer-pass-recovery .button {text-align:center}

.order-completed {text-align:center}
.ajax__tab_header{margin: 20px 0;text-align: center;border-bottom: 2px solid #bbb;height: 39px;}
.ajax__tab_header .ajax__tab_tab {background-color:#eee; padding:10px; font-weight:500; color:#038FC4}
.ajax__tab_header .ajax__tab_tab:hover {background-color:#ddd; cursor:pointer}
.ajax__tab_active .ajax__tab_tab {color: #666;}
/* RESPONSIVE IMAGES */
img{ max-width:100%; height:auto;}

/*SPACE GRID ELEMENTS VERTICALLY, SINCE THEY ARE ONE UNDER ANOTHER SO FAR*/
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {margin-bottom:40px;position: relative;   min-height: 1px;  padding-left: 15px;  padding-right: 15px;}
.grid_1  > div,.grid_2  > div, .grid_3  > div, .grid_4  > div, .grid_5  > div, .grid_6  > div, .grid_7  > div, .grid_8  > div, .grid_9  > div, .grid_10  > div,.grid_11  > div,.grid_12  > div {position:relative; margin:0 0 20px 0}

/*FOOTER*/
footer{clear:both;padding:20px 0;background: #EEEEEE;color: #666; text-align:center;}
footer ul{margin:0;padding:0;}
footer ul.contacts { display: inline-block;}
ul.contacts {display:inline-block}
ul.contacts li a {text-align: left;display:block; color: #038FC4; font-size:15px; line-height:24px;}
ul.contacts li a:hover {color: #E9610D}
ul.contacts li a:before {font-family:scentofsicily; color: #818C92; width:24px; float:left;height:24px;line-height:22px; margin-right:5px; text-align:center; text-transform: none}
ul.contacts li.contact a:before {content:'g';font-size:18px;}
ul.contacts li.tel a:before {content:'k';font-size:20px;}
ul.contacts li.skype a:before {content:'s';font-size:20px;}
ul.contacts li.whatsapp a:before {content:'B';font-size:20px;}
ul#topcontact li.contact a {text-transform: uppercase;}
ul.contacts li.tel a, ul.contacts li.whatsapp {font-family:Ubuntu, sans-serif; font-size:15px}
ul.contacts li.whatsapp a:before {color: #007F4F}
footer h1, footer h2, footer h3, footer h4{ color:#CCC; margin-bottom:10px;}
#copyright .note {font-size: 10px; margin-top: 10px;}
#flogos img {display:inline-block;}

/*** Ordine ***/
.order-details, .customer-pass-recovery {clear:both}
.CustomerInfo{background: #f2f2f2;display: inline-block;padding: 20px;text-align: left;clear: both;}
.orderdetailsprintbutton {float:right; line-height:30px; margin:0 0 0 20px}
.orderdetailsprintbutton::before{content: 'H';float:left;margin-right:5px;font-size: 30px;font-family: scentofsicily;}
.order-list, .order-details .info, .payment-info {margin:0 auto;max-width:800px;}
.order-item {border-bottom:1px dashed #ccc; margin-bottom:10px;}
.order-item .InfoPrenotazione{font-style:italic; color:#018DC4;margin: 10px 0;}
.payment-info .select-button{ /*float: right;*/ text-align:right; margin: 20px 0;}
.info .OrderNumber span{text-align: right;font-size: 20px; display:inherit}
.info .OrderNumber span + span {font-size: 16px;}
.info .order-details-box {background: #ddd;line-height: 20px;color: #666; padding:20px 10px;}
.order-details-box .ErrorMessage{bottom:-24px}
.password-recovery-page .body .ErrorMessage{bottom:-5px}
.order-overview {position:relative;margin-bottom: 20px;}
.PayOrderButton{display: block;position: initial;background: #ea630f;right: 0;bottom: 0;padding: 5px 10px;color: #fff !important;font-weight: 600;line-height: 30px;font-size: 16px;}
.PayOrderButton:hover{background-color:#F2C100}
.PayOrderButton:before{content:'';float:left;margin-right: 10px;background:url(/App_Themes/Os2theme/images/credit-card.svg) no-repeat;width: 30px;height: 30px;background-size: 100%;}
.OrderDescription {margin-bottom:10px;font-style: italic;color: #018DC4;}

/* Contain floats*/ 
.clearfix:before,
.clearfix:after,
.row:before,
.row:after { content: " "; display: table;}
.clearfix:after,
.container:after,
.row:after{ clear: both;}

/*
LARGER MOBILE DEVICES
*/
@media only screen and (min-width: 320px) {
    #logo{text-align: center;margin-bottom: 20px;}
    #logo a.logo {background: url('images/scent-of-sicily.svg') no-repeat center center;display: inline-block;width: 180px;height: 100px;text-decoration: none;background-size: 100%;}
} 
@media screen and (max-width: 320px) {
    #flogos img {display:block;margin:0 0 10px 0; height:20px !important}
}
@media screen and (max-width: 479px) {
    footer ul.contacts {float:left}
    #flogos {float:right;margin-top: 20px;}
    #flogos img {display:block;margin:0 0 10px 0; height:30px}
    .OrderNumber{margin-bottom:20px}
}
@media screen and (min-width: 480px) {
   #footer {font-size:14px}    
   .info .order-details-box {padding: 40px;}

}
@media screen and (min-width: 640px) and (max-width: 1023px) {
    footer ul.contacts li {float: left;margin:0 10px}
    #flogos img {margin:0 10px;vertical-align: middle}
}
@media screen and (max-width: 839px) {
  footer {position:relative}
}

@media only screen and (min-width: 730px) {
        .PayOrderButton{position: absolute;}        
        .OrderDescription {display: inline-block;margin:0;width: 75%;}
    h1 {font-size: 28px;}
}
/*
TABLET & SMALLER LAPTOPS
*/
@media only screen and (min-width: 920px) {
    .wrapper{max-width: 1200px;margin: 0.72em auto;}
    header{	padding:0;}    
    header ul li {display:inline-block;}    
    #content {  float:left;	width:65%;}
    #content.wide-content{	float:none;	width:100%;}
    aside { float:right;width:30%;}

    /*GRID*/
     .row{ margin-left: -15px; margin-right: -15px;}
    .grid_1 { width: 8.33333333%; }
    .grid_2 { width: 16.66666667%; }
    .grid_3 { width: 25%; }
    .grid_4 { width: 33.33333333%; }
    .grid_5 { width: 41.66666667%; }
    .grid_6 { width: 50%; }
    .grid_7 { width: 58.33333333%; }
    .grid_8 { width: 66.66666667%; }
    .grid_9 { width: 75%; }
    .grid_10 { width: 83.33333333%; }
    .grid_11 { width: 91.66666667%; }
    .grid_12 { width: 100%; }

    .grid_1,
    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10,
    .grid_11,
    .grid_12 { float: left; display: block;}       
    .rightfloat{float:right;}

}

/*
DESKTOP
*/
@media only screen and (min-width: 1024px) {    
    footer {text-align:left}
    #footer {position:relative}

    #copyright, ul.fmenu, ul.contacts {float:left}
    #copyright {width:40%}
    ul.fmenu {margin:10px 0 0 0;width: 22%}
    ul.fmenu li {display:block;text-align:left}
    ul.fmenu li a {margin-bottom:2px;line-height:20px}
    footer ul.contacts {width:22%}      
    footer ul.contacts li a {font-size:16px !important;line-height:34px}
    footer ul.contacts li a:before {line-height:30px}
    footer ul.contacts li.contact a:before {font-size: 24px;margin-right:20px}
    footer ul.contacts li.tel a:before {font-size: 26px;margin-right:10px}
    footer ul.contacts li.whatsapp a:before {font-size: 24px;margin-right:10px}
    footer ul.contacts li.skype a:before {font-size: 25px;margin-right:20px}
    footer ul{margin:0 0 0 8%;}
    #flogos {float:right; text-align:right; width:16%}
    #flogos img {margin-top:10px}
}
@media screen and (max-width: 1023px) {
    footer ul.contacts{margin:20px 0;}
}
/*
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*/
@media only screen and (min-width: 1240px) {

} 

/*
RETINA (2x RESOLUTION DEVICES)
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5) {
} 

@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) { 
  
}

/*
PRINT STYLESHEET
*/
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

/*
    CSS for Stripe payment form.
*/

.col-form-label {
    font-weight: bold;
}

.cardError {
    margin-top: .25rem;
    color: #dc3545;
}