.container {
  margin-top: 20px;
  margin-bottom: 20px;
  /**border: 1px solid #000000;**/
  height: 100%;
  width: auto;
  
}

.About-Me {
  background-color: #0099ff;
  border-radius: 20px;
  box-shadow: inset 0px 5px 20px 0px #000;
  width: auto;  
  position: relative;
}

.glass{
  width: 100%;
  height: 50%;
  /*background-color: rgb(255,255,255,0.2);*/
  background: rgba(113,206,239,0.41);
background: -webkit-linear-gradient(top, rgba(113,206,239,0.41) 33%, rgba(33,180,226,0.41) 51%, rgba(183,222,237,0.41) 100%, rgba(183,222,237,0.41) 97%, rgba(183,222,237,1) 100%);
  
background: -o-linear-gradient(top, rgba(113,206,239,0.41) 33%, rgba(33,180,226,0.41) 51%, rgba(183,222,237,0.41) 100%, rgba(183,222,237,0.41) 97%, rgba(183,222,237,1) 100%);
  
background: -ms-linear-gradient(top, rgba(113,206,239,0.41) 33%, rgba(33,180,226,0.41) 51%, rgba(183,222,237,0.41) 100%, rgba(183,222,237,0.41) 97%, rgba(183,222,237,1) 100%);
  
background: linear-gradient(to bottom, rgba(113,206,239,0.41) 33%, rgba(33,180,226,0.41) 51%, rgba(183,222,237,0.41) 100%, rgba(183,222,237,0.41) 97%, rgba(183,222,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#71ceef', endColorstr='#b7deed', GradientType=0 );
/* for the following elements, rgba(183,222,237,0.41) 78%, 78% was changed to 100% */
  position: absolute;
  top: 0;
  /*border-radius: 20px;*/
  
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  
}


div h3{
  /*border: 1px solid black;*/
  margin-top: 25px;
}


h1 {
  color: #ffffff
}

h2{
  color: #ffffff;
}

h4 {
color: #ffffff  
}

#top{
  padding-top: 8px;
  margin-left: 10px;
  float: left;
}

#bottom{
  float: right;
  margin-right: 10px;
  padding-top: 8px;
}

.img-responsive{
 border-radius: 25px; 
}

#top{
  margin-top: 10px;
}

#bottom{
  margin-bottom: 10px;
}

/*.col-md-4{
  border: 1px solid black;
}
*/

.dropbtn {
    background-color: #4CAF50;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  border: 1px dashed black;
}

.dropdown-content a:hover {background-color: #00ffff}

.dropdown:hover .dropdown-content {
    display: block;
  background-color: #f1f1f1;
}

/*.dropdown:hover .dropbtn {
    background-color: 
}*/



.dropdown {
    position: relative;
    display: inline-block;
}

.myButton {
  width: 250px;
  height: 40px;
  line-height: 1.75em;
	-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5));
	background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
	background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
	background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
	background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
	background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5',GradientType=0);
	background-color:#79bbff;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #84bbf3;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #528ecc;
  box-shadow: 7px 7px 15px black;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff));
	background:-moz-linear-gradient(top, #378de5 5%, #79bbff 100%);
	background:-webkit-linear-gradient(top, #378de5 5%, #79bbff 100%);
	background:-o-linear-gradient(top, #378de5 5%, #79bbff 100%);
	background:-ms-linear-gradient(top, #378de5 5%, #79bbff 100%);
	background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff',GradientType=0);
	background-color:#378de5;
}
.myButton:active {
	position:relative;
	top:1px;
}

#tell-state{
  position: relative;
  border: 1px solid black;
}

.green{
  position: absolute;
  left: 35px;
  top: 15px;
  height: 10px;
  width: 10px;
  background-color: green;
  border-radius: 50%
}

.glow-green{
  background-color: #0cff00;
  box-shadow: -1px 0px 15px 7px #0cff00;
}

.red{
  position: absolute;
  left: 160px;
  top: 15px;
  height: 10px;
  width: 10px;
  background-color: #aa0101;
  border-radius: 50%
}

.glow-red{
  background-color: #ff3200;
  box-shadow: -1px 0px 15px 7px #ff3200;
}

.background-image {
  /*border: 1px solid black;*/
  background: url(https://s25.postimg.cc/feof9a75b/sputnik_660x440.jpg);
  background-repeat: no-repeat;
  Height: 440px;
  background-size: contain;
  background-position: center;
}

.About-Me {
  margin-bottom: 10px;
}

#buttons{
  /*border: 1px solid black;*/
 }

.col-xs-4 {
  margin-top: 20px;
}

.background-image {
  margin-top: 10px;
  margin-bottom: 10px;
  
}

.col-xs-4 {
  margin-left: auto;
  margin-right: auto;
}
.holder {
  max-width: 500px;
  overflow: hidden;
  position: relative;  
  height: 300px; 
  margin: auto;
}


div.Portfolio.Pics {
  width: 3000px;
  position: absolute;
  overflow: hidden;
}

figure {
  width:500px;
  float:none;
  overflow:hidden;
}


.Portfolio.Pics figure{
overflow: hidden;
height: 500px;
}


.Portfolio.Pics figure img{
width: 100%
float: left;
opacity: 0.65;
  margin-top: 10px;
}

figure{
position: relative;
width: 100%;
margin: 0;
left: 0;
animation: 20s portfolio infinite;
  cursor: pointer;
}


@keyframes portfolio {
	0%{
		left: -100%;     
    }
  25%{
		left:-50%; 
  }
  50%{
		left:-75%;     
	}
  100%{
		right:100%;     
	}

}

figure:hover {
    -webkit-animation-play-state:paused;
    animation-play-state:paused;
}

.contact-holder{
  margin-top: 20px;
  margin-bottom: 20px;
  height: auto;
}


#contact-form {
  background-color: white;
  text-align: center;
  position: relative;
  height: auto;
  
}


* {
   box-sizing:border-box;
   -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
   -webkit-font-smoothing:antialiased;
   -moz-font-smoothing:antialiased;
   -o-font-smoothing:antialiased;
   font-smoothing:antialiased;
   text-rendering:optimizeLegibility;
}

/* Contact Form Styles */
h1 {
   margin: 10px 0 0 0;
}
h4{
   margin: 0 0 20px 0;
}

#contact-form {
   background-color:#0099ff;
   padding: 10px 20px 30px 20px;
   width:500px;
   position: relative;
   border-radius:20px;
  color: hsl(210, 100%, 40%);
  text-shadow: hsla(210,100%,20%,.3) 0 -1px 0, hsl(210,100%,85%) 0 2px 1px, hsla(200,100%,80%,1) 0 0 5px, hsla(210,100%,50%,.6) 0 0 20px;
}

#contact-form input,   
#contact-form select,   
#contact-form textarea,   
#contact-form label { 
   font-size: 15px;  
   margin-bottom: 2px;
   font-family: Arial, san-serif;
} 
#contact-form input,   
#contact-form select,   
#contact-form textarea { 
   width:100%;
   background: #fff;
   border: 0; 
   -moz-border-radius: 4px;  
   -webkit-border-radius: 4px;  
   border-radius: 4px;
   margin-bottom: 25px;  
   padding: 5px;  
}  
 
#contact-form textarea {
   width:100%;
   height: 150px;
}
#contact-form button[type="submit"] {
   cursor:pointer;
   width:100%;
   border:none;
   background:#e17f3f;
   margin:0 0 5px;
   padding:10px;
   border-radius:5px;
}
#contact-form button[type="submit"]:hover {
   background-color:#79bbff ;
  color: #e17f3f;
  font-size: 1.5em;
}
#contact-form button[type="submit"]:active {
   box-shadow:inset 0 1px 3px rgba(0,0,0,1);
  color: #e17f3f;
}
input:required, textarea:required {  
   box-shadow: none;
   -moz-box-shadow: none;  
   -webkit-box-shadow: none;  
   -o-box-shadow: none;  
} 
#contact-form .required {  
   font-weight:bold;  
   color: #E5E6E7;      
}

/* Hide success/failure message
   (especially since the php is missing) */
#failure, #success {
   color: #6EA070; 
   display:none;  
}

div h2{
  font-family: digital-7, sans-serif;
  font-size: 3em;
  /*border: 3px solid red;*/
}


.social-media-icon-footer{
  width:500px;
  background-color:white;
  color: #0099ff;
  height:80px;
  border: 1px solid black;
  border-radius: 15px;
  text-align: center;
  
  box-shadow:
    inset hsla(210,100%,100%,.7) 0  2px 1px 7px, /* top HL */
    
    hsla(210,100%,75%, .8) 0  0px 3px 2px, /* outer SD */
    hsla(210,50%,40%, .35) 0 -5px 6px 4px, /* outer SD */
    hsla(210,80%,95%,   1) 0  5px 6px 4px; /* outer HL (blue LED ) */
}

.link-button-holder > a {
    display: inline-table;
    cursor: pointer;
    text-decoration: none;
    height: 100%;
    width:100%;
  
}
.link-button-holder > a > h1 {
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
    color: #f7f8f8;
    font-size: 12px;
    font-family: cabinregular;
    text-align: center;
}

div.contact {
  padding: 0px;
  margin-top:-20px;
 /**background-color: black;**/
}



ul.soc {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  position: relative;
  text-align: center;
  width: 100%;
}

ul.soc li {
  display: inline-block;
}

li.socbutton a {
  background-color: #0099ff;
  border: 1px solid white;
  border-radius: 10px;
  color: white;
  text-decoration: none;
  text-shadow: 2px 2px black;
  font-size: 12px;
  margin: 5px;
  padding: 5px;
  box-shadow: 7px 7px 5px black;
  width: 300px;
}

body {
   color: #C0C0C0;
   font-family: Arial, san-serif;
}




/* Make form look nice on smaller screens */

@media(min-width: 500px) {
    .myButton {
    margin-bottom: 15px;
    width: 100%;
    }  
}


@media(min-width: 615px) {
    .myButton {
        width: 100px; 
    }
}

@media(max-width: 615px) {
    .myButton {
        width: 100px; 
    }
}


@media only screen and (min-width:800px) {
     .myButton{
      width: 200px;
      }
   }

@media only screen and (max-width: 900px){
     .myButton{
      width: 200px;
      } 
}

@media only screen and (max-width: 500px) { /* anything less than 500px (or *501px and up will be regular) */
  
  div h2{
    font-size: 2em;
  }  
  
    #buttons{
    margin-top: 50px;
   }
  
  .myButton
  .dropbtn{
    width: 100%;   
  }

  #portfolio{
    /*border: 1px solid black;*/
  }
  
   #contact-form{
      left: 3%;
      margin-right: 3%;
      width: 88%;
      margin-left: 0;
      padding-left: 3%;
      padding-right: 3%;
   }
  
  .myButton {
        margin-bottom: 15px;
    }
  
  .social-media-icon-footer{
  width:100%;
  height: 100%;
  }
  
  ul.soc li {
  width: 100%;
  }
  
  .socbutton{
  /*border: 1px solid black;*/
  margin: 7px;
  }
  
  #top,
  #bottom
  {
    width: 250px;
  }
}