/* --------------------------------- */


/* BASIC SETUP */


/* --------------------------------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*explained before in tutorial*/
}

html {
    background-color: #f5f7fa;
    color: #373b43;
    font-family: "Roboto", sans-serif;
    /* if lato is not available no-net e.g arial will be, if not arial any sans serif font */
    font-size: 16px;
    font-weight: 300;
    text-rendering: optimizeLegibility;
    line-height: 150%
}



img {
/    height: auto;
    max-width: 100%;
    text-align: center;
    padding: 2%;
}

.bold-text {

    color: #bf6516;
    font-weight: 400;
}

.text-align-center {
    text-align: center;
}

.text-block-border {

    padding-top: 2%;
    
    
}
/* --------------------------------- */


/* REUSABLE COMPONENTS */


/* --------------------------------- */


/*orange color bf6516*/

.row {

    max-width: 1060px;
    margin: 5% auto;
    /* shortcut for 0 auto 0 auto */
}

section {
    padding: 40px 0;
    /* he creates a lot of white space, reason why yse padding and not margin is that with padding you can use give section background and for that white space must be inside the box element */
}






/* ---- HEADINGS ---- */

h1,
h2,
h3,
h6 {

    font-weight: 300;
    letter-spacing: 1px;
    color: #555f77;
    margin-top: 15px;
    margin-bottom: 15px;
}

h1 {

    margin: 0;
    margin-bottom: 5%;
    margin-top: 5%;
    font-size: 240%;
    word-spacing: 3px;
    text-align: center;
    color: #fff;
}

h2 {
    text-align: center;
    font-size: 130%;
    word-spacing: 2px;
    margin-bottom: 30px;
    font-weight: 400; 
    
}

h3 {

    text-align: center;
    font-size: 130%;
    margin-bottom: 0px;
    margin-top: 20px;
    font-weight: 400;
}


h6 {
     text-align: center;
        font-size: 60%;
        word-spacing: 0;
    color: #fff;
    font-weight: 300;
    
    
}



h1:after {
    /* this is to put content from css file, you always need to specife content, we do not want any word, so that is why content has only blank */
    display: block;
    height: 2px;
    background-color: #bf6516;
    content: "";
    width: 100px;
    margin: 0 auto;
    margin-top: 20px;
}




/* ---- PARAGRAPHS ---- */

p {
    
    padding: 0.5% 7%;
    
    text-align: left;
    font-size: 110%;
    font-weight: 300;
    color: #4a4a4a;
    line-height: 2;
    
}




/* ---- TOOLTIPS ---- */


/* ---- LINKS ---- */

a:link,
a:visited {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px #bf6516;
}

a:hover,
a:active {
    color: #bf6516;
    border-bottom: 1px solid transparent;
}








/* ---- BUTTONS ---- */


/*butten link and visited will look same */

.btn:link,
.btn visited {
    display: inline-block;
    /* normal inline element doesnt break line like box element, but cannot have margin and padding, by setting it as a inline-block it can */
    padding: 10px 30px;
    /*again shortcut topbottom leftright*/
    font-weight: 300;
    text-decoration: none;
    border-radius: 200px;
    transition: background-color 0.3s, border 0.3s, color 0.3s;
    font-size: 90%;
}



.cta-button:link,
.cta-button:visited{
    
    border: 1px solid #fff;
    color: #fff;
    margin-right: 15px;
    font-weight: 400;
    border-radius: 900px;
    padding: 0px 0px;


}


.cta-button:hover,
.cta-button:active{
    
    border: 1px solid #bf6516;
    color: #bf6516;
    margin-right: 15px;
    font-weight: 400;
    border-radius: 900px;
     padding: 0px 0px;
     border-bottom: none;

}
    
    
}

.btn-full:link,
.btn-full:visited {
    background-color: #e67e22;
    border: 1px solid #e67e22;
    color: #fff;
    margin-right: 15px;
    font-weight: 400;
}

.btn-ghost:link,
.btn-ghost:visited {
    border: 1px solid #e67e22;
    color: #e67e22;
}

.btn:hover,
.btn:active {
    background-color: #bf6516;
}


.btn-full:hover,
.btn-full:active {
    border: 1px solid #bf6516;
}

.btn-ghost:hover,
.btn-ghost:active {
    border: 1px solid #bf6516;
    color: #fff;
}




/* --------------------------------- */


/* ABOUT US*/


/* --------------------------------- */

.section-about-us {

    background-color: #f5f7fa;
}

.about-us {
    background-color: #fff;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 5%;
    padding-bottom: 5%;
}


.container {
    background-color: #fff;
    margin: 0 auto;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
}

header {
    

    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/nase_mise_toncek.jpg);
    background-position: center;
    padding-bottom: 3%;
    color: #fff;
    
}
.header-row {
    padding-bottom: 1%;
    margin: 0 auto;
    }


.counter-sign,
.counter {
    color: #bf1616;
    font-size: 170%;
}


.header-data {
    text-align: center;
    
}



/* --------------------------------- */


/* HEADER*/


/* --------------------------------- */

.navigation {
    margin: 0 auto;
        max-width: 1200px;

}

.main-headline {
    margin: 0 auto;
}

.main-nav {
    float: right;
    list-style: none;
    margin-top: 5%;
    margin-left: 60px;
    font-size: 130%;
}

.main-nav li {
    display: inline-block;
    margin-left: 40px;
}



.main-nav li a:link,
.main-nav li a:visited {
    padding: 10px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 60%;
    /* never want PX , always percentage on main 20 px , cause responsibilit */
    color: #fff;
    margin-top: 50px;
   / border-bottom: 2px solid transparent;
    transition: border-bottom 0.3s;
}

.main-nav li a:hover,
.main-nav li a:active {
    border-bottom: 2px solid #bf6516;
}


.main-nav li special-button a: hover,
.main-nav li special button a:active {
    border-bottom: none;

}



.logo {
    
    margin-top: 1%;
    
}


/* --------------------------------- */


/* PREVENCE ZDRAVI */


/* --------------------------------- */

.about-us-icon {
    
    text-align: center;
    margin: 0;

}

/* --------------------------------- */


/* FOOTER */


/* --------------------------------- */


footer {
    background-color: #949496;
}

.footer-nav {
    list-style: none;
    float: left;
    font-size: 80%;
}

.social-links {
    list-style: none;
    float: right;
}

.footer-nav li,
.social-links li {
    display: inline-block;
    /* again normal block element breaks line, inline block allows to set margins... */
    margin: 20px;
}

.footer-copy {
    margin: 10px auto 20px auto;
    font-size: 80%;
    text-align: center;
    color: #fff;
}

.footer-row {
    margin: 0 auto;
    max-width: 1200px;
}


.ion-heart {
    font-size: 175%;
    
}