*{margin:0;padding:0}
.modal {display: none; position: fixed; z-index: 1; padding-top: 10%; left: 0; top: 0; width: 100%; height: 100%; 
vertical-align: middle; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4);}
.modal-content {position: relative; background-color: #fefefe; margin: auto; border: 1px solid #888; width: auto;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.0s}

@-webkit-keyframes animatetop {from {top:-300px; opacity:0} to {top:0; opacity:1}}
@keyframes animatetop {from {top:-300px; opacity:0} to {top:0; opacity:1}}
.close {float: right; color: white; font-size: 28px; font-weight: bold;}
.close:hover,.close:focus {color: #000; text-decoration: none; cursor: pointer;}
.modal-header {padding: 2px 16px; background-color: #5cb85c; color: white; text-align:center;}
.modal-body {padding: 2px 16px;}
.modal-footer {padding: 2px 16px; background-color: #5cb85c; color: white; text-align:center;}

.click {display: inline-block; padding: 3px 6px; text-align: center; width:200px; 
font-size: 20px; cursor: pointer; color: #fff; background-color: #2196F3;  box-shadow: 0 9px #999; }
.click:hover {background-color: #0b7dda;}
.click:active {box-shadow: 0 5px #666;  transform: translateY(4px);}
/* End modal code from here */

@media only screen and (max-width: 767px) {
.click {display: inline-block; padding: 3px 6px; text-align: center; width:150px; 
font-size: 20px; cursor: pointer; color: #fff; background-color: #2196F3;  box-shadow: 0 9px #999; }
}
@media 
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min-device-pixel-ratio: 2) {
	body {
	}
}

body {overflow-x: hidden;}
.gradi {height: 100px; background-color: red; background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);}
@keyframes zoominoutsinglefeatured {0% {transform: scale(1,1);}
50% {transform: scale(1.2,1.2);} 100% {transform: scale(1,1);}}
.blinkin{animation:Text 2.88s infinite;}
@keyframes Text{0%{ color: white;} 49%{color: black;} 50%{color: yellow;} 99%{color:white;} 100%{color: yellow;} }


.sidenav {height:100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #bb0610;
overflow-x: hidden; padding-top: 60px; transition: 0.5s;}

.submit{text-align:left; margin-left:5px; width:200px; border-radius:20px; margin-top:5px; color: white; background-color:#bb0610;}
.submit:hover{color:yellow;}

.sidenav a {padding: 3px 0px 3px 15px; text-decoration: none; font-size: 25px; color: white; display: block; transition: 0.3s}
.sidenav a:hover, .offcanvas a:focus{color: yellow;}
.sidenav .closebtn {position: absolute; top: 65px; right: -20px; font-size: 60px; margin-left: 50px; } 
.topnav {background: url("../images/side.png") repeat scroll 0 0 rgba(0, 0, 0, 0); overflow: hidden; height:46px; margin-bottom:0px;}
.topnav a {float: left; display: block; color: #f2f2f2; text-align: center; padding: 7px 8px; text-decoration: none; font-size: 17px;}
.topnav a:hover {background-color: #000; color: black;} 
.topnav a.active {background-color: #4CAF50; color: white;}
@media screen and (max-height: 450px) {.sidenav {padding-top: 20px; margin-top: 65px;} .sidenav a {font-size: 18px;} }
a svg{transition:all .5s ease; &:hover{ #transform:rotate(180deg); }
#ico{display: none;}
.menu{background: #000; display: none; padding: 5px; width: 320px; @include border-radius(5px); #transition: all 0.5s ease;}
a{display: block; color: #fff; text-align: center; padding: 10px 2px; margin: 3px 0; text-decoration: none; background: #444;
&:nth-child(1){margin-top: 0; @include border-radius(3px 3px 0 0 );}
&:nth-child(5){margin-bottom: 0; @include border-radius(0 0 3px 3px); }
&:hover{background: #555;}