html, body
{padding: 0; margin: 0;}

body
{	background:#f5f5f5; font-family: 'Roboto Condensed', sans-serif; position: relative;	
-webkit-text-size-adjust: none;  box-shadow: 0px 0px 60px rgba(23, 23, 23, 0.4);}

body *
{	text-shadow: none;}

 @media only screen and (min-width: 1600px) { 
 body {margin: 0 15%;} 

}


h1, h2, h3, h4, h5, h6
{line-height: 1; margin: 0;}

h1{padding: 30px 7.5% 0px 7.5%; color: navy;  margin: 0px;  font-weight:100;  font-size: 3em; line-height: 1.6em; color: #0DAED6;}

h2{font-size: 2em;   color: #3d3d3d; padding: 0px 7.5% 6px 7.5%;   margin:0;   line-height: 1.8em; font-weight: 400;}

h3{	font-size: 1.4em; line-height: 1.6em; padding: 23px 7.5% 12px 7.5%; font-weight: 500; color: #3d3d3d !important;}

h4{	font-size: 1.2em; padding: 16px 2.5% 16px 2.5% !important; color: white; font-weight: 500; margin: 8px 7.5%; background: #014C63;}

h5{	font-size: 1.08em; padding: 8px 5% 32px 7%; font-weight: 400; color: #fff; line-height: 1.4em;}

h6{	font-size: 1.8em; padding: 32px 5% 32px 2.5%; font-weight: 100; color: purple; line-height: 1.6em; background: lavender; margin: 0 5%;}

p{ font-size: 1.08em;  padding: 2px 7.5% 23px 7.5%;   margin:0px;  font-weight: normal; color: #5a5a5a; line-height: 1.8em}


@media only screen and (max-width: 380px) { 
 h1 {padding: 0 3%; font-size: 3.2em !important;} 
 h2 {font-size: 1.4em; padding:  0px 3% 0 3% !important;}
 h3 {font-size: 1.2em; padding: 12px 3% 0 3%; }
 h4 {font-size: 1.2em; padding: 12px 3% 0 3%; }
 p {padding:0px 3% 12px 3%; 	font-size: 1em;  }
}


img {margin: 0;  height: auto;}

.look {color: orangered; font-size: 1.2em;}
.tt {font-family: 'Roboto Condensed', sans-serif; font-weight: 100;}
.newshead {font-size: 1.4em;}

@media only screen and (max-width: 480px) {	 
.big{  font-size:1.2em; opacity:.9; line-height: .8em;}
.red {color:#ED2939;  font-size:.8em; opacity:.5; line-height: .8em; font-family: 'Open Sans', sans-serif; border-bottom:0; padding: 0 0 23px 0; text-shadow: 0;}
 }

 
 .news {padding: 2% 4% 1% 4%; margin:  2% 5%; background:#D6F5FF ; border: solid 1px #014C63;  border-radius: 5px; height: auto; }
 
 @media only screen and (max-width: 600px) {	 
.news {height: auto !important; margin: 2.5%;}
}

.news img {padding: 6px 23px 12px 0;}
 
 .news:hover,  .even:hover, .jobs:hover {  box-shadow: 0px 0px 60px rgba(13, 174, 214 0.9); background: #fff;}
 
 p.news, p.even  {color: #014C63 !important;}


 .even {padding: 2% 4% 1% 4%; margin:  2% 5%; background:#f2fcd6; border: solid 1px #014C63;  border-radius: 5px; height: auto; }

 .jobs {padding: 2% 4% 1% 4%; margin:  2% 5%; background:#fcd7d1; border: solid 1px #014C63;  border-radius: 5px; height: auto; }



.spacer {  clear: both;  height: 4px;  color: transparent; }
.page {opacity: .7; letter-spacing: .1em; }

.quote {padding: 0 5 0 0%; border-left: #D6F5FF solid 23px; margin:2.3% 6%; line-height:2.3em; background: snow; color:#014C63; }

@media only screen and (max-width: 600px) {
.quote {border-left: 0; margin: 2.3% 1%;}	
}


.inbox {padding: 0% 2% ; background: snow; width:80%; height: auto; margin:2% 8% 10% 8%; border: #fff 4px solid;   box-shadow: 0px 0px 60px rgba(23, 23, 23, 0.15);}


@media only screen and (max-width: 720px) {
.inbox {margin:2% 2% 10% 2%; width: 92%}
}

a, a:link, a:active, a:visited, a:hover
{color: #F76565; border-bottom: 0;text-decoration: none; outline:none;}
a {outline: none;}
a:hover{ border-bottom: 6px solid #A6CE39; text-decoration: none; outline:none; background: transparent;  transition: 1.3s; color: #A6CE39;}
a:active {background: #3C84BC; border-bottom: 12px solid #3C84BC; color: white;}

ul li {	list-style-type: disc;	margin: 0px 8% 0 6%	;	padding: 0px; color:#014C63;}


/* width */
::-webkit-scrollbar {
    width: 15px; }


/* Track */

 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #7CCCE9; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #0DAED6; }



#contain 
{height: auto; width: auto; 
  box-shadow: 0px 0px 60px rgba(23, 23, 23, 0.4); background: #fff;}


/* menu stuff g'wan 'ere
nav:not(.mm-menu)
{display: none;}
*/


#menu p{color: #ffc; padding: 20px; font-size: 1em; background: transparent; font-weight: normal;}



.header
{	background: transparent;
	font-weight: normal;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
	width: 100%; top: 0;
	height: 46px; 
	padding: 0 50px; position: fixed; opacity: .8;}

	
	.header2
{	background: #000;
	font-weight: normal;
	width: 100%; top: 0;
	height: 50px; opacity: .85;
	padding: 7px 0 0 0; position: fixed;}
	
	
	.header a
{	background: center center no-repeat #330433;
	background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC );
	display: block;	width: 40px; height: 40px; position: absolute;	top: 5px;	left: 12px; }
	
@media only screen and (min-width: 480px) 
{ 		.header {width: 10%;}

		.header2 {display: none;}

		.header FixedTop {display: none}

        .header a {display: none;}
}
	
.header.fixed{ 
  position: fixed; 
  top: 0; left: 0;  }



/* NAV -------------------------------------------------------- */

nav {
  background-color: white !important; 
  width:100% !important;  
  position: fixed; 
  z-index: 23; 
  height: 52px; 
  padding: 0; 
  margin: 0 !important;}

 @media only screen and (min-width: 1600px) { 
 nav {
   width: 70% !important; 
   margin: 0 ;  
   padding: 0! important; 	}
 }


/* code for menu---- http://www.cssscript.com/pure-css-mobile-compatible-responsive-dropdown-menu/ ------*/
.toggle, [id^=drop] { display: none;}


nav a {
  display: block;
  padding: 0 12px;
  color: #006 !important;
  line-height: 52px;     
  text-decoration: none;
   border: 0 !important;
   background: white;
}

nav a:hover { color: tomato !important; background: #D6F5FF; }


nav:after {
  content: " ";
  display: table;
  clear: both;
}

nav ul {padding: 0 12px;  margin: 0;  list-style: none;  position: relative; }


nav ul ul {
  display: none;
  position: absolute;
  top: 52px;
  text-align: left;
}


nav ul li {
  margin: 0;
  display: inline-block;
  background-color: white; 
  z-index: 20; /* here for 2nd part of menu */
 	list-style-type: none; 
  padding: 0 23px 0 0px; 
  color: white !important;
}


nav ul ul li {
  width: 180px;
  float: none;  
  padding:0 6px 0 6px;
  display: list-item;
  position: relative; 
  background: #fff; 
  opacity: .8;
  }

nav ul ul li a{
  background: #D6F5FF !important; }

nav ul li ul li:hover { 
 background:  #0DAED8; 
 opacity: 1;}


nav ul li:hover > ul {
 display: inherit; }



li > a:after {content: ':'; }

li > a:only-child:after { content: ''; }


/* Media Queries
--------------------------------------------- */

@media all and (max-width : 1124px) {

.toggle + a,
 .menu { display: none; }

.toggle {
  display: block; 
  background-color: #53C4E0; /* colour of mobile device menu */
  padding:  8px;
  color: white; 
  line-height: 40px;
  text-decoration: none;
  margin: 0; 
}

.toggle:hover { background-color:  #014C63; }

[id^=drop]:checked + ul { display: block; }

nav {width: 100%; margin: 0; padding: 0; }

nav ul li {
  display: block;
  width: 100%;  opacity:.9;
}

nav ul ul .toggle,
 nav ul ul a { padding: 0 10px; }

nav ul ul ul a { padding: 0 10px; }

nav a:hover
 /*nav ul ul ul a*/ { background-color: #195D72; color: white !important;}

nav ul li ul li .toggle,
nav ul ul a 
{ background-color: #53C4E0; color: navy !important;  }

nav ul ul {
  float: none;
  position: static;
  color: #fff;
}

nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }

nav ul ul li {
  display: block;
  width: 100%;
}

nav ul ul ul li { position: static;

}
}

@media all and (max-width : 330px) {

nav ul li {  display: block;  width: 100%;}

}





/*==========content ===============*/

#banner {width: 100%; height: auto; background: transparent; margin: 0; }

#banner h1{padding: 70px 7.5% 0px 2%; color: black;  margin: 0px;   font-size: 3.6em; font-family: 'Alfa Slab One', cursive; font-weight: 100;}

#banner h2 {font-size: 1.4em; letter-spacing: 0.15em; padding: 0% 7.5% 32px 7.5% !important;  color: navy; margin: 0; font-weight: 100; font-variant:small-caps;}

@media only screen and (max-width: 480px) 
{ #banner h2  {font-size: 1.4em; padding: 20px 8% 40px 8% !important; line-height: 1.25em; letter-spacing: .15em;}
}

#banner a {color: #0DAED6;}
#banner a:hover {color: skyblue; background: transparent; border: 0;}
#banner img {max-width:100% !important; padding: 0 32px 23px 0;}



#intro {background: #fff; height: auto; padding: 0; position: relative;}
#intro img {width: 100%;}

@media only screen and (max-width: 480px) {
#intro {  line-height: 1.4em; margin:0; border:0;  height: auto; } 
}




/* code for gallery on pages  https://galleria.io/  busy page huh - - - - - - -!*/

.galleria{ width: 100%; height: 520px; background:transparent; padding: 0; margin:0; float: left;}

@media only screen and (max-width: 1024px) 
{	.galleria {height: 450px; }}

@media only screen and (max-width: 768px) 
{	.galleria {height: 500px; }}

@media only screen and (max-width: 480px) 
{	.galleria {height: 220px; }}



#first-hold {width: 100%; height: auto;  float: left; background: white;}

#first { height: auto;  width: 64%; float: left; padding: 0 0 0 3%;}

#first h2 { line-height: 1.4em;}

@media only screen and (max-width: 480px) {
	#first h1 {font-size: 2.3em !important; padding: 0 0 10px 3%;}
}


#first-right {width: 33%; height: auto; float: right;}

@media only screen and (max-width: 768px) {
	#first-right {width: 100%; height: auto}
	#first {width:100%; }
	}



#pic1 {margin: 0; height: auto; width: 100%; background: white; padding: 0;}

#pic1 h3 {	font-size: 1.4em; line-height: 1.6em; padding: 23px 7.5% 12px 7.5%; font-weight: 500; color: #3a3a3a;}

#pic1 img {max-width: 100%;}


#second { height: auto; width: 100%; background: white;}
 

#third { height: auto;  background: #014C63; }
#third img {width: 100%;}
	
	
#four{ height: auto;   background: #d6f5ff !important; 
width: 100%; padding: 0; margin: 0;} 
#four h2 {color: #014C63;  padding: 16px 7.5% 6px 7.5%;  }

#four p{color: #014C63;}
#four img {max-width: 100%;}
#four a {padding: 6px;}
#four a:hover {color: #0DAED6; border-bottom: #0DAED6 solid 6px; background: white; }


#footer
{	background-color: #014c63; width: 100%; height: auto; margin: 0; padding: 5% 0; border-bottom: 2.3px solid white;}

#footer h3 {font-size: 1.6em;  margin: 0; padding:0px 0 0px 5%; font-weight: normal; color: skyblue !important;} 

#footer a {color: #fff; border:0; padding: 12px;}

#footer a:hover {color: gold; 
  background: transparent;
  transition: 2.3s;
  background: #01313f;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 4px 4px 6px rgba(223, 23, 23, 1)
  opacity:.7;
}

#footer a:active {color: yellow; background: black; }



.sml {font-size: .666em; padding: 0 0 0 4%; color: skyblue; }
.sml2 {font-size: .666em; padding: 0; color: purple;  }
.sml3 {font-size: .666em; padding: 0; color: goldenrod;  }

.sml2-line {font-size: .666em; padding: 0; color: purple; /*text-decoration-line: line-through;  */}


@media only screen and (max-width: 480px) {
  #footer	{ 
    position: relative;	
    font-weight: normal;	
    width: 100%;	
    height: 140px;  
    margin: 0;  }
	
 #footer h3 {
   font-size: 1.2em !important; 
   line-height: 1.8em; 
   margin: 0; 
   padding:23px 0 0 3% !important; 
   font-weight: normal; 
   bottom: 0;} 
}



/* home page tiles and buttons-------------- FILTER RESULTS FROM BUTTON*/


* {
  box-sizing: border-box;
}

.btn {
  background: white;
  color: black;
  font-size: .95em;
  padding: 10px ;
  margin: 10px 0px 10px 4.5%;
  border: 1px solid #2c2c2c;
  border-radius: 3px;
}

.btn:hover {
  background: #0DAED6;
  color: white;
  border: 1px solid white;
}

.btn:active {
  background:#77D30E !important;
  color: white !;
  border: white 1px solid;
  outline: none;
}

.active {
  text-decoration: none;
  background: #0DAED6 !important;
  color: white !important;
  border: 1px solid orange;
}



#parent {width: 100%; height: auto; }

.box, .box2 {
  opacity: 1;
  background: white !important;
  padding: 0px;
  margin: .3%;
  height: auto;
  width: 99.4%;
  float: left
}


.box2 {  width: 19.4%;}
@media only screen and (max-width: 640px) {
	.box2 {width: 32%;}
	.box h2 {font-size: 1.08em !important;}
}
	
	

@media only screen and (max-width: 1024px) {
  .box {
    width: 98%;
  }
}

@media only screen and (max-width: 640px) {
  .box {
    width: 99.4%;
  }
}

.box:hover {
  opacity: 1;
}

#one {
  width: 100%;
  height: 180px;
  padding: 0px;
  margin: 0;
  float: left;
  background:#0DAED6;
}


#two {
  width: 100%;
  height: 70px;
  padding: 0px;
  margin: 0;
  float: left;
  background:#014c63;
  text-align: center;
}


#one h2, #two h2 {
  font-size: 1.3em;
  padding: 12px 0 0 14px;
  color: white;
  margin: 0;
  line-height: 1.2em;
  font-weight: 400;
}

.box2 h2 { padding: 20px 0 0 0 !important; 
           font-size: 1.25em !important;}

#one h4, #two h4, #one h5 {
  font-size: .95em;
  padding: 1px 16px 0px 16px;
  line-height: 1.3em;
  margin: 0;
  color: white;
  font-weight: 400;

}

#one a, #two a {
  border: 0 !important; color: #ffa;
}

#one:hover, #two:hover {
  opacity: 1; ;
}

#one img, #two img {
  border: 0px;
}


#one4 h2 {font-size: 1.2em;}
#one4 h2:hover {color: white;}

#con {width: 100%; height: auto; padding: 0; margin: 0;}

#con img {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
  transition: 2.3s ease;
  width: 100% !important;

}


#con img:hover {
  -webkit-filter: grayscale(90%);
  filter: grayscale(90%);
 }



#con h3 {
  font-size: 3.2em;
  opacity: .8;
}

/*------------ transform, on home page -----------------*/

#box {
  background:whitesmoke;
  height: auto;
  width: 96%;
  border: 0px;
  float: left;
  padding: 2%;
  margin: 0 2%
  /* box-shadow: 2p 2px 32px rgba(23, 23, 23, 0.23); */
}

#box:hover {  background: white;}

#box img {
  max-width: 100%;
  height: auto;
  border: 0;
  padding: 0;
}


@media only screen and (min-width: 1200px) {
  #work {
    width: 98%;
    margin: 0.5%;
    background: transparent;
    float: left;
  }
}


@media only screen and (min-width: 1536px) {
  #work {
    width: 32.3%;
    margin: 0.5%;
    float: left;
  }
}

@media only screen and (min-width: 2000px) {
  #work {
    width: 19.5%;
    margin: 0.25%;
    float: left;
  }

  .sub {
    height: auto;
    float: left;
    background: #000;
  }

  .sub p {
    padding: 1px;
  }

  img {
    background: transparent;
  }
}




/* code for about page only, smiletones ------------------ */

/*the circles */

  
  .dot06, .dot09, .dot12, .dot15, .dot18, .dot21 {
  height: 120px;
  width: 120px;
  background-color: #014C63 ;
  border-radius: 50%;
    display: inline-block;
  padding: 30px;
    border: solid 2px white;
}


.dot07, .dot10, .dot13, .dot16, .dot19 {   height: 120px;
  width: 120px;
  background-color: #0DAED6;
  border-radius: 50%;
  display: inline-block;
  padding: 30px;
     border: solid 1px white;
 }
  
  
  .dot08, .dot11, .dot14, .dot17, .dot20 {   height: 120px;
  width: 120px;
  background-color: #08C1C6;
  border-radius: 50%;
  display: inline-block;
  padding: 30px;
    border: solid 1px white;
 }
  
  
  .dot06 {margin: -20px 0 0 0;}
	  .dot07   {margin: 74px 0 0px 0;}
	    .dot08 {margin: 62px 0 0 0;}
		  .dot09 {margin: 112px 0 0 0;}
		    .dot10 {margin: 36px 0 0 0;}
			  .dot11 {margin: 210px 0 0 0;}
			    .dot12 {margin: 106px 0 0 0;}
				  .dot13 {margin: 220px 0 0px 0;}
     				  .dot14 {margin: 128px 0 0px 0;}
					   .dot15 {margin: 128px 0 0px 0;}
					    .dot16 {margin: 132px 0 0px 0;}
						 .dot17 {margin: 38px 0 0px 0;}
						  .dot18 {margin: 278px 0 0px 0;}
						   .dot19 {margin: 128px 0 0px 0;}
						    .dot20 {margin: 202px 0 0px 0;}
                		    .dot21 {margin: 158px 0 0px 0;}
  
  
  .dot06:hover,  .dot07:hover, .dot08:hover, .dot09:hover, .dot10:hover, .dot11:hover, .dot12:hover, .dot13:hover, .dot14:hover, .dot15:hover,
  .dot16:hover,
  .dot17:hover,
  .dot18:hover,
  .dot19:hover,
  .dot20:hover, 
  .dot21:hover
  
  { background: orange; color: #014C63; box-shadow: 0px 0px 160px rgba(13, 174, 214, 0.73);}

  .dot:hover h3,  .dot2:hover h3, .dot3:hover h3, .dot4:hover h3, .dot5:hover h3, .dot6:hover h3, .dot7:hover h3, .dot8:hover h3 
  {  color: white !important;}




.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
    border-left: 26px solid green;
	}

/*
.arrow-right {
    width: 120px;
    height: 120px;
    background: green;
    clip-path: polygon(100% 50%, 0% 0%, 0% 100%);
}
*/


/*the columns containing the three sections */
   
#cola {width: 40%; height: auto; background: #e0f4f9; float: left; text-align: center; }

#colb {width: 20%; height: auto; background: #e0f4f9; float: left; text-align: center;}

#colc {width: 40%; height: auto; background: #e0f4f9; float: left; text-align: center;}

 @media only screen and (max-width: 900px) {
     #cola {width: 100%;}
	 #colb {display:none;}
	 #colc {display: none;}
 }
 
 #cola p, #colc p {padding: 32px 3% 0 3% !important; line-height: 1.4em;}
 
 .w3-animate-left li {margin: 0 !important;  padding:0 !important;}
  
  .hide {color: white; margin: 0 12px 0 0;}
  
  @media only screen and (min-width: 900px) {
	.hide {display: none;}  
  }


/*our story page - pain in the arse */


.title
{width: 82%; height: 60px; background: #014C63 url(arrowX.png) 100% 50% no-repeat; float:left; margin: 1% 5% 0 15%;   border-radius: 0px 50px 50px 0px;}

.text 
{width: 72%; height: 500px; background: #EAF9FC; float:left; margin: 0 5% 0 15%; padding: 0;}

.text06 
{width: 72%; height: 330px; background: #EAF9FC;; float:left; margin: 0 5% 0 15%; padding: 0; }

.text07 
{width: 72%; height: 340px; background: #e0f4f9; float:left; margin: 0 5% 0 15%; padding: 0;}

.text08 
{width: 72%; height: 320px; background: #EAF9FC; float:left; margin: 0 5% 0 15%; padding: 0;}

.text09
{width: 72%; height: 460px; background: #EAF9FC; float:left; margin: 0 5% 0 15%; padding: 0;}



.title2
{width: 82%; height: 60px; 
  background: #0DAED6; 
  float:left; 
  margin: 1% 15% 0 5%;   
  border-radius: 50px 0px 0px 50px;}

.title2l
{width: 82%; height: 60px; background: #e0f4f9; float:left; margin: 1% 5% 0 15%;}

.text2
{width: 72%; height: 360px; background: #EAF9FC; float:left; margin: 0 5% 0 15%;}

.text2l
{width: 72%; height: 520px; background: #e0f4f9; float:left; margin: 0 5% 0 15%;}

.text2l-14
{width: 72%; height: 200px; background: #e0f4f9; float:left; margin: 0 5% 0 15%;}

.text2l-16
{width: 72%; height: 490px; background: #e0f4f9; float:left; margin: 0 5% 0 15%;}



.text2r
{width: 72%; height: 430px; background: #e0f4f9; float:left; margin: 0 5% 0 15%;}

.text2r-11
{width: 72%; height: 500px; background: #e0f4f9; float:left; margin: 0 5% 0 15%;}


.text2r-15
{width: 72%; height: 370px; background: #e0f4f9; float:left; margin: 0 5% 0 15%;}


.text2r-17
{width: 72%; height: 570px; background: #e0f4f9; float:left; margin: 0 5% 0 15%;}

.text2r-19
{width: 72%; height: 550px; background: #e0f4f9; float:left; margin: 0 5% 0 15%;}


.title h3, .title2 h3, .titlel h3, .title2l h3 {padding: 12px 0 0 0; font-size: 1.2em; color: #555;}


.title3, .text3
{display: none;}


 @media only screen and (max-width: 900px) {
	 
	 .title2l 
	 {width: 82%; height: 60px; background: #A6CE39 ; float:left; margin: 2% 9% 0 9%;}
	 .text2l
     {width: 82%; height: auto; ; float:left; margin: 0 9% 0 9%; height: auto;}
	 
     .text {height: auto !important;}
	
	 .title3 
	 {width: 82%; height: 60px; background: #0DAED6 ; float:left; margin: 2% 9% 0 9%; display: block;    border-radius: 50px 0px 0px 50px;}
	 .text3
     {width: 82%; height: auto; background: #EAF9FC; float:left; margin: 0 9% 0 9%; display: block; height: auto;}
	 
	 
	.title {background: #014C63 url(cross.png) no-repeat !important; margin: 2% 9% 0 9%; display: inline!important;}
	.text{width: 82%; margin: 0% 9% 12px 9% !important;  }
	
	 .title2, .text2 {display: none;}  
 }
 
 

  .title h3, .title2 h3, .title2l h3 {color: white; font-weight: 600; }
  
  .text p, .text2 p, .text2l p, .text2r p {color: #2a2a2a;  padding: 12px 23px; font-weight: 100 !important;}
  
  .text2l p, .text2r p, .text3 p{color: #014C63; }
  
 
  .w3-animate-left{position:relative; }
  .w3-animate-right{position:relative;animation:animateright 6.2s !important;}
  
  .w3-animate-ignore {display: none;}
  
  @keyframes animateright{from{right:-300px;opacity:0.1} to{right:0;opacity:1}}
  @keyframes animateleft{from{left:-300px;opacity:0.1} to{right:0;opacity:1}
  }