/* ------------- import pisma pre cely blog ---------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
body { font-family: "Inter", sans-serif; margin: 0px; padding: 0px; }

/* --------- vsetky odkazy design ----------------- */
a {color:#0097e6}
a:link {  text-decoration: none;}
a:visited {  text-decoration: none;}
a:hover {  text-decoration: underline;}
a:active { text-decoration: underline; }  

/* hlavny obdlznik hore pre PC  */
 .div-top { width: 900px; margin: auto; height: 60px; } 
.flex-container { display: flex; background-color: #FF8E8F; width: 900px; margin: 1px auto 30px auto; border-radius: 25px;
  align-items: center; /* toto centruje vertikalne h1 */ }
.flex-container > div { margin: 10px; padding-left: 20px; }
.flex-container > div > p{ margin-bottom: -20px; }
.flex-container > div > p { margin-top: 0px; }
.a-black { color: black; }  /* Home / v obdlhziku - cierna farba pre PC aj pre mobil  */
.pricing { text-align:center; display:block; margin-top: -36px; color: black; font-size: 18px;}

/* hlavny hlavny obdlznik hore pre mobil  */
.M-hore-div {height: 160px; background-color: #FF8E8F; text-align: center; padding: 20px;  margin-bottom: 10px;}
.M-hore-div > p {margin: 0px 0px 15px 0px;} /* p Homo / parametre */
h1{ font-weight: 600; font-size: 44px; }
h2{ font-weight: 500; font-size: 32px; line-height:1.2; }

/* blog design parametre PC --------------------------- */
.blog { font-weight: 300; line-height:1.7; font-size: 18px; max-width:620px; margin:auto; }
.blog h2 { font-weight: 500; font-size: 34px; line-height:1.3; }
.blog > h3 { font-weight: 500; font-size: 26px; line-height:1.3; }

/* img responsive img blog --------------------- */
.respGrey { max-width: 100%; height: auto; margin-left:auto; margin-right:auto;  display: block; border-radius: 20px; border: 1px solid #D3D3D3;}
.respRed { max-width: 100%; height: auto; margin-left:auto; margin-right:auto;  display: block; border-radius: 20px; border: 1px solid #ffcaca;}
.respRed2px { max-width: 100%; height: auto; margin-left:auto; margin-right:auto;  display: block; border-radius: 20px; border: 2px solid #ffcaca;}
.respNoBorder { max-width: 100%; height: auto; margin-left:auto; margin-right:auto;  display: block;}
.respNoBorder300 { width: 100%; max-width: 300px; height: auto; margin-left:auto; margin-right:auto;  display: block;} 

/* homepage - div elementy PC --------------------- */
.two-columns-grid { display: grid; grid-template-columns: 170px 430px; margin: auto; width: 600px; background-color: white;
  align-items: center; margin-bottom: 25px;}
.two-columns-grid > * { padding:0px; }
.two-columns-grid > div > img { width: 150px; border-radius: 25px; border: 1px solid  #ffcaca; }
.two-columns-grid > div > h2 {margin: 0px;}

/* -------xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx design pre mobil xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx------------------- */

/* - vsetko od 940px - xxx bude vyzerat takto: - */
@media screen and (min-width: 940px) { .Mobil-show {display: none; } }

/* - vsetko od 0 - 940ps bude vyzerat takto: - */
@media screen and (max-width: 940px) { .PC-show {display: none;}
    h1 {font-size: 30px; margin: 0px;}    
    h2 {font-size: 20px; }
    .blog {padding: 0px 20px;}
    .blog h2 { font-size: 26px; }
    .blog > h3 {font-size: 22px; }
    /* homepage div elementy stranka */
    .two-columns-grid {grid-template-columns: minmax(100px, auto) 1fr; width: auto; padding: 8px 15px; margin: 0px; }
    .two-columns-grid > div > img { width: 100px; margin-right: 12px;}      
}






.novebutton2 { padding: 6px 44px; display:inline-block; border-radius: 9px; background-color: #4CAF50; 
  border: 2px solid #4CAF50; color: white; text-align: center; text-decoration: none; font-size: 18px; 
  cursor: pointer; margin-top: 15px;}
.novebutton2:hover { background-color: white; color: #4CAF50; text-decoration: none;}
.novebutton2:focus {outline:0; text-decoration: none;}