/*************************
*******Typography******
**************************/

.page {
  font-family: 'Dosis', sans-serif;
  font-size: 17px;
  color: #fff
}

/* Add padding to fix a bug when creating new containers. */
.page [data-module="container"] {
  padding-top: 20px;
  padding-bottom: 20px;
}

.page .btn {
  border-radius: 0;
  font-family: 'Yanone Kaffeesatz','sans-serif';
  font-size: 20px;
  padding: 9px 23px;
}

.page a {
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  -o-transition: 300ms;
  transition: 300ms;
}

.page a:focus,
.page a:hover {
  text-decoration: none;
  outline: none
}

.page h1,
.page h2,
.page h3,
.page h4,
.page h5,
.page h6 {
  font-family: 'Yanone Kaffeesatz', 'sans-serif';
  font-weight: 300;
}

.page h2 {
  font-size: 36px
}

.page .navbar {
  border: none;
  margin-bottom: 0
}

.page .navbar-toggle {
  margin-top: 12px;
}

.page .navbar-toggle .icon-bar {
  background-color: #fff;
}

.page .navbar-toggle,
.page .navbar-toggle:focus {
  border:1px solid #fff;
  outline: none;
}

.page .navbar-brand span {
  top: 5px;
  position: absolute;
  font-size: 30px;
}

.page .navbar-brand img {
  padding-right: 20px;
}


/*************************
*******Header CSS******
**************************/

.page .header-top {
  display: block;
  overflow: hidden;
  padding: 25px;
}

.page .main-nav {
  position: absolute;
  width: 100%;
  z-index: 999;
}

.page .main-nav .container {
  width: 100%
}

.page .navbar-brand {
  background-color: #1B7B98;
  height: 90px;
  margin-bottom: 20px;
  position: relative;
  width: 297px;
}

.page .navbar-brand img {
  /*position: absolute;*/
  top: -35px;
}

.page .navbar-right {
  background-color: #1B7B98;
  padding:0 0px 0 0;
  opacity: .9
}

.page .navbar-right li a {
  padding: 35px 21px;
  font-size: 22px;
  color: #fff;
  font-family: 'Yanone Kaffeesatz', 'sans-serif';
  font-weight: 300;
}

.page .navbar-right li a:hover,
.page .navbar-right li a:focus,
.page .navbar-right .active a {
  background-color: #fff;
  color: #16728f;
}

.page .fixed-menu {
  background-color: #1B7B98;
  position: fixed;
  top: 0;
}

.page .fixed-menu .navbar-right {
  padding: 0;
}

.page .fixed-menu .navbar-right li a {
  font-size: 18px;
  padding: 20px 25px;
  text-shadow:inherit;
}

.page .fixed-menu .navbar-brand {
  height: 60px;
  margin-top: 0;
  padding: 0;
  margin-bottom: 0;
  width: 350px;
}

.page .fixed-menu .navbar-brand img {
  height:58px;
  top: -5px;
}

.page .fixed-menu .header-top {
  display: none;
}


/*************************
*******Home CSS******
**************************/

.page .home {
  position: relative;
  overflow: hidden;
}

.page .home {
  background-color: #000000;
  background-image: url('../images/slider/bg1.jpg');
  background-size: cover;
  padding-top: 160px;
}

.page .home h2 {
  font-size: 38px;
}

.page .home h4 {
  font-size: 24px;
}


/*************************
*******Event CSS******
**************************/

.page .event {
  background-color: #33888F;
  background-image: url("../images/performar-bg.jpg");
  background-size: cover;
  position: relative;
  background-repeat: no-repeat;
}

.page .event h2 {
  color: #FFFFFF;
  font-size: 36px;
  font-weight: 300;
  margin-bottom: 40px;
  margin-top: 50px;
}

.page .single-event {
  margin-bottom: 70px;
}

.page .single-event h4 {
  color: #FFFFFF;
  font-size: 24px;
  font-weight: 300;
  line-height: 26px;
  margin-top: 25px;
}

.page .single-event h5 {
  font-size: 18px;
  font-weight: 100;
  display: block;
}


/*************************
*******About CSS**********
**************************/

.page .about {
  background-color: #75B46E;
  position: relative;
  width: 100%;
}

.page .guitar2 {
  top: 0;
}

.page .guitar2 img {
  padding-top: 3%;
}

.page .about h2 {
  margin-bottom: 23px;
}

.page .about-content p {
  font-size: 17px;
  font-family: 'Dosis',sans-serif;
}

.page .about .btn-primary {
  background-color: #137c61;
  color: #fff;
  border: none;
  margin-top: 28px;
}

.page .about .btn-primary:hover {
  background-color: #126d55
}


/*************************
******Twitter CSS****
**************************/

.page .twitter {
  background-color: #ecedef;
  background-image: url("../images/twitter-bg.jpg");
  background-position: center bottom;
  background-size: cover;
  background-repeat:no-repeat;
  position: relative;
  padding: 30px 0 30px;
  overflow: hidden;
}

.page .twitter-feed .item {
  text-align: center;
}

.page .twitter-feed .item img {
  display: inline-block;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border-color: #c5c8ce;
  border-width: 5px;
  border-style: solid;
  margin-bottom: 30px;
}

.page .twitter-feed .item a,
.page .twitter-feed .item p {
  font-size: 24px;
  font-weight: 300;
  font-family: 'Yanone Kaffeesatz','sans-serif';
}

.page .twitter-feed .item p {
  color: #3D3D3D;
}

.page .twitter-feed .item a {
  color: #00c3ff;
}


/*************************
******Sponsor CSS****
**************************/

.page .sponsor {
  background-color: #1881a2;
  background-image: url("../images/sponsor-bg.jpg");
  background-position:50% 0;
  background-size: cover;
  background-repeat:no-repeat;
  position: relative;
}

.page .sponsor .col-sm-12 {
  z-index: 10;
}

.page .sponsor .title {
  margin-top: 40px;
  margin-bottom: 20px;
}


/*************************
******Contact CSS****
**************************/

.page .contact-section {
  background-color: #f7ab24;
  background-image: url("./contact-bg.jpg");
  background-size: cover;
  background-repeat:no-repeat;
  position: relative;
  padding-top: 47px;
}

.page .contact h3 {
  color: #373737;
}

.page .contact p {
  font-size: 18px;
  color: #373737;
}

.page .contact-section h3 {
  margin-bottom: 25px
}

.page .contact-section .form-control {
  border-color: #ccc;
  box-shadow:none;
  outline: 0 none;
  border-radius: 0;
  font-size: 18px;
}

.page .contact-form .form-control:focus {
  border-color: #ccc;
}

.page .contact-form input {
  height: 44px;
}

.page .contact-form textarea {
  height: 90px;
  resize:none;
}

.page .contact-form .btn-primary {
  background-color: #373737;
  color: #f7ab24;
  border: none;
  font-size: 24px;
  padding: 6px 42px;
  margin-bottom: 110px;
  margin-top: 10px
}

.page .contact-form .input-group-addon {
  border-color: #ccc;
  border-radius: 0px;
}


/*************************
******Footer CSS****
**************************/

.page .footer {
  background-color: #212121;
  color: #FFFFFF;
  font-size: 20px;
  padding: 35px 0;
}

/*
* CSS customization for Rockett
* Change carefully to not mess the editor-sidebar, preferably using modules selectors
*/

/* Add the offset for the navbar do not go on top of the editor sidebar when on editor */
[ng-app] + .page > nav {
  left: initial;
  width: calc(100% - 289px);
}

[ng-app] + .page .navbar-collapse {
  margin-right: 289px;
}

/* Add some padding to prevent lines of modules go over each other when editing */
.page [data-module="row"], .page [data-module="col"] {
  padding: 10px;
}

/* Fixes the position of the .module-action buttons, otherwise the navbar will be on top of it */
.page [data-module="container"][data-module-activated="true"]:first-child:hover > .module-action{
  top: 90px;
}

.page [data-module="row"] {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Prevents container from going under navbar when container are deleted */
.page [data-module="container"]:first-child > .overlay > .container > [data-module="row"]:first-child,
.page [data-drop="true"] + [data-module="container"]:nth-child(2) > .overlay > .container > [data-drop="true"] + [data-module="row"]:nth-child(2),
.page [data-module="container"]:first-child > .container > [data-module="row"]:first-child,
.page [data-drop="true"] + [data-module="container"]:nth-child(2) > .container > [data-drop="true"] + [data-module="row"]:nth-child(2),
.page [data-module="container"]:first-child > [data-module="row"]:first-child,
.page [data-drop="true"] + [data-module="container"]:nth-child(2) > [data-drop="true"] + [data-module="row"]:nth-child(2){
  margin-top: 100px;
}

/* Fixes the margin of menu-content img*/
.page [data-module="menu-content"] img {
  height: 134px;
  margin-top: 7px;
  position: relative;
}