/*
Theme Name: TGP Communication Passport
Theme URI: http://www.tgpcommunicationpassports.org.uk
Description: TGP Cymru Communication Passport Microsite
Version: 1.0
Author: Richard Boydell
Author URI: http://www.unitedgraphicdesign.com/
*/

body {
	margin:0;
	padding:0;
	color:#4A4A49;
	font-family: "museo-sans-rounded", Helvetica, Arial, sans-serif;
	font-size:1.1em;
	line-height: 1.4;
	font-weight: 300;
}

/* Universal Styles */

.clear {clear:both;}

h1, h2, h3, h4 {
	font-weight:700;
	margin-bottom:0;
	padding-bottom:5px;
	line-height: normal;
}

h1 {font-size:2.8em; color:#ed1c24;}
h2 {font-size:2.2em; color: #37b34a;}
h3 {font-size:1.8em; color: #ed1c24;}
h4 {font-size:1.2em; color: #37b34a;}

h3 + p {margin-top: 0;}

a {
	color:inherit;
}

a:hover {
	text-decoration:none;
}

.alignleft {
	float:left;
	margin-right:5px;
}

.alignright {
	float:right;
	margin-left:5px;
}

.aligncenter {
	margin-left:auto;
	margin-right:auto;
	clear: both;
	display: block;
}

img {
	max-width:100%;
	height: auto;
}

hr { 
    display: block;
    margin-top: 1.1em;
    margin-bottom: 1.1em;
    margin-left: auto;
    margin-right: auto;
    border-style:solid;
    border-width: 5px;
	border-color:#ebebeb;
}

blockquote {
	font-family: Georgia, serif;
	font-style: italic;
	margin: 0.25em 0;
	padding: 0.25em 40px;
	line-height: 1.45;
	position: relative;
}

.wp-caption {
	text-align: center;
	margin: 10px;
	min-height: 260px;
}

.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption p.wp-caption-text {
	font-size: 0.75em;
	line-height: normal;
	padding: 5px;
	margin: 0;
}

.wrapper {margin:0 auto; max-width:1200px;}
.smallwrapper {margin:0 auto; max-width:800px;}

* {
    box-sizing: border-box;
}
.row:after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 30px;
}

[class*="col-"] {
    width: 100%;
}

@media only screen and (min-width: 750px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}


/* Header */

.topbar {font-size: 0.65em; text-align: right; padding: 5px 30px;}

.topbar li {list-style-type: none; list-style-image: none;}

.wpml-ls-legacy-list-horizontal {padding: 0 !important; display: inline-block;}
.wpml-ls-legacy-list-horizontal a {padding: 0 10px !important; line-height: inherit !important;}

#search {
	border:none;
}

#search fieldset {
	border:none;
	padding:0 !important;
	margin:5px;
}

#search input[type=text] {
	width:85%;
}

#s {
	padding:5;
	margin:0;
	background-color:#cc1c24;
	border:none;
	font-size:0.8em;
	font-weight:500;
	color:#FFF;
	font-style:normal;
    border-radius: 10px;
}

#searchsubmit {
	width:12%;
	height:41px;
	background:none;
	border:none;
	font-size:1em;
	font-weight:700;
	color:#FFF;
	margin: 0;
}

input::placeholder {color: #FFF;}

#header {display: flex; align-items: center; padding: 15px 30px 30px; background: #fff;}

#logo {width: 10%; float: left;}


/* Navigation */

#navigation {width: 90%; display:flex; justify-content: flex-end; font-weight:700; font-size:1em; line-height: 1.1; z-index: 9999; transition: ease all 0.8s;}
nav {margin: 0;}
nav ul {padding: 0; margin:0; list-style: none; position: relative; text-align: left;}
nav ul li {padding: 0; margin: 0 -7px 0 0; display:inline-block;}
nav a {display:block; padding: 10px 15px; color:#ed1c24; text-decoration:none;}
nav a:hover {background-color: #ed1c24; color: #FFF; text-decoration:none;}
nav ul ul {display: none; position: absolute; top: 100%;}
nav ul li:hover > ul {display:inherit;}
nav ul ul li {z-index: 9999; width: auto; max-width: 300px; display:list-item; position: relative; background-color:#37b34a; border-bottom: 1px solid #FFFFFF; font-size: 0.85em;}
nav ul ul li a {color: #FFF !important;}
nav ul ul li a:hover {background-color:#ed1c24 !important;}
nav ul ul ul {position: absolute; top:0; left:100%;}
nav ul ul ul li {min-width: 300px;}
nav li > a:after {content:  " +"; font-size: 0.8em;}
nav li > a:only-child:after { content: ''; }

nav.welsh {font-size:1em;}
nav.welsh a {}

.green a, .orange a, .donate a {color: #FFF !important; border-radius: 30px;}
.donate {background: #37b34a; border-radius: 30px; margin: 0 5px;}
.orange {border-radius: 30px; margin: 0 5px;}

ul#menu-main-menu.menu, ul#menu-main-menu-1.menu .nav ul {list-style-type: none; list-style-image: none; margin: 0; padding: 0;}
ul#menu-mobile-menu.menu {list-style-type: none; list-style-image: none; margin: 0; padding: 0;}
@media only screen and (min-width: 768px) {.sidenav, .menu-button {display: none;}}

.pagination {width:100%; text-align: center; padding: 15px;}


/* Body */

.green {background: #37b34a; color: #FFF !important;}
.red {background: #ed1c24; color: #FFF !important;}
.orange {background: #f3721f; color: #FFF !important;}

.green h2, .red h2, .orange h2, .green h3, .red h3, .orange h3 {color: #FFF !important;}

#homeboxes {display: flex; flex-wrap: wrap; margin-bottom: 30px;}

@media screen and (max-width:750px) {
#homeboxes {display:inline-block;}
}

.home-news:nth-of-type(5n+1) {background: #37b34a; color: #FFF !important;}
.home-news:nth-of-type(5n+2) {background: #ed1c24; color: #FFF !important;}
.home-news:nth-of-type(5n+3) {background: #f3721f; color: #FFF !important;}

.homebox {width: calc(33.33% - 30px); margin: 15px; padding: 15px; border-radius: 15px;}
.homebox-img {height: 200px; object-fit: cover; overflow: hidden; border-radius: 10px; background-size: cover; background-repeat: no-repeat;}
.homebox-img img {min-height: 200px; width:auto; object-fit: cover; overflow: hidden;}
.homebox h3 {color: #FFF !important; margin-bottom: 5px; margin-top: 10px;}
.homebox p:first-of-type {margin-top: 5px;}
.homebox p:last-of-type {margin-top: 45px;}
.homebox a {background-color: rgba(0,0,0,0.2); padding: 10px 15px; border-radius: 10px; text-decoration: none; transition: ease all 0.3s;}
.homebox a:hover {background-color: rgba(0,0,0,0.1);}


/* Passport page */

.passport h1:first-of-type {margin-bottom: 0;}
.passport h2:first-of-type {margin-top: 0;}

.passport-button {background-color: rgba(243,114,31,1.0); color: #FFF; font-weight: 700; padding: 10px 15px; border-radius: 10px; text-decoration: none; transition: ease all 0.3s; display: inline-block; margin-top: 30px;}
.passport-button:hover {background-color: rgba(243,114,31,0.8);}
.passport-button a {text-decoration: none;}
img.passport-thumb {max-width: 200px; max-height: 100%; height: auto; border: 1px solid rgba(0,0,0,0.1); box-shadow: 5px 5px 0 0 rgba(0,0,0,0.1); margin: 1em; transition: ease all 0.3s; transform: scale(1); float: left;}
img.passport-thumb:hover {transform: scale(1.025);}

.custom-password-message {background-color:#ed1c24; color:#FFF; padding: 5px;}


/* Sidebar */


#sidebar {color:#FFF;}
#sidebar li {list-style-type:none;}
#sidebar ul {margin: 0; padding: 0;}
#sidebar h2 {color: #FFF; font-size: 1.6em;}
#sidebar ul a {text-decoration:none; color:#FFF;}
h2.widgettitle {list-style-type: none; list-style-image: none; color:#FFF !important; margin: 0;}
#sidebar h3 a {color:#FFF; text-decoration:none;}
#sidebar h3 a:hover {text-decoration:underline; }
#sidebar .widget {padding: 30px; color:#FFF; background: #37b34a; border-radius: 30px; margin-bottom: 30px;}


/* Footer */

#footer {
	font-size: 0.8em;
	line-height: normal;
}

#footer h2 {color: inherit !important; font-size: 1.6em;}

#footer a {
	color:inherit;
}
	
#footer li {
	list-style-type: none;
	list-style-image: none;
}

.foot1 {text-align: left;}
.foot2 {text-align: right;}
.foot2 img {float: right; margin:0 10px;}
.foot3 {font-size: 0.8em; text-align: center; padding: 15px !important;}

@media screen and (max-width:750px) {
.foot1, .foot2, .foot3 {text-align: center;}
.foot2 img {float: none; margin: 10px;}
}


/* Forms */

input[type=text], input[type=email], textarea {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
	border:1px solid #BFC9D0;
}

input[type=password] {
    padding: 10px;
    margin: 5px 0;
	border:1px solid #BFC9D0;
}

input:matches([type="button"], [type="submit"], [type="reset"]) {
	background:#ed1c24;
	color:#FFF;
	border: none;
	padding: 10px;
	font-size: 14px;
    font-weight: 700;
}