/*
Theme Name: Nicole Cooke 2020
Theme URI: http://www.nicolecooke.com
Description: Nicole Cooke Website
Version: 1.0
Author: Richard Boydell
Author URI: http://www.unitedgraphicdesign.com/
*/


/* Body */

html, body {height: 100%; width: 100%; margin:0; padding:0; color:#00247d; font-family: museo, serif; font-size: 1.1em; font-weight: 300; line-height: 1.4;}


/* Typography */

h1 {font-size:2.3em;}
h2 {font-size:1.8em;}
h3 {font-size:1.5em;}
h4 {font-size:1.1em;}
h1, h2, h3, h4 {line-height: 105%; font-family: bebas-neue-pro-semiexpanded, sans-serif; font-weight: 700;  text-transform: uppercase; color:inherit;}

a {color:inherit; text-decoration:underline;}
a:hover {text-decoration: none;}

strong {font-weight: 700;}

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

button {font-family: bebas-neue-pro-semiexpanded, sans-serif; font-weight: 700; text-transform: uppercase; background-color: #15467B; color: #FFFFFF; padding: 20px; font-size: 1.3em; border: none;}


/* Images */

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

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

.gallery-thumb {padding: 5px !important;}
.caption-title {font-size: 1.2em; background: #FFFFFF; padding: 15px 15px 20px; margin:0; -webkit-margin-before: 0; -webkit-margin-after:0;}


/* Forms */

form input[type=text], input[type=email], textarea {width: 100%; border: solid 1px #464646; padding: 15px;}
form input[type=submit] {padding: 0 15px; background-color: #464646; color: #FFFFFF; border: none; font-size: 1em; font-weight: 700; -webkit-appearance: none;}
input.wpcf7-form-control.wpcf7-submit {padding: 15px;}


/* Structure */

* {box-sizing: border-box;}

.wrapper {max-width: 1200px; margin: 0 auto; position: relative;}
.smallwrapper {max-width: 800px; margin: 0 auto;}
.fullwrapper {max-width: 1920px; margin: 0 auto; position: relative;}
.row:after, .wrapper:after, .smallwrapper:after {content: ""; clear: both; display: block;}

[class*="col-"] {float: left; padding: 30px;}

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-25 {width: 20%;}
    .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-95 {width: 80%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

.clear {clear: both;}


/* Header */

#header {color: #FFFFFF; background-size: 100% 100%; background-repeat: no-repeat; background-position: center; padding: 30px 30px 60px; z-index: 999; position: absolute; width: 100%; top: 0; left:0;}
#logo {float: left;}
#logo img {height: 100px;}


/* Navigation */

#navigation {font-size: 1.5em; font-weight:700; font-family: bebas-neue-pro-semiexpanded, sans-serif; font-weight: 700; text-transform: uppercase; line-height:1; z-index: 9999; position: absolute; top:0; right: 0;}
.topnav {border: 2px solid #FFF; box-shadow: 2px 2px 2px rgba(0,0,0,0.3); text-shadow: 2px 2px 2px rgba(0,0,0,0.3); list-style-type: none; list-style-image: none; margin: 0; padding: 20px;}
.topnav:hover {background-color:#44c7da; text-shadow:none;}
.topnav a {text-decoration: none;}
.topnav a:hover {color:rgba(255,255,255,0.5);}
.topnav li, .icon {color: #FFFFFF;}
.topnav li {display: none;}
.topnav li ul {display: none;}
.topnav.responsive li ul {display: block; font-size: 0.85em;}
.topnav .icon {display: inline-block;}
.topnav .icon:hover {color: #FFFFFF;}
.topnav.responsive .icon {float: right;}
.topnav.responsive {position: relative;}
.topnav.responsive li.icon {position: absolute; right: 0; top: 0;}
.topnav.responsive li {float: none; display: inline;}
.topnav.responsive li a {display: block; text-align: left; padding: 10px 30px 10px 0;}
.topnav.responsive li a:first-child {padding-top:0;}

ul#menu-main-menu.menu, ul#menu-main-menu-welsh.menu {list-style-type: none; list-style-image: none; margin: 0; padding: 0; }


/* Carousel */

#slider {}
.carousel img {max-height: 1080px; overflow: hidden; object-fit: cover; object-position: center;}


/* Colours */

.navy {background-color:#00247d; color:#FFF;}
.purple {background-color:#5e0098; color:#FFF;}
.teal {background-color:#44c7da; color:#FFF;}
.pink {background-color:#ff8bc4; color:#FFF;}
.white {color:#00247d; background-color:#FFF;}
.red {background-color:#ff004b; color:#FFF;}
.yellow {color:#00247d; background-color:#ffff00;}
.green {background-color:#09d000; color:#FFF;}


/* Homepage */

.boxes-wrap {width: 100%; display:flex; flex-flow: row wrap;}
.boxes {width: 66.67%; align-items:stretch; display:flex; flex-flow: row wrap;}

.large-box-image {width: 33.33%; display:block; float:left; align-items:stretch; background-size:cover; background-repeat:no-repeat; background-position: center;}
.large-box {width: 100%; display:block; float:left; padding: 30px;}
.large-box h2, .small-box-text h2 {margin-top:0;}

.small-box {width: 50%; display:block; float:left;}
.small-box-text {padding: 30px; align-items:stretch;}
.small-box-image {width: 100%; display:block; background-size:cover; background-repeat:no-repeat; background-position: center; height: 350px;}


/* Content */

.title-block {padding: 60px 30px 30px; position: relative; text-align:center;}
.text-block {padding: 60px 30px; position: relative;}
.image-block {width: 100%; display:block; background-size:cover; background-repeat:no-repeat; background-position: center; height: 800px; position:relative;}
.image-frame {position:absolute; top:0; left: 0; height:100%; width:100%; background-image:url(images/nc-frame-a.png); background-size: 110% 100%; background-repeat:no-repeat; background-position: center;}

.infographic-block {padding: 30px; position: relative;}
.infographic-wrap {width: 100%; display:flex; flex-flow: row wrap;}
.infographic {width:33.33%; position: relative; display:flex; float: left; align-items: center; padding-top:33.33%;}
.infographic-image {position:absolute; top:0; left: 0; height:100%; width:100%; background-size:cover; background-repeat:no-repeat; background-position: center; opacity:0.3;}
.infographic-text {text-align:center; padding:30px; z-index:999; position:absolute; top: 50%; transform:translateY(-50%); left: 0; width:100%; text-shadow: 0 0 5px #000;}

.highlight-block {padding: 0 30px; position: relative;}
.highlight {width: 100%; height:200px; align-items: center; position: relative;}
.highlight-text {text-align:center; padding:30px 150px; z-index:999; position:absolute; top: 50%; transform:translateY(-50%); left: 0; width:100%; font-family: bebas-neue-pro-semiexpanded, sans-serif; font-weight: 300; text-transform: uppercase; font-size:2em; line-height:1;}


/* Collapsible Palmares

.palmares-block {padding: 30px; position: relative;}
.palmares {padding-bottom:10px; border-bottom: dotted 1px #666666; display:block; float:left; width:50%;}
.collapsible {background-color: #EEEEEE; cursor: pointer; padding: 15px; width: 100%; border: none; text-align: left; outline: none; margin-bottom: 2px !important; font-weight: 700; font-size: 1.2em;}
.active, .collapsible:hover {background-color: #15467B; color: #FFFFFF;}
.collapsible:after {content: '\002B'; font-weight: bold; float: right; margin-left: 5px; display: inline-block;}
.active:after {content: "\2212";}
.collapse {background-color: #FFFFFF; padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out;}
.collapse-content {padding: 15px;} */


/* Buttons */

.navy-button, .purple-button, .teal-button, pink-button {display: table; margin: 0 auto; border: none; padding: 15px; font-family: museo, serif; font-weight: 900; font-size: 1.1em; cursor: pointer;}
.navy-button a, .purple-button a, .teal-button a, pink-button a {text-decoration: none;}
.navy-button {background-color:#00247d; color:#FFF;}
.purple-button {background-color:#5e0098; color:#FFF;}
.teal-button {background-color:#44c7da; color:#FFF;}
.pink-button {background-color:#d04aa0; color:#FFF;}
.navy-button:hover, .purple-button:hover, .teal-button:hover, .pink-button:hover {opacity:0.8;}
.navy-button p, .purple-button p, .teal-button p, .pink-button p {margin: 0;}


/* Single Post */

.single-date {padding:10px 15px; background-color: #EEEEEE; display: inline; border-radius: 10px;}
.single-content {padding-top: 30px;}


/* Sidebar */

.sidebar {padding: 30px;}
.sidebar ul, .sidebar li {list-style: none; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 0;}
.sidebar h2 {-webkit-margin-before: 0; -webkit-margin-after: 0.83em; color: #FFFFFF !important;}
.sidebar .widget {background-color: #00AAE3; color: #FFFFFF !important; padding: 30px; margin-bottom: 30px;}
.sidebar .widget:nth-of-type(even) {background-color:#15467B;}

.rpwwt-post-title {font-weight: 700; font-size: 1.2em;}


/* Footer */

#footer {background-color: #5e0098; color: #FFFFFF; background-image:url(images/nc-footer.png); background-repeat:no-repeat; background-size:cover; text-align: center;}
#footer ul, #footer li {list-style: none; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 0; margin:0; padding: 0;}
.copyright {font-size: 0.85em; text-align: center;}


/* Palmares Tables */

table {width: 100%; padding: 0; text-align: left; border-collapse: collapse; margin-bottom:30px;}
table, th, td {border: 1px solid #eeeeee;}
th, td {padding: 15px;}
th {background: #44c7da; color: #FFF; font-family: bebas-neue-pro-semiexpanded, sans-serif; font-size:2em; font-weight: 700; }
tr:nth-of-type(even) {background-color:#f7f7f7;}