* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    overflow-x: hidden;
    line-height: 2.0rem;
    font-size: 1.0rem;
    font-weight: 500;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #fff;
}

h1 {
    font-size: 3.2rem;
    -webkit-font-smoothing: antialiased;
    color: #284378;
    padding: 0 0 40px 0;
    font-weight: 800;
    line-height: 3.2rem;
}

h2 {
    -webkit-font-smoothing: antialiased;
    color: #284378;
    font-size: 2.4rem;
    font-weight: 800;
    text-transform: none;
    padding: 0 0 30px 0;
    line-height: 1.2em;
}

h3 {
    font-weight: 700;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    color: #284378;
    font-size: 1.6rem;
    text-transform: capitalize;
    margin: 6px 0 30px 0;
    padding: 0;
}

h4 {
    line-height: 1.2rem;
    margin: 0 0 20px 0;
    font-size: 1.4em;
    font-weight: 700;
}

h5 {
    color: #000;
    line-height: 1.2rem;
    margin: 0 0 20px;
    font-size: 1.0rem;
}

a,
a:link,
a:active,
a:visited {
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    color: #008cb7;
    outline: none;
    font-weight: 400;
}

a:hover {
    color: #bbb;
}

a.button,
a.dark-button {
    display: block;
    background-color: #008cb7;
    padding: 20px 0;
    -webkit-font-smoothing: antialiased;
    color: #fff;
    width: 200px;
    font-weight: 800;
    font-style: normal;
    font-size: 1.1rem;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    line-height: 1.0em;
    border-radius: 5px;
    text-shadow: none;
}

a.dark-button {
    background-color: #0f0c42;
}

a img,
a.button,
a.dark-button {
    transition: all .5s ease;
    -moz-transition: all .5s ease;
    /* Firefox 4 */
    -webkit-transition: all .5s ease;
    /* Safari and Chrome */
    -o-transition: all .5s ease;
    /* Opera */
}

a img:hover {
    opacity: 0.5;
}

a.button:hover,
a.blue-button:hover {
    background-color: #2b294f;
    color: #fff;
}

a.dark-button:hover {
    background-color: #0878a2;
    color: #fff;
}

a[href^=tel] {
    /* Stops iPhones from changing phone number colors */
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    width: 100%;
    height: auto;
}

p,
.content li {
    margin-bottom: 2.0rem;
    font-size: 1.2rem;
    font-weight: 500;
    font-style: normal;
    color: #555;
    line-height: 2.4rem;
}

hr {
    border: 0;
    border-top: 1px solid #ccc;
    margin: 50px 0;
}

.flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.wrapper {
    position: relative;
    max-width: 1800px;
    margin: 0 auto;
    padding-left: 50px;
    padding-right: 50px;
}

.panel {
    padding-top: 80px;
    padding-bottom: 100px;
}

.clearboth {
    clear: both;
    display: block;
    height: 0;
}

/*------------------------------------------------------------ HEADER */
header {
    position: relative;
    z-index: 100;
    width: 100%;
    padding-top: 20px;
    align-items: flex-start;
}

#header-left {}

#logo {
    width: 250px;
    height: auto;
}

#header-right {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    max-width: 800px;
}

#icon-menu {
    display: flex;
    justify-content: space-between;
    width: 140px;
    margin-bottom: 20px;
}

#icon-menu img {
    width: 36px;
}

#icon-menu a:nth-child(2) img {
    width: 32px;
    margin-top: 3px;
}

#logo img {
    width: 100%;
    height: auto;
}

/*---------------------------------------------------------- VIDEO AND BANNER */
.video {
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 1100px;
    object-fit: cover;
    object-position: center top;
    display: block;
    margin-top: -335px;
}

#video-text {
    margin-top: -380px;
    position: relative;
    height: 380px;
}

#video-text h2 {
    font-size: 3.2rem;
    font-weight: 500;
    color: #fff;
    padding: 0 0 30px;
}

#video-text p {
    font-size: 1.6rem;
    font-weight: 500;
    color: #fff;
    padding: 0 0 30px;
    max-width: 1000px;
}

#video-buttons {
    width: 440px;
}
#banner {
    height: 700px;
    margin-top: -235px;
    background-position: center center;
    background-size: cover;
}
/*------------------------------------------------------------ HERO AND CONTENT */
#hero {
    margin: 0 auto;
    padding-top: 80px;
    padding-bottom: 5px;
    max-width: 1300px;
}

#hero h1 {
    font-size: 3.2rem;
    line-height: 4.2rem;
    color: #3a3a3a;
    width: 800px;
}

#hero-left {
    width: 60%;
}

#hero img {
    width: auto;
    height: 550px;
}

#hero p {
    padding-bottom: 30px;
}

.content ul {
    margin-left: 20px;
    padding-bottom: 30px;
}

.content li {
    margin-bottom: 4px;
}

#principal-photo {
    width: 200px;
    height: 200px;
    object-fit: cover;
    object-position: center -15px;
    border-radius: 50%;
}
/*---------------------------------------------------------- PANEL TRIPLE */
#panel-triple {}

#triple-left {
    width: 45%;
    background-image: url(../images/cgps-video-thumb.jpg);
    background-size: cover;
    background-position: center;
    justify-content: space-around;
    align-items: center;
}

#triple-right {
    width: 55%;
}

#triple-right h2,
#triple-right p {
    color: #fff;
}

#triple-left img {
    width: 100px;
}

#triple-right-top {
    background-color: #008cb7;
    padding: 50px 50px 10px 50px;
    align-items: center;
}

#triple-right-bottom {
    background-color: #0f0c42;
    padding: 50px 50px 10px 50px;
    align-items: center;
}

.triple-text {
    width: 70%;
    margin-right: 20px;
}

/*---------------------------------------------------------- DOUBLE */
#panel-double {}

#double-top {
    justify-content: space-between;
    background-color: #efefef;
}

#double-bottom {
    justify-content: space-between;
}

#double-top img,
#double-bottom img {
    object-fit: cover;
    width: 50%;
    min-height: 600px;
}

#double-top-text {
    width: 50%;
    padding: 80px;
}

#double-bottom-text {
    width: 50%;
    padding: 80px;
}


/*---------------------------------------------------------- FOOTER */
footer {
    background-color: #008cb7;
    padding: 60px 0;
}

footer h2 {
    color: #fff;
}

footer p,
#footer-signature p {
    line-height: 1.9rem;
    font-size: 1.1rem;
    color: #fff;
}

footer a:hover {
    opacity: 0.5;
}

#footer-left {
    width: 40%;
}

#footer-signature img {
    width: 220px;
    height: 100%;
    margin-right: 30px;
}

#flags {
    width: 250px;
    height: 35px;
    margin-bottom: 24px;
}

#footer-right {
    width: 50%;
    padding-top: 16px;
    align-items: flex-start;
}

#footer-right p {
    line-height: 1.9rem;
    font-size: 1.1rem;
}

#phone {
    font-size: 1.4rem;
}

#copyright {
    align-self: flex-end;
}

/*---------------------------------------------------------- FOOTER STRIP */
#footer-strip {
    background-color: #0f0c42;
    padding: 20px 0;
}

#strip-wrapper {
    display: flex;
    justify-content: space-between;
}

a.footer-link,
a.footer-link:link,
a.footer-link:active,
a.footer-link:visited {
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    outline: none;
    text-decoration: none;
    color: #fff;
    font-weight: 400;
    margin-right: 40px;
}

a.footer-link:hover {
    opacity: 0.5;
}

#throwstone {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 400;
    margin: 0;
}

#throwstone:before {
    content: "";
    display: inline-block;
    height: 22px;
    width: 22px;
    background-size: 19px 22px;
    margin: 0 9px -4px -36px;
    background-image: url(../images/throwstone-studios-logo-white.png);
    background-repeat: no-repeat;
}

/*---------------------------------------------------------- MENU */
#menu {
    margin-right: -30px;
}

#menu ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
}

#menu ul li a {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.0em;
    display: block;
    margin: 6px 0 0;
    padding: 14px 30px 14px 30px;
    -webkit-font-smoothing: antialiased;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    transition: all .5s ease;
    -moz-transition: all .5s ease;
    /* Firefox 4 */
    -webkit-transition: all .5s ease;
    /* Safari and Chrome */
    -o-transition: all .5s ease;
    /* Opera */
}

#menu ul li a:hover,
#menu ul li:hover>a {
    color: #fff;
    background-color: #163470;
}

#menu ul li ul {
    visibility: hidden;
    display: block;
    position: absolute;
    z-index: 10;
    /* Because #menu is part of a flexbox container, we cannot apply any positioning elements to the dropdown ul, otherwise the ul will be removed from the flexbox flow and the positioning will be calculated from the browser */


    transition: all 0.5s linear 0s;
    -moz-transition: all 0.5s linear 0s;
    /* Firefox 4 */
    -webkit-transition: all 0.5s linear 0s;
    /* Safari and Chrome */
    -o-transition: all 0.5s linear 0s;
    /* Opera */
}

#menu ul li:hover ul {
    visibility: visible;
    margin-top: 0;
}

#menu ul li:hover ul li {}

/* style and set position of the dropdown menu*/
#menu ul li ul li a {
    color: #fff;
    background-color: #163470;
    opacity: 0;
    margin: 0;
    padding: 20px 0 20px 30px;
    font-size: 1.2rem;
    font-weight: 400;
    font-style: normal;
    text-transform: none;
    text-align: left;
    border-radius: 0;
    width: 260px;
    transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    /* Firefox 4 */
    -webkit-transition: all 0.3s linear 0s;
    /* Safari and Chrome */
    -o-transition: all 0.3s linear 0s;
    /* Opera */
}
#menu ul li:nth-child(2) ul li a {
    width: 375px;
}

#menu ul li:hover ul li a {
    opacity: 1;
}

#menu ul li:hover ul li:nth-child(1) a {
    border-top-right-radius: 6px;
    border-top-left-radius: 0px;
}

#menu ul li:hover ul li:last-child a {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

#menu ul li:nth-child(6):hover ul li:nth-child(1) a {
    border-top-right-radius: 0;
    border-top-left-radius: 6px;
}

#menu ul li:hover ul li a:hover {
    color: #fff;
    background-color: #2aabe2;
}

/*------------------------------------------------------------------------------ MOBILE MENU */
.hamburger {
    position: relative;
    z-index: 2000;
    display: none;
}

nav {
    height: 33px;
    top: 8px;
    right: 10px;
    /* This has to match the left value in .mobile-menu */
    position: absolute;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}

#menuToggle {
    display: flex;
    flex-direction: column;
    position: fixed;
    background-color: #008cb7;
    border-radius: 6px;
    top: 20px;
    right: -35px;
    padding: 16px 12px 12px 15px;
    z-index: 2000;
    -webkit-user-select: none;
    user-select: none;
    width: 100px;

    transition: all .5s ease;
    -moz-transition: all .5s ease;
    /* Firefox 4 */
    -webkit-transition: all .5s ease;
    /* Safari and Chrome */
    -o-transition: all .5s ease;
    /* Opera */
}

#menuToggle input {
    display: flex;
    width: 40px;
    height: 32px;
    position: absolute;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
}

#menuToggle span {
    display: flex;
    width: 38px;
    height: 3px;
    margin-bottom: 6px;
    position: relative;
    background: #fff;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 8px 0px;
    transition: transform 1s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        background 1s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        opacity 1s ease;
}

#menuToggle span:first-child {
    transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

#menuToggle input:checked~span {
    opacity: 1;
    transform: rotate(45deg) translate(3px, 5px);
    background: #fff;
}

#menuToggle input:checked~span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked~span:nth-last-child(2) {
    transform: rotate(-45deg) translate(-5px, 5px);
}

.mobile-menu {
    position: absolute;
    left: 80px;
    width: 500px;
    height: auto;
    margin: -40px 0 0 -500px;
    padding: 20px 50px 0 60px;
    background-color: #0f0c42;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(0, -100%);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    text-align: center;
    list-style-type: none;
}

.mobile-menu li {
    padding: 0;
    transition-delay: 2s;
}

.mobile-menu li a {
    display: block;
    color: #fff;
    font-weight: normal;
    font-size: 1.4rem;
    padding: 16px 0;
    margin: 0 auto;
    width: 80%;
    border-top: 1px solid #fff;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    text-decoration: none;
}

.mobile-menu li a:hover {
    color: #008cb7;
}

.mobile-menu li:nth-child(1) a {
    border-top: 0;
}
.mobile-menu li:nth-child(2) a,
.mobile-menu li:nth-child(3) a,
.mobile-menu li:nth-child(4) a
{
    pointer-events: none;
}
.mobile-menu li:nth-child(2) ul li a,
.mobile-menu li:nth-child(3) ul li a,
.mobile-menu li:nth-child(4) ul li a
{
    pointer-events: auto;
}
.mobile-menu li ul {
    display: none;
    padding-bottom: 20px;
}

.mobile-menu li:hover ul {
    display: block;
}

.mobile-menu li ul li {
    display: inline-block;
}

.mobile-menu li ul li a {
    color: #fff;
    margin: 0 auto 5px auto;
    font-size: 0.8rem;
    padding: 0 10px;
    border: 0;
    width: auto;
    background-color: #008cb7;
    border-radius: 3px;
}

.mobile-menu li ul li a:hover {
    opacity: 0.8;
    color: #fff;
}

#menuToggle input:checked~ul {
    transform: none;
}

/* FORMS
*****************************************************************/
label {
    font-family: Calibri, Arial, Helvetica, sans-serif;
    font-size: 1.4em;
    line-height: 1.8em;
    font-weight: bold;
    color: #02b5cb;
}

input[type="text"] {
    width: 200px;
    padding: 6px;
    height: 20px;
    font-size: 1.4em;
    margin-bottom: 12px;
    border: 1px solid #aaa;
    border-radius: 6px;
}

textarea {
    width: 440px;
    padding: 6px;
    font-size: 1.4em;
    margin-bottom: 20px;
    height: 80px;
    border: 1px solid #aaa;
    border-radius: 6px;
}

.submit,
select {
    width: 100px;
    height: 36px;
    border: 1px solid #aaa;
    border-radius: 6px;
    font-size: 1.4em;
    padding: 9px;
}

select {
    width: 214px;
    margin-bottom: 12px
}

.error {
    font-weight: bold;
    color: #ed1b24;
}