@import url('//fonts.googleapis.com/css?family=Encode+Sans+Condensed:300,500,700');
@import url('//fonts.googleapis.com/css?family=Raleway:400,600,800');

/* BASIC */
*{ margin:0; padding:0; -webkit-box-sizing:border-box; box-sizing:border-box; outline:none !important; list-style:none; }

body{ color:#333; line-height:15px; font-weight:400; font-family:'Raleway', sans-serif; overflow-x:hidden !important; }

h1, h2, h3, h4, h5, h6{ font-family:'Raleway', sans-serif; }

img{ max-width:100%; height:auto; }


.sh{float:none;clear:both;font-size:0px;line-height:0px;}


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

.container{ width:980px; height: 100%; min-height: 100%; margin: 0 auto; }

.hero{ padding:50px 0; background-size:cover; background-repeat:no-repeat; background-image:url("https://www.mcodedeveloper.com/images/bg01.jpg");}

.hero .logo{ text-align:center; margin-top:30px; margin-bottom:30px; }
.hero .slogan{ text-align:center; color:#FFF; font-size:20px; font-weight:300; margin-bottom:40px; }
.salto{ display:none; margin-bottom:20px; }


.theproducts{ padding:100px 0 90px; }
.theproducts a{ text-decoration:none; }
.theproducts .thetitle{ margin-bottom:60px; text-align:center; font-size:35px; font-weight:300; }
.theproducts .oneproduct{ position:relative; float:left; width:40%; margin:30px 5%; padding:8px; border:1px solid #C4C4C4; }
.theproducts .oneproduct .imgprod{ }
.theproducts .oneproduct .imgprod img{ font-size:0; }
.theproducts .oneproduct .nameprod{ padding:10px 0 5px; text-align:center; font-size:16px; font-weight:600; color:#000; }


.thefooter{ background-color:#111; padding:60px 0; }
.thefooter .theminilogo{ text-align:center; margin-bottom:30px; }
.thefooter .theminilogo img{ width:180px; opacity:0.75; }
.thefooter .copyright{ color:#928e8e; text-align:center; font-size:13px; }


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

.hero-app{ padding:7px 0 5px; background-size:cover; background-repeat:no-repeat; background-image:url("https://www.mcodedeveloper.com/images/bg01.jpg");}
.hero-app .logo{ position:relative; float:left; }
.hero-app .logo img{ height:40px; font-size:0; }
.hero-app .slogan{ position:relative; float:right; color:#FFF; font-size:15px; font-weight:300; line-height:38px; }

.content-app{ padding:70px 0; font-family: 'Encode Sans Condensed', sans-serif; }
.content-app .side01{ position:relative; float:left; width:50%; border-right:1px dashed #CCCCCC; padding:20px 50px 20px 0; }
.content-app .side01 .thetitle{ font-size:26px; font-weight:bold; margin-bottom:20px; }
.content-app .side01 .thetext{ font-size:20px; font-weight:300; line-height:30px; text-align:justify; }
.content-app .side01 .thetext p{ margin:15px 0; }
.content-app .side01 .thetext strong{ font-weight:500; }

.content-app .side01 .thescreenshots{ margin:40px 0; }
.content-app .side01 .thescreenshots .theimg{ text-align:center; margin-top:25px; }
.content-app .side01 .thescreenshots .theimg img{ width:320px; height:auto; padding:10px; border:1px solid #CCC; }

.content-app .side02{ position:relative; float:right; width:50%; padding:20px 0 20px 50px; }
.content-app .side02 .thetitle{ font-size:26px; font-weight:bold; margin-bottom:20px; }
.content-app .side02 .thetext{ font-size:20px; font-weight:300; line-height:27px; }
.content-app .side02 .thetext li{ list-style:square; margin-left:20px; margin-bottom:10px; }
.content-app .side02 .thetext strong{ font-weight:500; }
.content-app .side02 .thetext .more{ margin-top:20px; }

.btnsactions{ margin:30px 0; }
.btnsactions .thebtns{ text-align:center; margin-bottom:120px; }
.btnsactions .thebtns a{ text-decoration:none; }
.btnsactions .thebtns .btnaction{ color:#fff; padding:15px 45px; font-size:18px; border-radius:3px; cursor:pointer; }
.btnsactions .thebtns .btnaction.green{ background-color:#84c529; }
.btnsactions .thebtns .btnaction.green:hover{ background-color:#6FA622; }
.btnsactions .thebtns .btnaction.blue{ background-color:#14AEF4; }
.btnsactions .thebtns .btnaction.blue:hover{ background-color:#0878AB; }


.head-isocial{ background-color:#324f85; padding:100px 0; }
.head-isocial .title-app{ text-align:center; }

.head-babbel{ background-color:#ecf0f1; padding:80px 0 70px; }
.head-babbel .title-app{ text-align:center; }

.head-mylists{ background-color:#fdcb16; padding:80px 0 70px; }
.head-mylists .title-app{ text-align:center; }

.head-talktoexperts{ background-color:#255c94; padding:100px 0; }
.head-talktoexperts .title-app{ text-align:center; }


.content-app-onecolumn{ padding:70px 0 20px; font-family: 'Encode Sans Condensed', sans-serif; }
.content-app-onecolumn .thetitle{ font-size:26px; font-weight:bold; margin-bottom:20px; }
.content-app-onecolumn .thetext{ font-size:20px; font-weight:300; line-height:30px; text-align:justify; }
.content-app-onecolumn .thetext p{ margin:15px 0; }
.content-app-onecolumn .thetext strong{ font-weight:500; }

.content-app-onecolumn .thescreenshots{ margin:40px 0; }
.content-app-onecolumn .thescreenshots .theimg{ position:relative; float:left; margin:30px 25px; }
.content-app-onecolumn .thescreenshots .theimg img{ width:320px; height:auto; padding:10px; border:1px solid #CCC; }


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




/* Styles for Wide Screens - WIDE DESKTOP LAYOUT
----------------------------------------------- */

@media only screen and (min-width: 1176px) {
    .container{ width:1176px; }
	
    
} /* END WIDE LAYOUT */


/* Styles for Tablets - TABLET LAYOUT
----------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 991px) {
	
	.container{ width:768px; }
	
    .theproducts{ padding:70px 0 70px; }
    .theproducts .thetitle{ margin-bottom:40px; }
    .theproducts .oneproduct{ width:45%; margin:20px 2.5%; padding:8px; }

    .content-app{ padding:55px 0; }    
    .content-app .side01{ padding:20px 30px 20px 0; }
    .content-app .side02{ padding:20px 0 20px 30px; }

} /* END TABLET LAYOUT */


/* Styles for Mobiles - MOBILE LAYOUT (PORTRAIT/320PX) - Smartphone Vertical
----------------------------------------------- */

@media only screen and (max-width: 767px) {
    
	.container{ width: 300px; }

    .hero .logo{ margin-bottom:10px; }
    .hero .logo img{ width:80%; height:auto; }
    .hero .slogan{ margin-bottom:30px; font-size:16px; }

    .salto{ display:block; margin-bottom:10px; }

    .theproducts{ padding:45px 0 40px; }
    .theproducts .thetitle{ font-size:26px; margin-bottom:40px; }
    .theproducts .oneproduct{ float:none; width:100%; margin:0; margin-bottom:30px; }

    .thefooter .theminilogo img{ width:150px; }



    .hero-app .logo{ float:none; text-align:center; }
    .hero-app .logo img{ height:30px; }
    .hero-app .slogan{ float:none; text-align:center; font-size:12px; line-height:20px; }

    .head-isocial{ padding:90px 0; }
    .head-isocial .title-app img{ width:280px; }

    .head-babbel{ padding:90px 0; }
    .head-babbel .title-app img{ width:280px; }

    .head-mylists{ padding:90px 0; }
    .head-mylists .title-app img{ width:280px; }

    .head-talktoexperts{ padding:90px 0; }
    .head-talktoexperts .title-app img{ width:280px; }


    .content-app{ padding:40px 0; }
    
    .content-app .side01{ float:none; width:100%; border-right:none; padding:20px 0; }
    .content-app .side01 .thetext{ font-size:16px; line-height:25px; }
    .content-app .side01 .thescreenshots .theimg img{ width:250px; height:auto; }
    
    .content-app .side02{ float:none; width:100%; padding:20px 0; }
    .content-app .side02 .thetext{ font-size:16px; line-height:25px; }


    .btnsactions .thebtns .btnaction{ padding:10px 15px; font-size:15px; }


    .content-app-onecolumn{ padding:30px 0; }
    .content-app-onecolumn .thescreenshots .theimg{ float:none; width:250px; margin:30px auto; }
    .content-app-onecolumn .thescreenshots .theimg img{ width:250px; }


} /* END MOBILE LAYOUT */


/* Styles for Mobiles - WIDE MOBILE LAYOUT (LANDSCAPE/480PX) - Smartphone Horizontal
----------------------------------------------- */

@media only screen and (min-width: 480px) and (max-width: 767px) {
    
	.container{ width: 480px; padding:0px; }

    .hero .logo img{ width:60%; height:auto; }
    .hero .slogan{ font-size:18px; }    

    .salto{ margin-bottom:15px; }

    .theproducts .thetitle{ margin-bottom:40px; }
    
    .theproducts .oneproduct{ float:none; width:100%; margin-bottom:30px; }

    .thefooter .theminilogo img{ width:170px; }



    .hero-app .logo{ float:none; text-align:center; }
    .hero-app .logo img{ height:30px; }
    .hero-app .slogan{ float:none; text-align:center; font-size:12px; line-height:20px; }

    .head-isocial{ padding:70px 0; }
    .head-isocial .title-app img{ width:320px; }

    .head-babbel{ padding:70px 0; }
    .head-babbel .title-app img{ width:320px; }

    .head-mylists{ padding:70px 0; }
    .head-mylists .title-app img{ width:320px; }

    .head-talktoexperts{ padding:70px 0; }
    .head-talktoexperts .title-app img{ width:320px; }
    

    .content-app{ padding:50px 0; }
    
    .content-app .side01{ float:none; width:100%; border-right:none; padding:20px 0; }
    .content-app .side01 .thetext{ font-size:18px; line-height:28px; }
    .content-app .side01 .thescreenshots .theimg img{ width:300px; height:auto; }
    
    .content-app .side02{ float:none; width:100%; padding:20px 0; }
    .content-app .side02 .thetext{ font-size:18px; line-height:28px; }
    

    .btnsactions .thebtns .btnaction{ padding:10px 25px; font-size:18px; }


    .content-app-onecolumn .thescreenshots .theimg{ float:none; width:300px; margin:30px auto; }
    .content-app-onecolumn .thescreenshots .theimg img{ width:300px; }

    
} /* END WIDE MOBILE LAYOUT */



/* For the devices Retina - RETINA OVERRIDES
----------------------------------------------- */

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {}