.close_modal_cp { display: inline-block; text-decoration: none; height: 30px; width: 30px; line-height: 33px; text-align: center; color: #000; font-size: 20px; font-weight: bold; border-radius: 50%; background: #e39427!important; opacity: 1!important; top: 5px!important; text-shadow: none!important; } 
.close-container{ padding: 10px 10px 0 0; } 
.close-container svg { height: 40px; width: 40px; }

.sprite-icon {
    display: inline-block;
    background: url('../images/spirit.png');
}
.top-dealer{background-size: contain;}
ul.tabRel {
    list-style: none;
}

ul.tabRel li {
    float: left;
}

ul.tabRel li a {
    font-size: 28px;
    color: #fff;
    text-transform: uppercase;
    display: block;
    padding:18px 20px;
    position: relative;
    text-decoration: none !important;
    font-family: "Oswald",sans-serif;
}

ul.tabRel li a.active {
    background-color: #e5950a;
}

ul.tabRel li a.active:after {
    content: ' ';
    position: absolute;
    bottom: -26px;
    left: 50%;
    border: 14px solid transparent;
    border-top-color: #e5950a;
    width: 0;
    height: 0;
    transform: translateX(-50%);
}
.infoBoxIn h4{font-family: "Oswald",sans-serif;font-weight: 400;
    text-transform: uppercase;}
.page-template-building-component .site-content{position: relative;}
.tabContent {
    display: none;
    padding-top: 40px;
}

#view-building .building-structure img{width:100%;}

.color-planner .csc-yello-btn{ color: #fff;
    border-bottom: 3px solid #e39427;
    background-color: #161925;}
.color-planner .csc-yello-btn:hover{background-color: #373738;}

  
/*Color Planner & Building Visualizer CSS*/

img.grass-pic,.glossary-wrapp img{width:100%;}  

.preview-icon {
    background-position:-18px -1425px;
    width: 24px;
    height: 14px;
}

.reset-icon {
    background-position: -16px -1448px;
    width: 24px;
    height: 21px;
}

.carport-ic {
    background-position:-17px -1256px;
    width: 60px;
    height: 36px;
}

.garage-ic {
    background-position:-11px -1367px;
    width: 69px;
    height: 44px;
}

.barn-ic {
     background-position:-10px -1306px;
    width: 73px;
    height: 45px;
}

#view-building .modal-dialog {
    width: 90%;
    max-width: 1800px;
}

#view-building .modal-body {
    padding: 0;
}

.rangBox {
    width: 30px;
    height: 30px;
    background: #eaeaea;
    border: 0;
    margin: 0 1px;
    border: 1px solid rgba(0, 0, 0, 0.09);
    display: inline-block;
}

.selection-clone ul {
    list-style: none;
    display: table;
    text-align: center;
    margin: 0 auto;
}

.selection-clone ul li {
    display: table-cell;
}

.selection-clone ul li h5 {
    font-weight: 600;
    padding: 0 5px;
}

.color-planner,
.images-wrapp {
    position: relative;
}

.modal-content {
    border-radius: 0;
}

.modal-content button.close {
    top: 0;
    right: 5px;
    z-index: 1;
    position: absolute;
    outline: 0;
}



.modal-backdrop.in {
    filter: alpha(opacity=80);
    opacity: .8;
    display: none !important;
}

.modal {
    background: rgba(0, 0, 0, .8);
}



.color-planner .images-wrapp img {
    width: 100%;
}

.colored-img {
    position: absolute;
    left: 0;
    top: 0;
}

.colorOptingBox ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0 !important;
}

a.upload-image-editor {
    position: absolute;
    bottom: 0;
    right: 0;
}




/*Color picker Circle CSS*/


/*Color picker Circle CSS End*/

.action-pannel-planner h5 {
    font-size:16px;color:#e5950a;text-transform:capitalize;margin:5px 0 0 0;
}

.action-pannel-planner a {
    position: relative;
    padding: 10px 0;
    height: 90px;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #0f111a;
    justify-content: center;
    border-top: 1px solid #454751;
}
.action-pannel-planner a:first-child{border:0;}
.action-pannel-planner a:hover{text-decoration: none;}

a.upload-image-editor {
    position: absolute;
    z-index: 1;
}
.why-choose-us-finance{background-size: contain;}



/*Color Planner CSS Ends*/

#priceColoredBuilding select {
    font-size: 14px;
    padding: 10px 10px 10px 0;
    display: block;
    width: 100%;
    font-size: 13px !important;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    border: none;
    border-bottom: 1px solid #bdbec0;
    box-shadow: none;
}

p.woocommerce-info.no-product-found {
    font-weight: 600;
    padding-top: 50px;
}

span.arrow {
    background-position: -80px -873px;
    width: 34px;
    height: 22px;
}

.contct-form .btn-primary-fill {
    padding: 10px 15px;
}

.contct-form .btn-primary-fill span.arrow {
    position: relative;
    top: 1px;
}

.social-footer {
    margin: 20px 0 0 0;
}

.social-footer a {
    display: inline-block;
    margin: 0 4px;
    color: #262730;
}

.social-footer a span {
    display: table-cell;
    background-color: #fff;
    height: 30px;
    width: 32px;
    vertical-align: middle;
    font-size: 20px;
}

.social-footer a.tr:hover span {
    background: #2cd8e7;
}

.social-footer a.fb-logo:hover span {
    background: #3c5b9a;
}

.social-footer a.gp:hover span {
    background: #f53e28;
}

.social-footer a.pt:hover span {
    background: #cc2129;
}

.social-footer a.insta:hover span {
    background: #934dc7;
}

.social-footer a:hover {
    color: #fff;
}

#getFinancing {
    text-align: center;
}

#getFinancing .modal-dialog {
    width: auto;
    max-width: 556px;
    display: inline-block;
    text-align: left;
}

#getFinancing .modal-content {
    background: transparent;
}

#getFinancing .modal-content button.close {
    top: 1px;
    right: 8px;
    opacity: .8;
    color: #fff;
    text-shadow: none;
    font-size: 25px;
}

#getFinancing .formSeciton {
    border-radius: 0;
    margin-top: 0 !important;
}

#getFinancing .modal-body {
    padding: 0;
}

#getFinancing .modal-content a {
    color: #e5950a;
}

#getFinancing .modal-content a:hover {
    color: #000;
}

#getFinancing div.wpcf7 .screen-reader-response {
    padding: 5px 27px 5px 5px;
}

#getPricing .modal-dialog {
    max-width: 96%;
    width: 1250px;
}

#getPricing button.close {
    position: absolute;
    right: 5px;
    z-index: 1;
    font-size: 31px;
    opacity: .8;
    top: -2px;
}

#getPricing .getpriceForm textarea {
    height: 100px;
}

#getPricing .getpriceForm.containerForm {
    padding: 24px 0!important;
}

#getPricing .product_image_popups img {
    width: 100%;
}

.faqSection h2 {
    margin-bottom: 30px;
}

div.wpcf7 .screen-reader-response[role="alert"] {
    display: none;
}

.dropdown-menu {
    z-index: 18;
}

a.tel-link {
    color: #fff !important;
}

.mb30 {
    margin-bottom: 30px;
}

.galleyPage .dropdown-backdrop {
    display: none;
}

.what-make {
    overflow: hidden;
}






/*******Visual Glossary Page*******/

.visual-glossary-code {
    border-top: 1px solid #171717;
    padding: 0;
    position: relative;
    padding-top: 60px;
    background: #9ac8e6;
}

.visual-glossary-code .bgGrass {}

.visual-glossary-head {
    padding: 10px 0;
    text-align: center;
    position: absolute;
    top: 0;
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
}

.visual-glossary-head * {
    vertical-align: middle;
}

.building-selection,
.building-selection-color {
    display: inline-block;
    margin: 0 0;    
    height: 40px;
    padding: 0;
    vertical-align: middle;
}

.building-selection li,
.building-selection-color li {
    display: inline-block;
    float: left;    padding: 0 5px;
}

.building-selection li a,
.building-selection-color li a {
    width: 130px;
    height: 40px;
    background-color: #e39427;
    -webkit-box-shadow: 0 3px #161925;
    -moz-box-shadow: 0 3px #161925;
    box-shadow: 0 3px #161925;
    display: block;
    color: #161925;
    text-decoration: none;
    font-size: 14px;    font-weight: 600;
    line-height: 44px;}

.building-selection li a[rel="garage"],.building-selection-color li a[rel="garage"]{background-color:#161925;-webkit-box-shadow: 0 3px #e39427;
    -moz-box-shadow: 0 3px #e39427;
    box-shadow: 0 3px #e39427;color:#fff;}

.building-selection li a:hover,
.building-selection li a.active,
.building-selection-color li a:hover,
.building-selection-color li a.active {

}



a.reset-me {
    font-size: 20px;
    color: #03b6e7;
    text-transform: uppercase;
    font-weight: 900;
}

a.reset-me .sprite-img {
    vertical-align: middle;
}

.glossary-wrapp {
    max-width: 1600px;
    position: relative;
    margin: 0 auto 3px;
}

.cta {
    position: absolute;
    left: 12%;
    bottom: 22px;
}

.cta h3 {
    text-transform: uppercase;
    font-weight: 900;
    color: #fff;
    font-size: 36px;
    text-shadow: 0 5px 5px rgba(0, 0, 0, 0.43);
}

.cta h3 span {
    font-size: 18px;
    display: block;
}

.cta .btn {
    -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, .43);
    -moz-box-shadow: 0 5px 5px rgba(0, 0, 0, .43);
    box-shadow: 0 5px 5px rgba(0, 0, 0, .43);
    border: solid 2px #fff;
    font-weight: 900;
}

.opt-section {
    clear: both;
    margin: 0 auto;
    max-width: 1050px;
    display: inline-block;
    position: relative;
    top: 10px;
    padding: 0 63px;
    width: 100%;
}

ul.opt-component li {
    display: inline-block;
}

ul.opt-component li a {
    font-size: 22px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 900;
    display: block;
    margin: 20px 10px 30px;
    position: relative;
    outline: 0;
}

ul.opt-component li a.active,
ul.opt-component li a:hover {
    color: #03b6e7;
}

ul.opt-component li a.active:after {
    content: ' ';
    position: absolute;
    left: 50%;
    border: 15px solid transparent;
    border-bottom: 20px solid #dddddd;
    bottom: -28px;
    margin-left: -15px;
}


.glossary-wrapp[data-building="carport"]+.opt-section ul.opt-component li a[rel="snow-braces"],
.glossary-wrapp[data-building="carport"]+.opt-section ul.opt-component li a[rel="door"],
.glossary-wrapp[data-building="carport"]+.opt-section ul.opt-component li a[rel="walk-in-door"],
.glossary-wrapp[data-building="carport"]+.opt-section ul.opt-component li a[rel="j-trim"],
.glossary-wrapp[data-building="carport"]+.opt-section ul.opt-component li a[rel="frame"],
.glossary-wrapp[data-building="carport"]+.opt-section ul.opt-component li a[rel="window"],
.glossary-wrapp[data-building="carport"]+.opt-section ul.opt-component li a.cLegs,
.glossary-wrapp[data-building="carport"]+.opt-section ul.opt-component li a[rel="bow"],

.glossary-wrapp[data-building="barn"]+.opt-section ul.opt-component li a[rel="ridge-cap"],
.glossary-wrapp[data-building="barn"]+.opt-section ul.opt-component li a[rel="hat"],
.glossary-wrapp[data-building="barn"]+.opt-section ul.opt-component li a[rel="truss"],
.glossary-wrapp[data-building="barn"]+.opt-section ul.opt-component li a[rel="hat-2"],
.glossary-wrapp[data-building="barn"]+.opt-section ul.opt-component li a[rel="walk-in-door"],
.glossary-wrapp[data-building="barn"]+.opt-section ul.opt-component li a[rel="window"],
.glossary-wrapp[data-building="barn"]+.opt-section ul.opt-component li a[rel="hat-2"],
.glossary-wrapp[data-building="barn"]+.opt-section ul.opt-component li a.oLegs,
.glossary-wrapp[data-building="barn"]+.opt-section ul.opt-component li a.bDoor,

.glossary-wrapp[data-building="garage"]+.opt-section ul.opt-component li a[rel="hat-2"],
.glossary-wrapp[data-building="garage"]+.opt-section ul.opt-component li a[rel="frame"],
.glossary-wrapp[data-building="garage"]+.opt-section ul.opt-component li a[rel="gabel"],
.glossary-wrapp[data-building="garage"]+.opt-section ul.opt-component li a[rel="base-rail"],
.glossary-wrapp[data-building="garage"]+.opt-section ul.opt-component li a[rel="ridge-cap"],
.glossary-wrapp[data-building="garage"]+.opt-section ul.opt-component li a[rel="legs"],
.glossary-wrapp[data-building="garage"]+.opt-section ul.opt-component li a[rel="truss"],
.glossary-wrapp[data-building="garage"]+.opt-section ul.opt-component li a.oLegs,
.glossary-wrapp[data-building="garage"]+.opt-section ul.opt-component li a.gDoor {
    display: none;
}

nav#menu {
    display: none;
}

.mm-opened nav#menu {
    display: block;
}

.infoboxOut {
    display: none;
    width: 390px;    font-weight: 300;    line-height: 23px;
    top: 390px;
    left: -124px;
    position: absolute;
    z-index: 2;
    background: rgba(0, 0, 0, 0.64);
    color: #fff;
    text-align: center;
    padding: 25px;
}

.glossary-wrapp[data-building="carport"] .infoboxOut[data-info="gabel"] {
    top: 428px;
    left: 34px;
}

.glossary-wrapp[data-building="carport"] .infoboxOut[data-info="trim"] {
    top: 69px;
    left: 255px;
}

.glossary-wrapp[data-building="carport"] .infoboxOut[data-info="roof"] {
    top: 190px;
    left: 25px;
}

.glossary-wrapp[data-building="carport"] .infoboxOut[data-info="ridge-cap"] {
    top: 138px;
    left: 241px;
}

.glossary-wrapp[data-building="carport"] .infoboxOut[data-info="wall"] {
    top: 211px;
    left: 359px;
}

.glossary-wrapp[data-building="carport"] .infoboxOut[data-info="legs"] {
    top: 279px;
    left: -20px;
}

.glossary-wrapp[data-building="carport"] .infoboxOut[data-info="base-rail"] {
    bottom: 392px;
    left: -124px;
    top: auto;
}





.glossary-wrapp[data-building="carport"] .infoboxOut[data-info="truss"] {
    top: 172px;
    left: 538px;
}

.glossary-wrapp[data-building="carport"] .infoboxOut[data-info="braces"] {
    top: 201px;
    left: 58px;
}

.glossary-wrapp[data-building="carport"] .infoboxOut[data-info="hat-2"] {
    top: 245px;
    left: auto;
    right: 153px;
}

.glossary-wrapp[data-building="carport"] .infoboxOut[data-info="inner-wall"] {
    top: 468px;
    left: -97px;
}

.glossary-wrapp[data-building="carport"] .infoboxOut[data-info="inner-wall"] .infoBoxIn:before {
    height: 64px;
    top: -98px;
}


.glossary-wrapp[data-building="barn"] .infoboxOut[data-info="gabel"] {
    top: 273px;
    left: 61px;
}

.glossary-wrapp[data-building="barn"] .infoboxOut[data-info="gabel"] .infoBoxIn:before {
    height: 64px;
    top: -97px;
}

.glossary-wrapp[data-building="barn"] .infoboxOut[data-info="trim"] {
    top: 293px;
    left: -171px;
}

.glossary-wrapp[data-building="barn"] .infoboxOut[data-info="trim"] .infoBoxIn:before {
    height: 54px;
    top: -90px;
}

.glossary-wrapp[data-building="barn"] .infoboxOut[data-info="roof"] {
    top: 177px;
    right: 159px;
    left: auto;
}

.glossary-wrapp[data-building="barn"] .infoboxOut[data-info="roof"] .infoBoxIn:before {
    height: 55px;
    top: -89px;
}

.glossary-wrapp[data-building="barn"] .infoboxOut[data-info="j-trim"] {
    top: 393px;
    right: 0;
    left: auto;
}

.glossary-wrapp[data-building="barn"] .infoboxOut[data-info="j-trim"] .infoBoxIn:before {
    height: 28px;
    top: -61px;
}

.glossary-wrapp[data-building="barn"] .infoboxOut[data-info="wall"] {
    top: 455px;
    left: 251px;
}

.glossary-wrapp[data-building="barn"] .infoboxOut[data-info="wall"] .infoBoxIn:before {
    height: 39px;
    top: -73px;
}

.glossary-wrapp[data-building="barn"] .infoboxOut[data-info="frame"] {
    top: 581px;
    left: 402px;
}

.glossary-wrapp[data-building="barn"] .infoboxOut[data-info="frame"] .infoBoxIn:before {
    height: 39px;
    top: -73px;
}

.glossary-wrapp[data-building="barn"] .infoboxOut[data-info="bow"] {
    top: 367px;
    left: 332px;
}

.glossary-wrapp[data-building="barn"] .infoboxOut[data-info="bow"] .infoBoxIn:before {
    height: 39px;
    top: -73px;
}


.glossary-wrapp[data-building="barn"] .infoboxOut[data-info="legs"] {
    top: 402px;
    left: 68px;
}

.glossary-wrapp[data-building="barn"] .infoboxOut[data-info="legs"] .infoBoxIn:before {
    height: 65px;
    top: -100px;
}

.glossary-wrapp[data-building="barn"] .infoboxOut[data-info="base-rail"] {
    top: 686px;
    left: auto;
    right: 59px;
}

.glossary-wrapp[data-building="barn"] .infoboxOut[data-info="base-rail"] .infoBoxIn:before {
    height: 27px;
    top: -60px;
}

.glossary-wrapp[data-building="barn"] .infoboxOut[data-info="hat-channel"] {
    top: 452px;
    right: 0;
    left: auto;
}

.glossary-wrapp[data-building="barn"] .infoboxOut[data-info="hat-channel"] .infoBoxIn:before {
    height: 45px;
    top: -80px;
}

.glossary-wrapp[data-building="barn"] .infoboxOut[data-info="snow-braces"] {
    top: 202px;
    left: 58px;
}

.glossary-wrapp[data-building="barn"] .infoboxOut[data-info="snow-braces"] .infoBoxIn:before {
    height: 67px;
    top: -101px;
}

.glossary-wrapp[data-building="barn"] .infoboxOut[data-info="braces"] {
    top: 289px;
    left: 276px;
}

.glossary-wrapp[data-building="barn"] .infoboxOut[data-info="braces"] .infoBoxIn:before {
    height: 43px;
    top: -77px;
}

.glossary-wrapp[data-building="barn"] .infoboxOut[data-info="inner-wall"] {
    top: 344px;
    left: -138px;
}

.glossary-wrapp[data-building="barn"] .infoboxOut[data-info="inner-wall"] .infoBoxIn:before {
    height: 73px;
    top: -106px;
}

.glossary-wrapp[data-building="barn"] .infoboxOut[data-info="door"] {
    top: 410px;
    left: -172px;
}

.glossary-wrapp[data-building="barn"] .infoboxOut[data-info="door"] .infoBoxIn:before {
    height: 73px;
    top: -106px;
}


.glossary-wrapp[data-building="garage"] .infoboxOut[data-info="walk-in-door"] {
    top: 556px;
    left: auto;
    right: 50px;
}



.glossary-wrapp[data-building="garage"] .infoboxOut[data-info="window"] {
    top: 250px;
    left: 415px;
}


.glossary-wrapp[data-building="garage"] .infoboxOut[data-info="door"] {
    top: 313px;
    left: 487px;
}


.glossary-wrapp[data-building="garage"] .infoboxOut[data-info="trim"] {
    top: 133px;
    left: 3px;
}


.glossary-wrapp[data-building="garage"] .infoboxOut[data-info="roof"] {
    top: 127px;
    right: 0;
    left: auto;
}


.glossary-wrapp[data-building="garage"] .infoboxOut[data-info="j-trim"] {
    top: 376px;
    right: 19px;
    left: auto;
}

.glossary-wrapp[data-building="garage"] .infoboxOut[data-info="j-trim"] .infoBoxIn:before {
    height: 36px;
    top: -73px;
}

.glossary-wrapp[data-building="garage"] .infoboxOut[data-info="wall"] {
    top: 181px;
    right: 0;
    left: auto;
}

.glossary-wrapp[data-building="garage"] .infoboxOut[data-info="hat-channel"] {
    top: 128px;
    left: 300px;
}


.glossary-wrapp[data-building="garage"] .infoboxOut[data-info="bow"] {
    top: 328px;
    right: 636px;
    left: auto;
}


.glossary-wrapp[data-building="garage"] .infoboxOut[data-info="snow-braces"] {
    top: 185px;
    right: 570px;
    left: auto;
}






.glossary-wrapp[data-building="garage"] .infoboxOut[data-info="braces"] {
    left: 646px;
    top: 189px;
}

.glossary-wrapp[data-building="garage"] .infoboxOut[data-info="inner-wall"] {
    top: 345px;
    left: auto;
    right: 0;
}



.infoBoxIn h4 {}

.infoBoxIn:after {
    content: ' ';
    position: absolute;
    background: url('../images/spirit.png') no-repeat -610px -258px;
    width: 32px;
    height: 32px;
    margin-left: -16px;
    left: 50%;
    top: -32px;
}

.infoBoxIn:before {
    height: 19px;
    width: 1px;
    border-left: 2px dashed #fff;
    content: ' ';
    position: absolute;
    left: 50%;
    top: -20px;
}

.scrolling-y {
    overflow-y: auto;
    max-height: 150px;
}

.target-icon {
    background-position: -441px -900px;
    width: 37px;
    height: 37px;
    position: absolute;
    cursor: pointer;
    z-index: 1;
    transition: none;
}

.target-icon.active {
    background-position: -442px -938px;
    width: 37px;
    height: 37px;
}

@media(min-width: 1025px) {


    .target-icon:not(.active):hover {
        /*-webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;*/
    }
}

@-ms-keyframes spin {
    from {
        -ms-transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}



.target-icon:after {
    content: ' ';
    width: 0px;
    height: 1px;
    border-bottom: 2px dashed #fff;
    position: absolute;
    top: 50%;
    right: 100%;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

.target-icon.right:after {
    left: 100%;
    right: auto;
}

.carpot-trim {
    left: 380px;
    top: 26.8%;
}

.carpot-trim.active:after {
    width: 309px;
}

.carpot-gabel {
    left: 501px;
    top: 254px;
}

.carpot-gabel.active:after {
    width: 268px;
}

.carpot-roof {
    left: 529px;
    top: 100px;
}

.carpot-roof.active:after {
    width: 309px;
}

.carpot-ridge-cap {
    left: 746px;
    top: 46px;
}

.carpot-ridge-cap.active:after {
    width: 309px;
}

.carpot-wall {
    left: 1030px;
    top: 263px;
}

.carpot-wall:after {
    left: 100%;
}

.carpot-wall.active:after {
    width: 104px;
}

.carpot-legs {
    left: 878px;
    top: 454px;
}

.carpot-legs:after {
    left: 100%;
}

.carpot-legs.active:after {
    width: 194px;
}

.carpot-base-rail {
    left: 311px;
    top: 467px;
}

.carpot-base-rail.active:after {
    width: 241px;
}

.carpot-hat {
    left: 356px;
    top: 361px;
}

.carpot-hat.active:after {
    width: 260px;
}

.carpot-truss {
    left: 724px;
    top: 237px;
}

.carpot-truss.active:after {
    width: 146px;
}

.carpot-bracaes {
    left: 898px;
    top: 287px;
}

.carpot-bracaes:after {
    left: 100%;
    right: auto;
}

.carpot-bracaes.active:after {
    width: 249px;
}

.carpot-hat-2 {
    left: 778px;
    top: 156px;
}

.carpot-hat-2:after {
    left: 100%;
    right: auto;
}

.carpot-hat-2.active:after {
    width: 242px;
}

.carpot-inner-wall {
    left: 412px;
    top: 356px;
}

.carpot-inner-wall.active:after {
    width: 309px;
}


.garage-walk-in-door {
    right: 541px;
    top: 283px;
}

.garage-walk-in-door:after {
    left: 100%;
}

.garage-walk-in-door.active:after {
    width: 150px;
}

.garage-door {
    left: 862px;
    top: 274px;
}

.garage-door.active:after {
    width: 179px;
}

.garage-trim {
    left: 316px;
    top: 94px;
}

.garage-trim.active:after {
    width: 117px;
}

.garage-bow {
    left: 693px;
    top: 238px;
}

.garage-bow.active:after {
    width: 117px;
}

.garage-snow-braces {
    left: 961px;
    top: 149px;
}

.garage-snow-braces.active:after {
    width: 120px;
}

.garage-roof {
    right: 390px;
    top: 86px;
}

.garage-roof.active:after {
    width: 197px;
}

.garage-j-trim {
    right: 349px;
    top: 289px;
}

.garage-j-trim:after {
    left: 100%;
}

.garage-j-trim.active:after {
    width: 134px;
}

.garage-window {
    left: 744px;
    top: 209px;
}

.garage-window.active:after {
    width: 134px;
}

.garage-wall {
    right: 279px;
    top: 142px;
}

.garage-wall.active:after {
    width: 84px;
}

.garage-winscot.active:after {
    width: 77px;
}



.garage-hat-channel {
    left: 621px;
    top: 87px;
}

.garage-hat-channel.active:after {
    width: 126px;
}

.garage-braces {
    right: 453px;
    top: 388px;
}

.garage-braces:after {
    left: 100%;
}

.garage-braces.active:after {
    width: 219px;
}

.garage-inner-wall {
    right: 434px;
    top: 224px;
}

.garage-inner-wall:after {
    left: 100%;
}

.garage-inner-wall.active:after {
    width: 240px;
}

.barn-gabel {
    left: 415px;
    top: 161px;
}

.barn-gabel.active:after {
    width: 159px;
}

.barn-trim {
    left: 151px;
    top: 189px;
}

.barn-trim.active:after {
    width: 127px;
}

.barn-door {
    left: 151px;
    top: 291px;
}

.barn-door.active:after {
    width: 127px;
}

.barn-roof {
    right: 563px;
    top: 74px;
}

.barn-roof:after {
    left: 100%;
}

.barn-roof.active:after {
    width: 210px;
}

.barn-j-trim {
    right: 231px;
    top: 318px;
}

.barn-j-trim:after {
    left: 100%;
}

.barn-j-trim.active:after {
    width: 37px;
}

.barn-wall {
    right: 710px;
    top: 369px;
}

.barn-wall.active:after {
    width: 209px;
}

.barn-legs {
    left: 442px;
    top: 285px;
}

.barn-legs.active:after {
    width: 180px;
}

.barn-bow {
    right: 588px;
    top: 275px;
}

.barn-bow.active:after {
    width: 253px;
}

.barn-base-rail {
    right: 405px;
    top: 613px;
}

.barn-base-rail:after {
    left: 100%;
}

.barn-base-rail.active:after {
    width: 150px;
}

.barn-hat {
    right: 384px;
    top: 359px;
}

.barn-hat:after {
    left: 100%;
}

.barn-hat.active:after {
    width: 191px;
}

.barn-snow-braces {
    left: 505px;
    top: 88px;
}

.barn-snow-braces.active:after {
    width: 250px;
}

.barn-braces {
    left: 663px;
    top: 196px;
}

.barn-braces.active:after {
    width: 192px;
}

.barn-inner-wall {
    left: 296px;
    top: 224px;
}

.barn-inner-wall.active:after {
    width: 240px;
}

.barn-frame {
    right: 528px;
    top: 494px;
}

.barn-frame.active:after {
    width: 240px;
}


.opt-component .slick-arrow {
    width: 48px;
    height: 48px;
    background-color: #000;
    border: solid 2px #03b6e7;
    font-size: 0;
    position: absolute;
    right: -52px;
    top: 10px;
}

.opt-component .slick-arrow.slick-prev {
    right: auto;
    left: -52px;
}

.opt-component .slick-arrow:after {
    content: "\f054";
    font: normal normal normal 18px/1 FontAwesome;
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -5px;
    margin-top: -8px;
}

.opt-component .slick-arrow.slick-prev:after {
    content: "\f053";
}

.opt-component .slick-arrow.slick-disabled {
    opacity: 0.6;
}

.pieces,
.pieces-2 {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
}

.show-767 {
    display: none;
}

.wrapperImages {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
}

.pin-points {
    background-position: -448px -993px;
    width: 35px;
    height: 34px;
}

.visual-glossary-head h2 {
        margin-top: 70px;
    color: #161925;
    font-size: 40px;
    font-family: "Oswald",sans-serif;
    text-transform: uppercase;
    font-weight: 400;
}

.visual-glossary-head h6 {
    font-weight: 400;
    font-size: 19px;
    text-transform: capitalize;
    margin: 10px 0 20px;
    color: #161925;
}

.visual-glossary-head a.pin-points {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 40px;
    height: 40px;
    background-color: #fff;
    -webkit-box-shadow: 0 3px #161925;
    -moz-box-shadow: 0 3px #161925;
    box-shadow: 0 3px #161925;text-align: center;
    line-height: 39px;
    padding-left: 4px;margin-left: 2px;
}

.carport-window {
    left: 610px;
    top: 238px;
}

.carport-wall {
    left: 660px;
    top: 170px;
}

.carport-walk-in-door {
    left: 950px;
    top: 230px;
}

.carport-wainscot {
    left: 570px;
    top: 323px;
}

.carport-truss {
    left: 840px;
    top: 133px;
}

.carport-trim {
    left: 750px;
    top: 28px;
}

.carport-door {
    left: 780px;
    top: 230px;
}

.carport-legs {
    left: 299px;
    top: 240px;
}

.carport-braces {
    left: 386px;
    top: 162px;
}

.carport-baserails {
    top: 421px;
    left: 416px;
}

.carport-trim.active:after {
    width: 300px;
}

.carport-legs.active:after {
    width: 123px;
}

.carport-braces.active:after {
    width: 131px;
}

.carport-baserails.active:after {
    width: 123px;
}

.carport-wainscot.active:after {
    width: 123px;
}

.carport-window.active:after {
    width: 106px;
}

.carport-wall.active:after {
    width: 106px;
}

.carport-truss.active:after {
    width: 106px;
}

.carport-door.active:after {
    width: 106px;
}

.carport-walk-in-door.active:after {
    width: 106px;
}



.glossary-wrapp[data-building="carport"] .infoboxOut[data-info="baserails"] {
    left: 94px;
    top: 460px;
}

.glossary-wrapp[data-building="carport"] .infoboxOut[data-info="wainscot"] {
    left: 250px;
    top: 362px;
}

.glossary-wrapp[data-building="carport"] .infoboxOut[data-info="window"] {
    left: 309px;
    top: 282px;
}

.glossary-wrapp[data-building="carport"] .infoboxOut[data-info="door"] {
    left: 478px;
    top: 270px;
}

.glossary-wrapp[data-building="carport"] .infoboxOut[data-info="walk-in-door"] {
    left: 648px;
    top: 270px;
}

.garage-winscot {
    right: 270px;
    top: 316px;
}

.garage-garage-truss {
    left: 407px;
    top: 88px;
}

.garage-side-garage-door {
    right: 350px;
    top: 220px;
}

.garage-ridge-cap {
    left: 491px;
    top: 29px;
}

.garage-ridge-cap.active:after {
    width: 118px;
}


.glossary-wrapp[data-building="garage"] .infoboxOut[data-info="ridge-cap"] {
    left: 178px;
    top: 70px;
}

.glossary-wrapp[data-building="garage"] .infoboxOut[data-info="walk-in-door"] {
    right: 198px;
    top: 324px;
}

.glossary-wrapp[data-building="garage"] .infoboxOut[data-info="truss"] {
    left: 132px;
    top: 128px;
}

.garage-garage-truss.active:after {
    width: 80px;
}

.garage-side-garage-door.active:after {
    width: 127px;
}

.glossary-wrapp[data-building="garage"] .infoboxOut[data-info="side-garage-door"] {
    right: 30px;
    top: 261px;
    left: auto;
}

.glossary-wrapp[data-building="garage"] .infoboxOut[data-info="winscot"] {
    right: 0;
    top: 357px;
    left: auto;
}

.garage-legs {
    left: 390px;
    top: 210px;
}

.glossary-wrapp[data-building="garage"] .infoboxOut[data-info="legs"] {
    left: 94px;
    top: 249px;
}

.garage-legs.active:after {
    width: 100px;
}


/****************************/




@media (min-width:768px) {
    .plannerPopups .modal-dialog {
        position: absolute;
        left: 50%;
        margin: 0 !important;
        top: 50%;
        transform: translate(-50%, -50%) !important;
    }

    #price-building .modal-dialog {
        width: 90%;
        max-width: 600px;
    }

    .show-mobile {
        display: none;
    }

}






@media (min-width:992px) {
    .show-991px {
        display: none;
    }
    /*Color Planner Desktop View*/

    a.upload-image-editor {
        background-position: -5px -711px;
        width: 267px;
        height: 77px;
    }

    .images-wrapp .tabContent {
        display: block !important;
    }

    .price-building {
        position: absolute;
        bottom: 42px;
        left: 50%;
        transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        /* IE 9 */
        -webkit-transform: translateX(-50%);
        /* Chrome, Safari, Opera */
    }

    .colorOptingBox {
        position: absolute;
        z-index: 1;
    }

    .colorOptingBox:before {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-top: 13px solid #fff;
        left: 50%;
        top: 7px;
        transform: translateX(-50%);
        z-index: 2;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }

    .colorOptingBox:hover:before {
        top: -12px;
    }

    .heading-section {
        position:absolute;
    left:50%;
    z-index:1;
    top:50px;
    text-align: center;
    transform: translateX(-50%);
    }

    .heading-section h2 { position: relative;font-family:"Oswald",sans-serif;margin:0;
    text-transform:uppercase;color: #161925;    font-size: 40px;}
    .heading-section h4{font-size: 19px;color:#161925;font-weight: 400;}
    .heading-section h2 span{color:#fff;}
    .buildingOpted {
        background: #fff;
        margin: 20px 8px 30px;
        border-radius: 45px;
        padding: 22px 0;
        position: relative;
    }

    .buildingOpted ul {
        position: relative;
        z-index: 1;
    }

    .buildingOpted li {
        padding: 25px 0;
        cursor: pointer;
    }

    .buildingOpted:after {
        content: ' ';
        position: absolute;
        z-index: 0;
        top: 5px;
        left: 4px;
        right: 4px;
        height: 122px;
        -webkit-border-radius: 40px;
        -moz-border-radius: 40px;
        border-radius: 40px;
        background-color: #e5950a;       
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }

    .buildingOpted[rel="garage"]:after {
           top: 97px;
    height: 127px;
    }

    .buildingOpted[rel="barn"]:after {
        top: 204px;
    }

    .buildingOpted li span {
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }

    .buildingOpted li.selected .carport-ic {
        background-position: -95px -1256px;
    }

    .buildingOpted li.selected .garage-ic {
        background-position: -89px -1367px;
    }

    .buildingOpted li.selected .barn-ic {
        background-position: -88px -1306px;
    }

    .right-pannel {
        position: absolute;
        width: 100px;
        background: #262730;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        text-align: center;
    }

    .buildingOpted ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .colorOptingBox {
        right: 16%;
        top: 20%;
        width: 180px;
        height: 180px;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
        padding-top: 0;
    }

    .colorOptingBox * {
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }

    .colorOptingBox:after {
        content: ' ';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        /* IE 9 */
        -webkit-transform: translateY(-50%);
        /* Chrome, Safari, Opera */
        left: -130px;
        background: url('../images/color-planner/thin-line.png');
        width: 130px;
        height: 2px;
    }

    .colorOptingBox .wheel-pallet {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        border: 8px solid #fff;
        background: #ccc;
        border-radius: 100%;
        overflow: hidden;
        cursor: pointer;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }

    .colorOptingBox:hover .wheel-pallet {
        transform: scale(1.2);
        -ms-transform: scale(1.2);
        -webkit-transform: scale(1.2);
    }

    .colorOptingBox:hover .inner-circle {
        width: 90px;
        height: 90px;
        ;
    }

    .colorOptingBox li {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform-origin: 80px 80px;
        -ms-transform-origin: 80px 80px;
        -webkit-transform-origin: 80px 80px;
        z-index: 1;
        position: relative;
    }

    .colorOptingBox li.selected {
        z-index: 0 !important;
    }

    .colorOptingBox li:nth-child(2) {
        transform: rotate(25.7deg);
        -ms-transform: rotate(25.7deg);
        -webkit-transform: rotate(25.7deg);
    }

    .colorOptingBox li:nth-child(3) {
        transform: rotate(51.4deg);
        -ms-transform: rotate(51.4deg);
        -webkit-transform: rotate(51.4deg);
    }

    .colorOptingBox li:nth-child(4) {
        transform: rotate(77.1deg);
        -ms-transform: rotate(77.1deg);
        -webkit-transform: rotate(77.1deg);
    }

    .colorOptingBox li:nth-child(5) {
        transform: rotate(102.8deg);
        -ms-transform: rotate(102.8deg);
        -webkit-transform: rotate(102.8deg);
    }

    .colorOptingBox li:nth-child(6) {
        transform: rotate(128.5deg);
        -ms-transform: rotate(128.5deg);
        -webkit-transform: rotate(128.5deg);
    }

    .colorOptingBox li:nth-child(7) {
        transform: rotate(154.2deg);
        -ms-transform: rotate(154.2deg);
        -webkit-transform: rotate(154.2deg);
    }

    .colorOptingBox li:nth-child(8) {
        transform: rotate(179.9deg);
        -ms-transform: rotate(179.9deg);
        -webkit-transform: rotate(179.9deg);
    }

    .colorOptingBox li:nth-child(9) {
        transform: rotate(205.6deg);
        -ms-transform: rotate(205.6deg);
        -webkit-transform: rotate(205.6deg);
    }

    .colorOptingBox li:nth-child(10) {
        transform: rotate(231.3deg);
        -ms-transform: rotate(231.3deg);
        -webkit-transform: rotate(231.3deg);
    }

    .colorOptingBox li:nth-child(11) {
        transform: rotate(257deg);
        -ms-transform: rotate(257deg);
        -webkit-transform: rotate(257deg);
    }

    .colorOptingBox li:nth-child(12) {
        transform: rotate(282.7deg);
        -ms-transform: rotate(282.7deg);
        -webkit-transform: rotate(282.7deg);
    }

    .colorOptingBox li:nth-child(13) {
        transform: rotate(308.4deg);
        -ms-transform: rotate(308.4deg);
        -webkit-transform: rotate(308.4deg);
    }

    .colorOptingBox li:nth-child(14) {
        transform: rotate(334.1deg);
        -ms-transform: rotate(334.1deg);
        -webkit-transform: rotate(334.1deg);
    }
    /*.colorOptingBox li:nth-child(15){transform: rotate(315deg);-ms-transform: rotate(315deg); 
    -webkit-transform: rotate(315deg);}
.colorOptingBox li:nth-child(16){transform: rotate(337deg);-ms-transform: rotate(337deg); 
    -webkit-transform: rotate(337deg);}*/

    .colorOptingBox li .color-pallet {
        font-size: 0;
        width: 25.7px;
        background: #ddd;
        height: 81px;
        position: absolute;
        left: 72px;
        top: 0;
        /*-webkit-filter: blur(0.2px);
        filter: blur(0.2px);*/
        transform: perspective(47px) rotateX(-40deg) translateZ(0);
        -ms-transform: perspective(47px) rotateX(-40deg) translateZ(0);
        -webkit-transform: perspective(47px) rotateX(-40deg) translateZ(0);
        backface-visibility: hidden;
        -webkit-font-smoothing: subpixel-antialiased;
    }


    .colorOptingBox ul li[data-color="barn-red"] .color-pallet {
        background: #872f1f;
    }

    .colorOptingBox ul li[data-color="black"] .color-pallet {
        background: #000;
    }

    .colorOptingBox ul li[data-color="burgundy"] .color-pallet {
        background: #6f3a3a;
    }

    .colorOptingBox ul li[data-color="clay"] .color-pallet {
        background: #a99a89;
    }

    .colorOptingBox ul li[data-color="earth-brown"] .color-pallet {
        background: #50361a;
    }

    .colorOptingBox ul li[data-color="evergreen"] .color-pallet {
        background: #1a3a1e;
    }

    .colorOptingBox ul li[data-color="galvalume"] .color-pallet {
        background: #aeaeae;
    }

    .colorOptingBox ul li[data-color="pebble-beige"] .color-pallet {
        background: #ece3ce;
    }

    .colorOptingBox ul li[data-color="pewter-gray"] .color-pallet {
        background: #98948f;
        color: #000;
    }

    .colorOptingBox ul li[data-color="quaker-gray"] .color-pallet {
        background: #6e6c69;
    }

    .colorOptingBox ul li[data-color="rawhide"] .color-pallet {
        background: #d1b397;
    }

    .colorOptingBox ul li[data-color="royal-blue"] .color-pallet {
        background: #548dd1;
        color: #000;
    }

    .colorOptingBox ul li[data-color="sand-stone"] .color-pallet {
        background: #e2e2d5;
    }

    .colorOptingBox ul li[data-color="white"] .color-pallet {
        background: #fff;
        color: #000;
    }


    .wheel-pallet[data-class="burgundy"]:hover {
        transform: scale(1.2) rotate(-287.5deg);
        -ms-transform: scale(1.2) rotate(-287.5deg);
        -webkit-transform: scale(1.2) rotate(-287.5deg);
    }

    .wheel-pallet[data-class="burgundy"]:hover .inner-circle {
        transform: translate(-50%, -50%) rotate(67.5deg);
        -ms-transform: translate(-50%, -50%) rotate(67.5deg);
        -webkit-transform: translate(-50%, -50%) rotate(67.5deg);
    }

    .wheel-pallet[data-class="galvalume"]:hover {
        transform: scale(1.2) rotate(-185.5deg);
        -ms-transform: scale(1.2) rotate(-185.5deg);
        -webkit-transform: scale(1.2) rotate(-185.5deg);
    }

    .wheel-pallet[data-class="galvalume"]:hover .inner-circle {
        transform: translate(-50%, -50%) rotate(67.5deg);
        -ms-transform: translate(-50%, -50%) rotate(67.5deg);
        -webkit-transform: translate(-50%, -50%) rotate(67.5deg);
    }


    .wheel-pallet[data-class="rawhide"]:hover {
        transform: scale(1.2) rotate(-438.5deg);
        -ms-transform: scale(1.2) rotate(-438.5deg);
        -webkit-transform: scale(1.2) rotate(-438.5deg);
    }

    .wheel-pallet[data-class="rawhide"]:hover .inner-circle {
        transform: translate(-50%, -50%) rotate(67.5deg);
        -ms-transform: translate(-50%, -50%) rotate(67.5deg);
        -webkit-transform: translate(-50%, -50%) rotate(67.5deg);
    }

    .wheel-pallet[data-class="sand-stone"]:hover {
        transform: scale(1.2) rotate(-387.5deg);
        -ms-transform: scale(1.2) rotate(-387.5deg);
        -webkit-transform: scale(1.2) rotate(-387.5deg);
    }

    .wheel-pallet[data-class="sand-stone"]:hover .inner-circle {
        transform: translate(-50%, -50%) rotate(67.5deg);
        -ms-transform: translate(-50%, -50%) rotate(67.5deg);
        -webkit-transform: translate(-50%, -50%) rotate(67.5deg);
    }

    .wheel-pallet[data-class="royal-blue"]:hover {
        transform: scale(1.2) rotate(-413deg);
        -ms-transform: scale(1.2) rotate(-413deg);
        -webkit-transform: scale(1.2) rotate(-413deg);
    }

    .wheel-pallet[data-class="royal-blue"]:hover .inner-circle {
        transform: translate(-50%, -50%) rotate(90deg);
        -ms-transform: translate(-50%, -50%) rotate(90deg);
        -webkit-transform: translate(-50%, -50%) rotate(90deg);
    }


    .wheel-pallet[data-class="quaker-gray"]:hover {
        transform: scale(1.2) rotate(-465deg);
        -ms-transform: scale(1.2) rotate(-465deg);
        -webkit-transform: scale(1.2) rotate(-465deg);
    }

    .wheel-pallet[data-class="quaker-gray"]:hover .inner-circle {
        transform: translate(-50%, -50%) rotate(135deg);
        -ms-transform: translate(-50%, -50%) rotate(135deg);
        -webkit-transform: translate(-50%, -50%) rotate(135deg);
    }

    .wheel-pallet[data-class="pewter-gray"]:hover {
        transform: scale(1.2) rotate(-131.5deg);
        -ms-transform: scale(1.2) rotate(-131.5deg);
        -webkit-transform: scale(1.2) rotate(-131.5deg);
    }

    .wheel-pallet[data-class="pewter-gray"]:hover .inner-circle {
        transform: translate(-50%, -50%) rotate(157.5deg);
        -ms-transform: translate(-50%, -50%) rotate(157.5deg);
        -webkit-transform: translate(-50%, -50%) rotate(157.5deg);
    }

    .wheel-pallet[data-class="pebble-beige"]:hover {
        transform: scale(1.2) rotate(-158deg);
        -ms-transform: scale(1.2) rotate(-158deg);
        -webkit-transform: scale(1.2) rotate(-158deg);
    }

    .wheel-pallet[data-class="pebble-beige"]:hover .inner-circle {
        transform: translate(-50%, -50%) rotate(180deg);
        -ms-transform: translate(-50%, -50%) rotate(180deg);
        -webkit-transform: translate(-50%, -50%) rotate(180deg);
    }

    .wheel-pallet[data-class="evergreen"]:hover {
        transform: scale(1.2) rotate(-210.5deg);
        -ms-transform: scale(1.2) rotate(-210.5deg);
        -webkit-transform: scale(1.2) rotate(-210.5deg);
    }

    .wheel-pallet[data-class="evergreen"]:hover .inner-circle {
        transform: translate(-50%, -50%) rotate(205.5deg);
        -ms-transform: translate(-50%, -50%) rotate(205.5deg);
        -webkit-transform: translate(-50%, -50%) rotate(205.5deg);
    }

    .wheel-pallet[data-class="earth-brown"]:hover {
        transform: scale(1.2) rotate(-236deg);
        -ms-transform: scale(1.2) rotate(-236deg);
        -webkit-transform: scale(1.2) rotate(-236deg);
    }

    .wheel-pallet[data-class="earth-brown"]:hover .inner-circle {
        transform: translate(-50%, -50%) rotate(225deg);
        -ms-transform: translate(-50%, -50%) rotate(225deg);
        -webkit-transform: translate(-50%, -50%) rotate(225deg);
    }

    .wheel-pallet[data-class="clay"]:hover {
        transform: scale(1.2) rotate(-262deg);
        -ms-transform: scale(1.2) rotate(-262deg);
        -webkit-transform: scale(1.2) rotate(-262deg);
    }

    .wheel-pallet[data-class="clay"]:hover .inner-circle {
        transform: translate(-50%, -50%) rotate(250deg);
        -ms-transform: translate(-50%, -50%) rotate(250deg);
        -webkit-transform: translate(-50%, -50%) rotate(250deg);
    }


    .wheel-pallet[data-class="barn-red"]:hover {
        transform: scale(1.2) rotate(-336deg);
        -ms-transform: scale(1.2) rotate(-336deg);
        -webkit-transform: scale(1.2) rotate(-336deg);
    }

    .wheel-pallet[data-class="barn-red"]:hover .inner-circle {
        transform: translate(-50%, -50%) rotate(292deg);
        -ms-transform: translate(-50%, -50%) rotate(292deg);
        -webkit-transform: translate(-50%, -50%) rotate(292deg);
    }

    .wheel-pallet[data-class="black"]:hover {
        transform: scale(1.2) rotate(-312deg);
        -ms-transform: scale(1.2) rotate(-312deg);
        -webkit-transform: scale(1.2) rotate(-312deg);
    }

    .wheel-pallet[data-class="black"]:hover .inner-circle {
        transform: translate(-50%, -50%) rotate(315deg);
        -ms-transform: translate(-50%, -50%) rotate(315deg);
        -webkit-transform: translate(-50%, -50%) rotate(315deg);
    }

    .wheel-pallet[data-class="white"]:hover {
        transform: scale(1.2) rotate(-362deg);
        -ms-transform: scale(1.2) rotate(-362deg);
        -webkit-transform: scale(1.2) rotate(-362deg);
    }

    .wheel-pallet[data-class="white"]:hover .inner-circle {
        transform: translate(-50%, -50%) rotate(337deg);
        -ms-transform: translate(-50%, -50%) rotate(337deg);
        -webkit-transform: translate(-50%, -50%) rotate(337deg);
    }

    .inner-circle {
        width: 70px;
        height: 70px;
        background: #262730;
        border-radius: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        z-index: 2;
        pointer-events: none;
    }

    .inner-circle span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        text-transform: uppercase;
    }



    .garage .wallswheel {
        right: auto;
        left: 1%;
        top: 63%;
    }

    .garage .roofwheel {
        right: auto;
        left: 6%;
        top: 13%;
    }

    .garage .trimwheel {
        right: 9%;
        top: 15%;
    }


    .carport .wallswheel {
        right: auto;
        left: 1%;
        top: 52%;
    }

    .carport .roofwheel {
        right: auto;
        left: 4%;
        top: 14%;
    }

    .carport .trimwheel {
        right: 9%;
        top: 51%;
    }

    .barn .wallswheel {
        left: 1%;
        top: 46%;
    }

    .barn .roofwheel {
        right: auto;
        left: 20%;
        top: 14%;
    }

    .barn .trimswheel {
        top: 33%;
        right: 10%;
    }

    .trimswheel {
        top: 50%;
        right: 14%;
    }

    .rightdir:after {
        left: auto;
        right: -122px;
        transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }


    .gotColor.colorOptingBox li .color-pallet {
        width: 12.85px;
    }

    .gotColor.colorOptingBox .wheel-pallet {
        transform: rotate(93deg);
        -ms-transform: rotate(93deg);
        -webkit-transform: rotate(93deg);
    }
    /*selected 1*/

    .gotColor.colorOptingBox[data-number="1"] li {
        transform-origin: 80px 80px;
        -ms-transform-origin: 80px 80px;
        -webkit-transform-origin: 80px 80px;
        z-index: 1;
        position: relative;
    }

    .gotColor.colorOptingBox[data-number="1"] li.selected {
        transform: rotate(264deg);
        -ms-transform: rotate(264deg);
        -webkit-transform: rotate(264deg);
        z-index: 0;
    }

    .gotColor.colorOptingBox[data-number="1"] li.selected .color-pallet {
        width: 196px;
        left: -11px;
        top: 31px;
        height: 88px;
    }

    .gotColor.colorOptingBox[data-number="1"] li:nth-child(2) {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    .gotColor.colorOptingBox[data-number="1"] li:nth-child(3) {
        transform: rotate(14.85deg);
        -ms-transform: rotate(14.85deg);
        -webkit-transform: rotate(14.85deg);
    }

    .gotColor.colorOptingBox[data-number="1"] li:nth-child(4) {
        transform: rotate(27.7deg);
        -ms-transform: rotate(27.7deg);
        -webkit-transform: rotate(27.7deg);
    }

    .gotColor.colorOptingBox[data-number="1"] li:nth-child(5) {
        transform: rotate(38.55deg);
        -ms-transform: rotate(38.55deg);
        -webkit-transform: rotate(38.55deg);
    }

    .gotColor.colorOptingBox[data-number="1"] li:nth-child(6) {
        transform: rotate(53.4deg);
        -ms-transform: rotate(53.4deg);
        -webkit-transform: rotate(53.4deg);
    }

    .gotColor.colorOptingBox[data-number="1"] li:nth-child(7) {
        transform: rotate(67.25deg);
        -ms-transform: rotate(67.25deg);
        -webkit-transform: rotate(67.25deg);
    }

    .gotColor.colorOptingBox[data-number="1"] li:nth-child(8) {
        transform: rotate(82.1deg);
        -ms-transform: rotate(82.1deg);
        -webkit-transform: rotate(82.1deg);
    }

    .gotColor.colorOptingBox[data-number="1"] li:nth-child(9) {
        transform: rotate(96.95deg);
        -ms-transform: rotate(96.95deg);
        -webkit-transform: rotate(96.95deg);
    }

    .gotColor.colorOptingBox[data-number="1"] li:nth-child(10) {
        transform: rotate(111.8deg);
        -ms-transform: rotate(111.8deg);
        -webkit-transform: rotate(111.8deg);
    }

    .gotColor.colorOptingBox[data-number="1"] li:nth-child(11) {
        transform: rotate(126.65deg);
        -ms-transform: rotate(126.65deg);
        -webkit-transform: rotate(126.65deg);
    }

    .gotColor.colorOptingBox[data-number="1"] li:nth-child(12) {
        transform: rotate(142.5deg);
        -ms-transform: rotate(142.5deg);
        -webkit-transform: rotate(142.5deg);
    }

    .gotColor.colorOptingBox[data-number="1"] li:nth-child(13) {
        transform: rotate(157.35deg);
        -ms-transform: rotate(157.35deg);
        -webkit-transform: rotate(157.35deg);
    }

    .gotColor.colorOptingBox[data-number="1"] li:nth-child(14) {
        transform: rotate(173.2deg);
        -ms-transform: rotate(173.2deg);
        -webkit-transform: rotate(173.2deg);
    }
    /*selected 2*/

    .gotColor.colorOptingBox[data-number="2"] li {
        transform-origin: 80px 80px;
        -ms-transform-origin: 80px 80px;
        -webkit-transform-origin: 80px 80px;
        z-index: 1;
        position: relative;
    }

    .gotColor.colorOptingBox[data-number="2"] li.selected {
        transform: rotate(264deg);
        -ms-transform: rotate(264deg);
        -webkit-transform: rotate(264deg);
        z-index: 0;
    }

    .gotColor.colorOptingBox[data-number="2"] li.selected .color-pallet {
        width: 196px;
        left: -11px;
        top: 31px;
        height: 88px;
    }

    .gotColor.colorOptingBox[data-number="2"] li:nth-child(1) {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    .gotColor.colorOptingBox[data-number="2"] li:nth-child(3) {
        transform: rotate(14.85deg);
        -ms-transform: rotate(14.85deg);
        -webkit-transform: rotate(14.85deg);
    }

    .gotColor.colorOptingBox[data-number="2"] li:nth-child(4) {
        transform: rotate(27.7deg);
        -ms-transform: rotate(27.7deg);
        -webkit-transform: rotate(27.7deg);
    }

    .gotColor.colorOptingBox[data-number="2"] li:nth-child(5) {
        transform: rotate(38.55deg);
        -ms-transform: rotate(38.55deg);
        -webkit-transform: rotate(38.55deg);
    }

    .gotColor.colorOptingBox[data-number="2"] li:nth-child(6) {
        transform: rotate(53.4deg);
        -ms-transform: rotate(53.4deg);
        -webkit-transform: rotate(53.4deg);
    }

    .gotColor.colorOptingBox[data-number="2"] li:nth-child(7) {
        transform: rotate(67.25deg);
        -ms-transform: rotate(67.25deg);
        -webkit-transform: rotate(67.25deg);
    }

    .gotColor.colorOptingBox[data-number="2"] li:nth-child(8) {
        transform: rotate(82.1deg);
        -ms-transform: rotate(82.1deg);
        -webkit-transform: rotate(82.1deg);
    }

    .gotColor.colorOptingBox[data-number="2"] li:nth-child(9) {
        transform: rotate(96.95deg);
        -ms-transform: rotate(96.95deg);
        -webkit-transform: rotate(96.95deg);
    }

    .gotColor.colorOptingBox[data-number="2"] li:nth-child(10) {
        transform: rotate(111.8deg);
        -ms-transform: rotate(111.8deg);
        -webkit-transform: rotate(111.8deg);
    }

    .gotColor.colorOptingBox[data-number="2"] li:nth-child(11) {
        transform: rotate(126.65deg);
        -ms-transform: rotate(126.65deg);
        -webkit-transform: rotate(126.65deg);
    }

    .gotColor.colorOptingBox[data-number="2"] li:nth-child(12) {
        transform: rotate(142.5deg);
        -ms-transform: rotate(142.5deg);
        -webkit-transform: rotate(142.5deg);
    }

    .gotColor.colorOptingBox[data-number="2"] li:nth-child(13) {
        transform: rotate(157.35deg);
        -ms-transform: rotate(157.35deg);
        -webkit-transform: rotate(157.35deg);
    }

    .gotColor.colorOptingBox[data-number="2"] li:nth-child(14) {
        transform: rotate(173.2deg);
        -ms-transform: rotate(173.2deg);
        -webkit-transform: rotate(173.2deg);
    }
    /*selected 3*/

    .gotColor.colorOptingBox[data-number="3"] li {
        transform-origin: 80px 80px;
        -ms-transform-origin: 80px 80px;
        -webkit-transform-origin: 80px 80px;
        z-index: 1;
        position: relative;
    }

    .gotColor.colorOptingBox[data-number="3"] li.selected {
        transform: rotate(264deg);
        -ms-transform: rotate(264deg);
        -webkit-transform: rotate(264deg);
        z-index: 0;
    }

    .gotColor.colorOptingBox[data-number="3"] li.selected .color-pallet {
        width: 196px;
        left: -11px;
        top: 31px;
        height: 88px;
    }

    .gotColor.colorOptingBox[data-number="3"] li:nth-child(1) {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    .gotColor.colorOptingBox[data-number="3"] li:nth-child(2) {
        transform: rotate(14.85deg);
        -ms-transform: rotate(14.85deg);
        -webkit-transform: rotate(14.85deg);
    }

    .gotColor.colorOptingBox[data-number="3"] li:nth-child(4) {
        transform: rotate(27.7deg);
        -ms-transform: rotate(27.7deg);
        -webkit-transform: rotate(27.7deg);
    }

    .gotColor.colorOptingBox[data-number="3"] li:nth-child(5) {
        transform: rotate(38.55deg);
        -ms-transform: rotate(38.55deg);
        -webkit-transform: rotate(38.55deg);
    }

    .gotColor.colorOptingBox[data-number="3"] li:nth-child(6) {
        transform: rotate(53.4deg);
        -ms-transform: rotate(53.4deg);
        -webkit-transform: rotate(53.4deg);
    }

    .gotColor.colorOptingBox[data-number="3"] li:nth-child(7) {
        transform: rotate(67.25deg);
        -ms-transform: rotate(67.25deg);
        -webkit-transform: rotate(67.25deg);
    }

    .gotColor.colorOptingBox[data-number="3"] li:nth-child(8) {
        transform: rotate(82.1deg);
        -ms-transform: rotate(82.1deg);
        -webkit-transform: rotate(82.1deg);
    }

    .gotColor.colorOptingBox[data-number="3"] li:nth-child(9) {
        transform: rotate(96.95deg);
        -ms-transform: rotate(96.95deg);
        -webkit-transform: rotate(96.95deg);
    }

    .gotColor.colorOptingBox[data-number="3"] li:nth-child(10) {
        transform: rotate(111.8deg);
        -ms-transform: rotate(111.8deg);
        -webkit-transform: rotate(111.8deg);
    }

    .gotColor.colorOptingBox[data-number="3"] li:nth-child(11) {
        transform: rotate(126.65deg);
        -ms-transform: rotate(126.65deg);
        -webkit-transform: rotate(126.65deg);
    }

    .gotColor.colorOptingBox[data-number="3"] li:nth-child(12) {
        transform: rotate(142.5deg);
        -ms-transform: rotate(142.5deg);
        -webkit-transform: rotate(142.5deg);
    }

    .gotColor.colorOptingBox[data-number="3"] li:nth-child(13) {
        transform: rotate(157.35deg);
        -ms-transform: rotate(157.35deg);
        -webkit-transform: rotate(157.35deg);
    }

    .gotColor.colorOptingBox[data-number="3"] li:nth-child(14) {
        transform: rotate(173.2deg);
        -ms-transform: rotate(173.2deg);
        -webkit-transform: rotate(173.2deg);
    }
    /*selected 4*/

    .gotColor.colorOptingBox[data-number="4"] li {
        transform-origin: 80px 80px;
        -ms-transform-origin: 80px 80px;
        -webkit-transform-origin: 80px 80px;
        z-index: 1;
        position: relative;
    }

    .gotColor.colorOptingBox[data-number="4"] li.selected {
        transform: rotate(264deg);
        -ms-transform: rotate(264deg);
        -webkit-transform: rotate(264deg);
        z-index: 0;
    }

    .gotColor.colorOptingBox[data-number="4"] li.selected .color-pallet {
        width: 196px;
        left: -11px;
        top: 31px;
        height: 88px;
    }

    .gotColor.colorOptingBox[data-number="4"] li:nth-child(1) {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    .gotColor.colorOptingBox[data-number="4"] li:nth-child(2) {
        transform: rotate(14.85deg);
        -ms-transform: rotate(14.85deg);
        -webkit-transform: rotate(14.85deg);
    }

    .gotColor.colorOptingBox[data-number="4"] li:nth-child(3) {
        transform: rotate(27.7deg);
        -ms-transform: rotate(27.7deg);
        -webkit-transform: rotate(27.7deg);
    }

    .gotColor.colorOptingBox[data-number="4"] li:nth-child(5) {
        transform: rotate(38.55deg);
        -ms-transform: rotate(38.55deg);
        -webkit-transform: rotate(38.55deg);
    }

    .gotColor.colorOptingBox[data-number="4"] li:nth-child(6) {
        transform: rotate(53.4deg);
        -ms-transform: rotate(53.4deg);
        -webkit-transform: rotate(53.4deg);
    }

    .gotColor.colorOptingBox[data-number="4"] li:nth-child(7) {
        transform: rotate(67.25deg);
        -ms-transform: rotate(67.25deg);
        -webkit-transform: rotate(67.25deg);
    }

    .gotColor.colorOptingBox[data-number="4"] li:nth-child(8) {
        transform: rotate(82.1deg);
        -ms-transform: rotate(82.1deg);
        -webkit-transform: rotate(82.1deg);
    }

    .gotColor.colorOptingBox[data-number="4"] li:nth-child(9) {
        transform: rotate(96.95deg);
        -ms-transform: rotate(96.95deg);
        -webkit-transform: rotate(96.95deg);
    }

    .gotColor.colorOptingBox[data-number="4"] li:nth-child(10) {
        transform: rotate(111.8deg);
        -ms-transform: rotate(111.8deg);
        -webkit-transform: rotate(111.8deg);
    }

    .gotColor.colorOptingBox[data-number="4"] li:nth-child(11) {
        transform: rotate(126.65deg);
        -ms-transform: rotate(126.65deg);
        -webkit-transform: rotate(126.65deg);
    }

    .gotColor.colorOptingBox[data-number="4"] li:nth-child(12) {
        transform: rotate(142.5deg);
        -ms-transform: rotate(142.5deg);
        -webkit-transform: rotate(142.5deg);
    }

    .gotColor.colorOptingBox[data-number="4"] li:nth-child(13) {
        transform: rotate(157.35deg);
        -ms-transform: rotate(157.35deg);
        -webkit-transform: rotate(157.35deg);
    }

    .gotColor.colorOptingBox[data-number="4"] li:nth-child(14) {
        transform: rotate(173.2deg);
        -ms-transform: rotate(173.2deg);
        -webkit-transform: rotate(173.2deg);
    }
    /*selected 5*/

    .gotColor.colorOptingBox[data-number="5"] li {
        transform-origin: 80px 80px;
        -ms-transform-origin: 80px 80px;
        -webkit-transform-origin: 80px 80px;
        z-index: 1;
        position: relative;
    }

    .gotColor.colorOptingBox[data-number="5"] li.selected {
        transform: rotate(264deg);
        -ms-transform: rotate(264deg);
        -webkit-transform: rotate(264deg);
        z-index: 0;
    }

    .gotColor.colorOptingBox[data-number="5"] li.selected .color-pallet {
        width: 196px;
        left: -11px;
        top: 31px;
        height: 88px;
    }

    .gotColor.colorOptingBox[data-number="5"] li:nth-child(1) {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    .gotColor.colorOptingBox[data-number="5"] li:nth-child(2) {
        transform: rotate(14.85deg);
        -ms-transform: rotate(14.85deg);
        -webkit-transform: rotate(14.85deg);
    }

    .gotColor.colorOptingBox[data-number="5"] li:nth-child(3) {
        transform: rotate(27.7deg);
        -ms-transform: rotate(27.7deg);
        -webkit-transform: rotate(27.7deg);
    }

    .gotColor.colorOptingBox[data-number="5"] li:nth-child(4) {
        transform: rotate(38.55deg);
        -ms-transform: rotate(38.55deg);
        -webkit-transform: rotate(38.55deg);
    }

    .gotColor.colorOptingBox[data-number="5"] li:nth-child(6) {
        transform: rotate(53.4deg);
        -ms-transform: rotate(53.4deg);
        -webkit-transform: rotate(53.4deg);
    }

    .gotColor.colorOptingBox[data-number="5"] li:nth-child(7) {
        transform: rotate(67.25deg);
        -ms-transform: rotate(67.25deg);
        -webkit-transform: rotate(67.25deg);
    }

    .gotColor.colorOptingBox[data-number="5"] li:nth-child(8) {
        transform: rotate(82.1deg);
        -ms-transform: rotate(82.1deg);
        -webkit-transform: rotate(82.1deg);
    }

    .gotColor.colorOptingBox[data-number="5"] li:nth-child(9) {
        transform: rotate(96.95deg);
        -ms-transform: rotate(96.95deg);
        -webkit-transform: rotate(96.95deg);
    }

    .gotColor.colorOptingBox[data-number="5"] li:nth-child(10) {
        transform: rotate(111.8deg);
        -ms-transform: rotate(111.8deg);
        -webkit-transform: rotate(111.8deg);
    }

    .gotColor.colorOptingBox[data-number="5"] li:nth-child(11) {
        transform: rotate(126.65deg);
        -ms-transform: rotate(126.65deg);
        -webkit-transform: rotate(126.65deg);
    }

    .gotColor.colorOptingBox[data-number="5"] li:nth-child(12) {
        transform: rotate(142.5deg);
        -ms-transform: rotate(142.5deg);
        -webkit-transform: rotate(142.5deg);
    }

    .gotColor.colorOptingBox[data-number="5"] li:nth-child(13) {
        transform: rotate(157.35deg);
        -ms-transform: rotate(157.35deg);
        -webkit-transform: rotate(157.35deg);
    }

    .gotColor.colorOptingBox[data-number="5"] li:nth-child(14) {
        transform: rotate(173.2deg);
        -ms-transform: rotate(173.2deg);
        -webkit-transform: rotate(173.2deg);
    }
    /*selected 6*/

    .gotColor.colorOptingBox[data-number="6"] li {
        transform-origin: 80px 80px;
        -ms-transform-origin: 80px 80px;
        -webkit-transform-origin: 80px 80px;
        z-index: 1;
        position: relative;
    }

    .gotColor.colorOptingBox[data-number="6"] li.selected {
        transform: rotate(264deg);
        -ms-transform: rotate(264deg);
        -webkit-transform: rotate(264deg);
        z-index: 0;
    }

    .gotColor.colorOptingBox[data-number="6"] li.selected .color-pallet {
        width: 196px;
        left: -11px;
        top: 31px;
        height: 88px;
    }

    .gotColor.colorOptingBox[data-number="6"] li:nth-child(1) {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    .gotColor.colorOptingBox[data-number="6"] li:nth-child(2) {
        transform: rotate(14.85deg);
        -ms-transform: rotate(14.85deg);
        -webkit-transform: rotate(14.85deg);
    }

    .gotColor.colorOptingBox[data-number="6"] li:nth-child(3) {
        transform: rotate(27.7deg);
        -ms-transform: rotate(27.7deg);
        -webkit-transform: rotate(27.7deg);
    }

    .gotColor.colorOptingBox[data-number="6"] li:nth-child(4) {
        transform: rotate(38.55deg);
        -ms-transform: rotate(38.55deg);
        -webkit-transform: rotate(38.55deg);
    }

    .gotColor.colorOptingBox[data-number="6"] li:nth-child(5) {
        transform: rotate(53.4deg);
        -ms-transform: rotate(53.4deg);
        -webkit-transform: rotate(53.4deg);
    }

    .gotColor.colorOptingBox[data-number="6"] li:nth-child(7) {
        transform: rotate(67.25deg);
        -ms-transform: rotate(67.25deg);
        -webkit-transform: rotate(67.25deg);
    }

    .gotColor.colorOptingBox[data-number="6"] li:nth-child(8) {
        transform: rotate(82.1deg);
        -ms-transform: rotate(82.1deg);
        -webkit-transform: rotate(82.1deg);
    }

    .gotColor.colorOptingBox[data-number="6"] li:nth-child(9) {
        transform: rotate(96.95deg);
        -ms-transform: rotate(96.95deg);
        -webkit-transform: rotate(96.95deg);
    }

    .gotColor.colorOptingBox[data-number="6"] li:nth-child(10) {
        transform: rotate(111.8deg);
        -ms-transform: rotate(111.8deg);
        -webkit-transform: rotate(111.8deg);
    }

    .gotColor.colorOptingBox[data-number="6"] li:nth-child(11) {
        transform: rotate(126.65deg);
        -ms-transform: rotate(126.65deg);
        -webkit-transform: rotate(126.65deg);
    }

    .gotColor.colorOptingBox[data-number="6"] li:nth-child(12) {
        transform: rotate(142.5deg);
        -ms-transform: rotate(142.5deg);
        -webkit-transform: rotate(142.5deg);
    }

    .gotColor.colorOptingBox[data-number="6"] li:nth-child(13) {
        transform: rotate(157.35deg);
        -ms-transform: rotate(157.35deg);
        -webkit-transform: rotate(157.35deg);
    }

    .gotColor.colorOptingBox[data-number="6"] li:nth-child(14) {
        transform: rotate(173.2deg);
        -ms-transform: rotate(173.2deg);
        -webkit-transform: rotate(173.2deg);
    }
    /*selected 7*/

    .gotColor.colorOptingBox[data-number="7"] li {
        transform-origin: 80px 80px;
        -ms-transform-origin: 80px 80px;
        -webkit-transform-origin: 80px 80px;
        z-index: 1;
        position: relative;
    }

    .gotColor.colorOptingBox[data-number="7"] li.selected {
        transform: rotate(264deg);
        -ms-transform: rotate(264deg);
        -webkit-transform: rotate(264deg);
        z-index: 0;
    }

    .gotColor.colorOptingBox[data-number="7"] li.selected .color-pallet {
        width: 196px;
        left: -11px;
        top: 31px;
        height: 88px;
    }

    .gotColor.colorOptingBox[data-number="7"] li:nth-child(1) {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    .gotColor.colorOptingBox[data-number="3"] li:nth-child(2) {
        transform: rotate(14.85deg);
        -ms-transform: rotate(14.85deg);
        -webkit-transform: rotate(14.85deg);
    }

    .gotColor.colorOptingBox[data-number="7"] li:nth-child(3) {
        transform: rotate(27.7deg);
        -ms-transform: rotate(27.7deg);
        -webkit-transform: rotate(27.7deg);
    }

    .gotColor.colorOptingBox[data-number="7"] li:nth-child(4) {
        transform: rotate(38.55deg);
        -ms-transform: rotate(38.55deg);
        -webkit-transform: rotate(38.55deg);
    }

    .gotColor.colorOptingBox[data-number="7"] li:nth-child(5) {
        transform: rotate(53.4deg);
        -ms-transform: rotate(53.4deg);
        -webkit-transform: rotate(53.4deg);
    }

    .gotColor.colorOptingBox[data-number="7"] li:nth-child(6) {
        transform: rotate(67.25deg);
        -ms-transform: rotate(67.25deg);
        -webkit-transform: rotate(67.25deg);
    }

    .gotColor.colorOptingBox[data-number="7"] li:nth-child(8) {
        transform: rotate(82.1deg);
        -ms-transform: rotate(82.1deg);
        -webkit-transform: rotate(82.1deg);
    }

    .gotColor.colorOptingBox[data-number="7"] li:nth-child(9) {
        transform: rotate(96.95deg);
        -ms-transform: rotate(96.95deg);
        -webkit-transform: rotate(96.95deg);
    }

    .gotColor.colorOptingBox[data-number="7"] li:nth-child(10) {
        transform: rotate(111.8deg);
        -ms-transform: rotate(111.8deg);
        -webkit-transform: rotate(111.8deg);
    }

    .gotColor.colorOptingBox[data-number="7"] li:nth-child(11) {
        transform: rotate(126.65deg);
        -ms-transform: rotate(126.65deg);
        -webkit-transform: rotate(126.65deg);
    }

    .gotColor.colorOptingBox[data-number="7"] li:nth-child(12) {
        transform: rotate(142.5deg);
        -ms-transform: rotate(142.5deg);
        -webkit-transform: rotate(142.5deg);
    }

    .gotColor.colorOptingBox[data-number="7"] li:nth-child(13) {
        transform: rotate(157.35deg);
        -ms-transform: rotate(157.35deg);
        -webkit-transform: rotate(157.35deg);
    }

    .gotColor.colorOptingBox[data-number="7"] li:nth-child(14) {
        transform: rotate(173.2deg);
        -ms-transform: rotate(173.2deg);
        -webkit-transform: rotate(173.2deg);
    }
    /*selected 8*/

    .gotColor.colorOptingBox[data-number="8"] li {
        transform-origin: 80px 80px;
        -ms-transform-origin: 80px 80px;
        -webkit-transform-origin: 80px 80px;
        z-index: 1;
        position: relative;
    }

    .gotColor.colorOptingBox[data-number="8"] li.selected {
        transform: rotate(264deg);
        -ms-transform: rotate(264deg);
        -webkit-transform: rotate(264deg);
        z-index: 0;
    }

    .gotColor.colorOptingBox[data-number="8"] li.selected .color-pallet {
        width: 196px;
        left: -11px;
        top: 31px;
        height: 88px;
    }

    .gotColor.colorOptingBox[data-number="8"] li:nth-child(1) {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    .gotColor.colorOptingBox[data-number="8"] li:nth-child(2) {
        transform: rotate(14.85deg);
        -ms-transform: rotate(14.85deg);
        -webkit-transform: rotate(14.85deg);
    }

    .gotColor.colorOptingBox[data-number="8"] li:nth-child(3) {
        transform: rotate(27.7deg);
        -ms-transform: rotate(27.7deg);
        -webkit-transform: rotate(27.7deg);
    }

    .gotColor.colorOptingBox[data-number="8"] li:nth-child(4) {
        transform: rotate(38.55deg);
        -ms-transform: rotate(38.55deg);
        -webkit-transform: rotate(38.55deg);
    }

    .gotColor.colorOptingBox[data-number="8"] li:nth-child(5) {
        transform: rotate(53.4deg);
        -ms-transform: rotate(53.4deg);
        -webkit-transform: rotate(53.4deg);
    }

    .gotColor.colorOptingBox[data-number="8"] li:nth-child(6) {
        transform: rotate(67.25deg);
        -ms-transform: rotate(67.25deg);
        -webkit-transform: rotate(67.25deg);
    }

    .gotColor.colorOptingBox[data-number="8"] li:nth-child(7) {
        transform: rotate(82.1deg);
        -ms-transform: rotate(82.1deg);
        -webkit-transform: rotate(82.1deg);
    }

    .gotColor.colorOptingBox[data-number="8"] li:nth-child(9) {
        transform: rotate(96.95deg);
        -ms-transform: rotate(96.95deg);
        -webkit-transform: rotate(96.95deg);
    }

    .gotColor.colorOptingBox[data-number="8"] li:nth-child(10) {
        transform: rotate(111.8deg);
        -ms-transform: rotate(111.8deg);
        -webkit-transform: rotate(111.8deg);
    }

    .gotColor.colorOptingBox[data-number="8"] li:nth-child(11) {
        transform: rotate(126.65deg);
        -ms-transform: rotate(126.65deg);
        -webkit-transform: rotate(126.65deg);
    }

    .gotColor.colorOptingBox[data-number="8"] li:nth-child(12) {
        transform: rotate(142.5deg);
        -ms-transform: rotate(142.5deg);
        -webkit-transform: rotate(142.5deg);
    }

    .gotColor.colorOptingBox[data-number="8"] li:nth-child(13) {
        transform: rotate(157.35deg);
        -ms-transform: rotate(157.35deg);
        -webkit-transform: rotate(157.35deg);
    }

    .gotColor.colorOptingBox[data-number="8"] li:nth-child(14) {
        transform: rotate(173.2deg);
        -ms-transform: rotate(173.2deg);
        -webkit-transform: rotate(173.2deg);
    }
    /*selected 9*/

    .gotColor.colorOptingBox[data-number="9"] li {
        transform-origin: 80px 80px;
        -ms-transform-origin: 80px 80px;
        -webkit-transform-origin: 80px 80px;
        z-index: 1;
        position: relative;
    }

    .gotColor.colorOptingBox[data-number="9"] li.selected {
        transform: rotate(264deg);
        -ms-transform: rotate(264deg);
        -webkit-transform: rotate(264deg);
        z-index: 0;
    }

    .gotColor.colorOptingBox[data-number="9"] li.selected .color-pallet {
        width: 196px;
        left: -11px;
        top: 31px;
        height: 88px;
    }

    .gotColor.colorOptingBox[data-number="9"] li:nth-child(1) {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    .gotColor.colorOptingBox[data-number="9"] li:nth-child(2) {
        transform: rotate(14.85deg);
        -ms-transform: rotate(14.85deg);
        -webkit-transform: rotate(14.85deg);
    }

    .gotColor.colorOptingBox[data-number="9"] li:nth-child(3) {
        transform: rotate(27.7deg);
        -ms-transform: rotate(27.7deg);
        -webkit-transform: rotate(27.7deg);
    }

    .gotColor.colorOptingBox[data-number="9"] li:nth-child(4) {
        transform: rotate(38.55deg);
        -ms-transform: rotate(38.55deg);
        -webkit-transform: rotate(38.55deg);
    }

    .gotColor.colorOptingBox[data-number="9"] li:nth-child(5) {
        transform: rotate(53.4deg);
        -ms-transform: rotate(53.4deg);
        -webkit-transform: rotate(53.4deg);
    }

    .gotColor.colorOptingBox[data-number="9"] li:nth-child(6) {
        transform: rotate(67.25deg);
        -ms-transform: rotate(67.25deg);
        -webkit-transform: rotate(67.25deg);
    }

    .gotColor.colorOptingBox[data-number="9"] li:nth-child(7) {
        transform: rotate(82.1deg);
        -ms-transform: rotate(82.1deg);
        -webkit-transform: rotate(82.1deg);
    }

    .gotColor.colorOptingBox[data-number="9"] li:nth-child(8) {
        transform: rotate(96.95deg);
        -ms-transform: rotate(96.95deg);
        -webkit-transform: rotate(96.95deg);
    }

    .gotColor.colorOptingBox[data-number="9"] li:nth-child(10) {
        transform: rotate(111.8deg);
        -ms-transform: rotate(111.8deg);
        -webkit-transform: rotate(111.8deg);
    }

    .gotColor.colorOptingBox[data-number="9"] li:nth-child(11) {
        transform: rotate(126.65deg);
        -ms-transform: rotate(126.65deg);
        -webkit-transform: rotate(126.65deg);
    }

    .gotColor.colorOptingBox[data-number="9"] li:nth-child(12) {
        transform: rotate(142.5deg);
        -ms-transform: rotate(142.5deg);
        -webkit-transform: rotate(142.5deg);
    }

    .gotColor.colorOptingBox[data-number="9"] li:nth-child(13) {
        transform: rotate(157.35deg);
        -ms-transform: rotate(157.35deg);
        -webkit-transform: rotate(157.35deg);
    }

    .gotColor.colorOptingBox[data-number="9"] li:nth-child(14) {
        transform: rotate(173.2deg);
        -ms-transform: rotate(173.2deg);
        -webkit-transform: rotate(173.2deg);
    }
    /*selected 10*/

    .gotColor.colorOptingBox[data-number="10"] li {
        transform-origin: 80px 80px;
        -ms-transform-origin: 80px 80px;
        -webkit-transform-origin: 80px 80px;
        z-index: 1;
        position: relative;
    }

    .gotColor.colorOptingBox[data-number="10"] li.selected {
        transform: rotate(264deg);
        -ms-transform: rotate(264deg);
        -webkit-transform: rotate(264deg);
        z-index: 0;
    }

    .gotColor.colorOptingBox[data-number="10"] li.selected .color-pallet {
        width: 196px;
        left: -11px;
        top: 31px;
        height: 88px;
    }

    .gotColor.colorOptingBox[data-number="10"] li:nth-child(1) {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    .gotColor.colorOptingBox[data-number="10"] li:nth-child(2) {
        transform: rotate(14.85deg);
        -ms-transform: rotate(14.85deg);
        -webkit-transform: rotate(14.85deg);
    }

    .gotColor.colorOptingBox[data-number="10"] li:nth-child(3) {
        transform: rotate(27.7deg);
        -ms-transform: rotate(27.7deg);
        -webkit-transform: rotate(27.7deg);
    }

    .gotColor.colorOptingBox[data-number="10"] li:nth-child(4) {
        transform: rotate(38.55deg);
        -ms-transform: rotate(38.55deg);
        -webkit-transform: rotate(38.55deg);
    }

    .gotColor.colorOptingBox[data-number="10"] li:nth-child(5) {
        transform: rotate(53.4deg);
        -ms-transform: rotate(53.4deg);
        -webkit-transform: rotate(53.4deg);
    }

    .gotColor.colorOptingBox[data-number="10"] li:nth-child(6) {
        transform: rotate(67.25deg);
        -ms-transform: rotate(67.25deg);
        -webkit-transform: rotate(67.25deg);
    }

    .gotColor.colorOptingBox[data-number="10"] li:nth-child(7) {
        transform: rotate(82.1deg);
        -ms-transform: rotate(82.1deg);
        -webkit-transform: rotate(82.1deg);
    }

    .gotColor.colorOptingBox[data-number="10"] li:nth-child(8) {
        transform: rotate(96.95deg);
        -ms-transform: rotate(96.95deg);
        -webkit-transform: rotate(96.95deg);
    }

    .gotColor.colorOptingBox[data-number="10"] li:nth-child(9) {
        transform: rotate(111.8deg);
        -ms-transform: rotate(111.8deg);
        -webkit-transform: rotate(111.8deg);
    }

    .gotColor.colorOptingBox[data-number="10"] li:nth-child(11) {
        transform: rotate(126.65deg);
        -ms-transform: rotate(126.65deg);
        -webkit-transform: rotate(126.65deg);
    }

    .gotColor.colorOptingBox[data-number="10"] li:nth-child(12) {
        transform: rotate(142.5deg);
        -ms-transform: rotate(142.5deg);
        -webkit-transform: rotate(142.5deg);
    }

    .gotColor.colorOptingBox[data-number="10"] li:nth-child(13) {
        transform: rotate(157.35deg);
        -ms-transform: rotate(157.35deg);
        -webkit-transform: rotate(157.35deg);
    }

    .gotColor.colorOptingBox[data-number="10"] li:nth-child(14) {
        transform: rotate(173.2deg);
        -ms-transform: rotate(173.2deg);
        -webkit-transform: rotate(173.2deg);
    }
    /*selected 11*/

    .gotColor.colorOptingBox[data-number="11"] li {
        transform-origin: 80px 80px;
        -ms-transform-origin: 80px 80px;
        -webkit-transform-origin: 80px 80px;
        z-index: 1;
        position: relative;
    }

    .gotColor.colorOptingBox[data-number="11"] li.selected {
        transform: rotate(264deg);
        -ms-transform: rotate(264deg);
        -webkit-transform: rotate(264deg);
        z-index: 0;
    }

    .gotColor.colorOptingBox[data-number="11"] li.selected .color-pallet {
        width: 196px;
        left: -11px;
        top: 31px;
        height: 88px;
    }

    .gotColor.colorOptingBox[data-number="11"] li:nth-child(1) {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    .gotColor.colorOptingBox[data-number="11"] li:nth-child(2) {
        transform: rotate(14.85deg);
        -ms-transform: rotate(14.85deg);
        -webkit-transform: rotate(14.85deg);
    }

    .gotColor.colorOptingBox[data-number="11"] li:nth-child(3) {
        transform: rotate(27.7deg);
        -ms-transform: rotate(27.7deg);
        -webkit-transform: rotate(27.7deg);
    }

    .gotColor.colorOptingBox[data-number="11"] li:nth-child(4) {
        transform: rotate(38.55deg);
        -ms-transform: rotate(38.55deg);
        -webkit-transform: rotate(38.55deg);
    }

    .gotColor.colorOptingBox[data-number="11"] li:nth-child(5) {
        transform: rotate(53.4deg);
        -ms-transform: rotate(53.4deg);
        -webkit-transform: rotate(53.4deg);
    }

    .gotColor.colorOptingBox[data-number="11"] li:nth-child(6) {
        transform: rotate(67.25deg);
        -ms-transform: rotate(67.25deg);
        -webkit-transform: rotate(67.25deg);
    }

    .gotColor.colorOptingBox[data-number="11"] li:nth-child(7) {
        transform: rotate(82.1deg);
        -ms-transform: rotate(82.1deg);
        -webkit-transform: rotate(82.1deg);
    }

    .gotColor.colorOptingBox[data-number="11"] li:nth-child(8) {
        transform: rotate(96.95deg);
        -ms-transform: rotate(96.95deg);
        -webkit-transform: rotate(96.95deg);
    }

    .gotColor.colorOptingBox[data-number="11"] li:nth-child(9) {
        transform: rotate(111.8deg);
        -ms-transform: rotate(111.8deg);
        -webkit-transform: rotate(111.8deg);
    }

    .gotColor.colorOptingBox[data-number="11"] li:nth-child(10) {
        transform: rotate(126.65deg);
        -ms-transform: rotate(126.65deg);
        -webkit-transform: rotate(126.65deg);
    }

    .gotColor.colorOptingBox[data-number="11"] li:nth-child(12) {
        transform: rotate(142.5deg);
        -ms-transform: rotate(142.5deg);
        -webkit-transform: rotate(142.5deg);
    }

    .gotColor.colorOptingBox[data-number="11"] li:nth-child(13) {
        transform: rotate(157.35deg);
        -ms-transform: rotate(157.35deg);
        -webkit-transform: rotate(157.35deg);
    }

    .gotColor.colorOptingBox[data-number="11"] li:nth-child(14) {
        transform: rotate(173.2deg);
        -ms-transform: rotate(173.2deg);
        -webkit-transform: rotate(173.2deg);
    }
    /*selected 3*/

    .gotColor.colorOptingBox[data-number="12"] li {
        transform-origin: 80px 80px;
        -ms-transform-origin: 80px 80px;
        -webkit-transform-origin: 80px 80px;
        z-index: 1;
        position: relative;
    }

    .gotColor.colorOptingBox[data-number="12"] li.selected {
        transform: rotate(264deg);
        -ms-transform: rotate(264deg);
        -webkit-transform: rotate(264deg);
        z-index: 0;
    }

    .gotColor.colorOptingBox[data-number="12"] li.selected .color-pallet {
        width: 196px;
        left: -11px;
        top: 31px;
        height: 88px;
    }

    .gotColor.colorOptingBox[data-number="12"] li:nth-child(1) {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    .gotColor.colorOptingBox[data-number="12"] li:nth-child(2) {
        transform: rotate(14.85deg);
        -ms-transform: rotate(14.85deg);
        -webkit-transform: rotate(14.85deg);
    }

    .gotColor.colorOptingBox[data-number="12"] li:nth-child(3) {
        transform: rotate(27.7deg);
        -ms-transform: rotate(27.7deg);
        -webkit-transform: rotate(27.7deg);
    }

    .gotColor.colorOptingBox[data-number="12"] li:nth-child(4) {
        transform: rotate(38.55deg);
        -ms-transform: rotate(38.55deg);
        -webkit-transform: rotate(38.55deg);
    }

    .gotColor.colorOptingBox[data-number="12"] li:nth-child(5) {
        transform: rotate(53.4deg);
        -ms-transform: rotate(53.4deg);
        -webkit-transform: rotate(53.4deg);
    }

    .gotColor.colorOptingBox[data-number="12"] li:nth-child(6) {
        transform: rotate(67.25deg);
        -ms-transform: rotate(67.25deg);
        -webkit-transform: rotate(67.25deg);
    }

    .gotColor.colorOptingBox[data-number="12"] li:nth-child(7) {
        transform: rotate(82.1deg);
        -ms-transform: rotate(82.1deg);
        -webkit-transform: rotate(82.1deg);
    }

    .gotColor.colorOptingBox[data-number="12"] li:nth-child(8) {
        transform: rotate(96.95deg);
        -ms-transform: rotate(96.95deg);
        -webkit-transform: rotate(96.95deg);
    }

    .gotColor.colorOptingBox[data-number="12"] li:nth-child(9) {
        transform: rotate(111.8deg);
        -ms-transform: rotate(111.8deg);
        -webkit-transform: rotate(111.8deg);
    }

    .gotColor.colorOptingBox[data-number="12"] li:nth-child(10) {
        transform: rotate(126.65deg);
        -ms-transform: rotate(126.65deg);
        -webkit-transform: rotate(126.65deg);
    }

    .gotColor.colorOptingBox[data-number="12"] li:nth-child(11) {
        transform: rotate(142.5deg);
        -ms-transform: rotate(142.5deg);
        -webkit-transform: rotate(142.5deg);
    }

    .gotColor.colorOptingBox[data-number="12"] li:nth-child(13) {
        transform: rotate(157.35deg);
        -ms-transform: rotate(157.35deg);
        -webkit-transform: rotate(157.35deg);
    }

    .gotColor.colorOptingBox[data-number="12"] li:nth-child(14) {
        transform: rotate(173.2deg);
        -ms-transform: rotate(173.2deg);
        -webkit-transform: rotate(173.2deg);
    }
    /*selected 13*/

    .gotColor.colorOptingBox[data-number="13"] li {
        transform-origin: 80px 80px;
        -ms-transform-origin: 80px 80px;
        -webkit-transform-origin: 80px 80px;
        z-index: 1;
        position: relative;
    }

    .gotColor.colorOptingBox[data-number="13"] li.selected {
        transform: rotate(264deg);
        -ms-transform: rotate(264deg);
        -webkit-transform: rotate(264deg);
        z-index: 0;
    }

    .gotColor.colorOptingBox[data-number="13"] li.selected .color-pallet {
        width: 196px;
        left: -11px;
        top: 31px;
        height: 88px;
    }

    .gotColor.colorOptingBox[data-number="13"] li:nth-child(1) {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    .gotColor.colorOptingBox[data-number="13"] li:nth-child(2) {
        transform: rotate(14.85deg);
        -ms-transform: rotate(14.85deg);
        -webkit-transform: rotate(14.85deg);
    }

    .gotColor.colorOptingBox[data-number="13"] li:nth-child(3) {
        transform: rotate(27.7deg);
        -ms-transform: rotate(27.7deg);
        -webkit-transform: rotate(27.7deg);
    }

    .gotColor.colorOptingBox[data-number="13"] li:nth-child(4) {
        transform: rotate(38.55deg);
        -ms-transform: rotate(38.55deg);
        -webkit-transform: rotate(38.55deg);
    }

    .gotColor.colorOptingBox[data-number="13"] li:nth-child(5) {
        transform: rotate(53.4deg);
        -ms-transform: rotate(53.4deg);
        -webkit-transform: rotate(53.4deg);
    }

    .gotColor.colorOptingBox[data-number="13"] li:nth-child(6) {
        transform: rotate(67.25deg);
        -ms-transform: rotate(67.25deg);
        -webkit-transform: rotate(67.25deg);
    }

    .gotColor.colorOptingBox[data-number="13"] li:nth-child(7) {
        transform: rotate(82.1deg);
        -ms-transform: rotate(82.1deg);
        -webkit-transform: rotate(82.1deg);
    }

    .gotColor.colorOptingBox[data-number="13"] li:nth-child(8) {
        transform: rotate(96.95deg);
        -ms-transform: rotate(96.95deg);
        -webkit-transform: rotate(96.95deg);
    }

    .gotColor.colorOptingBox[data-number="13"] li:nth-child(9) {
        transform: rotate(111.8deg);
        -ms-transform: rotate(111.8deg);
        -webkit-transform: rotate(111.8deg);
    }

    .gotColor.colorOptingBox[data-number="13"] li:nth-child(10) {
        transform: rotate(126.65deg);
        -ms-transform: rotate(126.65deg);
        -webkit-transform: rotate(126.65deg);
    }

    .gotColor.colorOptingBox[data-number="13"] li:nth-child(11) {
        transform: rotate(142.5deg);
        -ms-transform: rotate(142.5deg);
        -webkit-transform: rotate(142.5deg);
    }

    .gotColor.colorOptingBox[data-number="13"] li:nth-child(12) {
        transform: rotate(157.35deg);
        -ms-transform: rotate(157.35deg);
        -webkit-transform: rotate(157.35deg);
    }

    .gotColor.colorOptingBox[data-number="13"] li:nth-child(14) {
        transform: rotate(173.2deg);
        -ms-transform: rotate(173.2deg);
        -webkit-transform: rotate(173.2deg);
    }
    /*selected 14*/

    .gotColor.colorOptingBox[data-number="14"] li {
        transform-origin: 80px 80px;
        -ms-transform-origin: 80px 80px;
        -webkit-transform-origin: 80px 80px;
        z-index: 1;
        position: relative;
    }

    .gotColor.colorOptingBox[data-number="14"] li.selected {
        transform: rotate(264deg);
        -ms-transform: rotate(264deg);
        -webkit-transform: rotate(264deg);
        z-index: 0;
    }

    .gotColor.colorOptingBox[data-number="14"] li.selected .color-pallet {
        width: 196px;
        left: -11px;
        top: 31px;
        height: 88px;
    }

    .gotColor.colorOptingBox[data-number="14"] li:nth-child(1) {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }

    .gotColor.colorOptingBox[data-number="14"] li:nth-child(2) {
        transform: rotate(14.85deg);
        -ms-transform: rotate(14.85deg);
        -webkit-transform: rotate(14.85deg);
    }

    .gotColor.colorOptingBox[data-number="14"] li:nth-child(3) {
        transform: rotate(27.7deg);
        -ms-transform: rotate(27.7deg);
        -webkit-transform: rotate(27.7deg);
    }

    .gotColor.colorOptingBox[data-number="14"] li:nth-child(4) {
        transform: rotate(38.55deg);
        -ms-transform: rotate(38.55deg);
        -webkit-transform: rotate(38.55deg);
    }

    .gotColor.colorOptingBox[data-number="14"] li:nth-child(5) {
        transform: rotate(53.4deg);
        -ms-transform: rotate(53.4deg);
        -webkit-transform: rotate(53.4deg);
    }

    .gotColor.colorOptingBox[data-number="14"] li:nth-child(6) {
        transform: rotate(67.25deg);
        -ms-transform: rotate(67.25deg);
        -webkit-transform: rotate(67.25deg);
    }

    .gotColor.colorOptingBox[data-number="14"] li:nth-child(7) {
        transform: rotate(82.1deg);
        -ms-transform: rotate(82.1deg);
        -webkit-transform: rotate(82.1deg);
    }

    .gotColor.colorOptingBox[data-number="14"] li:nth-child(8) {
        transform: rotate(96.95deg);
        -ms-transform: rotate(96.95deg);
        -webkit-transform: rotate(96.95deg);
    }

    .gotColor.colorOptingBox[data-number="14"] li:nth-child(9) {
        transform: rotate(111.8deg);
        -ms-transform: rotate(111.8deg);
        -webkit-transform: rotate(111.8deg);
    }

    .gotColor.colorOptingBox[data-number="14"] li:nth-child(10) {
        transform: rotate(126.65deg);
        -ms-transform: rotate(126.65deg);
        -webkit-transform: rotate(126.65deg);
    }

    .gotColor.colorOptingBox[data-number="14"] li:nth-child(11) {
        transform: rotate(142.5deg);
        -ms-transform: rotate(142.5deg);
        -webkit-transform: rotate(142.5deg);
    }

    .gotColor.colorOptingBox[data-number="14"] li:nth-child(12) {
        transform: rotate(157.35deg);
        -ms-transform: rotate(157.35deg);
        -webkit-transform: rotate(157.35deg);
    }

    .gotColor.colorOptingBox[data-number="14"] li:nth-child(13) {
        transform: rotate(173.2deg);
        -ms-transform: rotate(173.2deg);
        -webkit-transform: rotate(173.2deg);
    }
    /*Color Planner Desktop View End*/
}







/*Color Planner*/
@media (min-width:992px) and (max-width:1400px) {
    .colorOptingBox {
        transform: scale(0.8);
        -ms-transform: scale(0.8);
        -webkit-transform: scale(0.8);
    }

    .heading-section h2 {
        font-size: 25px;
    }

    .heading-section h6 {
        font-size: 20px;
    }

  

    .barn .roofwheel {
        left: 16%;
        top: 13%;
    }

    .barn .trimswheel {
        top: 30%;
        right: 8%;
    }

    .carport .roofwheel {
        right: auto;
        left: 4%;
        top: 11%;
    }

    .carport .wallswheel {
        right: auto;
        left: 1%;
        top: 49%;
    }

    .carport .trimwheel {
        right: 7%;
        top: 49%;
    }

    .garage .roofwheel {
        right: auto;
        left: 6%;
        top: 9%;
    }

    .garage .wallswheel {
        right: auto;
        left: 0%;
        top: 54%;
    }

    .garage .trimwheel {
        right: 6%;
        top: 12%;
    }
}



@media (min-width:992px) and (max-width:1200px) {
    .visual-glossary-head h2{margin-top: 20px;}
    .colorOptingBox {
        transform: scale(0.5);
        -ms-transform: scale(0.5);
        -webkit-transform: scale(0.5);
    }

    .barn .roofwheel {
        left: 15%;
        top: 8%;
    }

    .barn .wallswheel {
        left: 0%;
        top: 39%;
    }

    .barn .trimswheel {
        top: 23%;
        right: 7%;
    }
}
@media (max-width:991px) {


    h6 {
        font-size: 25px;
    }

    .section-spacing {
        padding: 30px 0;
    }

    .about-rto .default-list,
    .about-financing {
        margin-top: 0;
    }

    ul.usp-icons li h4 {
        font-size: 23px;
    }

    ul.usp-icons li {
        margin: 0 55px;
    }

    .choose-building .selectBox select {
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        -o-appearance: none;
        appearance: none;
        background: #fff url(../images/select-box-arrow.jpg) no-repeat right top;
        border: 1px solid #262730;
        font-size: 18px;
        color: #262730;
        font-weight: 600;
        border-radius: 5px;
        padding: 6px 46px 6px 10px;
        min-width: 200px;
        outline: 0;
    }

    .inner-circle,
    .color-pallet {
        display: none !important;
    }

    .colorOptingBox {
        display: none;
        background: #f2f2f2;
        padding-top: 0;
    }

    .colorOptingBox ul {
        padding: 0;
        list-style: none;
        margin: 0px;
        overflow: hidden;
    }

    .colorOptingBox ul li {
        font-size: 0;
        padding: 0;
        width: 19.8%;
        height: 80px;
        float: left;
        position: relative;
        text-align: center;
        background: #f2f2f2;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
        cursor: pointer;
        color: #5a5e5f;
    }

    .colorOptingBox ul li:after {
        content: '.';
        width: 42px;
        height: 42px;
        position: absolute;
        top: 15px;
        ;
        left: 50%;
        margin-left: -21px;
        font-size: 0;
        border-radius: 100%;
    }

    .colorOptingBox ul li[data-color="burgundy"]:after {
        background: #7d2934;
    }

    .colorOptingBox ul li[data-color="sand-stone"]:after {
        background: #b1a689;
    }

    .colorOptingBox ul li[data-color="quaker-gray"]:after {
        background: #575757;
    }

    .colorOptingBox ul li[data-color="pewter-gray"]:after {
        background: #949494;
    }

    .colorOptingBox ul li[data-color="pebble-beige"]:after {
        background: #c4b89d;
    }

    .colorOptingBox ul li[data-color="evergreen"]:after {
        background: #3d6152;
    }

    .colorOptingBox ul li[data-color="earth-brown"]:after {
        background: #64473b;
    }

    .colorOptingBox ul li[data-color="clay"]:after {
        background: #61574d;
    }

    .colorOptingBox ul li[data-color="barn-red"]:after {
        background: #b63838;
    }

    .colorOptingBox ul li[data-color="royal-blue"]:after {
        background: #028ce0;
    }

    .colorOptingBox ul li[data-color="rawhide"]:after {
        background: #d1b397;
    }

    .colorOptingBox ul li[data-color="galvalume"]:after {
        background: #aeaeae;
    }

    .colorOptingBox ul li[data-color="black"]:after {
        background: #000;
    }

    .colorOptingBox ul li[data-color="white"]:after {
        background: #fff;
        color: #000;
        border: 1px solid #333;
    }

    .colorOptingBox ul li:after {
        width: 35px;
        height: 35px;
        top: 50%;
        margin-left: -18px;
        margin-top: -18px;
    }

    .colorOptingBox ul li:before {
        content: '';
        top: 50%;
        left: 50%;
        background: url(../images/spirit.png) no-repeat -390px -688px;
        width: 19px;
        height: 16px;
        z-index: 1;
        position: absolute;
        transform: translate(-50%, -50%);
        display: none;
    }

    .colorOptingBox ul li.selected:before {
        display: block;
    }

    .mobilePrice-it {
        background-color: #fff;
        -webkit-box-shadow: 0 -3px 20px rgba(0, 0, 0, .31);
        -moz-box-shadow: 0 -3px 20px rgba(0, 0, 0, .31);
        box-shadow: 0 -3px 20px rgba(0, 0, 0, .31);
        padding: 20px;
        position: relative;
    }

    .price-building {
        width: 100%;
    }

    .action-pannel-planner a.preview-building {
        display: none;
    }

    .images-wrapp ul.tabRel {
        background: url('../images/blk-texture.png');
        overflow: hidden;
        display: table;
        width: 100%;
        margin: 0;
    padding: 0;
    }

    .images-wrapp ul.tabRel li {
        display: table-cell;
        float: none;
        text-align: center;
    }

    .images-wrapp ul.tabRel li a {
        border-top: 3px solid #e5950a;
    }

    .images-wrapp ul.tabRel li a.active {
        border-top: 3px solid #fff;
    }

    .choose-building {
        background: #e6e4e4;
        position: relative;
        padding: 20px;
        text-align: center;
        -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .28);
        -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, .28);
        box-shadow: 0 2px 3px rgba(0, 0, 0, .28);
        z-index: 1;
    }

    .choose-building:after {
        content: '';
        position: absolute;
        bottom: -16px;
        left: 20px;
        z-index: 1;
        background: url('../images/arrow-bottom.png');
        width: 32px;
        height: 17px;
    }

    .choose-building h2 {
        font-size: 35px;
        margin-bottom: 10px;    font-family: "Oswald",sans-serif;
        margin-top: 0;
    }

    .action-pannel-planner a.reset-building h5,
    .action-pannel-planner a:after {
        display: none;
    }

    .action-pannel-planner a.reset-building {
        position: absolute;
        top: 252px;
        right: 10px;
        border: 0;
        z-index: 1;
    }

    .action-pannel-planner .reset-icon {
        background-position: -444px -686px;
        width: 52px;
        height: 46px;
    }

    a.upload-image-editor {
        background-position: -448px -742px;
        width: 52px;
        height: 53px;
        top: 60px;
        font-size: 0;
    }
}
@media (max-width:767px) {

    /*Component Visulizer*/

    .visual-glossary-code {
        background-size: inherit;
    }

    .glossary-wrapp {
        margin-right: 0;
        float: none;
    }

    .content-info {
        display: none;
        margin: 15px -15px 0px;
    }

    .content-info img {
        background: url(../images/visual-glossary/grass.jpg) no-repeat;
        background-size: cover;
    }

    .content-info .text {
        padding: 15px 15px 0px 15px;
    }

    .content-info .imgBox {
        margin: 0 -15px 20px;
    }

    ul.componentList {
        background: #fff;
        text-align: left;
        margin: 0 -15px;
    }

    ul.componentList li {
        padding: 15px;
        border-bottom: 1px solid #c0c0c0;
    }

    ul.componentList li a {
        color: #343a3b;
        text-decoration: none;
        font-size: 18px;
        font-weight: 900;
        display: block;
        position: relative;
    }

    ul.componentList li a:after {
        background: url('../images/spirit.png') no-repeat -54px -961px;
        width: 29px;
        height: 29px;
        content: ' ';
        position: absolute;
        right: 0;
        top: -3px;
    }

    ul.componentList li a.active {
        color: #04b5e7;
    }

    ul.componentList li a.active:after {
        background-position: -54px -994px;
    }

    .show-767 {
        display: block;
    }

    
  
    #getPricing .modal-dialog {
        margin: 10px auto;
    }

    .images-wrapp {
        overflow: hidden;
    }

    .color-planner .images-wrapp img {
        min-width: 450px;
    }

    .action-pannel-planner a.reset-building {
        background: transparent;
        top: 157px;
        transform: scale(.8);
        -ms-transform: scale(.8);
        -webkit-transform: scale(.8);
        right: 0;
    }

    .choose-building h2 {
        font-size: 20px;
    }

    ul.tabRel li a {
        font-size: 22px;
        padding: 16px 20px;
    }
}
@media (max-width:400px) {
    .color-planner .images-wrapp img {
        margin-left: -44px;
    }
}




/*Component Visulizer Medea Queries*/
@media (max-width:1800px) {
    .glossary-wrapp {
        max-width: 1150px;
    }

    .glossary-wrapp[data-building="garage"] {
        top: 28px;
    }

    .carport-trim {
        left: 530px;
        top: 9px;
    }

    .carport-braces {
        left: 305px;
        top: 113px;
    }

    .carport-wall {
        left: 470px;
        top: 120px;
    }

    .carport-truss {
        left: 480px;
        top: 63px;
    }

    .carport-wainscot {
        left: 460px;
        top: 227px;
    }

    .carport-walk-in-door {
        left: 680px;
        top: 190px;
    }

    .carport-window {
        left: 429px;
        top: 168px;
    }

    .carport-baserails {
        top: 331px;
        left: 256px;
    }

    .carport-door {
        left: 570px;
        top: 174px;
    }

    .carport-trim.active:after {
        width: 160px;
    }

    .glossary-wrapp[data-building="carport"] .infoboxOut[data-info="trim"] {
        top: 50px;
        left: 175px;
    }

    .glossary-wrapp[data-building="carport"] .infoboxOut[data-info="door"] {
        left: 270px;
        top: 216px;
    }

    .glossary-wrapp[data-building="carport"] .infoboxOut[data-info="braces"] {
        top: 152px;
        left: -27px;
    }

    .glossary-wrapp[data-building="carport"] .infoboxOut[data-info="baserails"] {
        left: -62px;
        top: 370px;
    }

    .glossary-wrapp[data-building="carport"] .infoboxOut[data-info="walk-in-door"] {
        left: 378px;
        top: 230px;
    }

    .glossary-wrapp[data-building="carport"] .infoboxOut[data-info="wall"] {
        top: 160px;
        left: 169px;
    }

    .glossary-wrapp[data-building="carport"] .infoboxOut[data-info="truss"] {
        top: 102px;
        left: 178px;
    }

    .glossary-wrapp[data-building="carport"] .infoboxOut[data-info="window"] {
        left: 128px;
        top: 209px;
    }

    .glossary-wrapp[data-building="carport"] .infoboxOut[data-info="wainscot"] {
        left: 142px;
        top: 268px;
    }

    .garage-ridge-cap {
        left: 347px;
        top: 18px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="ridge-cap"] {
        left: 34px;
        top: 59px;
    }

    .garage-hat-channel {
        left: 621px;
        top: 67px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="hat-channel"] {
        top: 109px;
        left: 300px;
    }

    .garage-roof {
        right: 310px;
        top: 54px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="roof"] {
        top: 97px;
        right: 00;
        left: auto;
    }

    .garage-roof.active:after {
        width: 118px;
    }

    .garage-trim {
        left: 246px;
        top: 54px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="trim"] {
        top: 96px;
        left: 0;
    }

    .garage-snow-braces {
        left: 547px;
        top: 108px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="braces"] {
        left: 232px;
        top: 149px;
    }

    .garage-wall {
        right: 289px;
        top: 142px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="wall"] {
        top: 181px;
        right: 10px;
        left: auto;
    }

    .garage-winscot {
        right: 187px;
        top: 221px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="winscot"] {
        right: -85px;
        top: 260px;
        left: auto;
    }

    .garage-walk-in-door {
        right: 385px;
        top: 229px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="walk-in-door"] {
        right: 40px;
        top: 269px;
    }

    .garage-side-garage-door {
        right: 233px;
        top: 181px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="side-garage-door"] {
        right: -87px;
        top: 221px;
        left: auto;
    }

    .garage-window {
        left: 510px;
        top: 146px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="window"] {
        top: 186px;
        left: 180px;
    }

    .garage-door {
        left: 608px;
        top: 184px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="door"] {
        top: 223px;
        left: 234px;
    }

    .garage-legs {
        left: 280px;
        top: 180px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="legs"] {
        left: -15px;
        top: 220px;
    }
}

@media (max-width:1399px) {
    .glossary-wrapp {
        max-width: 1010px;
    }

    .visual-glossary-head {
        top: 0px;
    }

    .visual-glossary-head h6 {
        margin: 5px 0 10px;
    }

    .visual-glossary-head h2 {
        color: #262730;
        font-size: 25px;
    }

    .visual-glossary-head h6 {
        font-weight: 400;
        font-size: 16px;
    }

    .carport-walk-in-door {
        left: 603px;
        top: 180px;
    }

    .carport-walk-in-door.active:after {
        left: 100%;
    }

    .glossary-wrapp[data-building="carport"] .infoboxOut[data-info="walk-in-door"] {
        left: 549px;
        top: 220px;
    }

    .carport-door {
        left: 490px;
        top: 184px;
    }

    .glossary-wrapp[data-building="carport"] .infoboxOut[data-info="door"] {
        left: 190px;
        top: 226px;
    }

    .carport-braces {
        left: 265px;
        top: 98px;
    }

    .glossary-wrapp[data-building="carport"] .infoboxOut[data-info="braces"] {
        top: 142px;
        left: -61px;
    }

    .carport-baserails {
        top: 267px;
        left: 256px;
    }

    .glossary-wrapp[data-building="carport"] .infoboxOut[data-info="baserails"] {
        left: -62px;
        top: 309px;
    }

    .carport-legs {
        left: 229px;
        top: 190px;
    }

    .glossary-wrapp[data-building="carport"] .infoboxOut[data-info="legs"] {
        top: 232px;
        left: -89px
    }

    .carport-wainscot {
        left: 370px;
        top: 196px;
    }

    .glossary-wrapp[data-building="carport"] .infoboxOut[data-info="wainscot"] {
        left: 52px;
        top: 238px;
    }

    .carport-window {
        left: 369px;
        top: 148px;
    }

    .glossary-wrapp[data-building="carport"] .infoboxOut[data-info="window"] {
        left: 68px;
        top: 189px;
    }

    .carport-wall {
        left: 402px;
        top: 110px;
    }

    .glossary-wrapp[data-building="carport"] .infoboxOut[data-info="wall"] {
        top: 150px;
        left: 99px;
    }

    .garage-roof {
        right: 260px;
        top: 44px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="roof"] {
        top: 86px;
        right: -51px;
        left: auto;
    }

    .garage-winscot {
        right: 160px;
        top: 191px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="winscot"] {
        right: -110px;
        top: 234px;
        left: auto;
    }

    .garage-hat-channel {
        left: 431px;
        top: 47px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="hat-channel"] {
        top: 89px;
        left: 110px;
    }

    .garage-trim {
        left: 246px;
        top: 31px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="trim"] {
        top: 72px;
        left: -66px;
    }

    .garage-legs {
        left: 240px;
        top: 140px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="legs"] {
        left: -55px;
        top: 180px;
    }

    .garage-snow-braces {
        left: 187px;
        top: 81px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="braces"] {
        left: -78px;
        top: 121px;
    }

    .garage-snow-braces.active:after {
        width: 70px;
    }

    .garage-window {
        left: 453px;
        top: 136px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="window"] {
        top: 176px;
        left: 124px;
    }

    .garage-door {
        left: 528px;
        top: 164px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="door"] {
        top: 203px;
        left: 154px;
    }

    .garage-garage-truss {
        left: 307px;
        top: 53px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="truss"] {
        left: 32px;
        top: 95px;
    }

    .garage-walk-in-door {
        right: 335px;
        top: 189px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="walk-in-door"] {
        right: 14px;
        top: 229px;
    }

    .garage-side-garage-door {
        right: 213px;
        top: 141px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="side-garage-door"] {
        right: -85px;
        top: 181px;
        left: auto;
    }

    .garage-side-garage-door.active:after {
        width: 105px;
    }
}
@media (min-width:768px) and (max-width:1024px) {
    .manufacture-banner-form form {
        width: 400px;
    }

    .visual-glossary-head h2 {        
    }

    .visual-glossary-head h6 {
        font-weight: 400;
        font-size: 15px;
        text-transform: capitalize;
        margin: 5px 0 19px;
    }

    .visual-glossary-head {
        padding: 10px 0;
        text-align: center;
        position: absolute;
        top: 20px;
        z-index: 42;
        left: 50%;
        transform: translateX(-50%);
    }

    .glossary-wrapp {
        max-width: 699px;
    }

    .carport-trim {
        left: 293px;
        top: 4px;
    }

    .glossary-wrapp[data-building="carport"] .infoboxOut[data-info="trim"] {
        top: 45px;
        left: 37px;
    }

    .carport-trim.active:after {
        width: 113px;
    }

    .carport-truss {
        left: 240px;
        top: 40px;
    }

    .glossary-wrapp[data-building="carport"] .infoboxOut[data-info="truss"] {
        top: 80px;
        left: -11px;
    }

    .carport-wall {
        left: 388px;
        top: 69px;
    }

    .glossary-wrapp[data-building="carport"] .infoboxOut[data-info="wall"] {
        top: 110px;
        left: 135px;
    }

    .target-icon {
        transform: scale(.6);
    }

    .infoBoxIn:before {
        border-left: 1px dashed #fff;
    }

    .carport-walk-in-door {
        left: 409px;
        top: 110px;
    }

    .glossary-wrapp[data-building="carport"] .infoboxOut[data-info="walk-in-door"] {
        left: 306px;
        top: 150px;
    }

    .carport-wainscot {
        left: 240px;
        top: 131px;
    }

    .glossary-wrapp[data-building="carport"] .infoboxOut[data-info="wainscot"] {
        left: -21px;
        top: 172px;
    }

    .carport-braces {
        left: 524px;
        top: 68px;
    }

    .glossary-wrapp[data-building="carport"] .infoboxOut[data-info="braces"] {
        top: 109px;
        left: 258px;
    }

    .carport-door {
        left: 340px;
        top: 108px;
    }

    .glossary-wrapp[data-building="carport"] .infoboxOut[data-info="door"] {
        left: 88px;
        top: 147px;
    }

    .carport-baserails {
        top: 191px;
        left: 508px;
    }

    .glossary-wrapp[data-building="carport"] .infoboxOut[data-info="baserails"] {
        left: 247px;
        top: 232px;
    }

    .carport-legs {
        left: 193px;
        top: 130px;
    }

    .carport-legs.active:after {
        width: 57px;
    }

    .glossary-wrapp[data-building="carport"] .infoboxOut[data-info="legs"] {
        top: 170px;
        left: -29px;
    }

    .carport-window {
        left: 249px;
        top: 98px;
    }

    .glossary-wrapp[data-building="carport"] .infoboxOut[data-info="window"] {
        left: -1px;
        top: 139px;
    }

    .garage-trim {
        left: 166px;
        top: 12px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="trim"] {
        top: 52px;
        left: -36px;
    }

    .garage-trim.active:after {
        width: 24px;
    }

    .garage-ridge-cap {
        left: 347px;
        top: 9px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="ridge-cap"] {
        left: 89px;
        top: 49px;
    }

    .garage-walk-in-door {
        right: 225px;
        top: 119px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="walk-in-door"] {
        right: -30px;
        top: 159px;
    }

    .garage-walk-in-door.active:after {
        width: 114px;
    }

    .garage-garage-truss {
        left: 257px;
        top: 33px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="truss"] {
        left: 22px;
        top: 75px;
    }

    .garage-door {
        left: 358px;
        top: 104px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="door"] {
        top: 143px;
        left: 63px;
    }

    .garage-winscot {
        right: 170px;
        top: 145px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="winscot"] {
        right: 20px;
        top: 184px;
        left: auto;
    }

    .garage-winscot.active:after {
        width: 24px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="legs"] {
        left: -8px;
        top: 180px;
    }

    .garage-legs {
        left: 235px;
        top: 109px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="legs"] {
        left: -13px;
        top: 150px;
    }

    .garage-side-garage-door {
        right: 133px;
        top: 111px;
    }

    .target-icon.right:after {
        left: auto;
        right: 100%;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="side-garage-door"] {
        right: 31px;
        top: 151px;
        left: auto;
    }

    .garage-snow-braces {
        left: 207px;
        top: 42px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="braces"] {
        left: -22px;
        top: 82px;
    }

    .garage-hat-channel {
        left: 301px;
        top: 27px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="hat-channel"] {
        top: 69px;
        left: 38px;
    }

    .garage-snow-braces {
        left: 197px;
        top: 42px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="braces"] {
        left: -22px;
        top: 79px;
    }

    .garage-window {
        left: 303px;
        top: 86px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="window"] {
        top: 126px;
        left: 34px;
    }

    .garage-roof {
        right: 180px;
        top: 24px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="roof"] {
        top: 65px;
        right: 86px;
        left: auto;
    }

    .garage-wall {
        right: 109px;
        top: 52px;
    }

    .glossary-wrapp[data-building="garage"] .infoboxOut[data-info="wall"] {
        top: 94px;
        right: -6px;
        left: auto;
    }

    .glossary-wrapp[data-building="garage"] {
        top: 20px;
    }
}


@media(max-width:767px) {
    .why-choose-us-finance .tagline{    font-size: 14px;text-align: center;}
    .why-choose-us-finance .content-heading{font-size: 27px;line-height: 36px;text-align: center;}
    .top-dealer{padding: 30px 0 0;}
    .visual-glossary-head .pin-points {
        display: none !important;
    }

    ul.componentList {
            padding: 0;
        margin: 0;
        list-style: none;
        clear: both;
    }

    .visual-glossary-head {
        position: static;
        transform: translateX(0);
        margin: 22px 0 15px;
    }

    .visual-glossary-code {
        margin-top: 0 !important;
    }

    .visual-glossary-head-color {
        padding-top: 10px !important;
    }

    .target-icon {
        display: none;
    }

    .visual-glossary-head {
        padding: 0;
    }

    .buildingBox>img {
        display: none;
    }

    .visual-glossary-head .col-md-12 {
        padding: 0;
    }

    .visual-glossary-code {
        border-top: 0;
        padding-top: 0;
    background: none;
    }

    .cta {
        left: -28px;
        top: 50%;
        transform: scale(.7);
        margin-top: -420px;
        display: none;
    }

    .visual-glossary-head-color a.reset-me {
        top: 298px;
    }

    .yourSelection {
        top: 263px;
    }

    .grass-pic {
        display: none;
    }

    .wrapperImages {
        position: static;
    }

    .glossary-wrapp {
        margin-right: 0;
        float: none;
        margin: 0;
        width: 100%;
    }

    .glossary-wrapp[data-building="garage"] {
        top: 0;
    }
}


@media (min-width: 992px) and (max-width:1364px){
   .buildingOpted li{padding: 15px 0;}     
   .buildingOpted:after{    height: 99px;}
   .buildingOpted[rel="garage"]:after {
    top: 83px;
    height: 96px;}
    .buildingOpted[rel="barn"]:after {
    top: 163px;}
    .heading-section{    top: 24px;}
}


@media (max-width: 991px){
    .top-dealer{background:none;}
    .visual-glossary-head h2{margin: 0;font-size: 20px;}
    .visual-glossary-head h6{margin:5px 0 9px; font-size:12px;}
    .heading-section, .buildingOpted{display: none;}
    .hide-991px {display: none;}
    .action-pannel-planner a.reset-building {background: transparent;}
    .building-selection li a, .building-selection-color li a{    width: 116px;
    height: 36px;font-size: 12px;    line-height: 37px;}
    .visual-glossary-head a.pin-points{vertical-align: top;line-height: 36px;height: 35px;}
    .visual-glossary-head{    top: 5px;}
}



@media (min-width: 992px) and (max-width:1200px){
    section.color-planner {
    padding-top: 95px;
    background: #76b1db;}  
    .heading-section {
    top: -26px;}  
}