/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*   all       */
/*    navigacija  */
/*    navigacija  */
/*    navigacija  */
/*    navigacija  */
.topnavv {
  overflow: hidden;
  background-color: #333;
}

.topnavv a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnavv a:hover {
  background-color: #ddd;
  color: black;
}

.topnavv a.active {
  background-color: #4CAF50;
  color: #ffe0b3;
  border-radius: 10%;
}

.topnavv .icon {
  display: none;
}

.topnavv a {
color: #ffe0b3;
text-align: center;
font-size: 22px;
font-family: 'Oswald', sans-serif;
line-height: 20px
}

.topnac a:hover {
color: #62523c;
background: none;
text-decoration: none;
padding: 0px
}

@media screen and (max-width: 960px) {
  .topnavv a:not(:first-child) {display: none;}
  .topnavv a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 960px) {
  .topnavv.responsive {position: relative;}
  .topnavv.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnavv.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
/*    navigacija  */
/*    navigacija  */
/*    navigacija  */
/*    navigacija  */
h1  {
text-align: center;
margin: 0px;
padding: 0px
}

h2  {
color: #2c261e;
text-align: center;
font-size: 28px;
font-family: 'Oswald', sans-serif;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px
}

h3{
color: #2c261e;
text-align: left;
font-size: 19px;
font-family: 'Oswald', sans-serif;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px
}

p {
color: #2c261e;
text-align: justify;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
margin: 10px 20px 0px 20px;
padding: 0px 15px 0px 20px;
line-height: 18px
}

body {
background-color: #ffe0b3;
margin: 0px;
padding: 0pc;
overflow: auto;
height: auto;
}

#header {
position: relative;
background-position: center top;
background-repeat: no-repeat;
padding: 0px;
margin: 0px 0px 0px 0px;
width: 100%;
height: auto;
overflow: hidden;
z-index: 1;
}

#footer {
position:relative;
background-position: bottom;
background-repeat: no-repeat;
padding: 0px;
margin: 0px 0px 0px 0px;
width: 100%;
height: auto;
overflow: hidden;
}
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*   index       */
.buttonn {
width: 90%;
background: none;
padding: 4px;
outline: none;
font-size: 13px;
font-weight: bold;
letter-spacing: 2px;
height: 33px;
text-align: center;
cursor: pointer;
letter-spacing: 2px;
margin-left: auto;
margin-right: auto;
margin-bottom: 90px;
margin-top: 90px;
}

.buttonn button {
background: none;
padding: 4px;
outline: none;
font-size: 13px;
font-weight: bold;
letter-spacing: 2px;
height: 33px;
text-align: center;
cursor: pointer;
letter-spacing: 2px;
border: 2px solid black;
color:black;
margin-left: auto;
margin-right: auto;
padding-left: 50px;
padding-right: 50px;
}

.buttonn button:hover {
border 1px solid #663d00;
color: #663d00;
cursor:pointer;
}
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*    aboutus  */
#txt_field h2{
padding-top: 30px;
padding-bottom: 30px;
}

#txt_field {
width:90%;
margin-left: auto;
margin-right: auto;
background-color: #ffd699;
border-radius: 3%;
margin-top: 60px;
margin-bottom: 60px;
}

#txt_field .slikce1{
width:95%;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-top: 25px;
padding-bottom: 25px;
}

#txt_field .slikce2{
width:95%;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-top: 25px;
padding-bottom: 25px;
}

#txt_field .slikce3{
width:95%;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-top: 25px;
padding-bottom: 25px;
}

#txt_field img:hover{
opacity: 0.7;
}

#txt_field img{
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}

#txt_field .slikce1 img{
margin-right: 20px;
}

#txt_field .slikce3 img{
margin-right: 20px;
}

@media(max-width:500px){
  #txt_field .slikce1{
  padding-left: 35px;
  padding-right: 35px;
  }
  #txt_field .slikce2{
  padding-left: 35px;
  padding-right: 35px;
  }
  #txt_field .slikce3{
  padding-left: 35px;
  padding-right: 35px;
  }
  #txt_field .slikce3 img{
  margin-bottom: 7px;
  }
  #txt_field {
  border-radius: 0%;
  }
  #txt_field h2{
  font-size: 19px;
  padding-bottom: 20px;
  padding-top: 20px;
  }
  }


/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}

@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}

/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}

.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*    news     */
.novice{
background-color: #ffd699;
border-radius: 1%;
display: block;
width: 80%;
margin-left: auto;
margin-right: auto;
margin-top: 60px;
margin-bottom: 60px;
height: auto;
padding-bottom: 50px;
}

.novice .novica1 {
margin-top: 50px;
border:5px solid #ffcc80;
border-radius: 0% 20% 0% 0%;
background-image: radial-gradient( #ffb84d, #ffcc80);
margin-right: 10%;
margin-left: 10%;
height: auto;
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px inset;
}

.novice .novica2 {
margin-top: 50px;
border:5px solid #ffcc80;
border-radius: 0% 20% 0% 0%;
background-image: radial-gradient( #ffb84d, #ffcc80);
margin-right: 10%;
margin-left: 10%;
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px inset;
}

.novice .novica3 {
margin-bottom: 70px;
margin-top: 50px;
border:5px solid #ffcc80;
border-radius: 0% 20% 0% 0%;
background-image: radial-gradient( #ffb84d, #ffcc80);
margin-right: 10%;
margin-left: 10%;
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px inset;
}

.novice .naslov h2 {
text-align: center;
text-decoration: underline;
text-underline-position: under;
color: black;
letter-spacing: 2px;
}

.novice h3 {
text-align: left;
color: black;
letter-spacing: 2px;
margin-bottom: 10px;
}

.novice img {
display: flex;
border-radius: 5%;
box-shadow: 0 0 10px #ddd;
margin-left: 40px;
margin-bottom: 10px;
}

.novice img:hover {
opacity: 0.7;
}

.novice p {
text-align: left;
margin-bottom: 10px;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
}

.pagination a.active {
  background-color: dodgerblue;
  color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

@media (max-width:950px){
  .novice img {
  margin-left: 0px;
  }
  .novice p {
  margin-left: 0px;
  padding-left: 0px;
  font-size: 10px;
  text-align: justify;
  }
  .novice h3 {
  letter-spacing: 1px;
  font-size: 15px;
  margin-right: 10px;
  }
  .pagination a {
    padding: 8px 8px;
  }
}
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*    males    */
/*prva stran*/
/*prva stran*/
/*prva stran*/
/*prva stran*/
/*prva stran*/
/*prva stran*/
.our_males h2 {
text-align: center;
text-decoration: underline;
text-underline-position: under;
color: black;
letter-spacing: 2px;
}

.anguinus {
display: flex;
margin-top: 80px;
margin-bottom: 100px;
}

.anguinus1 {
margin-left: auto;
margin-right: 80px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.anguinus2 {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.anguinus3 {
margin-left: 80px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.anguinus4 {
margin-left: 80px;
margin-right: auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.anguinus img {
border:9px solid white;
border-radius: 80%;
}

.anguinus a {
text-decoration: none;
}

.anguinus h3 {
font-size: 30px;
text-shadow: 2px 2px 4px #000000;
}

@media (max-width:500px){
.anguinus{
  display: block;
}
.anguinus img{
  width:100%;
  max-width:300px;
  max-height:300px;
  margin-top:10px;
  margin-left: 30px;
  margin-right: auto;

}

.anguinus1 {
margin-right: 10px;
margin-left: 10px;
margin-bottom: 25px;
}

.anguinus2 {
margin-right: 10px;
margin-left: 10px;
margin-bottom: 25px;
}
.anguinus3 {
margin-right: 10px;
margin-left: 10px;
margin-bottom: 25px;
}
.anguinus4 {
margin-right: 10px;
margin-left: 10px;
margin-bottom: 25px;
}
}
/*prvastran*/
/*prvastran*/
/*prvastran*/
/*prvastran*/
/*prvastran*/
/*prvastran*/
/*prvastran*/
/*prvastran*/
.box {
background-color: #ffd699;
border: 5px solid #663d00;
border-radius: 5% 5% 0px 0px;
box-sizing: content-box;
display: block;
width: 90%;
height: auto;
margin-left: auto;
margin-right: auto;
}

.box1{
display:flex;
}

.box .slika {
padding-left: 60px;
padding-top: 60px;
padding-bottom: 60px;
}

.box .slika img {
border:2px solid black;
border-radius: 10%;
}

.box .content {
padding-left: 20px;
font-size: 30px;
}

.box .content h3 {
color: #663d00;
font-size: 60px;
width: 500px;
}

.box .content p {
text-align: : justify;
}

.box .galerija {
position: relative;
}

.box .shows {
position: relative;
}

#shows {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
color: black;
}

#shows td, #shows th {
border: 1px solid black;
padding: 8px;
}

#shows tr:nth-child(even) {
background-color: #f2f2f2;
}

#shows tr:hover {
background-color: #ddd;
}

#shows th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: grey;
color: white;
}

.box .video {
position: relative;
}
/*full page tab*/

.containerr {
width:100%;
border-top:0;
margin: auto;
background-color:#ffd699;
height: auto;
}

* {
box-sizing: border-box
}


.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}




.galerija img {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
margin-left: 10px;
margin-top: 10px;
}

.galerija img:hover {
opacity: 0.7;
}

#Certificats img:hover {
opacity: 0.7;
}

#Certificats img{
margin-left: 10px;
margin-top: 10px;
}

#Pedigree img:hover {
opacity: 0.7;
}





@media (max-width: 555px) {

.containerr{
  display: flex;
}
.containerr .tab {
  height: 320px;
}
.tab {
float: left;
width: 30%;
height: 300px;
}

.tab button {
display: block;
color: black;
padding: 22px 16px;
width: 100%;
text-align: left;
font-size: 10px;
}

.tabcontent {
  float: left;
  padding: 0px 12px;
  width: 70%;
  border-left: none;
  height: auto;
}
}

@media (max-width:1100px){
  .box{
  border-radius: 0%;
  border: 3px solid #663d00;
  }
  .box .box1{
  height: auto;
  display: block;
  }
  .box .content {
  font-size: 13px;
  }
  .box .content h3{
  font-size: 30px;
  text-align: left;
  max-width: 50%;
  }
  .box .slika {
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  }
  .box .slika img {
  height: 250px ;
  width: 268px ;
  width: 100%;
  height: auto;
  }
  .box .slika  {
  margin-right: 10px;
  }

  #Pedigree img{
  width: 100%;
  height: auto;
  }
  #Showss #shows {
  font-size: 10px;
  }
  #Showss {
  margin-right: 10px;
  }
  #Gallery .galerija img{
  width: 100%;
  height: auto;
  }
  #Certificats img{
  width: 100%;
  height: auto;
  }

  #Pedigree {
  margin-right: 10px;
  }
  #Showss #shows {
  margin-right: 10px;
  }
  #Gallery .galerija {
  margin-right: 10px;
  }
  #Certificats {
  margin-right: 10px;
  }
}
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*    females  */
/*prvastran*/
/*prvastran*/
/*prvastran*/
/*prvastran*/
.anguinuss {
display: flex;
margin-top: 80px;
margin-bottom: 100px;
}

.anguinuss .anguinus1 {
margin-left: auto;
margin-right: 80px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.anguinuss .anguinus2 {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-right: auto;
}

.anguinuss img {
border:9px solid white;
border-radius: 80%;
}

.anguinuss a {
text-decoration: none;
}

.anguinuss h3 {
font-size: 30px;
text-shadow: 2px 2px 4px #000000;
}

@media (max-width:500px){
.anguinuss{
  display: block;
}
.anguinuss img{
  width:100%;
  max-width:400px;
  max-height:400px;
}
.anguinuss .anguinus1 {
margin-right: 5px;
margin-left: 5px;
margin-bottom: 25px;
}
.anguinuss .anguinus2 {
margin-right: 5px;
margin-left: 5px;
margin-bottom: 25px;
}
}
/*prva stran*/
/*prva stran*/
/*prva stran*/
/*prva stran*/
/*prva stran*/
/*prva stran*/
/*prva stran*/

/*bia */
/*bia */
/*bia */

/*bia */
/*bia */
/*bia */
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*   litters   */
/*prva stran*/
/*prva stran*/
/*prva stran*/
/*prva stran*/
/*prva stran*/
/*prva stran*/
/*prva stran*/
.anguinusss {
display: flex;
margin-top: 100px;
margin-bottom: 100px;
}

.anguinusss .anguinus1 {
margin-left: auto;
margin-right: auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.anguinusss img {
border:9px solid white;
border-radius: 80%;
}

.anguinusss a {
text-decoration: none;
}

.anguinusss h3 {
font-size: 30px;
text-shadow: 2px 2px 4px #000000;
}

.litters h2,h3 {
  text-align: center;
}

.litters {
margin-top: 50px;
margin-bottom: 50px;
}

@media (max-width:500px){
.anguinus{
  display: block;
}
.anguinusss .anguinus1 img{
  width:100%;
  max-width:600px;
  max-height:340px;
}
.anguinusss .anguinus1 {
  margin-left: 5px;
  margin-right: 5px;
}
}
/*prva stran*/
/*prva stran*/
/*prva stran*/
/*prva stran*/
/*prva stran*/
/*prva stran*/
/*prva stran*/
/*prva stran*/
/*prva stran*/
.boxx {
border: 7px solid #663d00;
background-color: #ffd699;
border-radius: 5%;
height: auto;
display: block;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
width:90%;
}

.boxx .naslov {
height: 50px;
}

.boxx .slika {
margin-top: 40px;
display: flex;
}

.boxx .eminem {
margin-left: 30px;
margin-right: 10px;
}

.boxx .eb {
margin-left: auto;
margin-right: auto;
}

.boxx .bia {
margin-right: 30px;
margin-left: 10px;
}

.boxx .galerijaa {
margin-left: 50px;
margin-right: 50px;
margin-top:100px;
}

.boxx .naslov h3 {
text-align:center;
font-size: 30px;
}

.boxx .eminem h3 {
text-align: center;
font-size: 30px;
}

.boxx .eminem img {
border-radius: 5%;
border:3px solid white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.boxx .eb img {
border-radius: 5%;
border:3px solid white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.boxx .bia img {
border-radius: 5%;
border:3px solid white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.boxx .bia h3 {
text-align: center;
font-size: 30px;
}

.boxx .galerijaa .galerijaaa h3 {
text-align: center;
font-size: 30px;
}

.boxx .galerijaa .galerijaaa {
margin-bottom: 50px;
}

.boxx .videi .videii h3 {
text-align: center;
font-size: 30px;
}

.boxx .videi .videii {
margin-bottom: 50px;
}

.boxx .galerijaa img {
margin-right: 10px;
margin-top: 10px;
}

.boxx .galerijaa img:hover {
opacity: 0.7;
}

.boxx .videi {
margin-top: 50px;
margin-left: auto;
margin-right: auto;
display: block;
}

.boxx .videi .video1 {
margin-left: auto;
margin-right: auto;
}

.boxx .videi .video2 {
margin-left: auto;
margin-right: auto;
}

.boxx .videi video {
border-radius: 5%;
margin-bottom: 20px;
}

.boxx .vid {
display: flex;
}


@media (max-width:500px){
  .boxx{
  border-radius: 0%;
  border: 4px solid #663d00;
  }
  .boxx .slika {
  display: block;
  }
  .boxx .slika img{
  display: block;
  }

  .boxx .eminem {
  margin-left: 10px;
  margin-right: 10px;
  }

  .boxx .eb {
  margin-left: 10px;
  margin-right: 10px;
  }

  .boxx .bia {
  margin-left: 10px;
  margin-right: 10px;
  }

  .boxx .videi .vid{
    display: block;
  }
  .boxx .galerijaa {
    margin-left: 0px;
    margin-right: 0px;
    margin-top:0px;
  }
  .boxx .galerijaa img{
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .videi .videii{
    margin-top: 20px;
  }
  .boxx .galerijaa{
    margin-left: 10px;
    margin-right: 10px;
  }
  .boxx .galerijaa img{
    margin-bottom: 10px;
  }
  .galerijaa .galerijaaa{
    margin-top:20px;
  }
  .videi{
    width: 95%;
    margin-left: auto;
    margin-right: auto;
  }
}
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*   world     */
.svet .our_dogs h2 {
padding-top: 30px;
}

.svet {
border-radius: 1%;
background-color: #ffd699;
width: 95%;
height: auto;
margin-left: auto;
margin-right: auto;
margin-top: 60px;
margin-bottom: 60px;
}

.svet .erasmus {
border:5px solid #ffcc80;
width: 90%;
margin-left: auto;
margin-right: auto;
margin-bottom: 10%;
background-image: radial-gradient( #ffb84d, #ffcc80);
padding-right: 10px;
}

.svet .enri {
border:5px solid #ffcc80;
width: 90%;
margin-left: auto;
margin-right: auto;
margin-bottom: 10%;
background-image: radial-gradient( #ffb84d, #ffcc80);
padding-right: 10px;
}

.svet .osare {
border:5px solid #ffcc80;
width: 90%;
margin-left: auto;
margin-right: auto;
margin-bottom: 10%;
background-image: radial-gradient( #ffb84d, #ffcc80);
padding-right: 10px;
}

.svet .dakota {
border:5px solid #ffcc80;
width: 90%;
margin-left: auto;
margin-right: auto;
margin-bottom: 10%;
background-image: radial-gradient( #ffb84d, #ffcc80);
padding-right: 10px;
}

.svet h3 {
margin-bottom: 10px;
}

.svet p {
text-align: center;
font-size: 25px;
margin-bottom: 10px;
}

.svet img {
margin-left: 10px;
margin-bottom: 10px;
border-radius: 5%;
}

.svet img:hover {
opacity:0.7;
}

.svet a{
text-decoration: none;
}

.svet h3:hover {
opacity: 0.5;
color:white;
}

@media (max-width:670px){
  .svet p {
  font-size: 15px;
  }
  .svet .our_dogs h2 {
  font-size: 25px;
  }
  .svet img {
  margin-left: auto;
  margin-right: auto;
  }
}
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*   contact   */
body {
padding: 0px;
margin: 0px;
font-family: sans-serif;
}

.container {
width: 90%;
border-radius: 3%;
margin-left: auto;
margin-right: auto;
margin-top: 60px;
margin-bottom: 20px;
overflow: hidden;
background-color: #ffd699;
}

#contact-section {
background-color: #ffe0b3;
background-size:cover;
background-position: center;
height: auto;
width: 100%;
padding-bottom: 2%;
}

#contact-section .container h2 {
text-align: center;
text-decoration: underline;
text-underline-position: under;
color: black;
letter-spacing: 2px;
}

#contact-section .container p {
text-align: center;
width: 70%;
margin-left: auto;
margin-right: auto;
padding-bottom: 3%;
color: black;
letter-spacing: 3px;
}

.contact-form i.fa {
font-size: 22px;
padding: 3%;
background-color: none;
margin:2%;
cursor: pointer;
border: 2px solid black;
color: black;
border-radius: 80%;
}

.contact-form i.fa:hover {
cursor: pointer;
border: 2px solid #fff;
color: #fff;
}

.contact-form {
display: grid;
grid-template-columns: auto auto;
grid-gap: 5px;
}

.form-info {
font-size: 16px;
font-style: italic;
color: black;
letter-spacing: 2px;
}

input {
padding: 10px;
margin:10px;
width: 70%;
background-color: rgba(136,133,133,0.5);
color: #fff;
border:none;
outline:none;
}

input::placeholder {
color: #fff;
}
textarea {
padding: 10px;
margin:10px;
width: 70%;
background-color: rgba(136,133,133,0.5);
color: #fff;
border:none;
outline:none;
}

textarea::placeholder {
color: #fff;
}

.submit {
width: 40%;
background: none;
padding: 4px;
outline: none;
font-size: 13px;
font-weight: bold;
letter-spacing: 2px;
height: 33px;
text-align: center;
cursor: pointer;
letter-spacing: 2px;
margin-left: 3%;
border: 2px solid black;
color:black;
}

.submit:hover {
border 1px solid #fff;
color: #fff;
cursor:pointer;
}

/*media queries*/
@media (max-width: 768px) {
  #contact-section .contact-form{
  display: block;
  width: 90%;
  text-align: left;
  }
  #contact-section .submit{
  width: 60%;
  }
}

/*logoti od omrežij*/
.stopi_v_kontakt {
background-color: #ffd699;
width: 90%;
border-radius: 3%;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
}

.stopi_v_kontakt .nas h2 {
text-align: center;
text-decoration: underline;
text-underline-position: under;
color: black;
letter-spacing: 2px;
}

.stopi_v_kontakt .logoti {
width: 300px;
margin-right: auto;
margin-left: auto;
margin-bottom: 50px;
}

.stopi_v_kontakt .fa {
padding: 20px;
font-size: 30px;
width: 70px;
text-align: center;
text-decoration: none;
border-radius: 50%;
margin-left: 19px;
margin-top: 20px;
margin-bottom: 20px;
}

.fa:hover {
opacity: 0.7;
}

.fa-facebook {
background: #3B5998;
color: white;
border:3px solid white;
}

.fa-youtube {
background: #bb0000;
color: white;
border:3px solid white;
}

.fa-instagram {
background: #125688;
color: white;
border:3px solid white;
}
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*-------------*/
/*   end       */