/*
Theme Name: VSIONPad
Theme URI: https://vsionpad.com
Author: Daniel Meza
Author URI: https://www.lionzeven.com/
Description: Diseño exclusivo para el proyecto de VSIONPad

Version: 2023.1
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}


*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
html{
/*    font-size: calc(15px + 0.390625vw);*/
    font-size: 62.5%;
}
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
/*    font-family: Helvetica, sans-serif;*/
    font-size: calc(1.2rem + 0.390625vw);
    font-weight: 300;
    line-height: 1.5em;
    letter-spacing: 1px;
	color: #343a40;
    background-color: #FFFFFF;
}

h1,h2,h3,h4,h5,h6{
/*    font-family: 'Poppins', sans-serif;*/
    font-family: 'Conthrax', sans-serif;                                            
}

ul{ list-style: none;}
a{ text-decoration: none;}
.h100{ height: 100%;}


/*------------------------------------*\
    EXPANSION DE CONTENEDORES
\*------------------------------------*/
.m24{ margin: 24px 0;}

.p4{ padding: 4px 0;}
.p8{ padding: 8px 0;}
.p16{ padding: 16px 0;}
.p24{ padding: 24px 0;}
.p32{ padding: 32px 0;}
.p40{ padding: 40px 0;}
.p48{ padding: 48px 0;}
.p56{ padding: 56px 0;}
.p64{ padding: 64px 0;}
.p72{ padding: 72px 0;}
.p80{ padding: 80px 0;}
.p88{ padding: 88px 0;}
.p96{ padding: 96px 0;}
.p104{ padding: 104px 0;}
.p120{ padding: 120px 0;}
.p128{ padding: 128px 0;}

.pt4{ padding-top: 4px;}
.pt8{ padding-top: 8px;}
.pt16{ padding-top: 16px;}
.pt24{ padding-top: 24px;}
.pt32{ padding-top: 32px;}
.pt40{ padding-top: 40px;}
.pt48{ padding-top: 48px;}
.pt56{ padding-top: 56px;}
.pt64{ padding-top: 64px;}
.pt72{ padding-top: 72px;}
.pt80{ padding-top: 80px;}
.pt88{ padding-top: 88px;}
.pt96{ padding-top: 96px;}
.pt104{ padding-top: 104px;}
.pt120{ padding-top: 120px;}
.pt128{ padding-top: 128px;}

.pb4{ padding-bottom: 4px;}
.pb8{ padding-bottom: 8px;}
.pb16{ padding-bottom: 16px;}
.pb24{ padding-bottom: 24px;}
.pb32{ padding-bottom: 32px;}
.pb40{ padding-bottom: 40px;}
.pb48{ padding-bottom: 48px;}
.pb56{ padding-bottom: 56px;}
.pb64{ padding-bottom: 64px;}
.pb72{ padding-bottom: 72px;}
.pb80{ padding-bottom: 80px;}
.pb88{ padding-bottom: 88px;}
.pb96{ padding-bottom: 96px;}
.pb104{ padding-bottom: 104px;}
.pb120{ padding-bottom: 120px;}
.pb128{ padding-bottom: 128px;}


/*------------------------------------*\
    ANCHO DE ELEMENTOS
\*------------------------------------*/
.c50, .c60, .c70, .c80, .c90{
/*    background-color: rgba(127, 255, 212, 0.2);*/
}
.c40{ width: 40%; margin: 0 30%;}
.c50{ width: 50%; margin: 0 25%;}
.c60{ width: 60%; margin: 0 20%;}
.c70{ width: 70%; margin: 0 15%; }
.c80{ width: 80%; margin: 0 10%;}
.c90{ width: 90%; margin: 0 5%;}

.w20{ width: 20%;}
.w30{ width: 30%;}
.w35{ width: 35%;}
.w40{ width: 40%;}
.w45{ width: 45%;}
.w50{ width: 50%;}
.w55{ width: 55%;}
.w60{ width: 60%;}
.w65{ width: 65%;}
.w70{ width: 70%;}
.w80{ width: 80%;}
.w90{ width: 90%;}

.e3{
    width: 33.3333%
}


/*------------------------------------*\
    FLEX
\*------------------------------------*/

.flex{ 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex;
}
.flex-column{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
}
.flex-row{
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
}
.flex-wrap{ 
    -webkit-flex-flow: wrap;
        -ms-flex-flow: wrap;
            flex-flow: wrap;
}
.flex-between{
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
            justify-content: space-between;
}
.flex-around{
    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
            justify-content: space-around;
}
.flex-center{ 
    -webkit-box-align: center; 
        -ms-flex-align: center; 
    -webkit-align-items: center; 
            align-items: center;
}
.flex-middle{
    -webkit-box-align: center;
        -ms-flex-align: center;
    -webkit-align-items: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
    -webkit-justify-content: center;
            justify-content: center;
}
.flex-half{
    -webkit-box-pack: center;
        -ms-flex-pack: center;
    -webkit-justify-content: center;
            justify-content: center;
}
.flex-end{
    -webkit-box-pack: end;
        -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
            justify-content: flex-end;
}
.flex-start{
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.flex-bottom{ 
    -webkit-align-items: flex-end;
           -webkit-box-align: end;
              -ms-flex-align: end;
            align-items: flex-end;
}


/*------------------------------------*\
    BACKGROUNDS
\*------------------------------------*/
/*
.bg_00{ background-color: #343a40;}
.bg_01{ background-color: #292E33;}
.bg_02{ background-color: #daa14c;}
.bg_03{ background-color: #FFFFFF;}
*/



/*------------------------------------*\
    HEADER
\*------------------------------------*/
.container-inner{
    width: 80%;
    margin: 0 auto;
}
.main-menu{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 8px 0;
    background-color: rgba(0, 0, 0, 0);
/*    background-color: rgba(255, 255, 255, 0.9);*/
    border-bottom: 1px solid rgba(255, 255, 255, 0.64);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    z-index: 99999;
}
.main-menu .logo-base{ display: block;}
/*.main-menu .logo-fixed{ display: none;}*/
.main-menu.fixed-top{
    position: fixed;
    padding: 8px 0;
    background-color: rgba(0, 0, 0, 0.8);
    border-bottom: 1px solid #dfe4ea;
}
/*
.main-menu.fixed-top .logo-base{ display: none;}
.main-menu.fixed-top .logo-fixed{ display: block;}
*/
.header_inner{
}
.logo-base{
    width: 36rem;
}
.logo-base img{
    width: 100%;
}

/*------------------------------------*\
    MENU
\*------------------------------------*/
.sf-menu ul{
    display: -webkit-flex;
     display: -webkit-box;
     display: -ms-flexbox;
            display: flex;
    -webkit-box-orient: horizontal;
     -webkit-box-direction: normal;
       -webkit-flex-direction: row;
           -ms-flex-direction: row;
               flex-direction: row;
    -webkit-align-items: center;
      -webkit-box-align: center;
         -ms-flex-align: center;
            align-items: center;
}
.sf-menu ul li{
    margin-right: 1.6rem;
}
.sf-menu ul li a{
    font-family: 'Conthrax', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.2rem;
    line-height: 1.25em;
    text-transform: uppercase;
    color: #FFFFFF;
    color: #90da00;
    color: #191919;
}
.main-menu.fixed-top .sf-menu ul li a{
/*    color: #191919;*/
    color: #90da00;
}
.sf-menu ul li a:hover{
    color: #90da00;
    color: #800180;
}


/*------------------------------------*\
    GENERAL
\*------------------------------------*/
.container-page{
    width: 100%;
    background-size: cover;
}
.hide-element{ display: none;}

.desktop{ display: flex;}
.mobile{ display: none;}

/*------------------------------------*\
    HERO
\*------------------------------------*/
.hero{
    position: relative;
    width: 100%;
    height: 90vh;
    background-color: #FFFFFF;
/*    background: url(../img/hero/hero_bg_05.webp) bottom center no-repeat;*/
    background: url(../img/hero/hero_bg_09.webp) center center no-repeat;
    background-size: contain;
    overflow: hidden;
}
.hero-bottom img{ width: 100%;}
.hero-bottom{
    position: absolute;
    bottom: -1.12rem;
    left: 0;
    width: 100%;
    z-index: 99;
}
.hero-logo-img img{ width: 100%;}
.hero-man{
    position: absolute;
    width: 25%;
    bottom: -0.8rem;
    right: 15%;
}
.hero-man img{ width: 100%;}

/*------------------------------------*\
    PHRASE
\*------------------------------------*/
.phrase-box h4{
    font-size: 4rem;
    line-height: 1.25em;
    letter-spacing: 1px;
    color: #1A1A1A;
/*    color: #2f3542;*/
}
.phrase-top h4 span{
    clear: both;
    display: block;
    font-size: 1.8rem;
    line-height: 1.25em;
/*    color: #57606f;*/
    color: #0C70E8;
}
.phrase-center ul{
    padding: 6px 10px 2px 10px;
    border-radius: 50px;
    background-color: #90da00;
}
.phrase-center img{ 
    width: 50px;
    border: solid 3px #FFFFFF;
    border-radius: 50px;
}
.phrase-center ul{
    margin-left: 2.4rem;
    margin-right: 2.4rem;
}
.phrase-center li:nth-child(2){
    margin-left: -16px;
}
.phrase-center li:nth-child(3){
    margin-left: -16px;
}
.phrase-center li:last-child{
    width: 50px;
    height: 50px;
    margin-left: -16px;
    border-radius: 50px;
    background-color: #90da00;
}
.phrase-center li:last-child p{
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 50px;
    text-align: center;
}
.phrase-txt{
    font-size: 1.6rem;
    line-height: 1.25em;
    color: #0C70E8;
/*    color: #57606f;*/
}
.phrase-txt span{
    clear: both;
    display: block;
    font-weight: 700;
}
.phrase-bottom p{
    width: 88%;
    font-size: 18px;
    line-height: 1.5em;
    font-weight: 400;
    padding-top: 0.8rem;
}

/*------------------------------------*\
    ABOUT
\*------------------------------------*/
.about-box{
    position: relative;
/*    margin-top: -8rem;*/
    padding-bottom: 8rem;
    z-index: 99;
}
.about-left{
    width: 48%;
} 
.about-right{
    width: 48%;
}
.about-left img{
    display: block;
    width: 100%;
    margin: 0 auto;
}
.about-right h3{
    position: relative;
    font-size: 3.2rem;
    line-height: 1.25em;
    margin-bottom: 2.4rem;
}
.about-right h3::after{
    position: absolute;
    bottom: -12px;
    display: block;
    content: "";
    width: 120px;
    height: 2px;
    background-color: #90da00;
    
}
.about-right h3::after{
    left: 0;
    transform: translate(-32%, 0);
}
.about-right p{
    font-size: 1.8rem;
    line-height: 1.5;
    margin-bottom: 1.6rem;
}
.about-right p strong{
    font-weight: 700;
    text-transform: uppercase;
    color: #1A1A1A;
}

/*------------------------------------*\
    CHALLENGE
\*------------------------------------*/
.title-single-center{
    text-align: center;
    font-size: 5.6rem;
    line-height: 1.5em;
    margin-bottom: 2.4rem;
    color: #FFFFFF;
}
.challenge-box{
    padding: 8rem 0;
    background-color: #000000;
/*    background-color: #202020;*/
}
.single-challenge{
    padding: 8rem 0;
}
.challenge-left, .challenge-right{
    width: 48%;
}
.challenge-left h4, .challenge-right h4{
    position: relative;
    font-size: 2.4rem;
    margin-bottom: 24px;
    color: #90da00;
    color: #FFFFFF;
}
.challenge-left h4::after, .challenge-right h4::after{
    position: absolute;
    bottom: -12px;
    display: block;
    content: "";
    width: 120px;
    height: 2px;
    background-color: #90da00;
    
}
.challenge-left h4::after{
    left: 0;
    -webkit-transform: translate(-32%, 0);
    -ms-transform: translate(-32%, 0);
    transform: translate(-32%, 0);
}
.challenge-right h4::after{
    right: 0;
    -webkit-transform: translate(32%, 0);
        -ms-transform: translate(32%, 0);
            transform: translate(32%, 0);
}
.challenge-right h4{
    text-align: right;
}
.challenge-left p, .challenge-right p{
    font-size: 1.8rem;
    letter-spacing: 1px;
    line-height: 1.5em;
    text-align: justify;
    margin-bottom: 0.8rem;
    color: #a4b0be;
}
.challenge-left p strong, .challenge-right p strong{
    color: #90da00;
}
.challenge-left img, .challenge-right img{
    width: 80%;
    border-top-left-radius: 56px;
    border-top-right-radius: 56px;
    margin: 0 10%;
}

/*------------------------------------*\
    MARKET
\*------------------------------------*/
.market-box{
    padding: 8rem 0;
}
.market-info{
    padding: 4rem 0;
}
.market-left{ width: 56%;} 
.market-right{ width: 40%;}
.title-single-market span{
    clear: both;
    display: block;
    font-size: 2.4rem;
    line-height: 1.25em;
    color: #90da00;
}
.title-single-market{
    width: 80%;
    font-size: 3.2rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.4rem;
    color: #1A1A1A;
}
.market-left li{
    border-radius: 5rem;
    border: 1px solid #DFDFDF;
    padding: 4rem 5.6rem;
}
.market-left li:first-of-type{
    margin-bottom: 2.4rem;
}
.market-left li:last-of-type{
    border: 1px solid #335aff;
    background-color: #335aff;
}
.market-left li h4{
    font-size: 2.4rem;
    margin-bottom: 0.8rem;
}
.market-left li p{
    font-size: 1.6rem;
    line-height: 1.5em;
    text-align: left;
}
.market-left li p a{
    font-weight: 700;
    color: #00b6ff;
}
.market-left li:last-of-type h4, .market-left li:last-of-type p{
    color: #FFFFFF;
}
.market-right img{
    width: 100%;
    border-radius: 5rem;
}
/*------------------------------------*\
    SOLUTION
\*------------------------------------*/
.solution-box{
    padding-top: 4rem;
    padding-bottom: 8rem;
}
.title-solution{
    text-align: center;
    margin-bottom: 4rem;
}
.title-solution h3{
    font-size: 2.4rem;
}
.title-solution h3 span{
    clear: both;
    display: block;
    font-size: 4.8rem;
    padding-bottom: 1.6rem;
}
.item-single-solution{
    border-radius: 4rem;
    padding-top: 4rem;
    background-color: #000000;
}
.title-single-solution{
    width: 60%;
    min-height: 14rem;
    margin: 0 20%;
}
.item-single-solution h2{
    font-size: 1.6rem;
    line-height: 1.25em;
    text-align: center;
    color: #FFFFFF;
}
.item-single-solution img{
    display: block;
    width: 64%!important;
    margin: 0 auto;
    border-top-left-radius: 2.4rem;
    border-top-right-radius: 2.4rem;
}
.box-caro-solution{
    position: relative;
    width: 100%;
    overflow: hidden;
}
.box-caro-solution .owl-carousel{
    position: relative;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    width: 120%;
}


/*------------------------------------*\
    CAROUSEL
\*------------------------------------*/
.owl-carousel .owl-dots{
    display: flex;
    flex-direction: row;
    margin-top: 1.6rem;
}
.owl-carousel .owl-dot{
    display: block;
    width: 15px;
    height: 15px;
    line-height: 15px!important;
    border-radius: 30px;
    transition: all 0.3s ease-in-out;
    margin-left: 0.8rem;
}
.owl-carousel button.owl-dot{
    border: 4px solid #747d8c!important;
}
.owl-carousel .owl-dot.active{
    width: 30px;
    border: 4px solid #86FF00!important;
}

/*------------------------------------*\
    RESOURCES
\*------------------------------------*/
.resources-box{
    padding: 16rem 0;
}
.resources-box-inner{
    width: 90%;
    border-radius: 5rem;
    margin: 0 5%;
    padding: 6.4rem 0;
    background-color: #335aff;
}
.resource-left{ 
    position: relative;
    width: 50%;
}
.img-mockup{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64%;
    -webkit-transform: translate(-50%, -44%);
        -ms-transform: translate(-50%, -44%);
            transform: translate(-50%, -44%);
}
.resource-left img{ width: 100%;}
.resource-right{
    width: 50%;
}
.resource-right h2{
    position: relative;
    font-size: 3.2rem;
    line-height: 1.25em;
    margin-bottom: 2.4rem;
    color: #FFFFFF;
}
.resource-right h2::after{
    position: absolute;
    bottom: -12px;
    display: block;
    content: "";
    width: 120px;
    height: 2px;
    background-color: #90da00;
}
.resource-right h2::after{
    left: 0;
    -webkit-transform: translate(-32%, 0);
    -ms-transform: translate(-32%, 0);
    transform: translate(-32%, 0);
}
.resource-right p{
    font-size: 1.8rem;
    margin-bottom: 1.6rem;
    color: #FFFFFF;
    color: #CCD5FF;
}
.resource-right p:last-child{ margin-bottom: 0;}
.resource-right p strong{
    font-weight: 700;
    color: #FFFFFF;
}



/*------------------------------------*\
    FOOTER
\*------------------------------------*/
footer{
    background-color: #3259fe;
    background-color: #000000;
}
.footer-top{
    padding: 40px 0;
}
.footer-center-01, .footer-right{
    width: 24%;
}
.footer-left{
    width: 40%;
}
.footer-info .logo-small{
    width: 32rem;
    margin: 0;
    margin-bottom: 0.8rem;
}
.logo-small img{ width: 100%;}
.footer-info p{
    font-size: 1.6rem;
    line-height: 1.5em;
    margin-top: 0rem;
    margin-bottom: 1.6rem;
    color: #FFFFFF;
    color: #a4b0be;
}
.footer-right{
    text-align: right;
}
.footer-right h4{
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.25em;
    text-transform: uppercase;
    margin-bottom: 0.8rem;
    color: #FFFFFF;
}
.footer-right p{
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.25em;
    color: #a4b0be;
    color: #FFFFFF;
}
.footer-right p span{
    clear: both;
    display: block;
    font-size: 1.4rem;
    line-height: 1em;
    margin-bottom: 1.6rem;
    color: #90da00;
}
.footer-right a{
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.25em;
    color: #90da00;
}
.footer-bottom{
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.6rem 0;
}
.developer-box, .owner-box{
    width: 48%;
}
.developer-box p{
    font-size: 1.4rem;
    color: #FFFFFF;
}
.developer-box p a{
    font-weight: 600;
    color: #FFFFFF;
}
.developer-box p{ text-align: right;}
.owner-box{
    font-size: 1.4rem;
    letter-spacing: 1px;
    line-height: 1.25em;
    text-transform: uppercase;
    color: #FFFFFF;
}
.owner-box span{ color: #daa14c;}

/*------------------------------------*\
    FONTS
\*------------------------------------*/
@font-face{
    font-family: CalSans-Semibold;
    src: url(../fonts/CalSans-SemiBold.d19ce3e3.woff) format("woff"), url(../fonts/CalSans-SemiBold.d19ce3e3.woff) format("opentype");
    font-weight: 600;
    font-display: swap;
    font-style: normal;
}


/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

/*-------------------------------------------------
1. Media Queries to Fix Responsive Layouts
	1.1 Resolution (For Large Seized Desktops 1600x900)
	1.2 Resolution (For Medium Seized Desktops 1440x900)
	1.3 Resolution (For Small Seized Desktops 1280x800)
	1.4 Resolution (For Large Tablets 1024x800)
	1.5 Resolution (For Small Tablets 768x800)
	1.6 Resolution (For Mobile Phones 320x786)

-------------------------------------------*/
/*-------------------------------------------------
===================================================
	1. Media Queries to Fix Responsive Layouts
===================================================
-------------------------------------------------*/

/*-------------------------------------------------
	1.1 Resolution (For Large Seized Desktops 1600x900)
-------------------------------------------------*/
@media (min-width: 1921px) {

}

/*-------------------------------------------------
	1.1 Resolution (For Large Seized Desktops 1600x900)
-------------------------------------------------*/
@media (min-width: 1600px) and (max-width: 1919px) {
}
/*-------------------------------------------------
	1.2 Resolution (For Medium Seized Desktops 1440x900)
-------------------------------------------------*/
@media (min-width: 1440px) and (max-width: 1599px) {
}
/*-------------------------------------------------
	1.3 Resolution (For Small Seized Desktops 1280x800)
-------------------------------------------------*/
@media (min-width: 768px) and (max-width: 1280px) {

}
/*-------------------------------------------------
	1.4 Resolution (For Large Tablets 1024x600)
-------------------------------------------------*/
@media (min-width: 1024px) and (max-width: 1200px) {
    
}

/*-------------------------------------------------
	1.5 Resolution (For Small Tablets 768x800)
-------------------------------------------------*/
@media (min-width: 0px) and (max-width: 1024px) {

}

@media (min-width: 768px) and (max-width: 1024px) {

    
}
@media (min-width: 0px) and (max-width: 767px) {
    .desktop{ display: none;}
    .mobile{ display: block;}
    .about-box .flex-row,
    .single-challenge .flex-row,
    .market-info.flex-row,
    .resources-box-inner .flex-row,
    .footer-top.flex-row,
    .footer-bottom .flex-row{
        -webkit-box-orient: vertical!important;
        -webkit-box-direction: normal!important;
        -webkit-flex-direction: column!important;
            -ms-flex-direction: column!important;
                flex-direction: column!important;
    }
    .phrase-center .flex-row{
        -webkit-box-orient: horizontal!important;
        -webkit-box-direction: normal!important;
        -webkit-flex-direction: row!important;
            -ms-flex-direction: row!important;
                flex-direction: row!important;
    }
    .container-inner .flex{
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
    .hero{
        height: 56rem;
    }
    .hero-man{
        position: absolute;
        width: 64%;
        bottom: -0.8rem;
        right: 2%;
    }
    .about-box .c80,
    .market-box .c80{
        width: 98%;
        margin: 0 1%;
    }
    .phrase-center.mobile{
        padding-top: 1.6rem;
    }
    .phrase-center.mobile ul{
        width: 60%;
        margin: 0 auto;
        justify-content: center;
    }
    .phrase-txt{ text-align: center;}
    .logo-base{
        width: 24rem;
    }
    .about-box{
        margin-top: 0;
    }
    .about-left, .about-right{
        position: relative;
        width: 90%;
        margin: 0 5%;
    }
    .about-right{ order: 1;}
    .about-left{ order: 2;}
    .about-left img{
        width: 80%;
        margin: 0 10%;
    }
    .about-right{
        padding: 4rem 0;
    }
    .phrase-top h4{
        font-size: 2.8rem;
        text-align: center;
    }
    .phrase-top h4 span{
        font-size: 1.6rem;
    }
    .phrase-bottom p{
        text-align: center;
    }
    .challenge-box{
        overflow: hidden;
    }
    .single-challenge{
        padding: 4rem 0;
    }
    .single-challenge h4{
        line-height: 1.5em;
    }
    .challenge-left, .challenge-right{
        width: 100%;
    }
    .challenge-left img, .challenge-right img{
        width: 100%;
        margin: 0;
        margin-top: 2.4rem;
    }
    .single-challenge-02 .challenge-left{ order: 2;}
    .single-challenge-02 .challenge-right{ order: 1;}
    .title-single-center{
        font-size: 2.4rem;
        line-height: 1.5em;
        margin-bottom: 2.4rem;
    }
    .market-box{
        padding: 4rem 0;
    }
    .title-single-market h3{
        font-size: 1.8rem;
        line-height: 1.25em;
    }
    .market-info{
        padding: 1.6rem 0;
    }
    .market-left, .market-right{
        width: 90%;
        margin: 0 5%;
    }
    .market-left li{
        padding: 4rem 3.2rem;
    }
    .market-left li h4, .market-left li p{
        text-align: center;
    }
    .market-right{
        margin-top: 1.6rem;
    }
    .solution-box .c80{
        width: 90%;
        margin: 0 5%;
    }
    .title-solution h3{
        font-size: 1.8rem;
        line-height: 1.25em;
    }
    .box-caro-solution .owl-carousel{
        position: relative;
        left: 50%;
        -webkit-transform: translate(-50%, 0);
            -ms-transform: translate(-50%, 0);
                transform: translate(-50%, 0);
        width: 98%;
    }
    .resources-box{
        padding: 2.4rem;
    }
    .resources-box-inner .c90{
        width: 84%;
        margin: 0 8%;
    }
    .resource-left, .resource-right{
        width: 100%;
    }
    .img-mockup{
        position: relative;
        top: 50%;
        left: 50%;
        width: 90%;
        margin-bottom: -12rem;
        -webkit-transform: translate(-50%, -40%);
            -ms-transform: translate(-50%, -40%);
                transform: translate(-50%, -40%);
    }
    .resource-right h2{
        font-size: 1.8rem;
        line-height: 1.25em;
        text-align: center;
    }
    .resource-right h2 span{
        font-size: 2rem;
    }
    .resource-right p{
        font-size: 1.6rem;
        text-align: center;
    }
    .footer-left, .footer-right{
        width: 90%;
        margin: 0 5%;
    }
    .footer-left .logo-small{
        position: relative;
        left: 50%;
        -webkit-transform: translate(-50%, 0);
            -ms-transform: translate(-50%, 0);
                transform: translate(-50%, 0);
    }
    .footer-left p{
        text-align: center;
    }
    .footer-right{
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-top: 2.4rem;
        padding-top: 2.4rem;
    }
    .owner-box, .developer-box{
        width: 100%;
        text-align: center;
    }
    .developer-box p{ 
        text-align: center;
        margin-top: 1.6rem;
    }
}