.menuBar{
background-color: rgba(65,105,225,0.4);
text-align: center;
box-sizing: border-box;
width: auto !important;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
.menuBar > a >span{
font-size: 180%;
cursor: pointer;
display: inline-block;
padding: 2px 25px 2px 25px;
box-sizing: border-box;
border-radius: 4px;
transition: 0.5s all;
-webkit-transition: 0.5s all;
}
.menuBar > a > span:hover{
color: red;
border: 1px solid rgba(10,10,10,0.6);
transition: 0.5s all;
-webkit-transition: 0.5s all;
}

.imgList{
display: inline-block;
width: 20%;
height: auto !important;
}

.mainImg{
display: block; 
position: relative; 
width: 50%; 
height: auto !important; 
border-radius: 20%; 
border: 4px solid #000; 
margin: 0 auto;
transition: 0.5s all;
-webkit-transition: 0.5s all;
}
.mainImg:hover{
cursor:pointer;
border-radius: 0%;
border: 6px solid #000; 
transition: 0.5s all;
-webkit-transition: 0.5s all;
}
a{
color: black;
text-decoration: none;
transition: 0.5s all;
-webkit-transition: 0.5s all;
}
.header{
   position: relative; 
   width: 100%;
}
.txtBlock{
background-color: rgba(70,130,180,0.4);
border-radius: 4px;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
.txtEnd{
background-color: black;
color: white;
font-size: 18px;
}
.txtHead { 
   position: absolute; 
   top: 20px; 
   left: 0; 
   text-align: center;
   font-size: 450%;
   color: white;
   font-family: Roboto;
   font-style: italic;
   width: 100%; 
}
.txtC{
  font-size: 150%;
  font-family: Roboto;
}
.img{
 width: 100%;
 height: initial;
 -moz-box-shadow:    3px 3px 5px 6px #ccc;
 -webkit-box-shadow: 3px 3px 5px 6px #ccc;
 box-shadow:         3px 3px 5px 6px #ccc;
 }
.ico{
width: 3%;
min-width: 20px;
display: inline-block;
cursor: pointer;
height: auto !important;
transition: 0.5s all;
-webkit-transition: 0.2s all;
}
.ico:hover{
ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
transition: 0.5s all;
-webkit-transition: 0.2s all;
}
@media screen and (min-width: 200px)
 {
 .txtHead{
    font-size: 100%;
    top: 50%;
    }
 .menuBar > a > span {
   font-size: 18px;
display: block;

   }
.txtC{
  font-size: 70%;
  }
 }
@media screen and (min-width: 300px)
 {
 .menuBar > a >span {
   font-size: 20px;
display: block;

   }
.txtC{
  font-size: 80%;
  }
 .txtHead{
    font-size: 150%;
    top: 50%;
    }

 }
@media screen and (min-width: 500px)
 {
 .txtHead{
    font-size: 200%;
    top: 50%;
    }
 .menuBar > a >span {
   font-size: 20px;
display: inline-block;

   }
.txtC{
  font-size: 100%;
  }
 }
@media screen and (min-width: 600px)
 {
 .txtHead{
    font-size: 250%;
    top: 50%;
    }
.txtC{
  font-size: 150%;
  }
 .menuBar > a >span {
   font-size: 25px;
display: inline-block;

   }

 }
@media screen and (min-width: 800px){
 .txtHead{
    font-size: 350%;
    top: 50%;
    }
 .menuBar > a >span {
   font-size: 30px;
display: inline-block;

   }
 }
@media screen and (min-width: 1000px){
 .txtHead{
    font-size: 400%;
    top: 50%;
    }

 }