/* ----CSS for Div Swing effect-----*/
@-webkit-keyframes swing
        {
            15%
            {
                -webkit-transform: translateX(5px);
                transform: translateX(5px);
            }
            
            30%
            {
                -webkit-transform: translateX(-5px);
                transform: translateX(-5px);
            }
            
            50%
            {
                -webkit-transform: translateX(3px);
                transform: translateX(3px);
            }
            
            65%
            {
                -webkit-transform: translateX(-3px);
                transform: translateX(-3px);
            }
            
            80%
            {
                -webkit-transform: translateX(2px);
                transform: translateX(2px);
            }
            
            100%
            {
                -webkit-transform: translateX(0);
                transform: translateX(0);
            }
        }
        
@keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
            
    30%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
            
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
            
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
            
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
            
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
        
.swing:hover
{
    -webkit-animation: swing 1s ease;
    animation: swing 1s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

/* ------CSS for Div Swing effect------*/

/* ------CSS for Div Polaroid effect------*/
div.polaroid {
  width: auto;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
  height: auto;
  float:left;
  padding:10px;
  margin-left:40px;
  margin-bottom:20px;
  background-color:darkorange;
}

div.container {
  padding: 10px;
}

.div.polaroid:hover {      
  -webkit-transform: scale(1.4);
  -moz-transform: scale(1.4);
  -ms-transform: scale(1.4);
  -o-transform: scale(1.4);
  transform: scale(1.4);    
}
/* ------CSS for Div Polaroid effect------*/

.imagetext { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

.h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
   color:white;
}


.style-1 input[type="text"] {
  padding: 0px;
  border: solid 1px #dcdcdc;
  transition: box-shadow 0.3s, border 0.3s;
  color:black;
}
.style-1 input[type="text"]:focus,
.style-1 input[type="text"].focus {
  border: solid 1px #707070;
  box-shadow: 0 0 5px 1px #969696;
}


.bigbutton {
width:auto;
background: #3e9cbf; /*the colour of the button*/
padding: 8px 14px 10px; /*apply some padding inside the button*/
border:1px solid #3e9cbf; /*required or the default border for the browser will appear*/
cursor:pointer; /*forces the cursor to change to a hand when the button is hovered*/
/*style the text*/
font-size:1.5em;
font-family:Oswald, sans-serif; /*Oswald is available from http://www.google.com/webfonts/specimen/Oswald*/
letter-spacing:.1em;
text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3); /*give the text a shadow - doesn't appear in Opera 12.02 or earlier*/
color: #fff;
/*use box-shadow to give the button some depth - see cssdemos.tupence.co.uk/box-shadow.htm#demo7 for more info on this technique*/
-webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
/*give the corners a small curve*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
/***SET THE BUTTON'S HOVER AND FOCUS STATES***/
.bigbutton:hover, bigbutton:focus {
color:#dfe7ea;
/*reduce the size of the shadow to give a pushed effect*/
-webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
}