/********************************************************/
/*                 Page background                      */
/********************************************************/
body, .content { 
    background: #fff; 
    color:#333; 
}


/********************************************************/
/*                     Typography                       */
/********************************************************/
h1, h2, h3, h4, h5, h6 { 
    font-family: "Open sans", Helvetica, Arial;
    font-weight: 300;
}

p, .jumbotron p {
    font-size: 15px;
    line-height: 1.6em;
}

a{ color: #CD503A; }
a:hover, a:focus { color: #953726; }
a:visited { color: #D87563; }

/********************************************************/
/*                        Header                        */
/********************************************************/
.header {
    background: #A43222;
    background: -moz-linear-gradient(top,  #A43222 0%, #CD503A 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A43222), color-stop(100%,#CD503A));
    background: -webkit-linear-gradient(top,  #A43222 0%,#CD503A 100%);
    background: -o-linear-gradient(top,  #A43222 0%,#CD503A 100%);
    background: -ms-linear-gradient(top,  #A43222 0%,#CD503A 100%);
    background: linear-gradient(to bottom,  #A43222 0%,#CD503A 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A43222', endColorstr='#CD503A',GradientType=0 ); 
    color: white;
    margin-bottom: 0;
    padding-bottom: 0px;
}
.header h1 {
    font-family: "Open sans", Arial;
    font-size: 40px;
    font-weight: bold;
    margin: 35px 0 10px 0;
    text-align: center;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    color:#F6EFDD;
}
.header h2 {
    color: rgba(255,255,255,.9);
    font-family: Georgia;
    font-size: 17px;
    font-weight: normal;
    margin: 0 0 25px 0;
    text-align: center;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
}
.header p { font-size: 15px; line-height: 1.2em;}
.header .lead {
    font-family: "Open sans", Arial;
    color: rgba(255,255,255,.9);
    line-height: 1.2em;
    font-size: 18px;
    font-weight: 300;
    text-align: center;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
}
.header .small { 
    font-size: 0.9em; 
    line-height: 1.2em;
    text-align: center;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
}
.header .text-muted { color:white; opacity: 0.5; }

.header form { margin-bottom: 18px; }
.header .form-control { background: rgba(5,5,5,0.4); border: 0; color: white; font-size:15px;}
.header .form-control::-webkit-input-placeholder { color: rgba(255,255,255,0.3); }
.header .form-control:-moz-placeholder { color: rgba(255,255,255,0.3); }
.header .form-control::-moz-placeholder { color: rgba(255,255,255,0.3); }
.header .form-control:-ms-input-placeholder { color: rgba(255,255,255,0.3); }
.header .btn-default {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.8);
    color: rgba(255,255,255,.8);
    font-size:15px;
    padding: 12px 36px;
}


/********************************************************/
/*          Illustration and its animation              */
/********************************************************/
#illustration { z-index: 1; text-align: center; width:100%; margin-bottom:-130px;}
#illustration img {
    max-width:100%;
    -webkit-transition: all 0.8s;
    -o-transition: all 0.8s;
    -moz-transition: all 0.8s;
    transition: all 0.8s;
}
.expand img{ margin-bottom:120px; margin-top:-100px; }



/********************************************************/
/*                       Content                        */
/********************************************************/

.content { 
    position: relative; 
    z-index: 999; 
    margin-bottom:40px;  
}

.jumbotron { 
    background:#f5f5f5; 
}

.content .lead { font-family: Georgia; font-style: italic; color:#999; }

.space-before { padding-top:20px; }
.space-after { padding-bottom:20px; }

.img-feature { 
    border:15px solid #f5f5f5;
    margin:0 auto;
    -webkit-border-radius: 50% ;
    -moz-border-radius: 50% ;
    border-radius: 50%;
    padding:1px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/********************************************************/
/*                   Responsiveness                     */
/********************************************************/

@media (max-width: 767px) {
    h1, h2, h3, h4 { text-align: center;}
}

@media (min-width: 482px) {
    .header h1 { font-size: 55px; }
    .header h2 { font-size: 30px; }
    .header p { font-size: 15px; }

    #illustration { margin-bottom:-215px;}
    .expand img{ margin-bottom:200px; margin-top:-180px; }
}
@media (min-width: 768px) {
    .header h1 { font-size: 55px; }
    .header h2 { font-size: 20px; }
    .header p { font-size: 15px; }
    .header .lead { font-size:22px; }

    #illustration { margin-bottom:-310px;}
    .expand img{ margin-bottom:300px; margin-top:-190px; }

}
@media (min-width: 992px) {

    .header h1 { font-size: 55px; margin-top: 50px; }
    .header h2 { margin-bottom: 40px;}
    .header p { font-size: 15px; }

    #illustration { margin-bottom:-380px;}
    .expand img{ margin-bottom:370px; margin-top:-260px; }

    .space-before { padding-top:40px; }
    .space-after { padding-bottom:40px; }

}


/********************************************************/
/*                     Color themes                     */
/********************************************************/


/********************/
/*       Cyan       */
/********************/

/* Remove this line to activate

.header {
        background: #005363 url(../images/header.jpg) bottom center; 
        -webkit-background-size: cover;
           -moz-background-size: cover;
             -o-background-size: cover;
                background-size: cover;
        color: white;
}
.header h1 { color:white; }

h1, h2, h3, h4, h5, h6 { color: #00b0b0; }
a{ color: #00b0b0; }
a:hover, a:focus { color: #007777; }
a:visited { color: #5A8B86; }

/**/


/********************/
/*      Violet      */
/********************/



.header {
    background: #313A5B;
    background: -moz-linear-gradient(top,  #313A5B 0%, #5D577B 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#313A5B), color-stop(100%,#5D577B));
    background: -webkit-linear-gradient(top,  #313A5B 0%,#5D577B 100%);
    background: -o-linear-gradient(top,  #313A5B 0%,#5D577B 100%);
    background: -ms-linear-gradient(top,  #313A5B 0%,#5D577B 100%);
    background: linear-gradient(to bottom,  #313A5B 0%,#5D577B 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#313A5B', endColorstr='#5D577B',GradientType=0 ); 
}
.header h1 { color:white; }

h1, h2, h3, h4, h5, h6 { color: #5E7690; }
a{ color: #00b0b0; }
a:hover, a:focus { color: #007777; }
a:visited { color: #5A8B86; }

/**/
.choiximg
{
    transition-property: transform;
    -webkit-transition-property: transform;
    transition-duration: .5s;
    transition-timing-function: ease-out;
    opacity: 0.9;
    cursor: pointer;
}
.choiximg:hover
{
    opacity: 1;
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 50%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}