/* TABLET LANDSCAPE / DESKTOP */
@media only screen and (min-width: 1024px) and (max-width: 1320px) {
    .quatation section h2, .quatation section ul.section-groups {
            width: 80%;
            max-width:initial;
    }
    .selectbox-field {
        display:block;
        padding-right: 1vw;
    }
    .checkbox-field li {
        display:block;
    }
    .site-content {
        background-image:none;
    }
    .field .wrapper {
        width:145px;
    }

}   

/* TABLET LANDSCAPE / DESKTOP */
@media only screen and (max-width: 1110px) {
    .radio-field li {
        display:block;
    }
        .radio-field li:nth-child(1) {
            text-align:left;
        }
        .radio-field li:nth-child(2) {
            text-align:left;
        }
        .radio-field li:nth-child(3) {
            text-align:left
        }
    .quatation section h2, .quatation section ul.section-groups {
            width: 80%;
            max-width:initial;
        }
    .selectbox-field {
        padding-right:0;
    }
    .field .wrapper {
        width:145px;
    }
   .site-content {
        background-image:none;
    }
    .entry-content
    {
        margin-left:0;
    }
}

/* TABLETS PORTRAIT */
@media only screen and (max-width:890px) {
    #value-counter {
        display:none;
    }
    .quatation section h2, .quatation section ul.section-groups {
        width: 85%;
        padding-right:0;
    }
    .quatation button {
        max-width: 200px;
        font-size: 20px;
    }
    .field .wrapper {
        display:block;
    }
    .selectbox-field {
        display:block;
    }
    .quatation .group-title {
        font-size:24px;    
    }
    .quatation .field {
        margin-bottom:20px;
    }
    .range-field .wrapper {
        margin-bottom:15px;
    }
    .group{
        margin-bottom:60px;
    }
}   

/* TABLETS PORTRAIT */
@media only screen and (max-width: 768px) {
    .radio-field li {
        width:100%;
    }
    .quatation .entry-content h2 {
        font-size: 27px;
        text-align: center;
    }
    #primary section#left-content {
        width:100%;
    }
    #primary section#left-content {
        padding-right:0;
    }
    #quatation-form-2 .buttons {
        width:100% !important;
    }

    #billing-footer li {
        width:50%;
        border-right:none;
        margin-top:10px;
    }
    #primary.quatation-2 {
        margin-bottom:0px;
    }
    #watch .frame-face{
        background-size: 30%;
        margin-top:0;
        margin-bottom:0;
    }
    #watch .digits li:nth-child(1) { transform:translate(3em, -5em); }
    #watch .digits li:nth-child(2) {transform:translate(5.3em, -3em);}
    #watch .digits li:nth-child(3) { transform:translate(4.6em, 0) }
    #watch .digits li:nth-child(4) { transform:translate(5.3em, 3em) }
    #watch .digits li:nth-child(5) { transform:translate(3em, 5em); }
    #watch .digits li:nth-child(6) { transform:translate(0, 4.6em) }
    #watch .digits li:nth-child(7) { transform:translate(-3em, 5em) }
    #watch .digits li:nth-child(8) { transform:translate(-5.3em, 3em) }
    #watch .digits li:nth-child(9) { transform:translate(-4.6em, 0) }
    #watch .digits li:nth-child(10) { transform:translate(-5.2em, -3em) }
    #watch .digits li:nth-child(11) { transform:translate(-3em, -5em); }
    #watch .digits li:nth-child(12) { transform:translate(0, -4.6em) }

    #watch .minute-marks li:first-child     {transform:rotate(0deg)     translateY(-9.6em)}
    #watch .minute-marks li:nth-child(2)    {transform:rotate(30deg)    translateY(-9.6em)}
    #watch .minute-marks li:nth-child(3)    {transform:rotate(60deg)    translateY(-9.6em)}
    #watch .minute-marks li:nth-child(4)    {transform:rotate(90deg)    translateY(-9.6em)}
    #watch .minute-marks li:nth-child(5)    {transform:rotate(120deg)   translateY(-9.6em)}
    #watch .minute-marks li:nth-child(6)    {transform:rotate(150deg)   translateY(-9.6em)}
    #watch .minute-marks li:nth-child(7)    {transform:rotate(180deg)   translateY(-9.6em)}
    #watch .minute-marks li:nth-child(8)    {transform:rotate(210deg)   translateY(-9.6em)}
    #watch .minute-marks li:nth-child(9)    {transform:rotate(240deg)   translateY(-9.6em)}
    #watch .minute-marks li:nth-child(10)   {transform:rotate(270deg)   translateY(-9.6em)}
    #watch .minute-marks li:nth-child(11)   {transform:rotate(300deg)   translateY(-9.6em)}
    #watch .minute-marks li:nth-child(12)   {transform:rotate(330deg)   translateY(-9.6em)}

    #watch .minute-marks li{
        margin: -1em 0 0 -.4em;
        height: 2em;
    }

    #anglepicker-title {
        max-width: 100vw;
        margin: 0 auto;
    }

    h3.group-title span {
        display: inline-block;
        width: calc(100% - 60px);
        vertical-align: middle;
    }
    .quatation .group-title img{
        margin-right:10px;
        vertical-align: middle;
        margin-bottom:0;
    }
    .quatation .group-title{
        padding-bottom: 13px;
    }
}   

/* SMARTPHONES PORTRAIT */
@media only screen and (max-width: 480px), screen and (max-height: 480px) {
    #group-last li {
        display: block;
        width: 100%;
    }

    .selectbox-field select{
        width:100%;
    }

    .quatation .group-title img{
        max-height: 40px;
        max-width:50px;
    }

    .quatation button {
        max-width: 100%;
        font-size: 20px;
        margin-bottom: 10px;
    }
    .site-branding h1 {
        font-size:1.54em;
    }
    #watch .minute-marks li {
        border-radius: 100%;
        height: 1.2em;
        width: 1.2em;
        left: calc(50% - 0.6em);
        top: calc(50% - 0.6em);
        margin: 0;
    }
    #watch .frame-face {
        max-width:100vw;
        background-size: 40%;
    }
    #anglepicker-title {
        font-size: 34px;
        line-height: normal;
        border-bottom:none;
    }
    #anglepicker{
        top:0 !important;
    }

    #watch .digits li:nth-child(1) { transform:translate(3.2em, -5.2em); }
    #watch .digits li:nth-child(2) {transform:translate(5.1em, -2.9em);}
    #watch .digits li:nth-child(3) { transform:translate(4.4em, 0) }
    #watch .digits li:nth-child(4) { transform:translate(5.1em, 2.9em) }
    #watch .digits li:nth-child(5) { transform:translate(3.2em, 5.2em); }
    #watch .digits li:nth-child(6) { transform:translate(0, 4.4em) }
    #watch .digits li:nth-child(7) { transform:translate(-3.2em, 5.2em) }
    #watch .digits li:nth-child(8) { transform:translate(-5.1em, 2.9em) }
    #watch .digits li:nth-child(9) { transform:translate(-4.4em, 0) }
    #watch .digits li:nth-child(10) { transform:translate(-5.1em, -2.9em) }
    #watch .digits li:nth-child(11) { transform:translate(-3.2em, -5.2em); }
    #watch .digits li:nth-child(12) { transform:translate(0, -4.4em) }

    #watch .minute-marks li:first-child     {transform:rotate(0deg)     translateY(-9.0em)}
    #watch .minute-marks li:nth-child(2)    {transform:rotate(30deg)    translateY(-9.0em)}
    #watch .minute-marks li:nth-child(3)    {transform:rotate(60deg)    translateY(-9.0em)}
    #watch .minute-marks li:nth-child(4)    {transform:rotate(90deg)    translateY(-9.0em)}
    #watch .minute-marks li:nth-child(5)    {transform:rotate(120deg)   translateY(-9.0em)}
    #watch .minute-marks li:nth-child(6)    {transform:rotate(150deg)   translateY(-9.0em)}
    #watch .minute-marks li:nth-child(7)    {transform:rotate(180deg)   translateY(-9.0em)}
    #watch .minute-marks li:nth-child(8)    {transform:rotate(210deg)   translateY(-9.0em)}
    #watch .minute-marks li:nth-child(9)    {transform:rotate(240deg)   translateY(-9.0em)}
    #watch .minute-marks li:nth-child(10)   {transform:rotate(270deg)   translateY(-9.0em)}
    #watch .minute-marks li:nth-child(11)   {transform:rotate(300deg)   translateY(-9.0em)}
    #watch .minute-marks li:nth-child(12)   {transform:rotate(330deg)   translateY(-9.0em)}
}

/* SMARTPHONES LANDSCAPE */
@media only screen and (max-height: 480px) {
    #watch .frame-face{
        max-height: 100vh;
        background-size: 20%;
    }
    #watch .digits{
        max-height: 100vh;
    }

    #anglepicker-title{
        display:none;
    }

    #watch .digits li{
        font-size:1em;
    }
    #watch .digits li:nth-child(3n+3){
        font-size:1.4em;
    }

    #watch .digits li:nth-child(1) { transform:translate(2.9em, -4.9em); }
    #watch .digits li:nth-child(2) {transform:translate(4.8em, -2.9em);}
    #watch .digits li:nth-child(3) { transform:translate(3.9em, 0) }
    #watch .digits li:nth-child(4) { transform:translate(4.8em, 2.9em) }
    #watch .digits li:nth-child(5) { transform:translate(2.9em, 4.9em); }
    #watch .digits li:nth-child(6) { transform:translate(0, 3.9em) }
    #watch .digits li:nth-child(7) { transform:translate(-2.9em, 4.9em) }
    #watch .digits li:nth-child(8) { transform:translate(-4.8em, 2.9em) }
    #watch .digits li:nth-child(9) { transform:translate(-3.9em, 0) }
    #watch .digits li:nth-child(10) { transform:translate(-4.8em, -2.9em) }
    #watch .digits li:nth-child(11) { transform:translate(-2.9em, -4.9em); }
    #watch .digits li:nth-child(12) { transform:translate(0, -3.9em) }

    #watch .minute-marks li:first-child     {transform:rotate(0deg)     translateY(-7.2em)}
    #watch .minute-marks li:nth-child(2)    {transform:rotate(30deg)    translateY(-7.2em)}
    #watch .minute-marks li:nth-child(3)    {transform:rotate(60deg)    translateY(-7.2em)}
    #watch .minute-marks li:nth-child(4)    {transform:rotate(90deg)    translateY(-7.2em)}
    #watch .minute-marks li:nth-child(5)    {transform:rotate(120deg)   translateY(-7.2em)}
    #watch .minute-marks li:nth-child(6)    {transform:rotate(150deg)   translateY(-7.2em)}
    #watch .minute-marks li:nth-child(7)    {transform:rotate(180deg)   translateY(-7.2em)}
    #watch .minute-marks li:nth-child(8)    {transform:rotate(210deg)   translateY(-7.2em)}
    #watch .minute-marks li:nth-child(9)    {transform:rotate(240deg)   translateY(-7.2em)}
    #watch .minute-marks li:nth-child(10)   {transform:rotate(270deg)   translateY(-7.2em)}
    #watch .minute-marks li:nth-child(11)   {transform:rotate(300deg)   translateY(-7.2em)}
    #watch .minute-marks li:nth-child(12)   {transform:rotate(330deg)   translateY(-7.2em)}
}