/* Big tablet to 1200px (widths smaller taht the 1140px row) */
@media only screen and (max-width: 1200px) {
    
    body{
        font-size: 84%;
    }

    .hero-text-box {
        width: 100%;
        padding: 0 2%;
        font-size: 90%;
    }
    
    .row { padding: 0 2%; }
   
}

/*  tablet from 768px to 1024px (widths smaller then the 1140px row) */
@media only screen and (max-width: 1024px) {
    
    body{
        font-size: 110%;
    }

    .logo {
        height: 100px;
        float: left;
        margin-top: 5px;
        margin-left: 20%;
    }
    .brand {
        margin-top: 40px ;
        margin-left: 20px;
        text-align: center;
        font-size: 100%;
        width: auto;
       
    }
    
    nav{
        background-color: rgba(80, 78, 78, 0.87);
        position: absolute;
       
    }
    
     .main-nav {display: inline-block;}
    .main-nav {
        list-style: none;
        margin-bottom: 20px;
        font-weight: 400;
/*         width: 100%; */
        text-align: center;
        font-size: 100%;
        margin-top: 15px;
        
        
    }
    
/*
    .main-nav li {
        display: inline-block;
        margin-left: 20px;
        margin-top: 0px;
        
    }
*/
    .hero-text-box {
        width: 100%;
        padding: 0 2%;
        font-size: 80%;
       
    }
    .firma-text-box {
        width: 100%;
        font-size: 80%;
        
    }

    
}


/*  tablet from 481 to 768 (widths smaller taht the 1140px row) */
@media only screen and (max-width: 767px) {
    body{ font-size: 16px;}
    section{padding: 30px 0;}
    .row {padding: 0 4%;}
    
    .col{
        width: 100%;
        margin-left: 0;
        
    }
    
    
    .main-nav {display: none;}
    .mobile-nav-icon {display: inline-block;}
    
    .main-nav {
        float: left;
/*         margin-top: 30px; */
/*         margin-left: 25px; */
		font-size: 90%; 
    }
    
    .main-nav li {
        display: block;
         padding: 4px 0;
    }
    
    .main-nav li a:link,
    .main-nav li a:visited {
       
        border: 0;
        font-size: 100%;
    }
    
    
    .js--main-nav{
        z-index: 9990;
    }
    
/*
    .sticky .main-nav {
    position: fixed;
    margin-bottom: 30px;
    top:0;
    left:0;
    width: 100%;
    background-color: red;
}
   
    .sticky .main-nav { margin-top: 18px; }

    .sticky .main-nav li a:link,
    .sticky .main-nav li a:visited {
        padding: 16px 0;
        color: #555;
    }

        .sticky .logo { display: none; }
        .sticky .logo-black { display: block; }
*/
    
    .logo {
        height: 70px;
        float: left;
        margin-top: 5px;
        margin-left: 0;
    }
    .brand {
        margin-top: 20px ;
        margin-left: 20px;
        text-align: center;
        font-size: 100%;
        float: left;
        width: 70%;
        
    }
    
    .hero-text-box {
    	width: 100%;
    	padding: 0 2%;
/*     	font-size: 80%; */
    	position: absolute;
        top: 55%;
        left: 55%;
    	/* transform: translate(-50%, -50%); */
	}
    
    .hero-text-box h1 {
/*         padding:0 4%; */
        width: 100%;
        margin: 0px;
        font-size: 130%;
    }
    .app-screen{ width: 50%;}
    
    .steps-box:first-child {
        text-align:center;
        padding-right: 4%;
        margin-top: 40px;
    }
/*    .main-nav {display: none;}*/
    
    .berufsfindung-step div  {
        display: inline-block;
        height: 40px;
        width: 40px;
        padding: 4px;
        font-size: 130%;

    }
    .berufsfindung-step{
        margin-bottom: 10px;
        padding:2px;
        border-radius: 10px;
    }
    
    blockquote {
        padding: 3%;
        line-height: 145%;
        font-weight: 300;
        margin-top: 20px;
    }
    .map {
    width: 100%
        margin-top: 40px;
/*         padding-left: 6%; */
    text-align: center;
    }
    .contact-form {
        width: 100%;
        margin: 10px auto;
    }
    
}
/*  tablet from 481 to 768 (widths smaller taht the 1140px row) */
@media only screen and (max-width: 480px) {

    .contact-form {
        width: 100%;
        margin: 10px auto;
    }
    .firma-text-box {
        width: 100%;
        font-size: 50%;
    }
    .logo {
        height: 70px;
        float: left;
        margin-top: 5px;
        margin-left: 0;
    }
    .brand {
        margin-top: 20px ;
        margin-left: 0px;
        text-align: center;
        font-size: 90%;
        float: left;
        width: 70%;
        
    }
}