/* Mathematica Roadshow University of Southampton style
-----------------------------------------------------*/

body {
    margin: 0;
    min-width: 1032px;
    padding: 0;
}

section {
    background: #ffffff;
    padding: 15px 0;
}

.inner * {
    font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;
}

.inner {
    color: #636363;
    font-size: 17px;
    line-height: 28px;
    margin: 0 auto;
    width: 1002px;
}

.inner a {
    color: #dd1100;
    text-decoration: none;
}

.inner a:hover {
    color: #bb0000;
}

.inner img {
    border: 0;
}

.inner h1 {
    color: #eea428;
    font-size: 52px;
    font-weight: 300;
    margin: 20px 0;
    text-transform: uppercase;
}

.inner h2 {
    color: #dd1100;
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
}

/* header
-----------------------------------------------------*/

header {
    background: #363636;
    padding: 90px 0;
}

header .inner {
    position: relative;
}

header .date {
    color: #ffcf7e;
    font-size: 21px;
    font-weight: 300;
    margin: 0 0 5px 0;
    text-transform: uppercase;
}

header .inner h1 {
    color: #ffcf7e;
    font-size: 46px;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
}

header .tagline {
    color: #fff;
    font-size: 29px;
    font-weight: 300;
    line-height: 1;
    margin: 10px 0 0 0;
    text-transform: uppercase;
}

header .right-pod {
    position: absolute;
    right: -200px;
    top: -75px;
}

/* intro
-----------------------------------------*/

#intro {
    padding: 35px 0 15px 0;
}

#intro h2 {
    margin: 40px 0 0 0;
}

#intro p {
    color: #636363;
    font-size: 24px;
    font-weight: 300;
    line-height: 35px;
    width: 635px;
}

#intro p.highlight {
    color: #eea428;
    margin-bottom: 5px;
}

#intro p.highlight.more-spacing {
    margin-top: 40px;
}

#intro p.desc {
    color: #636363;
    font-size: 17px;
    font-weight: 400;
    line-height: 28px;
    margin: 5px 0 0 0;
    width: 635px;
}

ul.location {
    background: #f5f5f5;
    color: #333;
    font-size: 17px;
    line-height: 28px;
    list-style-type: none;
    margin-top: 10px;
    padding: 16px;
    width: 330px;
}

/* presenters
-----------------------------------------*/

#presenters span.name {
    display: block;
    font-weight: 600;
    text-transform: uppercase;
}

#presenters h2 {
    border-top: 1px solid #ccc;
    padding: 43px 0 0 0;
    width: 600px;
}

.presenter {
    width: 645px;
    display: inline-block;
}

.presenter .column:first-child {
    display: inline-block;
    vertical-align: top;
    width: 100px;
}

.presenter .column:nth-child(2) {
    display: inline-block;
    vertical-align: top;
    width: 445px;
}

.presenter p {
    margin: 0 0 28px 0;
}

.presenter img {
    float: left;
    margin: 8px 16px 0 0;
}

.column.map img {
    border: solid 1px #ddd;
}

/* registration
-----------------------------------------*/

section#registration {
    margin: 26px auto 65px auto;
}

#thank-you,
#server-error,
.error-msg {
    display: none;
    font-size: 20px;
}

#form-wrapper {
    border-spacing: 20px;
    border: 1px solid #ccc;
    padding: 30px;
    width: 635px;
}

#form-wrapper label {
    display: inline-block;
}

#form-wrapper .column {
    display: inline-block;
    width: 45%;
}

#form-wrapper .row {
    display: inline-block;
    width: 750px;
}

#form-wrapper {
    color: #444;
    font-size: 16px;
    font-weight: 400;
    margin-top: 0;
    vertical-align: top;
}

#form-wrapper input.text {
    border: 1px solid #9a9a9a;
    height: 25px;
    margin-top: 0;
    width: 292.5px;
}

#form-wrapper input.checkbox {
    margin: 0;
    padding: 0;
}

#form-wrapper h2 {
    margin-bottom: 24px;
}

#form-wrapper input.text.error-highlight {
    border: 1px solid #dd1100;
    color: #dc0000;
}

a.guide-link {
    background: #dd1100;
    border-radius: 3px;
    border: 1px solid #b00f00;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    margin: 32px 0 0;
    padding: 12px 22px;
    text-transform: uppercase;
}

a.guide-link:hover {
	background: #b00f00;
	color: #fff;
}

.required {
    color: #dc0000;
    padding-left: 2px;
    padding-right: 10px;
}

.error-msg {
    background: url('/common/framework/img/form-error.en.png') no-repeat center left;
    background-size: auto auto;
    background-size: 14px 14px;
    color: #dd1100;
    display: none;
    font-size: .875rem;
    font-weight: 600;
    line-height: 18px;
    margin-top: .5rem;
    min-height: 18px;
    padding-left: 1.25rem;
}

.error-image {
    float: left;
    padding: 30px 20px 20px 30px;
}

/* location
-----------------------------------------*/

#location-info {
    padding: 50px 0;
}

#location-info {
    background: #f1f1f1;
}

#location-info .column:first-child {
    display: inline-block;
    margin: 0 20px 0 0;
    vertical-align: top;
    width: 360px;
}

#location-info .column:nth-child(2) {
    display: inline-block;
    font-size: 15px;
    line-height: 23px;
    margin-top: 20px;
    vertical-align: top;
    width: 416px;
}

#location-info ul.location.no-background {
    background: none;
    margin: 0;
    padding: 0;
}

/* footer
------------------------------------*/

footer {
    background: #eea428;
    height: 17px;
    position: relative;
}

/** spinner */

.spinner {
    display: none;
    height: 20px;
    margin-bottom: 0;
    margin-left: 40px;
    margin-top: -30px;
    position: relative;
    width: 20px;
}

.spinner .spinner-container {
    height: 100%;
    position: absolute;
    width: 100%;
}

.container2 {
    transform: rotateZ(45deg);
    -webkit-transform: rotateZ(45deg);
}

.container3 {
    transform: rotateZ(90deg);
    -webkit-transform: rotateZ(90deg);
}

.container1>div,
.container2>div,
.container3>div {
    animation: bouncedelay 1.2s infinite ease-in-out;
    animation-fill-mode: both;
    background-color: #fff;
    border-radius: 100%;
    height: 6px;
    position: absolute;
    -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    width: 6px;
}

.circle1 {
    left: 0;
    top: 0;
}

.circle2 {
    right: 0;
    top: 0;
}

.circle3 {
    bottom: 0;
    right: 0;
}

.circle4 {
    bottom: 0;
    left: 0;
}

.container2 .circle1 {
    animation-delay: -1.1s;
    -webkit-animation-delay: -1.1s;
}

.container3 .circle1 {
    animation-delay: -1.0s;
    -webkit-animation-delay: -1.0s;
}

.container1 .circle2 {
    animation-delay: -0.9s;
    -webkit-animation-delay: -0.9s;
}

.container2 .circle2 {
    animation-delay: -0.8s;
    -webkit-animation-delay: -0.8s;
}

.container3 .circle2 {
    animation-delay: -0.7s;
    -webkit-animation-delay: -0.7s;
}

.container1 .circle3 {
    animation-delay: -0.6s;
    -webkit-animation-delay: -0.6s;
}

.container2 .circle3 {
    animation-delay: -0.5s;
    -webkit-animation-delay: -0.5s;
}

.container3 .circle3 {
    animation-delay: -0.4s;
    -webkit-animation-delay: -0.4s;
}

.container1 .circle4 {
    animation-delay: -0.3s;
    -webkit-animation-delay: -0.3s;
}

.container2 .circle4 {
    animation-delay: -0.2s;
    -webkit-animation-delay: -0.2s;
}

.container3 .circle4 {
    animation-delay: -0.1s;
    -webkit-animation-delay: -0.1s;
}

@-webkit-keyframes bouncedelay {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0.0)
    }
    40% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes bouncedelay {
    0%,
    80%,
    100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    }
    40% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}