/*Create Responsive Layouts*/



/*Base*/
.c,.clear,.take-end {clear: both;}
.fl{float: left}
.fr{float: right}
.fn{float: none}
.uc,.upper-case{text-transform: uppercase}
.lc,.lower-case{text-transform: lowercase}
.bold{font-weight:bold;}
.tl{text-align: left}
.tr{text-align: right}
.tc{text-align: center}
.tj{text-align: justify}
.en{ direction: ltr;text-align: left;}
.fa{ direction: rtl;text-align: right;}
.mw,.responsive{max-width: 100%}
.sl{left: 0}
.sr{right: 0}
.st{top:0}
.gh,.ghost{ padding: 0;margin: 0;box-shadow: none}
.hidden,.hide,div.hide,div.hidden{ display: none;}
.hover{cursor: pointer;outline: none;}
.minh-100{min-height:100px}
.minh-50{min-height:100px}
.larger{font-size: larger;}
.smaller{font-size:smaller;}
.circle{border-radius: 100%;}
.min-400px{min-width: 400px}
.rtl{direction:rtl;}
.ltr{direction:ltr;}
.flip-h{transform:scaleX(-1);}
.flip-v{transform:scaleY(-1);}
.nowrap{ white-space: nowrap;}
.responsive{ max-width: 100%;}

.bc-stretch{ background-size: 100% 100%;}
.image-cover,.img-cover,.bc-cover{ background-size: cover;background-repeat: no-repeat;background-position: center;}
.image-contain,.img-contain,.bc-contain{ background-size: contain;background-position: center;background-repeat: no-repeat;}
.bc-fixed{ background-attachment: fixed;}
.image-stretch,.bc-stretch{ background-size: 100% 100%;}
.fw,.take.fw{ width: 100%;}
.aw,.take.aw{ width: auto;}
.icon {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
.nl{ outline: none;}

/*Aspect Ratio  */
.keep-aspect-ratio {width: 100%;position: relative;padding-bottom: 66%;}
.keep-aspect-ratio>.keep-4-3 {padding-bottom: 75%;}
.keep-aspect-ratio > div {
    top: 0; bottom: 0; left: 0; right: 0;
    position: absolute;
}


/*
 ==> just use a div inside
aspect ratio  | padding-bottom value
--------------|----------------------
    16:9      |       56.25%
    4:3       |       75%
    3:2       |       66.66%
    8:5       |       62.5%     
*/


/*Regions*/
.take,
.region {
    display: block;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    padding: 0;
    margin: 0;
    box-sizing: border-box;    
}


/*stage*/
.stage{
    max-width:100%;
    width:1200px;
    margin:auto;
    display:block;
}
.stage.hero{width:100%;}
.block{width:100%;clear:both;margin:auto;display:block;}



/*responsive check points*/
/*
    1200px      992px       768px       576px
    1140px      960px       720px       540px
    lg          (*normal)   sm          xs
*/


/*MinWidth*/
.cols-mw-50>.take,.mw-50{min-width: 50px;}
.cols-mw-100>.take,.mw-100{min-width: 100px;}
.cols-mw-150>.take,.mw-150{min-width: 150px;}
.cols-mw-200>.take,.mw-200{min-width: 200px;}


.cols- >.take.take-all,
.cols-1>.take.take-all,
.cols-2>.take.take-all,
.cols-3>.take.take-all,
.cols-4>.take.take-all,
.cols-5>.take.take-all,
.cols-6>.take.take-all,
.cols-7>.take.take-all,
.cols-8>.take.take-all,
.cols-9>.take.take-all,
.cols-10>.take.take-all,
.cols-11>.take.take-all,
.cols-12>.take.take-all,
.take,.take-all,.take.take-all,.take-0,.take.take-0
{
    width: 100%;
    float:right;
}

.rtl>.take,.take-right{float:right;}
.ltr>.take,.take-left{float:left;}


.cols-,
.cols-0 ,
.cols-1 ,
.cols-2 ,
.cols-3 ,
.cols-4 ,
.cols-5 ,
.cols-6 ,
.cols-7 ,
.cols-8 ,
.cols-9 ,
.cols-10 ,
.cols-11 ,
.cols-12 {
    /*display: block;
    width: 100%;
    white-space: normal;
    padding: 0;
    margin: 0;
    box-sizing: border-box;*/    
}


.cols-1>.take,
.cols-1>.take-0,
.cols-1>.take-1 { width: 100%;}

.cols-2>.take,
.cols-2>.take-0,
.cols-2>.take-1 { width: 50%;}
.cols-2>.take-2 { width: 100%;}
.cols-2>.take-3 { width: 100%;}
.cols-2>.take-4 { width: 100%;}
.cols-2>.take-5 { width: 100%;}
.cols-2>.take-6 { width: 100%;}


.cols-3>.take,
.cols-3>.take-0,
.cols-3>.take-1 { width: 33.333%;}
.cols-3>.take-2 { width: 66.666%;}
.cols-3>.take-3 { width: 100%;}
.cols-3>.take-4 { width: 100%;}
.cols-3>.take-5 { width: 100%;}
.cols-3>.take-6 { width: 100%;}


.cols-4>.take,
.cols-4>.take-0,
.cols-4>.take-1 { width: 25%;}
.cols-4>.take-2 { width: 50%;}
.cols-4>.take-3 { width: 75%;}
.cols-4>.take-4 { width: 100%;}
.cols-4>.take-5 { width: 100%;}
.cols-4>.take-6 { width: 100%;}


.cols-5>.take,
.cols-5>.take-0,
.cols-5>.take-1 { width: 20%;}
.cols-5>.take-2 { width: 40%;}
.cols-5>.take-3 { width: 60%;}
.cols-5>.take-4 { width: 80%;}
.cols-5>.take-5 { width: 100%;}
.cols-5>.take-6 { width: 100%;}

.cols-6>.take,
.cols-6>.take-0,
.cols-6>.take-1 { width: 16.6666%;}
.cols-6>.take-2 { width: 33.3333%;}
.cols-6>.take-3 { width: 50%;}
.cols-6>.take-4 { width: 66.6666%;}
.cols-6>.take-5 { width: 83.3333%;}
.cols-6>.take-6 { width: 100%;}

.cols-7>.take,
.cols-7>.take-0,
.cols-7>.take-1 { width: 14.2857%;}
.cols-7>.take-2 { width: 28.5714%;}
.cols-7>.take-3 { width: 42.8571%;}
.cols-7>.take-4 { width: 57.1428%;}
.cols-7>.take-5 { width: 71.4285%;}
.cols-7>.take-6 { width: 85.7142%;}
.cols-7>.take-7 { width: 100%;}

.cols-8>.take,
.cols-8>.take-0,
.cols-8>.take-1 { width: 12.5%;}
.cols-8>.take-2 { width: 25%;}
.cols-8>.take-3 { width: 37.5%;}
.cols-8>.take-4 { width: 50%;}
.cols-8>.take-5 { width: 62.5%;}
.cols-8>.take-6 { width: 75%;}
.cols-8>.take-7 { width: 87.5%;}
.cols-8>.take-8 { width: 100%;}

.cols-9>.take,
.cols-9>.take-0,
.cols-9>.take-1 { width: 11.1111%}
.cols-9>.take-2 { width: 22.2222%}
.cols-9>.take-3 { width: 33.3333%}
.cols-9>.take-4 { width: 44.4444%}
.cols-9>.take-5 { width: 55.5556%}
.cols-9>.take-6 { width: 66.6667%}
.cols-9>.take-7 { width: 77.7778%}
.cols-9>.take-8 { width: 88.8889%}
.cols-9>.take-9 { width: 100.0000%}


.cols-10>.take,
.cols-10>.take-0,
.cols-10>.take-1 { width: 10.0000%}
.cols-10>.take-2 { width: 20.0000%}
.cols-10>.take-3 { width: 30.0000%}
.cols-10>.take-4 { width: 40.0000%}
.cols-10>.take-5 { width: 50.0000%}
.cols-10>.take-6 { width: 60.0000%}
.cols-10>.take-7 { width: 70.0000%}
.cols-10>.take-8 { width: 80.0000%}
.cols-10>.take-9 { width: 90.00000%}
.cols-10>.take-10 { width:100.0000%}





.take-padding-light {
    padding: 2px;
}




/*padding*/
.padding-12{padding:12px;}
.padding-10{padding:10px;}


/*take percent*/
.take.take-100,.take-100{width:100%;}
.take.take-90{width:90%;}
.take.take-80{width:80%;}
.take.take-70{width:70%;}
.take.take-60{width:60%;}
.take.take-50{width:50%;}
.take.take-40{width:40%;}
.take.take-30{width:30%;}
.take.take-33{width:33.3333%;}
.take.take-25{width:25%;}
.take.take-20{width:20%;}
.take.take-16{width:16.6666%;}
.take.take-14{width:14.285714%;}
.take.take-12{width:12.5%;}
.take.take-11{width:11.1111%;}
.take.take-10{width:10%;}
.take.take-9{width:9.9090%;}
.take.take-8{width:8.3333%;}

.take-none{display:none;}
.take-block{display:block;float: none}
.take-inline{display:inline;width: auto;float: none;}
.take-inline-block{display:inline-block;width: auto;float: none;}



/*Responsive :)*/




@media only screen and (min-width:1200px){
    /*take percent  lg*/
    .take.take-lg-100{width:100%;}
    .take.take-lg-50{width:50%;}
    .take.take-lg-33{width:33.3333%;}
    .take.take-lg-25{width:25%;}
    .take.take-lg-20{width:20%;}
    .take.take-lg-16{width:16.6666%;}
    .take.take-lg-14{width:14.285714%;}
    .take.take-lg-12{width:12.5%;}
    .take.take-lg-11{width:11.1111%;}
    .take.take-lg-10{width:10%;}
    .take.take-lg-9{width:9.9090%;}
    .take.take-lg-8{width:8.3333%;}
}

@media only screen and (max-width : 1100px) {

    .cols-md-1>.take,
    .cols-md-1>.take-0,
    .cols-md-1>.take-1 { width:100%;}
    
    .cols-md-2>.take,
    .cols-md-2>.take-0,
    .cols-md-2>.take-1 { width:50%;}
    

    .cols-md-3>.take,
    .cols-md-3>.take-0,
    .cols-md-3>.take-1 { width:33.333%;}
    .cols-md-3>.take-2 { width:66.666%;}

    .cols-md-4>.take,
    .cols-md-4>.take-0,
    .cols-md-4>.take-1 { width:25%;}
    .cols-md-4>.take-2 { width:50%;}
    .cols-md-4>.take-3 { width:75%;}
    
    
.cols>.take-md-all { width: 100%;}


.cols-2>.take-md-0,
.cols-2>.take-md-1 { width: 50%;}
.cols-2>.take-md-2 { width: 100%;}


.cols-3>.take-md,
.cols-3>.take-md-0,
.cols-3>.take-md-1 { width: 33.333%;}
.cols-3>.take-md-2 { width: 66.666%;}
.cols-3>.take-md-3 { width: 100%}


.cols-4>.take-md-0,
.cols-4>.take-md-1 { width: 25%;}
.cols-4>.take-md-2 { width: 50%;}
.cols-4>.take-md-3 { width: 75%;}


.cols-5>.take-0,
.cols-5>.take-md-1 { width: 25%;}
.cols-5>.take-md-2 { width: 50%;}
.cols-5>.take-md-3 { width: 75%;}
.cols-5>.take-md-4 { width: 75%;}
}

@media only screen and (max-width : 800px) {

    .sm-smaller {
        font-size: smaller;
    }
    .cols-sm-1>.take,
    .cols-sm-1>.take-0,
    .cols-sm-1>.take-1 { width:100%;}
    
    .cols-sm-2>.take,
    .cols-sm-2>.take-0,
    .cols-sm-2>.take-1 { width:50%;}
    

    .cols-sm-3>.take,
    .cols-sm-3>.take-0,
    .cols-sm-3>.take-1 { width:33.333%;}
    .cols-sm-3>.take-2 { width:66.666%;}

    .cols-sm-4>.take,
    .cols-sm-4>.take-0,
    .cols-sm-4>.take-1 { width:25%;}
    .cols-sm-4>.take-2 { width:50%;}
    .cols-sm-4>.take-3 { width:75%;}
    
    .cols>.take-sm-all { width: 100%;}


.cols-2>.take-sm-0,
.cols-2>.take-sm-1 { width: 50%;}
.cols-2>.take-sm-2 { width: 100%;}


.cols-3>.take-sm,
.cols-3>.take-sm-0,
.cols-3>.take-sm-1 { width: 33.333%;}
.cols-3>.take-sm-2 { width: 66.666%;}
.cols-3>.take-sm-3 { width: 100%}


.cols-4>.take-sm-0,
.cols-4>.take-sm-1 { width: 25%;}
.cols-4>.take-sm-2 { width: 50%;}
.cols-4>.take-sm-3 { width: 75%;}


.cols-5>.take-0,
.cols-5>.take-sm-1 { width: 25%;}
.cols-5>.take-sm-2 { width: 50%;}
.cols-5>.take-sm-3 { width: 75%;}
.cols-5>.take-sm-4 { width: 75%;}
}

@media only screen and (max-width:768px){
    /*take percent  sm*/
    .take.take-sm-all{width:100%;}
    .take.take-sm-100{width:100%;}
    .take.take-sm-50{width:50%;}
    .take.take-sm-33{width:33.3333%;}
    .take.take-sm-25{width:25%;}
    .take.take-sm-20{width:20%;}
    .take.take-sm-16{width:16.6666%;}
    .take.take-sm-14{width:14.285714%;}
    .take.take-sm-12{width:12.5%;}
    .take.take-sm-11{width:11.1111%;}
    .take.take-sm-10{width:10%;}
    .take.take-sm-9{width:9.9090%;}
    .take.take-sm-8{width:8.3333%;}

    .take-sm-none{display:none;}
    .take-sm-block{display:block;}
    .take-sm-inline{display:inline;}
    .take-sm-inline-block{display:inline-block;}




    /*cols*/
}

@media only screen and (max-width:540px) {
    /*take percent  xs*/
    .take.take-xs-100{width:100%;}
    .take.take-xs-50{width:50%;}
    .take.take-xs-33{width:33.3333%;}
    .take.take-xs-25{width:25%;}
    .take.take-xs-20{width:20%;}
    .take.take-xs-16{width:16.6666%;}
    .take.take-xs-14{width:14.285714%;}
    .take.take-xs-12{width:12.5%;}
    .take.take-xs-11{width:11.1111%;}
    .take.take-xs-10{width:10%;}
    .take.take-xs-9{width:9.9090%;}
    .take.take-xs-8{width:8.3333%;}

    .take-xs-none{display:none;}
    .take-xs-block{display:block;}
    .take-xs-inline{display:inline;}
    .take-xs-inline-block{display:inline-block;}



    /*cols*/
    .cols-xs-1>.take{ width: 100%;}
    .cols-xs-2>.take{ width: 50%;}
    .cols-xs-3>.take{ width: 33.3333%;}
    .cols-xs-4>.take{ width: 25%;}
    .cols-xs-5>.take{ width: 20%;}
    .cols-xs-6>.take{ width: 16.6666%;}
    .cols-xs-7>.take{ width: 14.285714%;}
    .cols-xs-8>.take{ width: 12.5%;}
    .cols-xs-9>.take{ width: 11.1111%;}
    .cols-xs-10>.take{ width: 8.3333%;}


}



@media only print {
    .np{display: none}
}




/*items*/
.bc-white{background-color:white;}