/* CSS Document */
/* ---------- FONTAWESOME ---------- */
/* ---------- https://fortawesome.github.com/Font-Awesome/ ---------- */
/* ---------- http://weloveiconfonts.com/ ---------- */
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
/* ---------- ERIC MEYER'S RESET CSS ---------- */
/* ---------- https://meyerweb.com/eric/tools/css/reset/ ---------- */
@import url(https://meyerweb.com/eric/tools/css/reset/reset.css);
/* ---------- FONTAWESOME ---------- */
[class*="fontawesome-"]:before {
    font-family: 'FontAwesome', sans-serif;
}

h1{
    font-size: 40px;
    margin: 0 0 20px 15px;
    color: #fff;
    font-weight: 300;
    line-height: 100%;
}

h2{
    font-size: 30px;
    margin: 10px 0 20px 15px;
    color: #fff;
    font-weight: 300;
}


body{
    min-height: 100%;
    overflow-x: hidden;
    margin: 0;
    background: transparent;
   /* background-repeat: no-repeat;
    background-attachment: fixed;
    background: #fff;
    background: -webkit-linear-gradient(top, #3a759f, #fff);
    background: -linear-gradient(top, #3a759f, #fff);
    background: -moz-linear-gradient(top, #3a759f, #fff);*/
    color: #1E1E1E;
    padding: 0;
    font: 87.5%/1.5em 'Open Sans', sans-serif;
}

html {
    margin-top: -2px;
    min-height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background: #3a759f;
    background-repeat:no-repeat;
    background: -webkit-linear-gradient( top, #3a759f, #fff);
    background: -moz-linear-gradient( top, #3a759f, #fff);
    background: -ms-linear-gradient( top, #3a759f, #fff);
    background: -o-linear-gradient( top, #3a759f, #fff);
    background: linear-gradient( top, #3a759f, #fff);
}




.top{
    /*background: white;*/
}

.container{
    width: 100%;
}

.content{
    margin-bottom: 20px;
    margin-top: 20px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.footer{
    padding: 10px;
    text-align:center;
}

.gray{
    /*background: #2c3338;*/
}

.cancel{
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    color: #eee;
    font-weight: bold;
    margin-bottom: 1em;
    text-transform: uppercase;
    text-align: center;
    background-color: #ce0b15;
    padding-top: 15px;
    height: 50px;
}

a:hover{
    text-decoration: none;
}



form span {
    background-color: #363b41;
    border-radius: 3px 0px 0px 3px;
    color: #606468;
    display: block;
    float: left;
    height: 50px;
    line-height: 50px;
    text-align: center;
    width: 50px;
}

form input, button, .cancel{
    border: 0px;
    width: 100%;

}

form input[type="text"], input[type="number"], input[type="email"] {
    background: rgba(255,255,255,0.4);
    border-radius: 3px 3px 3px 3px;
    color: #4a4a4a;
    margin-bottom: 1em;
    padding: 0 16px;
    height: 50px;


    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
}

form input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus {
    box-shadow: 0 0 5px rgba(65, 177, 255, 1);
}


.blue, button {
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background-color: #09c;
    color: #eee;
    font-weight: bold;
    text-transform: uppercase;
    height: 50px;

}

.blue{
    margin-bottom: 1em;
}

.no-flight{
    margin-bottom: 1em;
    margin-left: 10px;
    margin-right: 10px;
}

.blue:hover, button:hover {
    background-color: #0188b5;
}

@media only screen and (min-width: 768px) {

    .no-right-padding {
        padding-right: 0px;
    }
}

@media only screen and (max-width: 1199px) {

    #clouds{
        display: none;
    }
}



.delete{
    background: #ce0b15;
    font-size: 20px;
    width: 50px;
}


.delete:hover, .cancel:hover{
    background: #aa0911;
}

/** CLOUDS **/

#clouds{
    padding: 50px 0;
    position: absolute;
    z-index: -1;
    width: 100%;
}

/*Time to finalise the cloud shape*/
.cloud {
    width: 558px; height: 318px;


    position: relative;

    background-image: url("../images/clouds-back.png");
    background-size: 100%;
}



/*Time to animate*/
.x1 {

    -webkit-animation: myfirst 70s linear infinite;
    -moz-animation: myfirst 70s linear infinite;
    -o-animation: myfirst 70s linear infinite;
}

/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
    left: 200px;

    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0.6; /*opacity proportional to the size*/

    /*Speed will also be proportional to the size and opacity*/
    /*More the speed. Less the time in 's' = seconds*/
    -webkit-animation: moveclouds 25s linear infinite;
    -moz-animation: moveclouds 25s linear infinite;
    -o-animation: moveclouds 25s linear infinite;
}

.x3 {
    left: -250px; top: -200px;

    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.8; /*opacity proportional to the size*/

    -webkit-animation: moveclouds 20s linear infinite;
    -moz-animation: moveclouds 20s linear infinite;
    -o-animation: moveclouds 20s linear infinite;
}

.x4 {
    left: 470px; top: -250px;

    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    transform: scale(0.75);
    opacity: 0.75; /*opacity proportional to the size*/

    -webkit-animation: moveclouds 18s linear infinite;
    -moz-animation: moveclouds 18s linear infinite;
    -o-animation: moveclouds 18s linear infinite;
}

.x5 {
    left: -150px; top: -150px;

    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.8; /*opacity proportional to the size*/

    -webkit-animation: moveclouds 20s linear infinite;
    -moz-animation: moveclouds 20s linear infinite;
    -o-animation: moveclouds 20s linear infinite;
}

@-webkit-keyframes moveclouds {
    0% {margin-left: 1000px;}
    100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
    0% {margin-left: 1000px;}
    100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds {
    0% {margin-left: 1000px;}
    100% {margin-left: -1000px;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes myfirst {
    0%   {left:0px; opacity:0;}
    50%  {left: calc(50% - 259px); opacity:1;}
    100% {left: calc(100% - 558px); opacity:0;}
}

/* Standard syntax */
@keyframes myfirst {
    0%   {left:0px; opacity:0;}
    50%  {left: calc(50% - 259px); opacity:1;}
    100% {left: calc(100% - 558px); opacity:0;}
}



.cloud {
    position: relative;
    z-index: 4;

    padding: 40px 0;
}
.cloud .decor {
    z-index: 3;
}


#logo{
    margin: 0 auto;
    width: 117px;
    display: block;
    padding: 35px 20px 20px;
    background-color: #ce0b15;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;

}

.flight{
    background: rgba(255,255,255,0.4);
    text-align: center;
    padding: 20px 10px;
    border-radius: 4px 4px 4px 4px;
    margin-bottom: 30px;
}

.flight:hover{
    background: rgba(255,255,255,1);
}

strong{
    font-weight: bold;
}

.contact{
    padding-top: 100px;
}

.ticket-key{
    width: calc(100% - 65px);
}

.delete-button{
    float: right;
    padding: 0;
}

input[type="radio"]{
    margin: 5px 0 0 0;
    padding: 0;
    height: 10px;
    border: none;
    outline: none !important;
}

input[type="radio"]:focus, input[type="radio"]:active{
    outline: none !important;
}

.transfer{
    padding: 0 15px 20px 15px;
    color: #1E1E1E;
}

.transfer input[type="checkbox"]{
    float: left;
    width: 20px;
}