/* 
 * main.css
 * JMB
 * Eckel Binder
 * Jessica & Matthias Binder
 * Webentwicklung
 * 15.08.2018
 */


@font-face {
    font-family: 'MyriadPro-BoldCond';
    src: url('fonts/MyriadPro-BoldCond.eot?#iefix') format('embedded-opentype'),  url('fonts/MyriadPro-BoldCond.otf')  format('opentype'),
        url('fonts/MyriadPro-BoldCond.woff') format('woff'), url('fonts/MyriadPro-BoldCond.ttf')  format('truetype'), url('fonts/MyriadPro-BoldCond.svg#MyriadPro-BoldCond') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MyriadPro-Cond';
    src: url('fonts/MyriadPro-Cond.eot?#iefix') format('embedded-opentype'),  url('fonts/MyriadPro-Cond.otf')  format('opentype'),
        url('fonts/MyriadPro-Cond.woff') format('woff'), url('fonts/MyriadPro-Cond.ttf')  format('truetype'), url('fonts/MyriadPro-Cond.svg#MyriadPro-Cond') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MinionPro-Regular';
    src: url('fonts/MinionPro-Regular.eot?#iefix') format('embedded-opentype'),  url('fonts/MinionPro-Regular.otf')  format('opentype'),
        url('fonts/MinionPro-Regular.woff') format('woff'), url('fonts/MinionPro-Regular.ttf')  format('truetype'), url('fonts/MinionPro-Regular.svg#MinionPro-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body
{
    font-family: 'MinionPro-Regular';
    color: #575656;
    background-color: #f0f0f0;
}

h1, h2, h3, h4, h5, h6
{
    font-family: 'MyriadPro-Cond';
}

li
{
    font-family: 'MyriadPro-Cond';
    font-size: 1.4rem;
}

h1
{
    padding-bottom: 2rem;

}

hr
{
    width: 8rem;
}

a
{
    color: #575656;
}

a:hover
{
    color: #c4c4c4;
    text-decoration: none!important;
}

#navhintergrund
{
    background-color: #fff;     
    width: 100%;
}

.anfahrtlink
{
    color: #575656;
}

.anfahrtlink:hover
{
    color: #c4c4c4;
}

.zentriert
{
    text-align: center;
}

#kontakt
{
    background-color: #f0f0f0;
    text-align: center;
}

.abstand
{
    padding-top: 5rem;
}

.abstandunten
{
    padding-bottom: 5rem;
}

.abstandoben
{
    padding-top: 18rem;
}

#footer
{
    background-color: #fff;
    min-height: 5rem;
}

.footerrow
{
    text-align: center;
}

a.footerrow
{
    color: #c4c4c4;
}

.accept-google
{
    cursor: pointer;
}

#mapwrapper
{
    height: 80vh;
}

#map
{
    height: 100%;
    min-height: 400px;
}

.paddingweg > p
{
    padding-bottom: 0;
    margin-bottom: 0;
}

.linkedin
{
    background-image: url("images/linkedin_Buttongrau.svg");
    background-size: 2rem;
    
    display: inline-block;
    background-repeat: no-repeat;
    height: 2rem;
    width: 2rem;
}

.linkedin:hover
{
    background-image: url("images/linkedin_Buttonhover.svg");
    background-size: 2rem;
    width: 2rem;
  
   
}

.linkedinnav
{
    background-image: url("images/linkedin_Buttongrau.svg");
    background-size: 1.7rem;
    
    display: inline-block;
    background-repeat: no-repeat;
    height: 1.7rem;
    width: 1.7rem;
    margin-top: 0px;
}

.linkedinnav:hover
{
    background-image: url("images/linkedin_Buttonhover.svg");
    background-size: 1.7rem;
    width: 1.7rem;
  
   
}


/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/

/* 
Extra small devices (portrait phones, less than 576px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  

}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  

}



/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/

@media (max-width: 768px) {  
    .navbar
    {
        padding:0;
    }

    h1
    {
        font-size: 1.8rem;    
    }

    #map
    {
        margin-bottom: 200px;
    }
    
    .nav-link
    {
        padding-bottom: 0.1rem;
    }
    
    .linkedinnav
    {
        margin-top: 12px;
        margin-bottom: 15px;
    }
    

}


.form-control
{
      color: #6c757d;
}


input[type="button"],
input[type="button"]:focus
{
    outline: 0!important;
}

*:focus 
{
    outline: none!important;
}