﻿#tutorialView-project {
    float: left;
    width: 100%;
    margin-top: 60px;
}

.tutorial-content__video-container {
    width: 100%;
    padding-bottom: 49%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.tutorial-content__video-inner {
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
}

.tutorial-content__video-inner * {
    width: 100%;
    height: 100%;
}

.tutorial-control__btn {
    text-align: center;
    width: 100%;
    float: left;
    background: #4A4A4A;
    color: #A1A1A1 !important;
    padding: 13px 0px;
    font-size: 130%;
}

.tutorial-control__btn h2 {
    font-size: 100%;
    margin: 0px;
}

.tutorial-control__btn[aria-expanded="true"] {
    background: #5FAFC8;
    color: #fff !important;
}

.tutorial-control__btn[aria-expanded="true"]:after {
    content: " ";
    position: absolute;
    width: 0px;
    height: 0px;
    border-top: 10px solid #5099AC;
    border-right: 30px solid transparent;
    border-left: 30px solid transparent;
    bottom: 0px;
    transform: translateY(100%) translateX(50%);
    right: 50%;
}

#tutorialView-project .tutorialView-exapneded {
    margin-top: 20px;
}

#tutorialView-project .tutorialView-exapneded h3 {
    margin-top: 30px;
    margin-bottom: 10px;
    font-size: 150%;
}

#tutorialView-project #project table {
    width: 100% !important;
    height: auto !important;
}


#tutorialView-project #project.tutorialView-exapneded img {
    width: auto !important;
    height: auto !important;
    max-height: 100%;
    max-width: 100%;
}

#project .table>tbody>tr>td+td {
    width: 340px;
    padding-left: 0px;
}

#project .table>tbody>tr>td {
    vertical-align: middle;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;

}

#project caption {
    background: #E2E2E2;
    color: #333;
    font-size: 135%;
    padding-left: 15px;
    position: relative;
    cursor: pointer;
}

#project caption:after {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: "\f078";
    position: absolute;
    color: #727272;
    right: 10px;
    -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
            transform: rotate(-90deg);
    top: 13px;
    font-size: 100%;
    -webkit-transition: -webkit-transform 500ms ease-in-out;
            transition: transform 500ms ease-in-out;
}

#project caption.open:after {
    -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
    -webkit-transition: -webkit-transform 200ms ease-in-out;
            transition: transform 200ms ease-in-out;
}

#project table.table tbody {
    display: block;
    overflow: hidden;
}

#project table.table tbody.collapse {
    display: none;
}

#project table.table tbody.collapse.in {
    display: block;
}


.catalogItemBox-addtocart {
    width: 100%;
    background: #F36639;
    float: right;
    display: inline-block;
    padding: 10px 0px;
    color: #fff !important;
    margin-top: 5px;
    text-align: center;
}

.catalogItemBox-addtocart:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f291";
    position: relative;
}

#tutorialView .cart-details-table-plating-outer img, #tutorialView .cart-details-table-color-outer img { max-width: 30px; }
@media(max-width: 991px) {
    .tutorial-content__video-container {
        padding-bottom: 60%;
    }
}


@media(max-width: 767px) {
    .tutorial-content__video-container {
        padding-bottom: 70%;
    }

 
    .table-responsive>.table>thead>tr>th, 
    .table-responsive>.table>tbody>tr>th, 
    .table-responsive>.table>tfoot>tr>th, 
    .table-responsive>.table>thead>tr>td, 
    .table-responsive>.table>tbody>tr>td, 
    .table-responsive>.table>tfoot>tr>td {
        white-space: normal;
    }
}

@media(max-width: 480px) {
    .tutorial-content__video-container {
        padding-bottom: 100%;
    }
}











/*------------------------------------*\
    #tutorialView
\*------------------------------------*/


#tutorialView    {}
#tutorialView .cart-container        { display:table; background-color:white; direction:rtl; text-align:right; width: 100%; margin-top: 15px; }
#tutorialView .cart-total-container  { display:table-cell; padding: 35px 15px 0px 15px; width:26.5%; vertical-align:top; background-color:rgba(107,198,225,1); height:100%; text-align:left; font-size: 130%; float:none; color: #fff; }
#tutorialView .cart-details-container-outer{ display:table-cell; float: none; }
#tutorialView .cart-details-container{ display:block; background-color:white; direction:ltr; text-align:left; counter-reset: shopitems; }

#tutorialView .cart-image-contain .item-sale { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background-size: 58px; background-repeat: no-repeat; background-position: right top; }

#tutorialView .cart-image-contain .item-sale[class*="offer_triagle"]:before {
    top:        10px;
    right:      0px;
    font-size:  85%;
}

#navbar-wishlist .wishlist-image-contain .item-sale[class*="offer_triagle"]:before {
    top:        10px;
    right:      0px;
    font-size:  85%;
}

#tutorialView .cart-details-table            { display:table; color:black; width: 100%; }
#tutorialView .cart-details-table-header     { display:table-row; background: #F2F2F2; }
#tutorialView .cart-details-table-bottom     { color: #000; font-size: 75%; text-align: left; padding: 11px 0px; text-align: center; }
#tutorialView .cart-details-table-bottom .cart-register     { color: #529AB3; }
#tutorialView .cart-total-line      { float: left; width: 100%; margin: 5px 0px; }
#tutorialView .cart-details-table-row        { display:table-row; margin: 10px 0px; border: none; height: 2px; }
#tutorialView .cart-details-table-row:nth-child(even) { background: #F2F2F2; }
#tutorialView .cart-details-table-row  .cart-details-table-pic { counter-increment: shopitems; } 
#tutorialView .cart-details-table-pic               { display:table-cell; width:120px; padding: 15px 15px; vertical-align: middle; position: relative; }
#tutorialView .cart-details-table-row .cart-details-table-pic:before        { display:block; position: absolute; left: 0px; top: 50%; margin-top: -10px; content: counter(shopitems)"."; }
#tutorialView .cart-details-table-title             { display:table-cell; width:190px; padding: 15px 5px; vertical-align: top; }
#tutorialView .cart-details-table-customs           { display:table-cell; width:260px; padding: 15px 5px; vertical-align: top; }
#tutorialView .cart-details-table-header .cart-details-table-quantityAndPrice  { font-size: 100%; }
#tutorialView .cart-details-table-quantityAndPrice  { display:table-cell; width:240px; padding: 15px 5px; vertical-align: top; font-size: 110%; }
#tutorialView .cart-details-table-header .cart-details-table-quantityAndPrice .cart-details-table-quantity          { display:table-cell; width:100px; padding: 0px; vertical-align: top; }
#tutorialView .cart-details-table-header .cart-details-table-quantityAndPrice .cart-details-table-price             { display:table-cell; width:100px; padding: 0px; vertical-align: top; }
#tutorialView .cart-details-table-quantityAndPrice .cart-details-table-quantity { display: block; padding: 0px; float: left; width: 50%; }
#tutorialView .cart-details-table-quantityAndPrice .cart-details-table-price { display: block; padding: 0px; float: left; width: 50%; }
#tutorialView .cart-details-table-options           { display:table-cell; width:50px; padding: 15px 0px; padding-right: 7px; }
#tutorialView .cart-details-table-itemName          { font-size: 110%; line-height:1.3; margin-bottom:10px; display:inline-block; }
#tutorialView .cart-details-table-itemName a        { color: inherit !important; text-decoration: none !important; }
#tutorialView .cart-details-table-itemNote,
#tutorialView .cart-details-table-itemMakat         { font-size: 85%; display: block; }
#tutorialView .cart-details-table-plating           { font-size: 85%; }
#tutorialView .cart-details-table-plating-outer, #tutorialView .cart-details-table-color-outer { display: table; padding: 3px; width: 90%; }
#tutorialView .cart-details-table-color             { margin-top: 5px; }
#tutorialView .cart-details-table-plating-outer > div,#tutorialView .cart-details-table-color-outer > div   { display: table-cell; float: none; vertical-align: middle; width: 50%; }
#tutorialView .cart-details-table-row .cart-details-table-price                               { font-size: 145%; }
#tutorialView .cart-before-sale-price        { position: relative; display: inline-block; color: #7e7e7e; font-size: 65%; }
#tutorialView .cart-before-sale-price:before { content: ""; position: absolute; left: 50%; margin-left: -1px; height: 110%; width: 1px; background: #E2494B; -webkit-transform: rotate(144deg); -ms-transform: rotate(144deg); transform: rotate(144deg); top: -2px; }
#tutorialView .cart-details-table-plating-outer > div:last-child img, #tutorialView .cart-details-table-color-outer > div:last-child img { display: inline-block; }

#tutorialView .cart-details-table-plating-outer > div:last-child, #tutorialView .cart-details-table-color-outer > div:last-child { text-align: right; }

#navbar-wishlist .wishlist-before-sale-price        { position: relative; display: inline-block; color: #7e7e7e; font-size: 65%; }
#navbar-wishlist .wishlist-before-sale-price:before { content: ""; position: absolute; left: 50%; margin-left: -1px; height: 110%; width: 1px; background: #E2494B; -webkit-transform: rotate(144deg); -ms-transform: rotate(144deg); transform: rotate(144deg); top: -2px; }
 

#tutorialView .cart-details-table-more-options { height: 40px; width: 100%; display: table; margin-top: 5px; float: left; text-decoration: none; }
#tutorialView .cart-details-table-more-options i         { width: 100%; display: table-cell; vertical-align: middle; text-align: center; background: #5FAFC8; padding: 9px 12px; color: #fff; }
#tutorialView .cart-details-table-delete       { height: 40px; width: 100%; display: table; float: left; text-decoration: none; }
#tutorialView .cart-details-table-delete i     { width: 100%; display: table-cell; vertical-align: middle; background: #E2494B; color: #fff; text-align: center; }

#tutorialView .cart-total-container .cart-total-line-value       { float: right; }
#tutorialView .cart-total-container .cart-total-before-shipping  { display: block; font-size: 60%; color: #336371; }
#tutorialView .cart-total-container .cart-total-btns-inner       { width: 100%; display: table; height: 50px; margin: 10px 0px; max-width: 260px; }
#tutorialView .cart-total-container .cart-total-btn-container .cart-total-btns-inner       { width: 50%; height: 40px; margin: 0px;  font-size: 75%; }
#tutorialView .cart-total-container #cart-total-checkout-btn     { }
#tutorialView .cart-total-container .cart-total-btns             { width: 100%; display: table-cell; text-align: center; text-decoration: none; color: #fff; vertical-align: middle; font-size: 180%; padding: 7px 0px; }
#tutorialView .cart-total-container .cart-total-btn-container > div:first-child     { padding-right: 10px; }
#tutorialView .cart-total-container .cart-total-btn-container > div:last-child      { padding-left: 10px; }
#tutorialView .cart-total-container .cart-total-seprator { background-image: linear-gradient(to right, #529AB0 11%, rgba(255,255,255,0) 0%); background-position: bottom; background-size: 17px 2px; background-repeat: repeat-x; margin: 10px 0px; border: none; height: 2px; float: left; width: 100%; }
#tutorialView .checkout-subtotal { font-size: 110%; }

#tutorialView #con-btn { padding: 10px 20px; display: inline-block; color: #fff !important; text-decoration: none !important; font-size: 150%; margin-top: 10px; min-width: 140px; text-align: center; }


@media (min-width: 1170px) {
    #tutorialView .cart-details-table-header .cart-details-table-quantityAndPrice .cart-details-table-quantity,
    #tutorialView .cart-details-table-header .cart-details-table-quantityAndPrice .cart-details-table-price,
    #tutorialView .cart-details-table-quantityAndPrice .cart-details-table-quantity,
    #tutorialView .cart-details-table-quantityAndPrice .cart-details-table-price { max-width: 100px;text-align: center; }
    #tutorialView .checkout-subtotal { font-size: 150%; }
}

@media(max-width: 1100px) and (min-width: 768px) {
    #tutorialView .cart-details-table-options { display: block; float: left; width: 100%; }
    #tutorialView .cart-details-table-more-options { width: 50%; margin: 0px; }
    #tutorialView .cart-details-table-delete       { width: 50%; margin: 0px; }
}

@media(max-width:991px) {
    #tutorialView .cart-container        { height: auto; max-height: none; float: left; width: 100%; }
    #tutorialView .cart-details-container-outer { display:block; width:100%; }
    #tutorialView .cart-details-container{  }
    #tutorialView .cart-total-container .cart-total-btns-inner { margin: 10px auto; }
    #tutorialView .cart-total-container                        { float: left; display: table; direction: ltr; position: relative; padding: 10px 15px; box-shadow: 0 4px 2px -2px rgba(0,0,0,0.3); height: auto; width: 100%; }
    #tutorialView .checkout-subtotal { font-size: 150%; }
    #tutorialView .main-cart { width: 100%; }
    #tutorialView .cart-details-table-header { display: none; }
    
}

@media (min-width: 971px) {
    .right-menu {
        width: 25%;
    }
}

@media(max-width:991px) {
    #tutorialView .cart-details-table-pic        { display:block; width:25%; float:left; }
    #tutorialView .cart-details-table-title      { display:block; width:auto; margin-left:25%; }
    #tutorialView .cart-details-table-customs    { display:table; width:75%; margin-left:25%; }
    #tutorialView .cart-details-table-customs > div { display:block; font-size: 85%; width: 50%; float: left; padding:0px 2.5px; margin: 0px; }
    #tutorialView .cart-details-table-customs > div > span { display:block; }
    #tutorialView .cart-details-table-sale                 { display:table-cell !important; float:none; vertical-align: middle; padding: 0px 5px; }
    #tutorialView .cart-details-table-quantityAndPrice     { display:table-cell; float:none; width: auto; vertical-align: middle; padding: 0px 5px; }
    #tutorialView .cart-details-table-options              { display:table-cell; float:none; width: auto; vertical-align: middle; padding: 0px 5px; }
    #tutorialView .cart-details-table-row:nth-child(2)         { background: none; }
    #tutorialView .cart-total-container .cart-total-btns-inner { margin: 0px auto; }
    #tutorialView .cart-total-split-xs                         { width: 50%; display: table-cell; vertical-align: middle; float: none; padding: 0px 11px; }

    #tutorialView .cart-details-table-itemName                 { display: block; }
    #tutorialView .cart-details-table-itemNote,#tutorialView .cart-details-table-itemMakat { display: block; float:left; width: 50%; }
    #tutorialView .cart-details-table-itemMakat                { text-align: right;  }

    #tutorialView .cart-details-table-quantityAndPrice .cart-details-table-quantity { width: 100%; }
    #tutorialView .cart-details-table-quantityAndPrice .cart-details-table-price    { width: 100%; font-size: 100%; }
    #tutorialView .cart-details-table-quantityAndPrice .cart-details-table-quantity span { display: inline !important; }
    #tutorialView .cart-details-table-quantityAndPrice .cart-details-table-price span    { display: inline !important; }
    #tutorialView .cart-details-table-xs                       { display: table; width: 75%; margin-left: 25%; padding: 5px 0px; margin-bottom: 10px; }
    #tutorialView .cart-details-table-plating-outer > div, #tutorialView .cart-details-table-color-outer > div { display: block; }

    #tutorialView .cart-image-contain                { width: auto; }
    #tutorialView .cart-details-table-plating-outer > div,#tutorialView .cart-details-table-color-outer > div   { width: 100%; }

    #tutorialView .cart-total-container { position: fixed; top: 50px; left: 0px; z-index: 1; }
}




    /***NEW DESIGN 06/17***/
#tutorialView .cart-details-table-options svg { width: 28px;height: auto;stroke: #000000;fill: #ffffff;vertical-align: middle;transition: all 250ms ease-in-out;-webkit-transition: all 250ms ease-in-out;}
.catalogItemBox-addtocart:before { content: ""; }
#tutorialView .cart-details-table-options a { background: transparent;border: 1px solid #000000;padding: 8px 0px;text-align: center; }
#tutorialView .cart-details-table-options a.cart-details-table-more-options:hover svg { fill: #5FAFC6;stroke: #5FAFC6; }
#tutorialView .cart-details-table-options a.catalogItemBox-addtocart.catalogItemBox-addtocart-click:hover svg { fill: #F36639;}
#tutorialView .cart-details-table-options a.catalogItemBox-addtocart.catalogItemBox-addtocart-click svg { stroke: #F36639; }

@media(max-width: 1100px) and (min-width: 768px) {
    #tutorialView .cart-details-table-more-options { width: 45%; margin: 0px; }
    #tutorialView .cart-details-table-delete       { width: 45%; margin: 0px; }
    .catalogItemBox-addtocart   { margin-top:0;width:45%; }
}
@media(max-width: 767px) {
    a.catalogItemBox-addtocart.catalogItemBox-addtocart-click   { width:100%; }
}

