@import url('https://fonts.googleapis.com/css?family=Amiri:400,700|Sarala:400,700');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;700&display=swap');

html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}* {-moz-box-sizing: border-box;	-webkit-box-sizing: border-box;	box-sizing: border-box;}audio,canvas,img,video {vertical-align: middle;}hr {display: block;height: 1px;border: 0;border-top: 1px solid #ccc;margin: 1em 0;padding: 0;}fieldset {border: 0;margin: 0;padding: 0;}::-moz-selection {background: #b3d4fc;text-shadow: none;}::selection {background: #b3d4fc;text-shadow: none;}.browsehappy {margin: 0.5em;background: #ccc;color: #000;padding: 1em;}.hidden {display: none !important;visibility: hidden}.show {display: block !important;visibility: visible}.clear {clear:both}
* {-moz-box-sizing: border-box;	-webkit-box-sizing: border-box;	box-sizing: border-box;}
strong {font-weight:bold}
a {text-decoration:none;}
body {
	background:#87cdfe url(../images/sky_background.jpg) no-repeat top center;
	/*font-family: 'Amiri', serif;*/
	 font-family: 'Raleway', sans-serif;
	font-size:100%;
}
.aright{text-align:right;}
.acenter{text-align:center;}
.aleft{text-align:left;}
.fright {float:right;}
.fleft {float:left; margin-right:1em;}
h1 {font-size:2.3em; margin-bottom:1em;}
h2 {font-size:1.6em; margin-bottom:1em; color:#600625; border-bottom:1px #600625 dotted; margin-top:1em;}

.wrapper {position:relative;  margin:0 auto;  border:0px #FF0000 dashed; min-width:320px;}
footer {position:relative;  margin:0 auto;  text-align:center; border:0px #FF0000 dashed; min-width:320px}
header{border:0px #FF0000 solid;}
.header {height:260px; border-bottom:1px #000033 solid;}
.h-search {border:0px #333333 dashed; padding:0.20em; height:48px; position:absolute;right:10px; top:-50px;width:198px; min-width:180px; overflow:hidden;}
.trans-search {border:0px #333333 dashed;  padding:0.25em; height:40px; position:absolute;left:10px; top:-35px;width:198px; text-align:center; min-width:180px; }
.searchcontainer {position:relative; background:#000000;}
.searchcontainer input{background:#000000; color:#FFFFFF; border:none;}
.search-input {padding:0.5em; font-size:105%; width:90%; height:40px;}
.search-button {position:absolute; right:0; top:1px;padding:0.25em;}

.social-media {border:0px #333333 dashed;  padding:0.25em; position:absolute; left:10px; top:-85px; z-index:5000;}
.social-media a {display:inline-block;padding:0.25em; height:32px;width:32px;margin:5px 15px auto;}

.inner-content {position:relative; max-width:1680px;  margin:0 auto;}

.dropmenu a:before  {background:url(../images/sprite.png) no-repeat; background-size:150px;}

/* MENUS */
.topbarnav {border:0px #333333 dashed; text-align:center;  background-color: rgba(119, 123, 232, 0.4); border-bottom: 1px  #4c40ca solid; padding:0.5em; position:relative;}
.topbarnav a{display:inline-block; padding:0.7em; margin:0.5em; background-color: rgba(255, 255, 255, 0.8); border-radius:12px; font-size:1.1em; color:#333333; border:2px #4c40ca solid;}

.topbarnav a:hover { background-color: rgba(119, 123, 232, 1); color:#FFFFFF;}



.dropmenu {font-family: 'Sarala', sans-serif; border:0px #333333 solid; height:50px; text-align:center; background-color: rgba(119, 123, 232, 0.4); border-top: 0px  #4c40ca solid; border-bottom: 1px  #4c40ca solid; }
.dropmenu li { display:inline-block; border:1px #4c40ca solid; font-size:22px; width:16.66%; height:49px;}
.dropmenu a {color:#000000; padding:0.55em; display:block; position:relative;}
.dropmenu li:hover { background:#777be8; color:#FFFFFF;}

.dropmenu a:before {content:''; position:absolute; background-position: 4px -75px; right:10px; top:50%; margin-top:-16px; border:0px #000000 solid;  width:30px; height:30px; color:#000570;}

.dropmenu a:hover::before{background-position:-81px -75px;}

.dropmenu li:hover a::before{background-position:-81px -75px;}
.dropmenu li:hover {border-bottom:none;}



.dropmenu ul ul {display:none; position:absolute; top:100%; left:0; width:100%; z-index:900; background:#777be8; padding:1em; border:2px #4c40ca solid; border-top:none; text-align:left;}
.dropmenu li:hover ul{display:block;vertical-align: middle!important;}

.dropmenu ul ul li { background:#6589e9; color:#FFFFFF;   margin:0.5%; font-size:70%; border:1px #3057cb solid; height:auto; width:19%;}
.dropmenu ul ul li:hover { background:#3057cb; color:#FFFFFF; border:1px #868aea solid;}
/*.dropmenu ul ul li:hover a {color:#FFFFFF;}*/


.dropmenu ul ul a{ color:#FFFFFF;}
.dropmenu ul ul a:before{background:none!important; }
.dropmenu ul ul li{display:inline-block; }



.nodd:before {background:none!important;}


.left-menu {font-family: 'Sarala', sans-serif;}

.left-menu li {background:#6589e9; margin-bottom:0.10em; border:2px #6698ff solid;  position:relative; text-align:left;}

.left-menu li:hover {background:#3057cb; border:2px #2b60de solid;}

.left-menu li a{padding:0.75em 0.50em; display:block; color:#FFFFFF;}


.left-menu ul ul {position:absolute; left:101%; top:-25px; z-index:1000; background:#3057cb; display:none; width:300%; padding:1em; 
border-radius: 0 6px 6px 0;}

.left-menu ul ul li{font-size:92%; display:inline-block; width:18.3%; margin:0.8%;  height:60px; overflow:hidden; vertical-align: middle;}

.left-menu ul ul li a{padding:0.5rem; line-height:20px;  }

.left-menu li:hover ul{display:block;vertical-align: middle!important;}

/* LAYOUT */
.left-menu {}
.content { padding:1em 1.5em 1em 1.5em; /*font-family: 'Amiri', serif; font-weight:700;*/  font-family: 'Raleway', sans-serif;}
.right-content { padding:0 1.5em 1em 1.5em; text-align:center; font-family: 'Amiri', serif; font-weight:500;}
.content p, .right-content p {padding:0 0 1em 0; font-size:120%;  line-height:1.5em}
.content a, .right-content a {color:#600625; text-decoration:underline;}

.crumbs {border:1px #666666 solid; padding:0.25em; margin-bottom:0.5em;}
.crumbs a{padding:0.5em; color: #333333; text-decoration:none; display:inline-block;}
.crumbs a:hover{color: #000000;}
.crumbs a:after {content:'>'; padding-left:0.5em;}
.crumbs a:last-of-type::after {content:'';}



.fp {padding-top:4em;}
.fp p{color:#600625;}

.grid-wrapper {width:100%; margin:0 auto; position:relative; overflow:hidden; clear:both;}
.grid-2, .grid-3, .grid-4{ margin-left:1%; float:left; position:relative; border:1px #808080 solid; overflow:hidden;}
.grid-3  {width:32.6%;  border:0px #333333 solid;}
.grid-3:nth-child(3n+1) {margin-left:0; }

.grid-5 {border:1px #333333 dashed;}
.grid-5 img {width:100%; height:auto;}
.grid-5 div {width:18%; display:inline-block; border:1px #000000 dotted; margin:1%; max-height:230px; overflow:hidden;}

.column-wrapper { clear:both; overflow:hidden; border:0px #666666 solid;}
.col-20, .col-30, .col-50, .col-70, .col-80 {float:left; border:1px #333333 dashed;}
.col-20 {width:20%;}
.col-30 {width:30%;}
.col-50 {width:50%;}
.col-70 {width:70%;}
.col-80 {width:80%;}

.page-header {color:#600625; text-align:center; font-weight:700;}
.page-category {border:0px #333333 dashed;}
.page-category li {display:inline-block; border:1px #333333 solid; margin:1%; background:#6589e9; color:#FFFFFF; width:12.26%; text-align:center; overflow:hidden;}
.page-category li:hover { background:#3057cb;  border:1px #868aea solid;}
.page-category li a {padding:2em 0 2em 0; display:block; text-decoration:none; font-size:110%; color:#FFFFFF;}

.page-content p {color:#600625; font-weight:normal;}

/* IMAGES */
.page-image img, .top-image { max-width:700px}

.page-image {border:1px #666666 dashed; padding:0.5em; border-radius:8px; overflow:hidden; margin-bottom:1em; width:auto;}
.page-image img {border:5px #FFFFFF solid; border-radius:6px;}

.top-image {position:relative; background:#ffffff; padding-bottom:35px; border:10px #FFFFFF solid!important;
box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.50);}

.mini-gallery {clear:both; border:0px #333333 dashed; padding-top:1em; margin-bottom:1em; text-align:center;}
.mini-gallery img {width:100%; height:auto; border:5px #FFFFFF solid; border-radius:6px;}
.mini-gallery a {width:14.666%; display:inline-block; margin:1%;}


/* VIDEO */
.page-video {border:1px #666666 dashed; padding:0.5em; border-radius:8px; overflow:hidden; margin-bottom:1em; width:auto;}

.video {margin-bottom:2em;}

/* GOOGLE MAPS */
.map {margin-top:1em;}

/*Social Media*/
#fbtab {background: url(http://www.simplyplanes.co.uk/images/facebook_badge.gif) no-repeat;	}

#twtab {background: url(http://www.simplyplanes.co.uk/images/twitter_badge.png) no-repeat;}

#youtab {background: url(http://www.simplyplanes.co.uk/images/youtube_badge.png) no-repeat;}

#gplustab {background: url(http://www.simplyplanes.co.uk/images/googleplus_badge.png) no-repeat;}

@media screen and (max-width: 1280px) {
.page-category li {width:14.6%;}

}


@media screen and (max-width: 1080px) {
.dropmenu ul ul li { width:24%;}
.left-menu ul ul li{width:24%;}
footer img{width:100%; height:auto;}

.page-category li {width:18%;}





.grid-5 div {width:23%; margin:1%;}

}
@media screen and (max-width: 840px) {
/*.trans-search {top:150px; }*/
.topbarnav img {width:120px; height:auto; }
body {background-size:120% auto;}
.header {height:180px; }


.dropmenu ul ul li { width:32.33%;}

.left-menu ul ul {padding:0.4em; }
.left-menu ul ul li{width:32.3%;}
.col-20 {width:30%;}
.col-30 {width:40%;}
.col-70 {width:60%;}
.col-80 {width:70%;}

.page-category li {width:23%;}

.grid-5 div {width:31.33%; margin:1%;}
}


@media screen and (max-width: 600px) {
.topbarnav a{width:20%}
.topbarnav img {width:100%; height:auto; }
body {background-size:150% auto;}


.left-menu {position:fixed; left:-100px; width:150px;}
.left-menu ul ul li{width:49%;}
.right-content {width:100%; padding-left:50px;}

.page-category li {width:31.2%;}

}