/* General */

@charset "utf-8";
@font-face {
    font-family: 'Luckiest Guy';
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/Luckiest_Guy/LuckiestGuy-Regular.eot");
    src: url("../fonts/Luckiest_Guy/LuckiestGuy-Regular.woff");
    src: url("../fonts/Luckiest_Guy/LuckiestGuy-Regular.woff2");
    src: url("../fonts/Luckiest_Guy/LuckiestGuy-Regular.ttf");
    src: url("../fonts/Luckiest_Guy/LuckiestGuy-Regular.svg");
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

:root {
    --main-color:aliceblue;
    --dk-blue:#3fafd9;
}

/* SVG Defs */

#nt-logo {
    fill: var(--main-color);
    width: 100%;
}

article {
    height: auto;
    margin: 0 auto;
    padding: 0 auto;
}

body {
    min-height: 100vh;
    font-size: 16px;
    align-items: center;
    text-align: center;
    height: 100vh;
    width: 100vw;
    z-index: -5; 
}

ul {
    list-style-type: none;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.2rem;
    color: black;
    text-align: left;
}

section {
    margin: 0 auto;
    padding: 0 auto;
    height: auto;
}

/* Container Classes */ 


.contentContainer {
    position: relative;
    margin: 0 auto;
    width: 100%;
    align-content: center;
    align-items: center;
    vertical-align: center;
    object-position: center;
    content: center center;
    z-index: 1;
    overflow: hidden;
}

/* General Links */

a {
    text-decoration: none;
    text-align: center;
    align-content: center;
    margin: 0 auto;
} 

/* Background Radial Gradient :: RTI Color Scheme */

.radialGrad {        
    background: url(../img/backgrounds/rti-light-rays.png), radial-gradient(circle at bottom center, rgba(255,247,178,1) 0%, rgba(191,223,173,1) 19%, rgba(231,181,200,1) 48%, rgba(139,210,230,1) 64%, rgba(33,127,176,1) 99%);
    background-position: center center;
    background-repeat: no-repeat;
    height: inherit;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* General Typography */

header {
    position: relative; 
    margin: 0 auto;
    align-items: center;
    object-position: center;
    height: 15%;
}

header h1{
    color: aliceblue;
}

/* Overflow for text  */

.ow {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: none;
}

/* 9010 Main Logo Div */

.logo {
    position: relative;
    margin: 0 auto;
    width: 65%;
    padding-top: 1em;
    z-index: -1;
}

.logo p {
    position: relative;
    top: -1.5em;
    left: .65em;
    font-size: .9rem;
    letter-spacing: .05em;
    font-family: 'Josefin Sans', sans-serif;
    color: aliceblue;
    z-index: 1;
}

/* Race to Insanity Logo */

.rti-logo {
    margin: 0 auto;
    position: relative;
    height: 100%;
}


/* Footer */

#footer {
    padding: .5em .5em .5em .5em;
    margin: 4em 0 auto;
    width: 100%;
    position: absol;
    bottom: 0;
    font-family: 'Josefin Sans', sans-serif;
    color: rgb(10, 51, 87);
    vertical-align: middle;
    z-index: 1;
}

/* Info will be  "Text Plate" or "Cards" for explainer copy */
.info {
    position: relative;
    margin: 1em auto;
    text-align: left;
    width: 80%;
    padding: 2.2em;
    border-radius: .4em;
    box-shadow: 0px 0px 15px rgba(0,0,0,.5);
    box-sizing: border-box;
    background: #fff;
    opacity: 0.75;
    background-blend-mode: screen;
}

.info h3 {
    list-style-type: none;
    font-family: 'Luckiest Guy', sans-serif;
    font-variant: small-caps;
    font-size: 1.3rem;
    letter-spacing: .1rem;
    text-align: left;
    color: black;
}

.info p {
    margin: 0  auto;
    font-family: 'Josefin Sans', sans-serif;
    font-size: .7rem;
    width:  90%;
    line-height: .85rem;
    align-content: center;
    color: rgba(33,127,176,1);
}

/* Knock Out Banner */

.banner {
    height: auto;
    width: 100%;
    margin: 1em auto;
    padding: .5em;
    box-sizing: border-box;
    border-radius: .4em;
    background-color: rgba(15, 101, 148,1);
}

.banner p {
    font-family: 'Josefin Sans', sans-serif;
    font-variant: normal;
    font-size: 1rem;
    line-height: 1.25rem;
    text-align: center;
    color: var(--main-color);
    
}

/* Cards will be used to contain image or animated/vieo elements  */



.cards {
    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    flex-direction:column;
    align-items: center;
    margin: 0 auto;
    position: relative;
    height: auto;
} 

.cards p{
     color: aliceblue;
}

.card {
    margin: 0 auto;
    box-sizing: border-box;
    padding: .3em;
    -webkit-transition: width .5s; /* For Safari 3.1 to 6.0 */
    transition: width .5s;
}

.card:nth-child(1){
    -ms-flex-order: 1;
    order: 1;
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: center;
    overflow: visible;
}

.card:nth-child(2){
    -ms-flex-order: 2;
    order: 2;
    height: auto;
    background-image: url("../img/logos/RTI-Logo.png");
    background-size: contain;
    width: auto;
    height: 200px;
    background-position: center;
    display: none;
    resize: both;
    background-repeat: no-repeat;
}

.card:nth-child(3){
    -ms-flex-order: 3;
    order: 3;
    display: none;
}

/* Mock RTI Card Challenge Color Classes  */

.blue {
    background-color: #5fd1fa;
    box-shadow: inset 0 0 0 2px #3fafd9;
}

.dk-blue {
    background-color: #3fafd9;
}

.pink {
    background-color: #ff8fd2;
    box-shadow: inset 0 0 0 2px  #ed66b7;
}

.dk-pink {
    background-color: #ed66b7;
}

.green {
    background-color: #c9f7b7;
    box-shadow: inset 0 0 0 2px #a8e391;
}

.dk-green {
    background-color: #a8e391;
}

.yellow {
    background-color: #fdff99;
    box-shadow: inset 0 0 0 2px #fff199;
}

.dk-yellow {
    background-color: #fff199;
}

/* RTI Card Mock Up  */

.RTI-Card {
    position: relative;
    margin: 2em auto;
    padding: 1em;
    height: auto;
    width: 100%;
    background-color:black;
    box-sizing: border-box;
    border-radius: .5em;
}

.RTI-Challenge-Title-Box {
    position:relative;
    margin: 0 auto;
    height: 1.2em;
    width: 100%;
    box-sizing: border-box;
    border-radius: .5em .5em 0 0 ;
    -webkit-box-shadow: 0px 2px 4px 2px rgba(0,0,0,0.61);
    -moz-box-shadow: 0px 2px 4px 2px rgba(0,0,0,0.61);
    box-shadow: 0px 2px 4px 2px rgba(0,0,0,0.61);
}

.RTI-Challenge-Box {
    position:relative;
    margin: 1.15em auto 0 auto;
    height: auto;
    width: 100%;
    box-sizing: border-box;
    border-radius: .5em;    
}

.RTI-Challenge-Box:first-of-type {
    margin: 0 auto;
}

.RTI-Challenge-Title {
    margin: 0 auto;
    position: relative;
    top: -1em;
    font-family: 'Luckiest Guy', 'RanchersRegular', 'Avenir Next Condensed Bold', 'HelveticaNeue';
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
    z-index: 1;
    color: white;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}

.RTI-Challenge {
    margin: 0 auto;
    padding: .5em;
    width: auto;
    text-align: left;
    font-family: 'Josefin Sans', sans-serif;
    font-size: .75rem;  
    text-transform: none;
    line-height: .95rem;
    letter-spacing: .08rem;
    color: black;
}

.RTI-Point {
    position: relative;
    margin: .4em;
    right: -.7em;
    top: -.8em;
    height: 2em;
    width: 2em;
    float: right;
    z-index: 1;
    border-radius: 50%;
    border: solid 1px white;
    -webkit-box-shadow: 0px 2px 4px 2px rgba(0,0,0,0.61);
    -moz-box-shadow: 0px 2px 4px 2px rgba(0,0,0,0.61);
    box-shadow: 0px 2px 4px 2px rgba(0,0,0,0.61);
}

.value {
    position: relative;
    top: .3em;
    right:.05em;
    font-family: 'Luckiest Guy', 'RanchersRegular', 'Avenir Next Condensed Bold', 'HelveticaNeue';
    font-size: 2.75rem;
    text-align: center;
    z-index: 2;
    color: white;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}

.embossBox {
  border-top: #ccc 1px solid;
  border-right: #ccc 1px solid;
  border-bottom: #777 1px solid;
  border-left: #777 1px solid;
}

.embossed-light {
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.embossed-heavy {
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 
    inset 0 2px 3px rgba(255,255,255,0.3),
    inset 0 -2px 3px rgba(0,0,0,0.3),
    0 0 1px rgba(255,255,255,0.9);
}

/* Call To Acction Secction  */

.CTA {
    margin: 0 auto;
    padding: .5em;
    width: 80%;
    text-align: center;
}

.CTA p {
    font-family: 'Luckiest Guy', sans-serif;
}

/* Foreground Colors */

.f-main-blue {
    color: rgba(33,127,176,1);
}

.f-blue {
    color: #5fd1fa;
}

.f-dk-blue {
    color: #3fafd9;
}

.f-pink {
    color: #ff8fd2;
    box-shadow: inset 0 0 0 2px  #ed66b7;
}

.f-dk-pink {
    color: #ed66b7;
}

.f-green {
    color: #c9f7b7;
    box-shadow: inset 0 0 0 2px #a8e391;
}

.f-dk-green {
    color: #a8e391;
}

.f-yellow {
    color: #fdff99;
}

.f-dk-yellow {
    color: #fff199;
}

/* Call To Action Button  */

.mainCTA {
    position: relative;
    bottom: -1em;
    margin: 0 auto 2em;
    padding: 1.25em;
    font-family: 'Luckiest Guy', cursive;
    align-self: center;
    box-sizing: border-box;
    border-radius: .25em;
    background-color: rgba(005,206,120,1);
}

.mainCTA p {
    margin: 0 auto;
    text-align: center;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1.7rem;
    line-height: .85rem;
    color: aliceblue;
}

.mainCTA img {
    margin: 1em; 
    width: 10em;
}

.mainCTA:hover{
    transition: background-color 0.5s ease;
    background-color: rgba(135,196,66,1);
    cursor: pointer; 
    animation: bounce ease-in-out 1s;
    animation-iteration-count: 1;
    -webkit-animation: bounce ease-in-out 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -moz-animation: bounce ease-in-out 1s;
    -moz-animation-iteration-count: 1;
    -o-animation: bounce ease-in-out 1s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -ms-animation: bounce ease-in-out 1s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
}

/* Mofofken Animotion! */

@keyframes bounce{
  0% {
    transform: scaleX(1.00) scaleY(1.00) ;
  }
  18% {
    transform: scaleX(1.30) scaleY(1.30) ;
  }
  36% {
    transform: scaleX(1.00) scaleY(1.00) ;
  }
  71% {
    transform: scaleX(1.30) scaleY(1.30) ;
  }
  100% {
    transform: scaleX(1.00) scaleY(1.00) ;
  }
}

@-moz-keyframes bounce{
  0% {
    -moz-transform: scaleX(1.00) scaleY(1.00) ;
  }
  18% {
    -moz-transform: scaleX(1.30) scaleY(1.30) ;
  }
  36% {
    -moz-transform: scaleX(1.00) scaleY(1.00) ;
  }
  71% {
    -moz-transform: scaleX(1.30) scaleY(1.30) ;
  }
  100% {
    -moz-transform: scaleX(1.00) scaleY(1.00) ;
  }
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: scaleX(1.00) scaleY(1.00) ;
  }
  18% {
    -webkit-transform: scaleX(1.30) scaleY(1.30) ;
  }
  36% {
    -webkit-transform: scaleX(1.00) scaleY(1.00) ;
  }
  71% {
    -webkit-transform: scaleX(1.30) scaleY(1.30) ;
  }
  100% {
    -webkit-transform: scaleX(1.00) scaleY(1.00) ;
  }
}

@-o-keyframes bounce {
  0% {
    -o-transform: scaleX(1.00) scaleY(1.00) ;
  }
  18% {
    -o-transform: scaleX(1.30) scaleY(1.30) ;
  }
  36% {
    -o-transform: scaleX(1.00) scaleY(1.00) ;
  }
  71% {
    -o-transform: scaleX(1.30) scaleY(1.30) ;
  }
  100% {
    -o-transform: scaleX(1.00) scaleY(1.00) ;
  }
}

@-ms-keyframes bounce {
  0% {
    -ms-transform: scaleX(1.00) scaleY(1.00) ;
  }
  18% {
    -ms-transform: scaleX(1.30) scaleY(1.30) ;
  }
  36% {
    -ms-transform: scaleX(1.00) scaleY(1.00) ;
  }
  71% {
    -ms-transform: scaleX(1.30) scaleY(1.30) ;
  }
  100% {
    -ms-transform: scaleX(1.00) scaleY(1.00) ;
  }
}

/* Social Media badges using Font Awesome, may change to SVG's later for browser compatibility */ 

.socialSection {
    position: relative;
    margin: 0 auto;
    width: 90%;
    padding: .25em;
    box-sizing: border-box;
    border-radius: .4em;
}

.socialSection p {
    font-family: sans-serif;
    font-size: .8rem;
    color: var(--dk-blue);
    opacity: 100%;
    z-index: 1;
}

.social {
    position: relative;
    margin: 0 auto;
    align-content: center;
    align-items: center;
    z-index: 2;
 
}

.social-buttons a{
    bottom: 0;
    display: inline-flex;
    text-decoration: none;
    font-size: 18px;
    width: 60px;
    height: 3em;
    color: var(--dk-blue);
    justify-content: center;
    align-items: center;
    overflow: hidden;
    opacity: 100%;
    z-index: 1;
}
    

/* Styles for lé media :: Lé Tedium! */ 

@media only screen and (min-width : 400px) and (orientation:landscape) {
    
    .logo {
        margin: 0 auto;
        top: 3.5em;
        left: -6em;
        width: 40%;
    }
    
    .logo p {
    }
    
    .rti-logo {
        margin: 0 auto;
        position: relative;
        height: 100%;
    }
    
    .cards {
        margin: 0 auto;
        height: auto;

    }
    
    .card {
        margin: 0em auto;
        box-sizing: border-box;
        height: 40vh;
    }
    
/*    .card:nth-child(1){
        margin: 0 auto;
        position: relative;
        top: -4em;
        right: -8em; 


    }
    */
        
    .card:nth-child(2){
        margin: 0 auto;
        position: relative;
        top: -4em;
        right: -8em; 
    }
  
    
    .info {
        width: 70%;
    }
    
    .RTI-Card {
        width: 80%;
    }
    
    .CTA {
        padding: .1em;
        width: 80%;
        text-align: center;
    }

}

@media only screen and (min-width : 500px) and (orientation:landscape) {
    
    .logo {
        margin: 0 auto;
        top: 3.5em;
        left: -6em;
        width: 40%;
    }
    
    .logo p {
        font-size: .98rem;
    }
    
    .rti-logo {
        margin: 0 auto;
        right: -2em;
    }
    
    .cards {
        height: auto;
    }
    
    .card {
        margin: 0em auto;
        box-sizing: border-box;
        height: 40vh;
        -webkit-transition: width .5s; /* For Safari 3.1 to 6.0 */
        transition: width .5s;
    }
    
    .card:nth-child(1){
        margin: 0 auto;
        position: relative;
        top: -4em;
        right: -8em; 
    }

    .card:nth-child(2){
        -ms-flex-order: 2;
        order: 2;
        width: 50%;
        background-position: center;
        display: visible;
    }
    
    .info {
        position: relative;
        width: 70%;
    }
    
    .info p {
        font-size: 1rem;
        line-height: 1.25rem;
    }
    
    .RTI-Card {
        width: 70%;
    }
    
    .CTA {
        padding: .1em;
        width: 60%;
        font-size: 1.5rem;
        letter-spacing: .1rem;
        text-align: center;
    }

}

@media only screen and (min-width : 600px) and (orientation:landscape) {
    
    .logo {
        margin: 0 auto;
        top: 3.5em;
        left: -6em;
        width: 40%;
    }
    
    .logo p {
        font-size: 1.1rem;
    }
    
    .banner {
        width: 80%;
    }
    
    .banner h3 {
        font-size: 1.1rem;
    }
}

@media only screen and (min-width : 700px) and (orientation:landscape) {
    
    .logo {
        margin: 0 auto;
        top: 3.5em;
        left: -10em;
        width: 40%;
    }
    
    .logo p {
        font-size: 1.25rem;
    }
    
    .rti-logo {
        top: -4em;
        right: -4em;
    }
    
    .banner {
        width: 90%;
    }
    
    .banner h3 {
        font-size: 1.5rem;
    }
    
    .RTI-Card {
        width: 40%;
    }
}

@media only screen and (min-width : 700px) and (orientation:portrait) {
    
    .logo {
        width: 50%;
    }
    
    .logo p {
        font-size: 1.65rem;
    }
    
    .banner {
        width: 80%;
    }
    
    .banner h3 {
        line-height: 2.25rem; 
    }
    
    .cards {
        height: auto;
    }
    
    .RTI-Card {
        width: 60%;
        border-radius: 1.5em;
    }

    .RTI-Challenge-Title-Box {
        height: 2.2em;
    }

    .RTI-Challenge-Box {
        height: auto;
        width: 100%;
        border-radius: .5em;    
    }

    .RTI-Challenge-Box:first-of-type {
        margin: 0 auto;
    }

    .RTI-Challenge-Title {
        font-size: 1.5rem;
    }

    .RTI-Challenge {
        margin: 1em auto 0 auto;
        font-size: 1.25rem;    
        line-height: 1.35rem;
        letter-spacing: .08rem;
    }

    .RTI-Point {
        position: relative;
        margin: .4em;
        right: -1em;
        top: -1em;
        height: 3.5em;
        width: 3.5em;
    }

    .value {
        top: .4em;
        right:.01em;
        font-size: 4.75rem;
    }
    
    .info p {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    
    .info h3 {
        font-size: 2rem;
    }
    
    .CTA p {
        font-size: 2.2rem;
    }
}

@media only screen and (min-width : 900px) and (orientation:landscape) {
    
    .logo p {
        font-size: 1.65rem;
    }    
}

@media only screen and (min-width : 1280px){
    
     .logo {
        margin: 0 auto;
        top: 0;
        left: 0;
        width: 50%;
    }

    .logo p {
    }
    
    
    
    .cards {
        height: auto;
    }
    
    .card:nth-child(1){
        margin: 0 auto;
        position: relative;
        top: 0;
        right: 0; 
    }
    
}

@media only screen and (min-width : 1280px) and (orientation:landscape){
    
     .logo {
        margin: 0 auto;
        padding: 3em;
        top: 0;
        left: 0;
        width: 30%;
    }
    
    .logo p {
        top: -1.2em;
        font-size: 1.75rem;
    }
    
    .rti-logo {
        margin: 0 auto;
        position: relative;
        height: 90%;
        top: 0em;
        right: 0em;
    }

    .banner {
        padding: 3em;
        width:  70%;
    }
    
    .banner h3 {
        font-size: 5rem;
        line-height: 5.25rem;

    }
    
    .info {
        width: 60%;
    }
    
    .info p {
        font-size: 3rem;
        line-height: 3.25rem;
    }
    
    .info h3 {
        font-size: 2.5rem;
    }
    
    .cards {
        height: auto;
    } 

    .card {
        height: 100%;
    }
    
    .info p {
        font-size: 2rem;
        line-height: 2.25rem;
    }
    .RTI-Card {
        padding: 2.15em;
        width: 65%;
        border-radius: 1.5em;
    }

    .RTI-Challenge-Title-Box {
        padding: 1em;
        height: 3.2em;
    }

    .RTI-Challenge-Box {
        margin: 3em auto 0 auto;
        height: auto;
        width: 100%;
        border-radius: .5em;    
    }

    .RTI-Challenge-Box:first-of-type {
        margin: 0em auto 0 auto;
    }

    .RTI-Challenge-Title {
        top: -.75em;
        font-size: 2.5rem;
    }

    .RTI-Challenge {
        margin: .5em auto 0 auto;
        font-family: 'Luckiest Guy', cursive;
        font-size: 2.25rem;    
        line-height: 2.35rem;
        letter-spacing: .08rem;
    }

    .RTI-Point {
        position: relative;
        margin: .4em;
        right: -1em;
        top: -2em;
        height: 4.5em;
        width: 4.5em;
        border: solid 4px white;
        -webkit-box-shadow: 0px 3px 4px 3px rgba(0,0,0,0.61);
        -moz-box-shadow: 0px 3px 4px 3px rgba(0,0,0,0.61);
        box-shadow: 0px 3px 4px 3px rgba(0,0,0,0.61);
    }

    .value {
        top: .5em;
        right:.01em;
        font-size: 5.25rem;
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: black;
    }
    
    .CTA p {
        font-size: 2.5rem;
    }

    
}

@media only screen and (min-width : 1300px) and (orientation : landscape) {
     .info {
        width: 60%;
    }
}