/*
Framework Name: Strap 
Framework URL: http://www.sumitsharma.in/framework/strap/
Developer: Sumit Sharma
Developer URL: https://www.sumitsharma.in/
Description: Strap is a lightweight Design Related  Framework for Making  easy and looking great websites . This framework use the combination of some css and js files to making resposive content, animation , mobile optimization, hybrid app functionality. this makes it fast, simple and easy to customize!
Version: 2.0.1

Tags: resposive-design, animation, mobile-optimization, swipe,  hybrid-app, full-width, columns, row. 

GitHub STRAP URL: https://github.com/SumitSharma/strap

*/
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
abbr,blockquote,body,button,dd,dl,dt,fieldset,figure,form,h1,h2,h3,h4,h5,h6,hgroup,input,legend,li,ol,p,pre,ul{margin:0;padding:0}
address,caption,code,figcaption,pre,th{font-size:1em;font-weight:400;font-style:normal}fieldset,iframe,img{border:0}
caption,th{text-align:left}table{border-collapse:collapse;border-spacing:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
button{background:none;border:0;box-sizing:content-box;color:inherit;cursor:pointer;font:inherit;line-height:inherit;overflow:visible;vertical-align:inherit}
button:disabled{cursor:default}:focus{outline:3px solid #c1e0fe;outline:3px solid rgba(131,192,253,.5);outline-offset:1px}
html .as-mouseuser :focus:not(input):not(textarea):not(select){outline:none}::-moz-focus-inner{border:0;padding:0}
body { 
    padding: 0px;
    left: 0px;
    top: 0px;
    margin: 0px;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
    display: block;
}
audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden],
template {
    display: none;
}

a {
    background-color: transparent;
}

a:active,
a:hover {
    outline: 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b,
strong {
    font-weight: bold;
}

dfn {
    font-style: italic;
}

img {
    border: 0;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 1em 40px;
}

hr {
    box-sizing: content-box;
    height: 0;
}

pre {
    overflow: auto;
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

td,
th {
    padding: 0;
}

html {
    box-sizing: border-box;
}

*,
*:before,
*:after { 
    box-sizing: border-box;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

img{ width: 100%; }
li { list-style: none;}

/* Loader and */
.spinner {    width: 40px;    height: 40px;    position: relative;    margin: 100px auto;}
.double-bounce1, .double-bounce2 {    width: 100%;    height: 100%;    border-radius: 50%;    opacity: 1;    position: absolute;    top: 0;    left: 0;
    -webkit-animation: bounce 2.0s infinite ease-in-out;    animation: bounce 2.0s infinite ease-in-out;}
.double-bounce2 {   background: #dfdcfd; -webkit-animation-delay: -1.0s;    animation-delay: -1.0s;}
.double-bounce1{background: #EAC2E8;}
.pre-container {    position: absolute;    left: 50%;    top: 50%;    bottom: auto;    right: auto;    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);    text-align: center;}
#preloader {    position: fixed;    top: 0;    left: 0;    right: 0;    bottom: 0;    background-color: #fff;    z-index: 1000;}
.rotate-hover:hover{ transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2);  -o-transform: scale(1.2);transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); cursor: pointer;}

.as:hover{-moz-box-shadow: 0 5px 8px rgba(0,0,0,.1); -o-box-shadow: 0 5px 8px rgba(0,0,0,.1); -webkit-box-shadow: 0 5px 8px rgba(0,0,0,.1); box-shadow: 0 5px 8px rgba(0,0,0,.1);  cursor: pointer;}

/* Paddings*/
.pad-50-0 {
    padding: 50px 0 !important;
}

.pad-50 {
    padding: 50px !important;
}

.pad-100 {
    padding: 100px !important;
}

.pad-40 {
    padding: 40px !important;
}

.pad-25 {
    padding: 25px !important
}

.pad-50-30 {
    padding: 50px 30px !important
}

.pad-10 {
    padding: 10px !important;
}

.pad-15 {
    padding: 15px !important;
}

.pad-20 {
    padding: 20px !important;
}
.pad-0 {
    padding: 0 !important;
}
.pad-0-10 {
    padding:0  10px !important;
}
.pad-10-15 {
    padding: 10px  15px !important; 
}

.pad-15-0 {
    padding:  15px 0  !important; 
}
.pad-10-0 {
    padding:  10px 0  !important; 
}

.pad-6-0 {
    padding:  6px 0 !important; 
}

.pad-0-15 {
    padding: 0  15px !important; 
}
 .mar-top-160{ margin-top: 160px !important;}


/*Margins*/

.mar-bot-40 {
    margin-bottom: 40px !important;
}

.no-padding {
    padding: 0px !important;
}

.no-mar {
    margin: 0px !important;
}

.mar-lef--250 {
    margin-left: -250px;
}

.mar-bo-80 {
    margin-bottom: 80px;
}

.mar-to-150 {
    margin-top: 150px;
}

.mar-to-bo-100 {
    margin: 100px 0 !important;
}

.mar-top-50 {
    margin-top: 50px !important;
}

.mar-top-100 {
    margin-top: 100px !important;
}

.mar-50-0 {
    margin: 50px 0 !important;
}

.mar-left-150 {
    margin-left: 150px !important;
}

.mar-left--100 {
    margin-left: -100px !important;
}

.border-radius-10 {
    border-radius: 10px;
}
.mar-left-22 {
    margin-left: 22px !important;
}
.mar-top-30{ margin-top:30px; }
.mar-top-20{ margin-top:20px; }
.mar-bot-20{ margin-bottom:20px; }
.col-50{ width: 50%;}

/*Columns */

section {
    width: 100%;
    position: relative;
    float: left;
    height: auto;
}

.con {
    width: 2000px;
    display: block;
    margin: 0 auto; padding: 0 100px;
    float: none !important;
}

.con-980 {
    width: 980px;
    display: block;
    margin: 0 auto
}

.row {
    height: auto;
    width: 100%;
    position: relative;
    
}


.col-sm-1,
.col-sm-15,
.col-sm-20,
.col-sm-2,
.col-md-50,
.col-sm-3,
.col-sm-4,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-66,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-sm-70,
.col-33,
.col-sm-11 {
    padding: 5px;
    font-size: 13px;
     float: left;

  
}


.width-50 {
    width: 50% !important;
    max-width: 360px;
}
.col-100 {
    padding: 0;
    float: left;
    height: auto;
    width: 100%
}

.col-sm-1 {
    width: 8.333333%
}

.col-sm-20 {
    width: 20%;
}

.col-sm-16 {
    width: 14.2777%
}

.col-sm-2 {
    width: 16.666667%
}

.col-sm-3 {
    width: 25%
}

.col-sm-4 {
    width: 33.333333%
}

.col-md-1 {
    width: 41.666667%
}

.col-md-50 {
    width: 50%
}

.col-md-2 {
    width: 50%
}

.col-sm-70 {
    width: 68% !important;
}

.col-66 {
    width: 66% !important;
}

.col-sm-11 {
    width: 12% !important;
}

.col-md-3 {
    width: 58.333333%
}

.col-md-4 {
    width: 66.666667%
}

.col-33 {
    width: 33%
}

.col-lg-1 {
    width: 75%
}

.col-lg-2 {
    width: 83.333333%
}

.col-lg-3 {
    width: 91.666667%
}

.col-lg-4 {
    width: 100%
}


.width-100 {
    width: 100%;
}
.height-100 {
    height: 100%;
}
.width-100-vh {
    width: 100vh;
}
.height-100-vh {
    height: 100vh;
}

.width-height-100 {
    width: 100%;
    height: 100%;
}



/*Scrollbar*/

#ex3::-webkit-scrollbar {
    width: 7px;
    background-color: #ccc;
    height: 5px;
}

#ex3::-webkit-scrollbar-thumb {
    background-color: #ed4e6e;
    border-radius: 0
}

#ex3::-webkit-scrollbar-thumb:hover {
    background-color: #333;
    border: 1px solid #333
}

#ex3::-webkit-scrollbar-thumb:active {
    background-color: #333;
    border: 1px solid #333
}

#ex3::-webkit-scrollbar-track {
    border: 1px #e0e0e0 solid;
    box-shadow: 0 0 6px gray inset
}

.filter1::-webkit-scrollbar {
    width: 7px;
    background-color: #ccc
}

.filter1::-webkit-scrollbar-thumb {
    background-color: #5300A8;
    border-radius: 0
}

.filter1::-webkit-scrollbar-thumb:hover {
    background-color: #333;
    border: 1px solid #333
}

.filter1::-webkit-scrollbar-thumb:active {
    background-color: #333;
    border: 1px solid #333
}

.filter1::-webkit-scrollbar-track {
    border: 1px #e0e0e0 solid
}


.line-through {
    text-decoration: line-through;
}

.white-back {
    background: white;
}


/*Header*/


#mheader {
    display: none;
}



  
.pad-all-15 {padding: 15px;}
#mheader{ display: none; }



.mobile-menu { width: 140px; position: relative; float: right; right: 0px; padding: 15px 20px; }
.mobile-menu li{ width: 100%; padding: 10px 5px;   float: left;  font-size: 12px;   font-weight: 700;   color: #333;   }
.mobile-menu li:hover{ cursor: pointer; opacity: 0.7; }
.menu li:hover , .down-menu li:hover{color: #EC731F !important; cursor: pointer; }
.icon-span{  position: relative; float: right; height: 20px; width: 20px;  }
.menu-hide{ display: none; background: #fff;  }
.menu-li{ width: auto; position: relative; float: right; text-align: right; margin-right:10px; padding: 3px 0;  }
.overlay{position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    background-color: rgba(0,0,0,.3);}






/*--------------------------------------------------------------
# RESPONSIVE MEDIA QUERIES
--------------------------------------------------------------*/
@media(max-width:2000px) {
    .con{ width: 100% !important;}
}
@media(max-width:1180px) {
    .con{ width: 100% !important;}

      .col-sm-10 {
        width: 16.66%!important
    }
}
@media(max-width:768px) {
 
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-lg-1,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4 {
        width: 100%
    }
    .col-sm-1 {
        width: 25%
    }

    .col-sm-3 {
        width: 50%
    }
    .col-sm-4 {
        width: 50%
    }
    .col-sm-10 {
        width: 25%!important
    }
}

@media(max-width:580px) {
    
    .col-sm-1 {
        width: 33%
    }
    .col-sm-2 {
        width: 50%
    }
    .col-sm-4 {
        width: 100%
    }
    .three-box .col-sm-4 {
        width: 50% !important;
    }
}

    @media(max-width:480px) {
        
        .col-sm-1 {
            width: 50%
        }
        .col-sm-3 {
            width: 100%
        }
        .col-sm-4 {
            width: 100%
        }
         .col-sm-10 {
            width: 33.33%!important
        }
    }