/* cmsms stylesheet: GA-algemeen modified: 10-11-16 20:52:57 */
/* Algemene styles -------------------------------------------------- */

body {
  padding-top: 30px;
  padding-bottom: 40px;
  font-family: Georgia, serif !important; 
  font-size: 12px !important;
  background: url(http://www.gyleli-academy.nl/gfx/gabg.jpg) no-repeat top center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.topnav.navbar-fixed-top {
  height: 35px;
  color: #ffc180;
  border-bottom: solid 4px #87b637;
}

.topnavalg {
  background-color: #d15727;
}

.topnavrt {
  background-color: #cc8c29;
}

.topnavc {
  background-color: #ce3e17;
}

.topmenu {
  padding-right: 10px;
  padding-top: 4px;
  text-align: right;
}

.topmenu ul {
padding-left: 0px;
}

.header {
  padding-bottom: 0px;
}

.headeralg {
  background: url("http://www.gyleli-academy.nl/gfx/gabgheader.jpg") top left no-repeat;
  background-color: #f7d3a4;
}

.headerrt {
  background: url("http://www.gyleli-academy.nl/gfx/gabgheaderrt.jpg") top left no-repeat;
  background-color: #f7d3a4;
} 

.headerc {
  background: url("http://www.gyleli-academy.nl/gfx/gabgheaderc.jpg") top left no-repeat;
  background-color: #f7d3a4;
} 

.title {
  padding-top: 20px;
  padding-bottom: 0px;
}

.header-rechts {
  padding-top: 8px;
  padding-bottom: 0px;
}

.tagline {
  text-align: right;
}

.nav {
  text-align: right:
  margin-top: 0px !important;
  padding-top: 0px !important;
  margin-bottom: 0px !important;
  padding-bottom: 0px !important;
}

.curve {
  height: 146px;
  background-color: transparent;
  z-index: 10;
}

.footer {
  background-color: #fbe3d3;
  border-top: solid 4px #5c0f10;
  padding-top: 10px;
  padding-bottom: 10px;
} 

.pagina {

}

.row {
  padding-bottom: 0px;
  margin-bottom: 0px;
}

.cont {
    overflow: hidden; 
}

[class*="onderste col-"] {
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

#content {
  margin-left: -15px;
  margin-right: -15px;
}

.inhoud {
  background-color: #fbe3d3;
  padding-top: 30px;
  overflow: hidden; 
}

.inhoud-text {
  padding-left: 10px;
  padding-right: 10px;
}

.sidebar {
  padding-top: 30px;
  background-color: #f5c88b;
}

.sidebar-contact {
  padding-bottom: 10px;
  width: 100%;
}

.sidebar-login {
  padding-top: 10px;
  width: 100%;
}

.sidebar-slogan {
  width: 100%;
  text-align: center;
  margin-top: 25px;
  margin-bottom: 10px;
}

.sidebar-slogan img {
  padding-top: 10px;
  padding-bottom: 10px;
}

@media (max-width: 767px) {
  div.tagline {
    display: none;
  }  
}
/* Typografie -------------------------------------------------- */

.pagina h1 {
  color: #70413b;
  font-size: 1.7em;
  font-weight: bold;
  padding-top: 8px;
  padding-bottom: 12px;
  /* font-family: 'Quattrocento', serif; */
}

.pagina h2 {
  color: #70413b;
  font-size: 1.4em;
  font-weight: bold;
}


.pagina h3 {
  color: #70413b;
  font-size: 1.3em;
  font-weight: bold;
}

.pagina h4 {
  color: #70413b;
  font-size: 1.2em;
  font-weight: bold;
}

.sidebar h1 {
  color: #70413b;
  font-size: 1.7em;
  font-weight: bold;
  padding-top: 8px;
  padding-bottom: 12px;
  border-top: solid 2px #650303;
}

.inhoud img {
  margin: 10px;
}

#header img {
  margin: 10px 0;
}

.tagline h2 {
  clear: both;
  color: #ff15fd;
  font-size: 1.6em;
  font-weight: bold;
  font-family: 'Quattrocento', serif;
  padding-top: 0;
  padding-right: 20px;
  text-align: right;
}

.tagline img {
  float: right;
  padding-right: 20px;
  padding-bottom: 4px;
  margin-bottom: 4px;
}

.footer p {
  color: #660000;
  font-size: 0.9em;
  padding-top: 10px;
}

.cont a {
  color: #d15727;
  text-decoration-line: none;
  text-decoration-style: solid;
}

.cont a:focus, .cont a:hover {
  color: #a93304;
}

.slogan h1 {
  color: #ffe0d1;
  font-weight: bold;
  font-style: oblique;
  font-size: 24px;
  margin-top: 12px;
  margin-left: 30px;
  margin-right: 30px;
}

.slogan p {
  color: #ffe0d1;
  font-size: 16px;
  margin-top: 0px;
  margin-left: 30px;
  margin-right: 30px;
}

.topmenu {
  color: #ffc180;
}

.topmenu li {
  display: inline;
}

.topmenu a, .topmenu a:hover, .topmenu a:focus {
  text-align: center;
  color: #ffc180;
  margin-left: 15px;
  margin-right: 15px;
  font-size: 1.2em;
}

/* Navigatie -------------------------------------------------- */

/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
}

.navbar {
  margin-bottom: 0px !important;
}

/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container {
  padding-right: 0;
  padding-left: 0;

}
.navbar-wrapper .navbar {
  padding-right: 8px;
  padding-left: 8px;
}
.navbar-wrapper .navbar .container {
  width: auto;
}

.navbar-247 {
  border-color: #ffffff;
}

.navbar-247 .navbar-brand {
  color: #660000;
}

.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
  color: #660000 !important;
}

li.active {
  background-color: transparent !important;
  border-color: none !important;
}

.navbar a {
  font-size: 12px;
  color: #660000 !important;
}

a.active {
  color: #660000;
}

.dropdown-menu, .dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
  background-color: #f7d3a4 !important;
}

.dropdown-menu a:hover {
  background-color: #fbe3d3 !important;
}  

.navbar-247 .navbar-toggle {
  border-color: #660000; /* Change border color around this buttons */
  background: #f7d3a4; /* Change background for button itself */
}

.navbar-247 .navbar-toggle .icon-bar {
  background: #660000; /* Change color for horizontal lines */
}

.navbar:hover .navbar-brand:hover,
.navbar:hover .navbar-brand:focus {
    color: #660000;
    background-color: transparent !important;
}

.navbar-247 .navbar-nav > li > a:hover,
.navbar-247 .navbar-nav > li > a:focus {
    color: #660000;
    background-color: transparent !important;
}

.caret {
  color: #402100;
}

.active > .caret {
  color: #402100;
}

.active > a:hover > .caret {
  color: #402100;
}

/* RESPONSIVE CSS -------------------------------------------------- */

@media (min-width: 768px) {

  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
  }

  .navbar-wrapper .container {
    padding-right: 15px;
    padding-left: 15px;
  }

  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }

  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }
}

#curve-img {
  width: 749px;
  height: 185px;
  background: url(http://www.gyleli-academy.nl/gfx/gadiavak749.png) no-repeat; 
  position: absolute;
  z-index: 1;
}

#curve-img-rt {
  width: 749px;
  height: 185px;
  background: url(http://www.gyleli-academy.nl/gfx/gadiavak749rt.png) no-repeat; 
  position: absolute;
  z-index: 1;
}

#curve-img-c {
  width: 749px;
  height: 185px;
  background: url(http://www.gyleli-academy.nl/gfx/gadiavak749c.png) no-repeat; 
  position: absolute;
  z-index: 1;
}

@media (min-width: 992px) {       
    #curve-img {
       width: 960px;
       background: url(http://www.gyleli-academy.nl/gfx/gadiavak.png) no-repeat;
     } 
}

@media (min-width: 992px) {       
    #curve-img-rt {
       width: 960px;
       background: url(http://www.gyleli-academy.nl/gfx/gadiavakrt.png) no-repeat;
     } 
}

@media (min-width: 992px) {       
    #curve-img-c {
       width: 960px;
       background: url(http://www.gyleli-academy.nl/gfx/gadiavakc.png) no-repeat;
     } 
}


#curve-img img, #curve-img-rt img, {
 content: "";
}


.ci {
  padding-left: 12px;
  padding-right: 10px;
}

.slogan {
  height: 140px;
  overflow: hidden;
  z-index: 10;
}

.dia {
  padding-top: 7px;
}

@media (max-width: 992px) {
  div.dia {
    display: none;
  }
}

/* FORMULIEREN -------------------------------------------------- */

div.formregel {
  display: block;
  margin-top: 10px;
}

.form-kraamzorg label {
  margin-left: 10px;
  width: 250px;
}

.form-kraamzorg .tekstveld label {
  margin-left: 10px;
  width: 95%;
}

.form-kraamzorg input {
}

input[type="file"] {
  display: inline-block !important;
}

.tekstveld textarea {
  margin-left: 10px;
  width: 90%;
  height: 120px;
}

.vinkje input {
  margin-left: 10px !important;
}

.vinkje label {
  width: 80%;
}

#sidebar-login input {

}

/* STIJLELEMENTEN ---------------------------------------------- */

#inhoud img {
    -webkit-animation: fadein 2.5s; /* Safari and Chrome */
    -moz-animation: fadein 2.5s; /* Firefox */
    -ms-animation: fadein 2.5s; /* Internet Explorer */
    -o-animation: fadein 2.5s; /* Opera */
    animation: fadein 2.5s;
}

@keyframes fadein {
    from { opacity: 0;}
    to   { opacity: 1;}
}

/* Firefox */
@-moz-keyframes fadein {
    from { opacity: 0;}
    to   { opacity: 1;}
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from { opacity: 0;}
    to   { opacity: 1;}
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0;}
    to   { opacity: 1;}
}​

/* Opera */
@-o-keyframes fadein {
    from { opacity: 0;}
    to   { opacity: 1;}
}​
