/*======================================
Theme Name: Pinwheel Theme
Theme URI: https://pinwheelweb.dev/
Description: Theme for Pinwheel Framework.
Version: 1.0
Author: Pinwheel Web Development
Author URI: https://pinwheelweb.dev/
======================================*/

/*=============
|| Variables ||
=============*/

:root {
/* Site Fonts */
--site-head-font: 'Urbanist',Helvetica,Arial,Lucida,sans-serif;
--site-body-font: 'Urbanist',Helvetica,Arial,Lucida,sans-serif;
	
/* Accent Color */
--accent-color: #002a7a;
--accent-color2: #409c2f;
--accent-color3: #10cee7;

/* Background Color */
--pin-bg1: #fff;
--pin-bg2: #16171D;

/*Text Color*/
--pin-lt-txt: #16171D;
--pin-bk-txt2: #fff;
}


/*================
||  Global CSS  ||
================*/

::selection {background: var(--accent-color); color: var(--pin-bk-txt2);}
::-moz-selection {background: var(--accent-color); color: var(--pin-bk-txt2);}



h1,
h2,
h3,
h4,
h5,
h6{
    font-family: var(--site-head-font);
    font-weight:500;
    color:#333;
    margin: 0;
    line-height:1em;
}

p{
    font-family: var(--site-body-font);
    color:#666;
    font-size:16px;
    font-weight:500;
    margin: 0;
    line-height:1.7em;
}


.row {
    max-width: 1200px;
    width:80%;
    margin:auto;
    position:relative;
    display:block;
}

.icon {
    color: var(--accent-color2);
    padding: 19px 20.75px 19px 20.75px;
    border-radius:15px;
    background-color:#fff;
    display: block;
    width: max-content;
    margin-bottom: 15px;
}

svg.icon {
    fill: var(--accent-color2);
    max-width:36px;
    max-height:28px;
}


h1 {
    font-weight:700;
    font-size:48px;
    padding-bottom:15px;
}

h2 {
    font-size:32px;
    padding-bottom:15px;
}

.divider {
    border-top: 4px dashed var(--accent-color3);
    height:4px;
    max-width:64px;
    padding-bottom:15px;
}

.button {
    font-size:20px;
    font-weight:700;
    line-height:1.7em;
    color:#333;
    font-style:normal;
    font-family: var(--site-head-font);
    text-decoration:none;
}

.button:hover {
    color: var(--accent-color);
}

.button:after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="20px" height="20px"><path fill="%23333" d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112v320c0 44.2 35.8 80 80 80h320c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v112c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16h112c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"/></svg>');
    margin-left:5px;
}

.button:hover:after {filter: brightness(0) saturate(100%) invert(12%) sepia(65%) saturate(3095%) hue-rotate(208deg) brightness(105%) contrast(112%);}

/*==============
||  Page CSS  ||
==============*/

body {
    background-color: #f2f2f2;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMTI4MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0iI2UwZTBlMCI+PHBhdGggZD0iTTg1My44OTMsODYuOTk4Yy0zOC44NTksMC01OC44MTEtMTYuNDU1LTc3Ljk1Ni0zNS4wNTFjMTguMjk1LTEwLjUzNiw0MC44OTEtMTguMjc2LDczLjM3OC0xOC4yNzYgYzM4LjY4NSwwLDY0LjEzMiwxMi41NjQsODUuNDg5LDI4LjM0N0M5MTYuMTkyLDcyLjAxMiw5MDAuOCw4Ni45OTgsODUzLjg5Myw4Ni45OTh6IE01MjYuMjY1LDgwLjk0NSBjLTYuNTE3LTAuNTYyLTEzLjU5OS0wLjg3OS0yMS40MS0wLjg3OWMtNzAuNzk5LDAtOTEuMzM3LDI3LjIyOS0xMzQuNDMzLDM1LjY2MmMxNC45MDEsMy43MiwzMi4xMTgsNi4wNyw1Mi44OTgsNi4wNyBDNDcwLjE3MSwxMjEuNzk3LDUwMC4zNCwxMDMuNDIxLDUyNi4yNjUsODAuOTQ1eiIgZmlsbC1vcGFjaXR5PSIuMyIvPjxwYXRoIGQ9Ik02NjMuNDU4LDEwOS42NzFjLTY3LjEzNywwLTgwLjM0NS0yMy44MjQtMTM3LjE5My0yOC43MjZDNTY3LjA4Niw0NS41NTUsNTk3LjM4MSwwLDY2NS42OTEsMCBjNjEuODU3LDAsODUuMzY5LDI3Ljc4MiwxMTAuMjQ2LDUxLjk0N0M3MzYuODg4LDc0LjQzNCw3MTcuNDU5LDEwOS42NzEsNjYzLjQ1OCwxMDkuNjcxeiBNMjE3LjY4LDk0LjE2MyBjNTUuOTcxLDAsNjIuNTI2LDI0LjAyNiwxMjYuMzM3LDI0LjAyNmM5Ljg1OCwwLDE4LjUwOC0wLjkxNiwyNi40MDQtMi40NjFjLTU3LjE4Ni0xNC4yNzgtODAuMTc3LTQ4LjgwOC0xMzguNjU5LTQ4LjgwOCBjLTc3LjA2MywwLTk5Ljk2LDQ4LjU2OS0xNTEuNzUxLDQ4LjU2OWMtNDAuMDA2LDAtNjAuMDA4LTEyLjIwNi04MC4wMTEtMjkuNTA2djE2LjgwNmMyMC4wMDMsMTAuODkxLDQwLjAwNSwyMS43ODIsODAuMDExLDIxLjc4MiBDMTYwLjAxNCwxMjQuNTcsMTU4LjYwOCw5NC4xNjMsMjE3LjY4LDk0LjE2M3ogTTEyMDAuMTEyLDQ2LjI5MmMtNTcuNDkzLDAtNTYuOTM1LDQ2LjU5NS0xMTUuMDE1LDQ2LjU5NSBjLTUzLjYxMiwwLTU5Ljc1NS0zOS42MTgtMTE1LjYwMi0zOS42MThjLTE1LjI2NywwLTI1LjM4MSwzLjc1MS0zNC42OSw4Ljc0OWMzNi4wOTYsMjYuNjc1LDYwLjUwMyw2Mi41NTIsMTE3LjM0Miw2Mi41NTIgYzY5LjI0OSwwLDc1Ljk1MS00My41NTksMTQ3Ljk2NC00My41NTljMzkuODA0LDAsNTkuOTg2LDEwLjk0Myw3OS44ODgsMjEuNzc3Vjg1Ljk4MiBDMTI2MC4wOTcsNjguNzcxLDEyMzkuOTE2LDQ2LjI5MiwxMjAwLjExMiw0Ni4yOTJ6IiBmaWxsLW9wYWNpdHk9Ii41Ii8+PHBhdGggZD0iTTEwNTIuMTQ3LDEyNC41N2MtNTYuODQsMC04MS4yNDctMzUuODc2LTExNy4zNDItNjIuNTUyYy0xOC42MTMsOS45OTQtMzQuMDA1LDI0Ljk4LTgwLjkxMiwyNC45OCBjLTM4Ljg1OSwwLTU4LjgxMS0xNi40NTUtNzcuOTU2LTM1LjA1MWMtMzkuMDUsMjIuNDg3LTU4LjQ3OSw1Ny43MjQtMTEyLjQ4LDU3LjcyNGMtNjcuMTM3LDAtODAuMzQ1LTIzLjgyNC0xMzcuMTkzLTI4LjcyNiBjLTI1LjkyNSwyMi40NzUtNTYuMDkzLDQwLjg1Mi0xMDIuOTQ2LDQwLjg1MmMtMjAuNzc5LDAtMzcuOTk2LTIuMzQ5LTUyLjg5OC02LjA3Yy03Ljg5NSwxLjU0NS0xNi41NDYsMi40NjEtMjYuNDA0LDIuNDYxIGMtNjMuODExLDAtNzAuMzY2LTI0LjAyNi0xMjYuMzM3LTI0LjAyNmMtNTkuMDcyLDAtNTcuNjY1LDMwLjQwNy0xMzcuNjY5LDMwLjQwN2MtNDAuMDA2LDAtNjAuMDA4LTEwLjg5MS04MC4wMTEtMjEuNzgyVjE0MGgxMjgwIHYtMzcuMjEyYy0xOS45MDMtMTAuODM1LTQwLjA4NC0yMS43NzctNzkuODg4LTIxLjc3N0MxMTI4LjA5OCw4MS4wMTEsMTEyMS4zOTcsMTI0LjU3LDEwNTIuMTQ3LDEyNC41N3oiLz48L2c+PC9zdmc+);
    background-size: 100% 100%;
    bottom: 0;
    height: 100%;
    margin:0;
    padding:60px 0;
}
html {background-color:#E0E0E0;}

p.subtitle {
    font-size:20px;
    font-weight:700;
    color: var(--accent-color);
    line-height:32px;
    font-family: var(--site-head-font);
}

p.welcome {
    max-width: 768px;
}

.row {margin-bottom: 60px;}

.row.threecolumns {
    display: flex;
    flex-flow: row wrap;
}

.col {
    width: calc(33.33333% - 64px);
    display: flex;
    flex-flow: column nowrap;
    position:relative;
    border: 2px solid #fff;
    padding:30px;
    padding-bottom: 60px!important;
}

.col p {padding-bottom:15px;}

.threecolumns .col a.button {
    position:absolute;
    left:30px;
    right:0;
    bottom:30px;
}

.threecolumns .col:nth-of-type(1) {border-top:0;border-left:0;}
.threecolumns .col:nth-of-type(2) {border-top:0;}
.threecolumns .col:nth-of-type(3) {border-top:0;border-right:0;}
.threecolumns .col:nth-of-type(4) {border-bottom:0;border-left:0;}
.threecolumns .col:nth-of-type(5) {border-bottom:0;}
.threecolumns .col:nth-of-type(6) {border-bottom:0;border-right:0;}

.threecolumns .col:nth-of-type(1) .icon {padding:19px 15.5px;}
.threecolumns .col:nth-of-type(2) .icon {padding:19px 22.5px;}
.threecolumns .col:nth-of-type(3) .icon {padding:19px 15.5px;}
.threecolumns .col:nth-of-type(4) .icon {padding:19px 20.75px 19px 20.75px;}
.threecolumns .col:nth-of-type(5) .icon {padding:19px;}
.threecolumns .col:nth-of-type(6) .icon {padding:19px 22.5px;}

/*================
||  Mobile CSS  ||
================*/

@media (max-width: 980px) {
    .col{width: calc(50% - 60px);border:0px;}
    h1 {font-size:36px;}
    body {
        background-size: 100% 50%;
        background-repeat:no-repeat;
        background-position:bottom;
    }
}

@media only screen and (max-width: 767px) {
    .col{width: 100%;}
    h1 {font-size:28px;}
    h2 {font-size:24px;}
    body {
        background-size: 100% 256px;
    }
}