/*------------------------------------------------------------------
[Table of contents]

1. Body
2. General settings / header, footer + general classes
3. Parallax / #parallax-section
4. Features / #features
5. Team / #teams
6. Skills / #skills
7. Services / #services
8. Testimonials / #testimonials
9. Our work / #our-work
  9.1. Portfolio part / .portf-one
10. Our clients / #our-clients
11. Contact / #contact, #contact1
12. Blog section/archive / #blog  / Blog archive page
13. Blog post / Blog post page
14. Navigation menu / #cssmenu
15. Media queries
16. Grayscale images / .grayscale, .grayscaleImg
-------------------------------------------------------------------*/

#html5Loader {
    top: 0;
    left: 0;
    background-color: black;
    background-color: rgba(0, 0, 0, 0.95);
    position: fixed;
    z-index: 99;
}

#html5Loader .fallback {
    top: 50%;
    position: absolute;
    text-align: center;
    width: 100%;
    color: white;
    vertical-align: middle;
    display: block;
    font-style: normal;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/* ------------------------------------------- 1. NEWS -------------------------------------------- */


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

#news_bullets {
    padding: 0 5px 0 20px;
}

#news_bullets li {
    padding-bottom: 10px;
}

#news1_wrapper a:link {
    color: #22cece;
}

#news1_wrapper a:hover {
    color: #c70317;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/* ------------------------------------------- 1. Body -------------------------------------------- */


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

body {
    background: #181818;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 26px;
    font-weight: 300;
    font-feature-settings: "lnum";
    -moz-font-feature-settings: "lnum";
    -webkit-font-feature-settings: "lnum";
    -ms-font-feature-settings: "lnum";
    -o-font-feature-settings: "lnum";
}

html {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #181818;
    overflow-x: hidden;
    -moz-filter: none;
}

h1 {
    margin: 0;
    padding: 0;
    font-size: 60px;
    line-height: 68px;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
    color: #fff;
    font-feature-settings: "lnum";
    -moz-font-feature-settings: "lnum";
    -webkit-font-feature-settings: "lnum";
    -ms-font-feature-settings: "lnum";
    -o-font-feature-settings: "lnum";
}

h2 {
    text-align: left;
    margin: 0;
    padding: 0;
    font-size: 80px;
    line-height: 56px;
    font-weight: 200;
    font-family: 'Roboto', sans-serif;
    color: #fff;
    font-feature-settings: "lnum";
    -moz-font-feature-settings: "lnum";
    -webkit-font-feature-settings: "lnum";
    -ms-font-feature-settings: "lnum";
    -o-font-feature-settings: "lnum";
    display: block;
}

.intro {
    border-left: 10px solid #C70317;
    padding-left: 10px;
    text-align: left;
    margin-bottom: 20px;
}

h3 {
    margin: 0;
    padding: 0;
    font-size: 30px;
    line-height: 38px;
    font-weight: 300;
    font-family: 'Roboto', sans-serif;
    color: #fff;
    font-feature-settings: "lnum";
    -moz-font-feature-settings: "lnum";
    -webkit-font-feature-settings: "lnum";
    -ms-font-feature-settings: "lnum";
    -o-font-feature-settings: "lnum";
}

h4 {
    margin: 0;
    padding: 0;
    font-size: 17px;
    line-height: 25px;
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
    color: #00ffff;
    font-feature-settings: "lnum";
    -moz-font-feature-settings: "lnum";
    -webkit-font-feature-settings: "lnum";
    -ms-font-feature-settings: "lnum";
    -o-font-feature-settings: "lnum";
}

h5 {
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 26px;
    font-weight: 200;
    font-family: 'Roboto', sans-serif;
    color: #fff;
    font-feature-settings: "lnum";
    -moz-font-feature-settings: "lnum";
    -webkit-font-feature-settings: "lnum";
    -ms-font-feature-settings: "lnum";
    -o-font-feature-settings: "lnum";
}

h6 {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    color: #fff;
    font-feature-settings: "lnum";
    -moz-font-feature-settings: "lnum";
    -webkit-font-feature-settings: "lnum";
    -ms-font-feature-settings: "lnum";
    -o-font-feature-settings: "lnum";
}

p {
    margin: 0 0 0 0;
}

a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s, background 0.3s;
    -webkit-transition: color 0.3s, background 0.3s;
    -moz-transition: color 0.3s, background 0.3s;
    -ms-transition: color 0.3s, background 0.3s;
}

a * {
    transition: color 0.3s, background 0.3s;
}

a:focus {
    outline: none;
    text-decoration: none;
    color: #1D96CF;
}

a:hover {
    color: #1D96CF;
    text-decoration: none;
    outline: none;
}

a:active {
    background: none;
}

button {
    transition: background 0.3s, color 0.3s;
}

ul {
    padding-left: 0px;
    margin-bottom: 0px;
}

div,
span,
p,
button,
a,
li {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-feature-settings: "lnum";
    -moz-font-feature-settings: "lnum";
    -webkit-font-feature-settings: "lnum";
    -ms-font-feature-settings: "lnum";
    -o-font-feature-settings: "lnum";
}

body,
html {
    height: 100vh;
}

.see_through_px {
    background: url('images/pixel_bg.png');
}

i {
    color: #00ffff;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/* ------------------------------------ 2. General Settings ------------------------------------ */


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.inlineBlock {
    display: inline-block;
}

.displayBlock {
    display: block;
}

.hidden1 {
    display: none;
}

.beige {
    color: #fdf3bd;
    background: url('images/pixel_bg.png');
    font-weight: 500;
}

.turqouse {
    background: url('images/pixel_bg.png');
    font-weight: 500;
    color: #02FBE6;
}

.sublevel a:hover {
    color: #F10606;
    cursor: pointer;
}

.sublevel b {
    background: url('images/pixel_bg.png');
    padding: 0 3px;
    /*color:#00ffff;*/
}

.blue-horizontal-separator {
    border-bottom: 1px solid #1D96CF;
    display: inline-block;
    width: 160px;
}

.blue-horizontal-separator-full {
    border-bottom: 1px solid #1D96CF;
    display: inline-block;
    width: 90%;
}

.gray-horizontal-separator-full {
    border-bottom: 2px solid #131313;
    display: inline-block;
    width: 90%;
}

.bigH1 {
    /*font-size: 160px;
    line-height: 168px;*/
    font-weight: 900;
    color: black;
    font-size: 78px;
    padding-left: 0;
    display: inline-block;
    font-family: Oswald;
}

.bigH2 {
    font-size: 80px;
    line-height: 88px;
    font-weight: 900;
}

.responsive-static-img {
    display: none;
    height: 600px;
    background-image: url("images/mountains.png");
    background-repeat: no-repeat;
    background-position: center 46px;
    background-attachment: fixed;
}

.responsive-static-img img {
    /* height: 100vh;*/
}

.responsive-arrow img {
    height: auto;
}

.responsive-theme-title {
    position: absolute;
    top: 100px;
    width: 100%;
    text-align: center;
}

.responsive-theme-title p {
    margin: 5px 0;
}

.no-pad {
    padding-left: 0px;
    padding-right: 5px;
}

.relative {
    position: relative;
}

.overflow-hidden {
    overflow: hidden;
}

.margin0 {
    margin: 0;
}

.padding0 {
    padding: 0;
}

.no-style {
    list-style: none;
}

.padding24 {
    padding: 24px;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.no-pad-lr {
    padding-left: 0px;
    padding-right: 0px;
}

.border-radius0 {
    border-radius: 0;
}


/* Containers */

.containerHeight800 {
    min-height: 800px;
}

.content {
    background-color: #181818;
}


/*.container-fluid {
    background-color: #000;
}*/

.full-width-container {
    width: 100%;
}

.black-bg {
    background: #000;
}

h2 > span {
    font-size: inherit;
    line-height: inherit;
    font-weight: 600;
    font-family: Oswald;
}

.text-block {
    color: #a7a7a7;
}

.text-block > span {
    color: #1D96CF;
}


/* Header */

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;
    background: #181818;
}

.search-popout-block {
    background: #181818;
    border-bottom: 2px solid #131313;
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    /*transition: top 0.3s; */
    /*transition: bottom 0.3s;*/
    z-index: -150;
}

.search-popout-block input:focus {
    border: none;
}

.header-search-form {
    float: left;
    height: 75px;
}

.header-search-form input {
    width: 100%;
    padding-right: 90px;
    border: none;
    color: #fff;
    padding: 24px 12px;
    padding-bottom: 12px;
    font-size: 26px;
    line-height: 24px;
    font-weight: 400;
    background: #181818;
    color: #808080;
    outline: none;
}

.header-search-form button {
    border-radius: 0;
    border: none;
    position: absolute;
    top: 0;
    right: 0;
    padding: 26px;
    background: transparent;
}

.search-button-trigger {
    position: relative;
    float: right;
    width: 70px;
    height: 46px;
}

a.search-button-trigger:active {
    background: transparent;
}

.close-search {
    padding-top: 30px;
    padding-bottom: 23px;
}

.close-search:active {
    background: transparent;
}


/* Footer */

.footer-social li {
    display: inline-block;
    margin-right: -5px;
}

.footer-social li a {
    display: block;
    padding: 4px;
}

.footer-social li a i {
    font-size: 52px;
    line-height: 52px;
    color: #808080;
}

.footer-social li a i:hover {
    color: #1d96cf;
}

.text-footer {
    color: #808080;
}

a.scroll-to {
    display: inline-block;
}

a.scroll-to i {
    font-size: 180px;
    line-height: 180px;
    font-weight: 100;
}

.footer-arrow-up {
    display: inline-block;
}

.footer-arrow-up-h {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s;
}

a.scroll-to:hover .footer-arrow-up-h {
    opacity: 1;
}

.home-arrow-down {
    display: inline-block;
}

.home-arrow-down-h {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s;
}

img {
    max-width: 100%;
}

.invisible {
    visibility: hidden;
}

.floatRight {
    float: right;
}

.floatLeft {
    float: left;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/* ---------------------------------------- 3. Parallax ---------------------------------------- */


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

a.scroll-to1 {
    display: inline-block;
}

a.scroll-to1 i {
    font-size: 180px;
    line-height: 180px;
    font-weight: 100;
}

a.scroll-to1:hover .home-arrow-down-h {
    opacity: 1;
}

.homeoverlay {
    position: absolute;
    right: 85px;
    bottom: 0;
    top: 153px;
    width: 35%;
    z-index: 5;
    border-left-width: 17px;
    border-left-style: solid;
    border-left-color: rgb(181, 5, 17);
    padding-left: 20px;
}

.homeoverlay p {
    padding: 10px 0;
}

.parallax-bg {
    width: 100%;
    left: -40;
    -webkit-transform: translateZ(0);
    z-index: 2;
    padding-top: 10px;
    position: relative;
}

.parallax-bg-overlay {
    position: absolute;
    left: 0;
    -webkit-transform: translateZ(0);
    z-index: 5;
    width: 100%;
    height: 100%;
}

.parallax-overlay {
    position: absolute;
    left: 0;
    -webkit-transform: translateZ(0);
    z-index: 4;
    width: 100%;
}

.top_section_scroll {
    margin: 12px 0;
    font-weight: 500;
    color: white;
    font-style: italic;
}

.top_section_scroll span {
    background: url('images/topScroll.png');
    background-position: bottom right;
    padding: 21px 21px 8px 5px;
    background-repeat: no-repeat;
}

.floatRight.top_section_scroll:visited {
    color: white;
}

.floatRight.top_section_scroll:hover {
    color: #c50613;
}

.homeoverlay b {
    display: block;
}

.homeoverlay i {
    font-weight: 500;
    color: black;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/* --------------------------------------- CANVAS

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.mask {
    position: absolute;
    left: -1000px;
}

#v {
    visibility: hidden;
    position: absolute;
}

#home {
    padding: 155px 0 57px 0;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#addcec+0,ffffff+100 */
    background: #addcec;
    /* Old browsers */
    background: -moz-linear-gradient(top, #addcec 0%, #ffffff 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #addcec 0%, #ffffff 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #addcec 0%, #ffffff 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#addcec', endColorstr='#ffffff', GradientType=0);
    /* IE6-9 */
    min-height: 100vh;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/* --------------------------------------- 4. Features   COMPANY ----------------------------------------- */


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

#features {
    height: 100%;
    background: url('images/bcg_slide-1.jpg') no-repeat 70% 50%;
    background-size: cover;
    min-height: 100vh;
}

.feature-element i {
    transition: color 0.3s;
}

.feature-element:hover i {
    color: #1D96CF;
}

.text-block {
    color: #ffffff;
    /*text-align: left;
*/
}

.text-block > span {
    color: #1D96CF;
}

.one-about-elem {
    display: inline-block;
    color: #a7a7a7;
    font-size: 36px;
    line-height: 40px;
}

.one-about-elem-title {
    font-weight: 700;
    font-size: 36px;
}

.one-about-elem-icon {
    font-weight: 500;
    color: #1D96CF;
    font-size: 36px;
}

.fw {
    font-weight: 300;
}

.inline-disp {
    display: inline;
}

#company_wrapper ul {
    padding-left: 30px;
}


/*************SUBLEVELS************/


/*#core_wrapper {
    display: none;
}
*/

#overlays h4 {
    color: #C30F0F;
}

.outline {
    outline: 1px solid #1D1D1D;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/* ----------------------------------------- 2. Workshops ------------------------------------------- */


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

#workshops {
    height: 100%;
    background: url('images/bcg_slide-2.jpg') no-repeat 0% 50% fixed;
    background-size: cover;
    color: white;
    min-height: 100vh;
}

#workshops ul {
    padding-left: 20px;
    line-height: normal;
    color: white;
}


/* ----------------------------------------- 3. Theatre ------------------------------------------- */


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

#theatre {
    height: 100%;
    background: url('images/bcg_slide-3.jpg') no-repeat 0% 0%;
    background-size: cover;
    padding-right: 0;
}

#theatre ul {
    padding-left: 20px;
    line-height: normal;
}

#theatre .intro {
    margin-bottom: 0;
    margin-top: 146px;
    margin-left: 60px;
}

#building_roof {
    background-image: url('images/roof.png');
    background-repeat: no-repeat;
    background-position: 0 34px;
    padding-right: 0;
}

.building_bg {
    background-color: black;
    margin-left: 9px;
}

#theatre_wrapper img {
    outline: 1px solid #1D1D1D;
}

#sorry_wrapper span,
#findingout_wrapper span,
#imb_wrapper span,
#moc_wrapper span,
#izm_wrapper span,
#patina_wrapper span,
#promenade_wrapper span,
#evolution_wrapper span,
#activities_wrapper span,
#school_programs_wrapper span,
#community_programs_wrapper span,
#classes_wrapper span,
#hustle_wrapper span,
#corporate_wrapper span,
#whatsnew_wrapper span,
#mediacoverage_wrapper span {
    display: block;
    margin-left: 19px;
    margin-bottom: 0;
    color: white;
}

#mediacoverage_wrapper a {
    color: #96c7d2;
}

#mediacoverage_wrapper a:hover {
    color: #f90000;
}

#moc_wrapper a,
#izm_wrapper a,
#evolution_wrapper a,
#activities_wrapper a,
#school_programs_wrapper a,
#community_programs_wrapper a,
#classes_wrapper a,
#hustle_wrapper a,
#corporate_wrapper a,
#whatsnew_wrapper a {
    color: white;
}

#moc_wrapper a:hover,
#izm_wrapper a:hover,
#evolution_wrapper a:hover,
#activities_wrapper a:hover,
#school_programs_wrapper a:hover,
#community_programs_wrapper a:hover,
#classes_wrapper a:hover,
#hustle_wrapper a:hover,
#corporate_wrapper a:hover,
#whatsnew_wrapper a:hover {
    color: #C70317;
}


/* ----------------------------------------- 4. Media ------------------------------------------- */


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

#media {
    height: 100%;
    background: url('images/bcg_slide-4.jpg') no-repeat 0% 0%;
    background-size: cover;
    min-height: 100vh;
}

#media ul {
    padding-left: 20px;
    line-height: normal;
}

#two_eleven,
#two_twelve,
#two_thirteen {
    display: none;
}

.two_eleven,
.two_twelve,
.two_thirteen {
    cursor: pointer;
    display: inline-block;
    color: #b72938 !important;
}

.two_eleven:hover,
.two_twelve:hover,
.two_thirteen:hover {
    color: white !important;
}

#videos_wrapper a {
    color: white;
}

#videos_wrapper a:hover {
    color: red;
}


/* ----------------------------------------- 5. Corporate ------------------------------------------- */


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

#corporate {
    height: 100%;
    background: url('images/bcg_slide-5.jpg') no-repeat 90% 90% fixed;
    background-size: cover;
}

#corporate ul {
    padding-left: 20px;
    line-height: normal;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/* ----------------------------------------- 5. Team ------------------------------------------- */


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.pad-right0 {
    padding-right: 0;
}

.flip-container {
    /*    perspective: 1000;*/
    background: transparent;
    height: 280.48px !important;
}

.flip-container:hover .flipper,
.flip-container.hover .flipper {
    transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
    width: auto;
    height: auto;
}

.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
    top: 75px;
}

.front,
.back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.class1 {
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.class2 {
    visibility: visible;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}

.class1i {
    visibility: hidden;
}

.class2i {
    visibility: visible;
}

.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

.back {
    transform: rotateY(180deg);
}

.hexagons {
    width: 1100px;
    letter-spacing: 0;
    font-size: 0;
    margin: 0 auto;
}

.hexagon-holder {
    position: relative;
    margin-left: 21.5px;
    margin-right: 21.5px;
    width: 226px;
    height: 130.48px;
    display: inline-block;
    letter-spacing: 0;
    font-size: 0;
}

.hexagon {
    position: relative;
    width: 226px;
    height: 130.48px;
    background-size: auto 258.6529px;
    background-position: center;
    display: inline-block;
    z-index: 1;
}

.hexagon1 {
    position: relative;
    width: 226px;
    height: 130.48px;
    background-image: url(images/team/member1.png);
    background-size: auto 258.6529px;
    background-position: center;
    display: inline-block;
    z-index: 1;
}

.hexagon2 {
    position: relative;
    width: 226px;
    height: 130.48px;
    background-image: url(images/team/member2.png);
    background-size: auto 258.6529px;
    background-position: center;
    display: inline-block;
    z-index: 1;
}

.hexagon3 {
    position: relative;
    width: 226px;
    height: 130.48px;
    background-image: url(images/team/member3.png);
    background-size: auto 258.6529px;
    background-position: center;
    display: inline-block;
    z-index: 1;
}

.hexagon4 {
    position: relative;
    width: 226px;
    height: 130.48px;
    background-image: url(images/port-hex/join.png);
    background-size: auto 258.6529px;
    background-position: center;
    display: inline-block;
    z-index: 1;
}

.hexagon .hexTop,
.hexagon .hexBottom {
    position: absolute;
    z-index: 1;
    width: 160.81px;
    height: 160.81px;
    overflow: hidden;
    -webkit-transform: scaleY(0.5774) rotate(-45deg);
    -ms-transform: scaleY(0.5774) rotate(-45deg);
    transform: scaleY(0.5774) rotate(-45deg);
    background: inherit;
    left: 33.10px;
    -webkit-backface-visibility: hidden
}


/*counter transform the bg image on the caps*/

.hexagon .hexTop:after,
.hexagon .hexBottom:after {
    content: "";
    position: absolute;
    width: 224.0000px;
    height: 129.32646029847618px;
    -webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-64.6632px);
    -ms-transform: rotate(45deg) scaleY(1.7321) translateY(-64.6632px);
    transform: rotate(45deg) scaleY(1.7321) translateY(-64.6632px);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    background: inherit;
}

.hexagon .hexTop {
    top: -79.9031px;
}

.hexagon .hexTop:after {
    background-position: center top;
}

.hexagon .hexBottom {
    bottom: -80.9031px;
}

.hexagon .hexBottom:after {
    background-position: center bottom;
}

.hexagon:after {
    content: "";
    position: absolute;
    top: 0.5774px;
    left: 0;
    width: 224.0000px;
    height: 129.3265px;
    z-index: 2;
    background: inherit;
}

.hexagon:nth-child(7n-2) {
    margin-left: 156px;
}

.hexagon:nth-child(n+5) {
    margin-top: 29px;
}

.hex-plus {
    font-size: 100px;
    font-weight: 100;
}

.hexText {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    color: #000;
    opacity: 1;
    font-size: 20px;
    text-align: center;
    width: 100%;
    color: #fff;
}

.hexagon-overlay {
    position: absolute;
    width: 226px;
    height: 130.48px;
    margin: 0;
    background-color: #181818;
    background-size: auto 247.1059px;
    background-position: center;
    border-left: solid 6px #333333;
    border-right: solid 6px #333333;
    opacity: .7;
    z-index: 3;
    top: 0;
    left: 0;
}

.hexagon-overlay .hexTop,
.hexagon-overlay .hexBottom {
    position: absolute;
    z-index: 1;
    width: 159.81px;
    height: 159.81px;
    overflow: hidden;
    -webkit-transform: scaleY(0.5774) rotate(-45deg);
    -ms-transform: scaleY(0.5774) rotate(-45deg);
    transform: scaleY(0.5774) rotate(-45deg);
    background: inherit;
    left: 27.10px;
}


/*counter transform the bg image on the caps*/

.hexagon-overlay .hexTop:after,
.hexagon-overlay .hexBottom:after {
    content: "";
    position: absolute;
    width: 214.0000px;
    height: 123.55295760657991px;
    -webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-61.7765px);
    -ms-transform: rotate(45deg) scaleY(1.7321) translateY(-61.7765px);
    transform: rotate(45deg) scaleY(1.7321) translateY(-61.7765px);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    background: inherit;
}

.hexagon-overlay .hexTop {
    top: -79.9031px;
    border-top: solid 8.4853px #333333;
    border-right: solid 8.4853px #333333;
}

.hexagon-overlay .hexTop:after {
    background-position: center top;
}

.hexagon-overlay .hexBottom {
    bottom: -79.9031px;
    border-bottom: solid 8.4853px #333333;
    border-left: solid 8.4853px #333333;
}

.hexagon-overlay .hexBottom:after {
    background-position: center bottom;
}

.hexagon-overlay .hexagon:after {
    content: "";
    position: absolute;
    top: 3.4641px;
    left: 0;
    width: 214.0000px;
    height: 123.5530px;
    z-index: 2;
    background: inherit;
}

.hex-socials li {
    display: inline-block;
    width: 35px;
}

.hex-socials li a {
    display: block;
    padding: 6px;
    font-size: 18px;
    line-height: 18px;
}

.social-hover {
    margin-right: 10px;
}

.team-text {
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 0px;
    margin-bottom: 10px;
    text-align: center;
    /*font-weight: 500;*/
    color: #a7a7a7;
    font-size: 16px;
    line-height: 26px;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/* --------------------------------------- 6. Skills ------------------------------------------- */


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.progress {
    border-radius: 0;
    height: 36px;
    background: #282828;
}

.bar {
    height: 36px;
    line-height: 36px;
    font-size: 18px;
    text-align: right;
    border-left: 6px solid rgba(0, 0, 0, 0.3);
    color: #323231;
    padding-right: 12px;
    font-weight: 900;
}

.name-bar {
    float: left;
    position: absolute;
    padding-left: 20px;
    font-size: 18px;
    font-weight: 900;
    line-height: 36px;
    color: #323231;
    z-index: 0;
    display: none;
}

#pg1 {
    background: #f1c40f;
    /*--Yellow sunflower--*/
    border-left: 8px solid rgba(243, 156, 18, 1.0);
    /*--Orange--*/
}

#pg2 {
    background: #2ecc71;
    /*--Emerald--*/
    border-left: 8px solid rgba(39, 174, 96, 1.0);
    /*--Nephritis--*/
}

#pg3 {
    background: #e67e22;
    /*--Carrot--*/
    border-left: 8px solid rgba(211, 84, 0, 1.0);
    /*--Pumpkin--*/
}

#pg4 {
    background: #34495e;
    /*--Wet asphalt--*/
    border-left: 8px solid rgba(44, 62, 80, 1.0);
    /*--Midnight blue--*/
}

#pg5 {
    background: #e74c3c;
    /*--Alizarin red--*/
    border-left: 8px solid rgba(192, 57, 43, 1.0);
    /*--Pomegranate red--*/
}

#pg6 {
    background: #1abc9c;
    /*--Turquise--*/
    border-left: 8px solid rgba(22, 160, 133, 1.0);
    /*--Green sea--*/
}

#pg7 {
    background: #9b59b6;
    /*--Amethyst--*/
    border-left: 8px solid rgba(142, 68, 173, 1.0);
    /*--Wisteria--*/
}

#pg8 {
    background: #3498db;
    /*--Peter river blue--*/
    border-left: 8px solid rgba(41, 128, 185, 1.0);
    /*--Belize hole blue--*/
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/* --------------------------------------- 7. Services ----------------------------------------- */


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.services-element {
    outline: none;
}

.blue-horizontal-separator-service {
    width: 160px;
    height: 2px;
    display: inline-block;
    background-color: #1D96CF;
    border-bottom: 1px solid #181818;
}

.services-element img {
    display: inline-block;
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.services-icon {
    border: 2px solid #1D96CF;
    border-radius: 100px;
    background: #1D96CF;
    padding: 12px;
    background-color: rgb(52, 152, 219);
    text-shadow: rgb(43, 125, 180) 1px 1px, rgb(44, 129, 186) 2px 2px, rgb(45, 133, 191) 3px 3px, rgb(47, 137, 197) 4px 4px, rgb(48, 140, 202) 5px 5px, rgb(49, 144, 208) 6px 6px, rgb(50, 148, 213) 7px 7px, rgb(52, 152, 219) 8px 8px;
    background-color: rgb(52, 152, 219);
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/* ------------------------------------- 8. Testimonials --------------------------------------- */


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.swiper-slide,
.swiper-wrapper,
.swiper-container {}

.swiper-wrapper {
    height: auto !important;
}

.swiper-slide {
    height: auto !important;
    display: table;
}

.content-sw {
    display: table-row;
}

.swiper-container {
    height: auto !important;
}

.pagination {
    position: relative;
}

.swiper-pagination-switch {
    display: inline-block;
    width: 40px;
    height: 7px;
    margin: 0 3px;
    cursor: pointer;
    border: 1px solid #1D96CF;
}

.swiper-active-switch {
    background: #1D96CF;
}

.testimonials-bg {
    background: url(images/testimonials/bg.png) no-repeat center;
}

.testionialsz {
    z-index: 2;
    position: relative;
}

.testimonials-cover {
    position: absolute;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
    pointer-events: none;
}

.testimonial-signature .name,
.testimonial-signature .position {
    display: inline-block;
}

.testimonial-signature .name {
    text-transform: uppercase;
    font-weight: 600;
}

.testimonial-signature .position {
    font-style: italic;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/* --------------------------------------- 9. Our work ----------------------------------------- */


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.black-container {
    background-color: #000;
}


/* Buttons for isotope filter */

.button {
    display: inline-block;
    /* padding: 0.5em 1.0em;*/
    background: #000;
    border: none;
    border-radius: 7px;
    color: #fff;
    font-family: sans-serif;
    font-size: 10.5px;
    cursor: pointer;
}

.button:hover {
    background-color: #63151D;
}

.button:active,
.button.is-checked {
    background-color: #63151D;
}

.button.is-checked {
    color: white;
}

.button:active {}

.button-group {
    display: inline-block;
    float: right;
}

.button-group:after {
    content: '';
    display: block;
    clear: both;
}

.button-group .button {
    border-radius: 0;
    margin-left: 0;
    margin-right: 1px;
}

.button-group .button:first-child {}

.button-group .button:last-child {}


/* ISOTOPE */

.isotope {
    border: none;
    transition: height 0.5s ease-in-out;
}


/* Clear fix */

.isotope:after {
    content: '';
    display: block;
    clear: both;
}


/* Isotope element */

.element-item {
    position: relative;
    float: left;
    width: 135px;
    height: 185px;
    color: #7f7f80;
    border: 1px solid #000;
    overflow: hidden;
    cursor: pointer;
}

.element-item img {
    position: absolute;
    top: -9999px;
    left: -9999px;
    right: -9999px;
    bottom: -9999px;
    margin: auto;
    max-width: none;
    transition: transform 0.5s ease;
}

.gallery_thumb:hover {
    opacity: 0.5;
}

.element-item span {
    pointer-events: none;
}

.portf-hover {
    opacity: 0;
    background-color: #fff;
    color: #1d96cf;
    height: 100%;
    font-weight: 600;
    text-align: center;
    z-index: 99;
    font-size: 18px;
    cursor: pointer;
}

.work-title-hover {
    color: #fff;
    background: #C70317;
    padding: 3px;
    float: left;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    font-weight: 500;
    cursor: pointer;
    text-transform: uppercase;
}

.element-item > * {
    margin: 1px;
}


/* Width and height of isotope elements - classes */

.one-small-landscape {
    width: 20%;
    height: 185px;
}

.two-small-portrait {
    width: 10%;
    height: 185px;
}

.three-big-landscape {
    width: 40%;
    height: 370px;
}

.four-big-portrait {
    width: 20%;
    height: 370px;
}

.long-landscape {
    width: 30%;
    height: 185px;
}

.isotope .element-item {
    margin: 0;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/* ----------------------------------- 9.1. Portfolio part ------------------------------------- */


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.circle {
    background-color: rgba(0, 0, 0, 0);
    border: 5px solid rgba(0, 183, 229, 0.9);
    opacity: .9;
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-radius: 50px;
    box-shadow: 0 0 35px #2187e7;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    -ms-animation: spinPulse 1s infinite ease-in-out;
    -moz-animation: spinPulse 1s infinite ease-in-out;
    -webkit-animation: spinPulse 1s infinite linear;
}

.circle1 {
    background-color: rgba(0, 0, 0, 0);
    border: 5px solid rgba(0, 183, 229, 0.9);
    opacity: .9;
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-radius: 50px;
    box-shadow: 0 0 15px #2187e7;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    margin-top: 10px;
    position: relative;
    top: -50px;
    -ms-animation: spinPulse 1s infinite ease-in-out;
    -moz-animation: spinoffPulse 1s infinite linear;
    -webkit-animation: spinoffPulse 1s infinite linear;
}

@-moz-keyframes spinPulse {
    0% {
        -moz-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #2187e7;
    }
    50% {
        -moz-transform: rotate(145deg);
        opacity: 1;
    }
    100% {
        -moz-transform: rotate(-320deg);
        opacity: 0;
    }
}

@-moz-keyframes spinoffPulse {
    0% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spinPulse {
    0% {
        -webkit-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #2187e7;
    }
    50% {
        -webkit-transform: rotate(145deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotate(-320deg);
        opacity: 0;
    }
}

@-webkit-keyframes spinoffPulse {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@-ms-keyframes spinPulse {
    0% {
        -webkit-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #2187e7;
    }
    50% {
        -webkit-transform: rotate(145deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotate(-320deg);
        opacity: 0;
    }
}

@-ms-keyframes spinoffPulse {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
    ;
}

@keyframes spinPulseIe {
    0% {
        transform: rotateZ(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #2187e7;
    }
    50% {
        transform: rotateZ(145deg);
        opacity: 1;
    }
    100% {
        transform: rotateZ(-320deg);
        opacity: 0;
    }
}

@keyframes spinoffPulseIe {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}

.circle {
    animation-name: spinPulseIe;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.circle1 {
    animation-name: spinoffPulseIe;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.portf-one,
.portf-two {
    top: 0;
    left: 0;
    position: absolute;
    z-index: 1040;
    width: 100%;
    background: #000000;
    min-height: 101vh;
    display: none;
}

.close-port {
    cursor: pointer;
}

.font-ico {
    cursor: pointer;
}

.portff {
    display: none;
}

.portfolio-content {
    display: none;
}

.portfolio-head {
    height: 50px;
    background-color: #000;
/*made gallery menu to stay on top*/
    position: relative;
    z-index: 999999999999999;
}

.work-title {
    line-height: 50px;
    font-size: 24px;
    font-weight: 800;
    float: left;
    margin-left: 10%;
    text-align: left;
    color: red;
}

.portfolio-nav {
    line-height: 50px;
    font-size: 2em;
    float: right;
    width: 136px;
    text-align: right;
    margin-right: 10%;
}

.font-ico {
    font-size: 30px;
    color: #ffffff;
}

.portfolio-descp {
    text-align: left;
}


/*.description-block {
    background: #000;
    border-bottom: 3px solid #2d2d2d;
    border-top: 1px solid #181818;
}*/

.descp-title {
    background: #000;
    padding: 5px;
}

.inline-display {
    display: inline;
}

.author-port {
    background: #000;
    line-height: 80px;
    font-weight: 500;
    border-top: 1px solid #181818;
    border-right: 1px solid #181818;
}

.port-prop {
    background: #000;
    line-height: 80px;
    border-top: 1px solid #181818;
    font-weight: 500;
    text-align: left;
    padding-left: 40px;
}

.aut-title {
    float: left;
    line-height: 80px;
    padding: 0 0 0 40px;
}

.aut-text {
    line-height: 80px;
    color: #737373;
    text-align: left;
    padding-left: 40px;
}

.border-bott {
    border-bottom: 3px solid #2d2d2d;
}

.text-portf {
    color: #737373;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/* -------------------------------------- 10. Our clients -------------------------------------- */


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.item > .col-xs-2 > img {
    max-width: 100% !important;
}

.carousel-inner {
    width: 90%;
    margin-left: 5%;
}

.carousel-inner>.item {
    vertical-align: middle;
    width: 100%;
    height: 100%;
    transition: left 1.2s ease 0s;
    overflow: hidden;
}

.carousel-inner > .item > img {
    margin: 0 auto;
}

.item,
.mini-item {
    background-color: #000;
}

.carousel-control.left,
.carousel-control.right {
    margin-left: 0;
    color: #737373;
}

.carousel-control .next-left:hover,
.carousel-control .next-right:hover:hover {
    color: #1D96CF;
}

.carousel-control.left {
    text-align: left;
}

.carousel-control.right {
    text-align: right;
}

.client-arr {
    font-size: 36px;
}

.carousel {}

.carousel.slide img {
    width: auto;
}

.carousel-inner .active.right {
    left: 16.67%;
}

.carousel-inner .active.left {
    left: -16.67%;
}

.carousel-inner .next {
    left: 16.67%;
}

.carousel-inner .prev {
    left: -16.67%;
}

.carousel-control {
    width: 5%;
    height: 100%;
    opacity: 1;
}

.carousel-control.left,
.carousel-control.right {
    background-image: none;
}

.next-left {
    position: relative;
    top: 50%;
    margin-top: -18px;
}

.next-right {
    position: relative;
    top: 50%;
    margin-top: -18px;
}

.img-holder {
    height: 100%;
    vertical-align: middle;
}

.img-responsive {
    margin: auto;
}

.carousel-inner > .item {}

.carousel-inner>.item>img {
    margin: 0 auto;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/* --------------------------------------- 11. Contact ----------------------------------------- */


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

#contact_parent {
    height: 100%;
    background: url('images/bcg_slide-6.jpg') no-repeat 0% 50% fixed;
    background-size: cover;
    color: white;
    min-height: 100vh;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    border: none;
    border-radius: 0;
    background: #000000;
    color: #808080;
    font-size: 16px;
    line-height: 24px;
    padding: 22px;
    margin: 4px 0;
    resize: none;
    outline: none;
}

.contact-form p {}

button.contact-btn {
    border: 1px solid #1D96CF;
    font-size: 26px;
    line-height: 26px;
    padding: 15px 30px;
    background: transparent;
    border-radius: 0;
    color: #1D96CF;
    font-weight: 600;
    margin-top: 24px;
}

button.contact-btn:hover {
    background: #1D96CF;
    color: #fff;
}

.contact-list li {
    margin-top: 20px;
}

.contact-list li i {
    color: #1D96CF;
    padding-right: 6px;
}

.contact-font {
    color: #808080;
}


/* Map */

.google-map {
    width: 100%;
    height: 450px;
    border: none;
}

#map {
    width: 100%;
    height: 500px;
}

#myInfobox {
    color: #1d96cf;
    background: transparent;
    font-size: 26px;
    min-width: 250px;
    font-weight: 500;
    text-align: justify;
    font-weight: 500;
}

#textGM {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/* --------------------------------- 12. Blog section/archive ---------------------------------- */


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.single-post-wrapper {
    margin-top: 20px;
}

.single-post-wrapper img {
    max-width: 100% !important;
}

.single-post-wrapper .autor-data img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 12px;
}

.post-arch-title {
    margin-left: 102px;
    display: table;
    padding-right: 12px;
}

.post-arch-title a {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    display: table-cell;
    vertical-align: middle;
}

.post-headline {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    left: 100px;
    position: absolute;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    overflow: hidden;
}

.post-data {
    position: relative;
    background: #4b4949;
    border-bottom: 6px solid #010101;
    color: #fff;
}

.post-data .date-posted {
    float: left;
    background: #1D96CF;
    padding: 22px;
    padding-top: 26px;
    font-weight: 600;
    min-height: 108px;
}

.post-data .date-posted .date {
    font-size: 38px;
    line-height: 38px;
}

.post-data .date-posted .month-year {
    font-size: 12px;
    line-height: 16px;
}

.autor-data {
    background: #131313;
    padding: 16px 36px;
    font-weight: 600;
}

.autor-data.text-block > span {
    color: #808080;
}

.blog-pagination {
    display: inline-block;
}

.page-btn {
    background-color: #4b4b4b;
    border: none;
    height: 35px;
    width: 35px;
    font-weight: 600;
    transition: all 0.8s ease 0s;
    margin-right: 5px;
    outline: none;
}

.page-btn:hover {
    background-color: #1d96cf;
    color: #000;
}

.page-btn-next {
    background-color: #000;
    color: #1d96cf;
    border: none;
    height: 35px;
    width: 35px;
    outline: none;
}

.page-btn-next:hover {
    background-color: #1d96cf;
    color: #000;
}

.next-font {
    font-size: 16px;
}


/*Sidebar blog on*/

.sidebar {
    padding-top: 68px;
}

.blog-search-form {
    border: 1px solid #181818;
}

.blog-search-form input {
    width: 100%;
    box-shadow: none;
    border-radius: 0;
    border: none;
    font-size: 22px;
    line-height: 36px;
    padding: 16px 92px 16px 24px;
    background: #131313;
    outline: none;
    font-weight: 400;
    color: #808080;
}

.submit-button {
    position: absolute;
    top: 0;
    right: 0;
    background: #1D96CF;
    border: none;
    line-height: 15px;
    padding: 26px;
}

.main-headline {
    padding: 22px;
    background: #1D96CF;
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
}

.horizontal-transparent-bg {
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
}

.categories-wrapper {
    border: 1px solid #181818;
}

.categories-list li a {
    padding: 24px 36px;
    background: #1b1b1b;
    color: #a7a7a7;
    display: block;
    position: relative;
}

.categories-list li:nth-child(odd) a {
    background: #131313;
}

.posts-in-category {
    position: absolute;
    top: 33px;
    right: 24px;
    padding: 8px 12px;
    background: #4B494A;
    font-weight: 800;
    color: #808080;
    font-size: 24px;
    line-height: 24px;
}

.categories-wrapper {
    margin-top: 12px;
}

.categories-list li a:hover h4 {
    color: #1D96CF;
}

.categories-list li a:hover .posts-in-category {
    background: #1D96CF;
    color: #fff;
}

.popular-widget ul.nav-tabs {
    border: none;
    background: #131313;
}

.popular-widget {
    border: 1px solid #181818;
}

.fadeStat {
    opacity: 0;
    transition: opacity 1.15s linear;
}

.myFade {
    opacity: 1;
}

.popular-widget ul li a {
    background: transparent;
    color: #808080;
    margin: 0;
    border: none;
    border-radius: 0;
    font-size: 17px;
    line-height: 18px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 24px 0px;
}

.popular-widget ul li {
    margin: 0;
    border: none;
    text-align: center;
}

.popular-widget ul.nav-tabs > li > a:hover {
    margin: 0;
    border-radius: 0;
    border: none;
    background: #1D96CF;
    color: #fff;
}

.popular-widget ul.nav-tabs > li.active > a,
.popular-widget ul.nav-tabs > li.active > a:hover,
.popular-widget ul.nav-tabs > li.active > a:focus {
    color: #fff;
    background: #1D96CF;
    border: none;
    border-radius: 0;
}

.popular-widget ul li.special-separator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 6px;
    width: 100%;
    float: none;
    background: rgba(0, 0, 0, 0.2);
}

.single-img {
    height: 103px;
    position: relative;
    width: 120px;
    float: left;
    background: #152a3b;
    z-index: 2;
    overflow: hidden;
}

.single-popular-w img {
    float: left;
    display: block;
    cursor: pointer;
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
    max-width: none;
    transition: transform 0.5s ease;
}

.pop-w-info {
    float: left;
    padding-left: 24px;
    padding-top: 12px;
    max-width: 55%;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/* -------------------------------------- 13. Blog post ---------------------------------------- */


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.blog-post {
    background: #181818;
}

.post-data-single {
    background: #4b4949;
    border-bottom: 6px solid #010101;
}

.post-data-single .date-posted {
    float: left;
    background: #1D96CF;
    padding: 22px;
    font-weight: 600;
    margin-right: 12px;
}

.post-data-single .date-posted .date {
    font-size: 38px;
    line-height: 38px;
}

.post-data-single .date-posted .month-year {
    font-size: 12px;
    line-height: 16px;
}

.post-headline-single-post {
    font-size: 36px;
    line-height: 38px;
    padding-right: 10px;
    padding-bottom: 10px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    word-wrap: break-word;
    display: block;
}

.font-grey {
    color: #a7a9ac;
    height: 52px;
}

.dark-grey {
    background-color: #131313;
}

.all-single-prop {
    margin-left: 104px;
    min-height: 98px;
}

.oeh {
    height: 26px;
    display: inline-block;
}

.oeh:hover {
    cursor: pointer;
}

.one-element {
    float: left;
    margin-right: 15px;
    display: block;
    height: 26px;
}

.padd3 {
    padding-right: 3px;
}


/* Post content*/

.post-title {
    padding-top: 16px;
}

.short-post {
    margin-right: 5%;
    margin-left: 5%;
    margin-top: 18px;
    font-size: 18px;
    font-weight: 500;
    color: #a7a7a7;
}

.post-1st-part {
    margin-top: 12px;
    font-size: 16px;
    line-height: 26px;
    font-weight: 300;
    color: #a7a7a7;
}

.post-2nd-part {
    margin-top: 18px;
    font-size: 16px;
    line-height: 26px;
    color: #a7a7a7;
}

.post-quote {
    background-color: #1b1b1b;
    margin-top: 36px;
    font-size: 24px;
    color: #808080;
}

.first-text {
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 36px;
    padding-bottom: 84px;
    font-size: 24px;
    color: #b7b7b7;
    font-weight: 500;
    line-height: 40px;
}

.quote-pic {
    position: absolute;
    font-size: 24px;
    color: #808080;
    padding-left: 5%;
    padding-top: 5%;
}

.quote-font {
    font-size: 96px;
    color: #808080;
    font-weight: 500;
}

.sign-post {
    font-size: 22px;
    color: #808080;
    float: right;
    padding-top: 4%;
}

.end-post {
    padding-bottom: 36px;
    border-bottom: 1px solid #131313;
}


/* Love this post */

.love-btn {
    background: #1077a8;
    height: 58px;
    top: 50%;
    position: relative;
    margin-top: 35px;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.love-left {
    width: 50px;
    top: 50%;
    position: absolute;
    margin-top: -29px;
    background: #1D96CF;
    height: 100%;
    text-align: center;
}

.love-right {
    left: 50%;
    margin-left: -37px;
    margin-top: -11px;
    top: 50%;
    position: absolute;
}

.love-post-likes {
    width: 30px;
    line-height: 14px;
    margin: 0 auto;
    margin-top: -7px;
}

.love-post {
    line-height: 58px;
    top: 50%;
    margin-top: -15px;
    position: absolute;
    left: 50%;
    margin-left: -75px;
}

.love-post-title {
    float: left;
    font-size: 14px;
    line-height: 30px;
    padding-left: 5px;
}


/* Share on social networks */

.share-social li {
    display: inline-block;
    margin-right: -5px;
}

.share-social li a {
    display: block;
    padding: 4px;
}

.share-social li a i {
    font-size: 30px;
    line-height: 30px;
    color: #808080;
}

.share-social li a i:hover {
    color: #1d96cf;
}

.social-icons {
    color: #535353;
    margin-top: 30px;
}

.social-icons ul li a {
    color: #808080;
}

.social-icons ul li a:hover {
    color: #1a6082;
}

.single-author {
    /* About author */
    background-color: #1b1b1b;
    padding-left: 5%;
    padding-right: 5%;
    font-size: 14px;
    font-weight: 700;
    color: #808080;
}

.single-author img {
    max-width: 38px;
    min-width: 38px;
    height: 38px;
    border-radius: 38px;
}


/* Author social icons */

.author-social li {
    display: inline-block;
    margin-right: 10px;
}

.author-social li a {
    display: block;
    padding: 4px;
}

.author-social li a i {
    font-size: 20px;
    color: #808080;
    line-height: 30px;
}


/* Font for post */

.font-post-nav {
    font-size: 24px;
    color: #1d96cf
}

.font-post-nav2 {
    font-weight: 500;
    font-size: 18px;
    color: #1d96cf;
    cursor: pointer;
}

.font-post-nav2 i {
    /* icon font size */
    font-size: 18px;
}

.comm-img img {
    border-radius: 70px;
    height: 70px;
    min-width: 70px;
    max-width: 70px;
}

.comm-title {
    /* Number of comments */
    color: #808080;
    font-weight: 600;
}

.comm-name {
    /* Name, Last name */
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
}

.comm-details {
    /* Comment of post details (Date, time,...) */
    color: #808080;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
}

.comment-post {
    /* Comment of post */
    color: #a7a7a7;
    font-weight: 600;
    font-size: 14px;
}

.comm-separator {
    border-bottom: 3px solid #131313;
    margin-top: 12px;
}

.reply-sep {
    margin-left: -96px;
}

.padding15 {
    padding-left: 15px;
    padding-right: 15px;
}

.reply-all {
    margin-left: 96px;
}

.reply-comment {
    /* Aligning comments*/
    padding-left: 5px;
}

.reply-btn {
    /* REPLY button */
    width: 78px;
    height: 32px;
    background: transparent;
    border: 1px solid #1d96cf;
    color: #1d96cf;
}

.reply-btn:hover {
    background: #1D96CF;
    color: #fff;
}

.reply-padding {
    margin-left: -96px;
}

.leave-reply {
    /* LEAVE A REPLY font */
    color: #fff;
    font-weight: 600;
}

.width-33 {
    width: 33.333%;
}

.twitter-feed {
    /* Title (TWITTER FEED) font */
    color: #a7a7a7;
    font-size: 18px;
    font-weight: 600;
}

.tag-title {
    /* Title (TAGS) font */
    color: #808080;
    font-size: 18px;
    font-weight: 600;
}

.pad-tags {
    /* Aligning tags */
    padding-left: 5%;
    padding-right: 5%;
}

.tags-row .tag-btn {
    font-weight: 600;
}

.tag-btn {
    /* TAG buttons for sidebar */
    color: #181818;
    background: #1d96cf;
    margin: 3px;
    border: 1px #1d96cf solid;
    height: 50px;
    font-size: 18px;
}

.tag-btn:hover {
    background: transparent;
    border: 1px #1d96cf solid;
    transition: color 0.5s ease 0s;
    transition: background-color 0.5s ease 0s;
    color: #1d96cf;
    resize: none;
}

.pad-left0 {
    padding-left: 0px;
}

.popular-widget-single ul.nav-tabs {
    border: none;
    background: #131313;
}

.popular-widget-single ul li a {
    background: transparent;
    color: #808080;
    margin: 0;
    border: none;
    border-radius: 0;
    font-size: 17px;
    line-height: 18px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 24px 0;
}

.popular-widget-single ul li {
    margin: 0;
    border: none;
    text-align: center;
}

.popular-widget-single ul.nav-tabs > li > a:hover {
    margin: 0;
    border-radius: 0;
    border: none;
    background: #1D96CF;
    color: #fff;
}

.popular-widget-single ul.nav-tabs > li.active > a,
.popular-widget ul.nav-tabs > li.active > a:hover,
.popular-widget ul.nav-tabs > li.active > a:focus {
    color: #fff;
    background: #1D96CF;
    border: none;
    border-radius: 0;
}

.popular-widget-single ul li.special-separator {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 6px;
    width: 100%;
    float: none;
    background: rgba(0, 0, 0, 0.2);
}

.width83 {
    width: 83%;
}

.no-left-pad {
    padding-left: 0px;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/* ----------------------------------- 14. Navigation menu ------------------------------------- */


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.logo {
    position: absolute;
    z-index: 123;
    font: 18px verdana;
    color: #6DDB07;
    float: left;
    width: 10%;
    padding-left: 15px;
    top: 5px;
}

.logo-a {
    float: left;
}

.logo a {
    color: #6DDB07;
}

.logo a img {
    max-width: initial;
}

#cssmenu ul {
    margin-top: 0 !important;
}

nav {
    position: relative;
    width: 980px;
    margin: 0 auto;
}

.container1 {
    width: 992px;
    margin-right: auto;
    margin-left: auto;
}

.navcssmenu-cont {
    box-shadow: 0px 3px 5px rgba(80, 80, 80, 0.1);
    background: #000000;
}

.nav-cssmenu {}

#cssmenu ul {}

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #head-mobile {
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

#cssmenu:after,
#cssmenu > ul:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0
}

#cssmenu #head-mobile {
    display: none
}

#cssmenu {
    font-family: sans-serif;
    margin: 0;
    width: auto;
}

#cssmenu > ul > li {
    float: left;
}

#cssmenu > ul > li > a {
    padding: 17px 5px;
    font-size: 12px;
    letter-spacing: 1px;
    text-decoration: none;
    color: #ddd;
    font-weight: 700;
}

#cssmenu > ul > li:hover > a,
#cssmenu ul li.active a {
    color: #fff;
}


/* #cssmenu > ul > li > a:active, #cssmenu > ul > li > a:focus{border-bottom: 1px #1D96CF solid;} */

#cssmenu > ul > li:hover,
#cssmenu ul li.active:hover,
#cssmenu ul li.active,
#cssmenu ul li.has-sub.active:hover {
    -webkit-transition: background .3s ease;
    -ms-transition: background .3s ease;
    transition: background .3s ease;
}

#cssmenu > ul > li.has-sub > a {
    padding-right: 30px;
    cursor: pointer;
}

#cssmenu > ul > li.has-sub > a:after {
    position: absolute;
    top: 22px;
    right: 11px;
    width: 8px;
    height: 2px;
    display: block;
    background: #ddd;
    content: ''
}

#cssmenu > ul > li.has-sub > a:before {
    position: absolute;
    top: 19px;
    right: 14px;
    display: block;
    width: 2px;
    height: 8px;
    background: #ddd;
    content: '';
    -webkit-transition: all .25s ease;
    -ms-transition: all .25s ease;
    transition: all .25s ease
}

#cssmenu > ul > li.has-sub:hover > a:before {
    top: 23px;
    height: 0
}

#cssmenu ul ul {
    position: absolute;
    left: -9999px
}

#cssmenu ul ul li {
    height: 0;
    -webkit-transition: all .25s ease;
    -ms-transition: all .25s ease;
    background: #333;
    transition: all .25s ease
}

#cssmenu ul ul li:hover {
    -webkit-transition: background .6s ease;
    -ms-transition: background .3s ease;
    transition: background .3s ease;
}

#cssmenu > ul > li > a:hover {
    border-bottom: 1px #dd000a solid;
}

#cssmenu li:hover > ul {
    left: auto;
    z-index: 1;
}

#cssmenu li:hover > ul > li {
    height: 35px
}

#cssmenu ul ul ul {
    margin-left: 100%;
    top: 0
}

#cssmenu ul ul li a {
    border-bottom: 1px solid rgba(150, 150, 150, 0.15);
    padding: 11px 15px;
    width: 170px;
    font-size: 12px;
    text-decoration: none;
    color: #ddd;
    font-weight: 400;
}

#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {}

#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
    color: #fff;
    border-bottom: 1px solid #1D96CF;
}

#cssmenu ul ul li.has-sub > a:after {
    position: absolute;
    top: 16px;
    right: 11px;
    width: 8px;
    height: 2px;
    display: block;
    background: #ddd;
    content: ''
}

#cssmenu ul ul li.has-sub > a:before {
    position: absolute;
    top: 13px;
    right: 14px;
    display: block;
    width: 2px;
    height: 8px;
    background: #ddd;
    content: '';
    -webkit-transition: all .25s ease;
    -ms-transition: all .25s ease;
    transition: all .25s ease
}

#cssmenu ul ul > li.has-sub:hover > a:before {
    top: 17px;
    height: 0
}

#cssmenu ul ul li.has-sub:hover,
#cssmenu ul li.has-sub ul li.has-sub ul li:hover {
    background: #363636;
}

#cssmenu ul ul ul li.active a {
    border-left: 1px solid #333
}

#cssmenu > ul > li.has-sub > ul > li.active > a,
#cssmenu > ul ul > li.has-sub > ul > li.active> a {
    border-top: 1px solid #333
}

.centered-icon {
    position: absolute;
    top: 35%;
    left: 35%;
}

.left-search-btn {
    float: left;
}

@media screen and (max-width:991px) {
    .logo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 46px;
        overflow-y: hidden;
        text-align: center;
        padding: 10px 0 0 15px;
        float: none
    }
    .logo a img {
        max-width: initial;
        height: 34px;
    }
    .logo2 {
        display: none
    }
    nav {
        width: 100%;
    }
    .nav-cssmenu {
        width: 100%;
    }
    #cssmenu {
        width: 100%
    }
    #cssmenu ul {
        width: 100%;
        display: none;
    }
    #cssmenu ul li {
        width: 100%;
        border-top: 1px solid #444
    }
    #cssmenu ul li:hover {
        background: transparent;
    }
    #cssmenu ul ul li,
    #cssmenu li:hover > ul > li {
        height: auto
    }
    #cssmenu ul li a {
        width: 100%;
        border-bottom: 1px solid #181818;
    }
    #cssmenu ul ul li a {
        border-bottom: 1px solid #333;
    }
    #cssmenu ul li a:hover,
    #cssmenu ul ul li a:hover {
        border-bottom: 1px solid #1D96CF;
    }
    #cssmenu > ul > li {
        float: none;
    }
    #cssmenu ul ul li a {
        padding-left: 25px
    }
    #cssmenu ul ul li {
        background: #333!important;
    }
    #cssmenu ul ul li:hover {
        background: #363636!important
    }
    #cssmenu ul ul ul li a {
        padding-left: 35px
    }
    #cssmenu ul ul li a {
        color: #ddd;
        background: none;
        width: 100%;
    }
    #cssmenu ul ul li:hover > a,
    #cssmenu ul ul li.active > a {
        color: #fff
    }
    #cssmenu ul ul,
    #cssmenu ul ul ul {
        position: relative;
        left: 0;
        width: 100%;
        margin: 0;
        text-align: left
    }
    #cssmenu > ul > li.has-sub > a:after,
    #cssmenu > ul > li.has-sub > a:before,
    #cssmenu ul ul > li.has-sub > a:after,
    #cssmenu ul ul > li.has-sub > a:before {
        display: none
    }
    #cssmenu #head-mobile {
        display: block;
        padding: 23px;
        color: #ddd;
        font-size: 12px;
        font-weight: 700
    }
    .btn-menu {
        width: 55px;
        height: 46px;
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
        z-index: 12399994;
    }
    .btn-menu:after {
        position: absolute;
        top: 22px;
        right: 20px;
        display: block;
        height: 8px;
        width: 20px;
        border-top: 2px solid #dddddd;
        border-bottom: 2px solid #dddddd;
        content: ''
    }
    .btn-menu:before {
        -webkit-transition: all .3s ease;
        -ms-transition: all .3s ease;
        transition: all .3s ease;
        position: absolute;
        top: 16px;
        right: 20px;
        display: block;
        height: 2px;
        width: 20px;
        background: #ddd;
        content: ''
    }
    .btn-menu.menu-opened:after {
        -webkit-transition: all .3s ease;
        -ms-transition: all .3s ease;
        transition: all .3s ease;
        top: 23px;
        border: 0;
        height: 2px;
        width: 19px;
        background: #fff;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg)
    }
    .btn-menu.menu-opened:before {
        top: 23px;
        background: #fff;
        width: 19px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg)
    }
    #cssmenu .submenu-button {
        position: absolute;
        z-index: 99;
        right: 0;
        top: 0;
        display: block;
        border-left: 1px solid #444;
        height: 46px;
        width: 46px;
        cursor: pointer
    }
    #cssmenu .submenu-button.submenu-opened {
        background: #262626
    }
    #cssmenu ul ul .submenu-button {
        height: 34px;
        width: 34px
    }
    #cssmenu .submenu-button:after {
        position: absolute;
        top: 22px;
        right: 19px;
        width: 8px;
        height: 2px;
        display: block;
        background: #ddd;
        content: ''
    }
    #cssmenu ul ul .submenu-button:after {
        top: 15px;
        right: 13px
    }
    #cssmenu .submenu-button.submenu-opened:after {
        background: #fff
    }
    #cssmenu .submenu-button:before {
        position: absolute;
        top: 19px;
        right: 22px;
        display: block;
        width: 2px;
        height: 8px;
        background: #ddd;
        content: ''
    }
    #cssmenu ul ul .submenu-button:before {
        top: 12px;
        right: 16px
    }
    #cssmenu .submenu-button.submenu-opened:before {
        display: none
    }
    #cssmenu ul ul ul li.active a {
        border-left: none
    }
    #cssmenu > ul > li.has-sub > ul > li.active > a,
    #cssmenu > ul ul > li.has-sub > ul > li.active > a {
        border-top: none
    }
    .search-button-trigger {
        position: relative;
        float: right;
        width: 100%;
        height: 46px;
        border-top: 1px solid #444;
    }
    .centered-icon {
        position: absolute;
        padding-left: 20px;
        left: 0%;
    }
    .dispB {
        display: block !important;
    }
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/* -------------------------------------- SEARCH QUERIES --------------------------------------- */


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.date-posted-search {
    float: left;
    color: #525252;
}

.date-search {
    font-size: 36px;
    font-weight: 500;
    line-height: 36px;
}

.month-year-search {
    font-size: 12px;
    font-weight: 500;
}

.search-title {
    font-size: 24px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 24px;
}

.autor-data-search {
    font-weight: 500;
    color: #525252;
}

.autor-data-search img {
    height: 24px;
    width: 24px;
    border-radius: 24px;
}

.search-separator {
    background: #000;
    margin-top: 10px;
}

.search-results {
    color: #525252;
    font-size: 16px;
    font-weight: 500;
}

.some-results {
    padding-top: 5px;
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    text-transform: uppercase;
}

.search-queries {
    margin-left: 100px;
    margin-bottom: 48px;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/* ----------------------------------------- 404 PAGE ------------------------------------------ */


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.blog-search-form-404 input {
    width: 100%;
    box-shadow: none;
    border-radius: 0;
    border: none;
    font-size: 18px;
    line-height: 36px;
    padding: 16px 92px 16px 24px;
    background: #4b4949;
    outline: none;
    font-weight: 400;
    color: #808080;
}

.submit-button-404 {
    position: absolute;
    top: 0;
    right: 0;
    background: #1D96CF;
    border: none;
    line-height: 15px;
    padding: 26px;
}

.text404 {
    padding-top: 48px;
    text-transform: uppercase;
}

.oops {
    font-size: 48px;
    color: #fff;
    font-weight: 900;
}

.you-got {
    font-size: 48px;
    color: #4b4949;
    font-weight: 900;
}

.blue404 {
    line-height: 150px;
    font-size: 148px;
    color: #1D96CF;
    font-weight: 900;
}

.not-exist {
    font-weight: 500;
    font-size: 18px;
}

.go-home-font {
    font-weight: 500;
    font-size: 18px;
}


/* LANDING PAGE */

.landing-bg {
    height: 100%;
    background-image: url("images/bg.png");
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 122px;
}

.smaller-separator {
    width: 80px;
}

.land-item img {
    min-height: 157px;
}

.button-dark,
.button-light {
    outline: none;
}

.button-dark {
    background-color: #1D96CF;
    border: none;
    font-size: 18px;
    line-height: 54px;
    height: 54px;
    width: 222px;
}

.button-light {
    background-color: #e2303b;
    border: none;
    font-size: 18px;
    line-height: 54px;
    height: 54px;
    width: 222px;
}

.landing-text span {
    font-size: 14px;
    font-weight: 500;
}

.second-dland {
    color: #1D96CF;
}

.second-lland {
    color: #e2303b;
}

#calendar {
    background-color: #000000;
    min-height: 100vh;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/* ------------------------------------ 15. Media queries -------------------------------------- */


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

@media all and (max-width: 1200px) {
    #moc_wrapper h2 {
        line-height: 80px;
    }
    #moc_wrapper .intro p {
        padding-right: 10px;
    }
    #evolution_wrapper h2 {
        line-height: 80px;
        font-size: 70px;
    }
    .video_holder {
        padding-right: 70px;
    }
    #cssmenu > ul > li > a {
        padding: 18px 5px;
        font-size: 10px;
    }
}

@media only screen and (max-width: 1010px) and (min-width: 992px) {
    /*FIXIN THE GAP MENU DISAPEARS IN THAT BRACKET*/
    #cssmenu ul {
        display: block !important;
    }
}

@media all and (max-width: 1100px) {
    .video_holder {
        padding-right: 70px;
    }
}

@media all and (max-width: 990px) {
    h2 span {
        line-height: 86px;
    }
    #evolution_wrapper h2 {
        letter-spacing: 4px;
    }
}

@media (max-width: 991px) {
    .responsive-static-img {
        display: block;
    }
    .hiddenn {
        display: none;
    }
    .sidebar {
        /* Sidebar display none */
        display: none;
    }
    .aside {
        padding-top: 48px;
    }
    /* Width and height of isotope elements - classes */
    .one-small-landscape {
        width: 40%;
        height: 185px;
    }
    .two-small-portrait {
        width: 20%;
        height: 185px;
    }
    .three-big-landscape {
        width: 80%;
        height: 370px;
    }
    .four-big-portrait {
        width: 40%;
        height: 370px;
    }
    .long-landscape {
        width: 60%;
        height: 185px;
    }
    .land-items .col-md-3 {
        padding-top: 20px;
    }
    .back {
        visibility: hidden;
    }
}

@media all and (max-width: 830px) {
    .homeoverlay {
        width: initial;
        margin-top: 214px;
        border-top-width: 17px;
        border-top-style: solid;
        border-top-color: rgb(181, 5, 17);
        border-left-width: 0px;
    }
    #c {
        float: none;
        margin-left: 51px;
    }
    #home {
        padding-top: 56px;
    }
    .video_holder {
        z-index: 6;
    }
}

@media (max-width: 767px) {

    #theatre_wrapper .building_bg .row.margin-top60{
        margin-top: 15px;
    }



    .comm-img img {
        border-radius: 40px;
        height: 40px;
        min-width: 40px;
        max-width: 40px;
    }
    .reply-btn {
        margin-left: -15px;
    }
    .reply-all {
        margin-left: 0px;
    }
    .reply-padding {
        margin-left: 0px;
    }
    .reply-sep {
        margin-left: 0px;
    }
}

@media all and (max-width: 660px) {

    #theatre_wrapper .building_bg .row.margin-top60{
        margin-top: 0px;
    }

}



@media all and (max-width: 650px) {
    #moc_wrapper h2 {
        font-size: 74px;
    }
    #evolution_wrapper h2 {
        letter-spacing: 1px;
        font-size: 60px;
    }
    #evolution_wrapper .margin-top60 {
        margin-top: 10px;
    }
}

@media all and (max-width: 615px) {
    #moc_wrapper h2 {
        font-size: 60px;
    }
    #moc_wrapper h2 span {
        line-height: 60px;
    }

    #theatre .intro{
        margin-top: 110px;
    }

}

@media all and (max-width: 560px) {
    /*    #activities_wrapper h2 span {
       line-height: 62px;
    }*/
    #activities_wrapper h2 span {
        font-size: 72px;
    }
    #theatre_wrapper .intro p {
        font-size: 14px;
        line-height: normal;
    }
    .arrow_holder {
        margin-top: 0;
        margin-bottom: 130px;
        padding-top: 30px !important;
    }
}

@media all and (max-width: 530px) {
    #moc_wrapper h2 {
        font-size: 54px;
    }
    #izm_wrapper .padding-bottom48 {
        padding-bottom: 0;
    }
    #izm_wrapper .padding-top72 {
        padding-top: 0;
    }
    #evolution_wrapper h2 {
        letter-spacing: 1px;
        font-size: 49px;
        line-height: -64px;
    }
    #evolution_wrapper h2 span {
        line-height: 51px;
        margin-left: 0;
    }
    #activities_wrapper h2 {
        font-size: 70px;
    }
}

@media all and (max-width: 500px) {
    #activities_wrapper h2 span {
        font-size: 60px;
        line-height: 65px;
    }
}

@media all and (max-width: 490px) {
    #stretch {
        height: 250px !important;
    }
    .video_holder {
        margin-bottom: 200px;
    }
    .eventsCalendar-currentTitle {
        height: 45px !important;
    }
    #workshops .container {
        float: none;
    }
    #workshops .container h2 {
        font-size: 60px;
    }
    #corporate_wrapper h2 {
        font-size: 72px;
    }
    #corporate_wrapper h2 span {
        line-height: 68px;
    }
    div,
    span,
    p,
    button,
    a,
    li {
        font-family: 'Roboto', sans-serif;
        font-size: 14px;
        line-height: normal;
    }
    #staff_wrapper img {
        max-width: 70%;
    }
    #company_wrapper .padding-bottom48 {
        padding-bottom: 15px;
    }
    #company_wrapper .margin-top24 {
        margin-top: 0;
    }
    #company_wrapper .padding-top36,
    #company_wrapper .padding-top24 {
        padding-top: 10px !important;
    }
    #company_wrapper .padding-bottom36 {
        padding-bottom: 10px;
    }
    #company_wrapper .one-about-elem-title {
        font-weight: 700;
        font-size: 25px;
    }
    #staff_wrapper .padding-bottom48 {
        padding-bottom: 15px;
    }
    #staff_wrapper .padding-top60,
    #school_programs_wrapper .padding-top60 {
        padding-top: 15px;
    }
    /*#staff_wrapper .padding-top36{
        padding-top: 0px;
    }*/
    #network_wrapper .padding-top36,
    #funders_wrapper .padding-top36 {
        padding-top: 15px;
    }
    #theatre_wrapper .padding-left60 {
        padding-left: 80px;
    }
    #moc_wrapper h2 {
        font-size: 44px;
    }
    #moc_wrapper h2 span {
        line-height: 44px;
        margin-left: 0;
    }
    #izm_wrapper .first-text {
        padding: 5px;
    }
}

@media all and (max-width: 450px) {
    #evolution_wrapper h2 {
        font-size: 44px;
    }
    #activities_wrapper h2 span {
        font-size: 42px;
        line-height: 45px;
        margin-left: 0px;
    }
    #activities_wrapper .padding-bottom36,
    #activities_wrapper .padding-bottom48 {
        padding-bottom: 10px;
    }
    #activities_wrapper .margin-top60 {
        margin-top: 0px;
    }
    #corporate_wrapper h2 {
        font-size: 62px;
    }
    #corporate_wrapper .padding-bottom36 {
        padding-bottom: 6px;
    }
}

@media all and (max-width: 415px) {
    #theatre_wrapper h2 {
        font-size: 76px;
    }
    #evolution_wrapper h2 {
        font-size: 37px;
        padding-right: 5px;
    }
    #evolution_wrapper .padding-bottom36 {
        padding-bottom: 10px;
    }
    #mediacoverage_wrapper h2 {
        font-size: 62px;
    }
}

@media all and (max-width: 400px) {
    .homeoverlay {
        right: 0;
    }
    h2 {
        font-size: 60px;
    }
    h2 span {
        line-height: 60px;
    }
    #workshops .container h2 {
        font-size: 47px;
    }
    #classes_wrapper {
        padding-left: 0;
    }
    #theatre_nav {
        width: 80%;
    }
    #theatre_wrapper h2 {
        font-size: 56px;
    }
    #moc_wrapper h2 {
        font-size: 39px;
    }
    #moc_wrapper .intro {
        margin-left: 30px;
    }
    #evolution_wrapper .padding-left60 {
        padding-left: 20px;
    }
    #mediacoverage_wrapper h2 span {
        line-height: 70px;
    }
    #corporate_wrapper h2 {
        font-size: 52px;
    }
    #corporate_wrapper span {
        margin-left: 0;
    }
    #theatre .intro {
        margin-top: 100px;
    }

    #theatre_wrapper h2{
        padding-bottom: 23px;
    }
}

@media (max-width: 360px) {
    h4 {
        /* Smaller font sizes for small devices */
        font-size: 12px;
    }
    .comment-post {
        width: 100%;
    }
    #moc_wrapper h2 {
        font-size: 39px;
    }
    #evolution_wrapper h2 {
        font-size: 29px;
    }
    #evolution_wrapper h2 span {
        font-size: 29px;
        line-height: 32px;
    }
    #evolution_wrapper .intro {
        margin-bottom: 0;
        margin-top: 146px;
        margin-left: 30px;
    }
    #mediacoverage_wrapper h2 {
        font-size: 52px;
    }
    #mediacoverage_wrapper h2 span {
        line-height: 50px;
    }
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/* ---------------------------------- 16. Grayscale images ------------------------------------- */


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

img.grayImg {
    filter: url(filters.svg#grayscale);
    /* Firefox 3.5+ */
    filter: gray;
    /* IE6-9 */
    -webkit-filter: grayscale(1);
    /* Google Chrome & Safari 6+ */
}

img.grayImg:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

.grayscale {
    /* Firefox 10+, Firefox on Android */
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
    /* IE 6-9 */
    filter: gray;
    /*
  Chrome 19+,
  Safari 6+,
  Safari 6+ iOS,
  Opera 15+
  */
    -webkit-filter: grayscale(100%);
}

.grayscale.grayscale-fade {
    -moz-transition: filter 1.3s ease-in;
    transition: filter 1.2s ease;
    -webkit-transition: -webkit-filter 1.2s;
    -moz-backface-visibility: hidden;
}

.grayscale.grayscale-off,
.grayscale.grayscale-fade:hover {
    -webkit-filter: grayscale(0%);
    filter: none;
}

.grayscale.grayscale-replaced {
    filter: none;
    -webkit-filter: none;
}

.grayscale-replaced > svg {
    opacity: 1;
    -webkit-transition: opacity 1.2s ease;
    -moz-transition: opacity 1.2s ease;
    -moz-backface-visibility: hidden;
    transition: opacity 1.2s ease;
}

.element-item:hover > .grayscale-replaced > svg,
.grayscale-replaced.grayscale-fade:hover > svg {
    -moz-transition: opacity 1.2s ease;
    ;
    transition: opacity 1.2s ease;
    opacity: 0;
}

@keyframes cf3FadeInOut {
    0% {
        filter: url(filters.svg#grayscale);
    }
    100% {
        filter: none;
    }
}

#cf3 .element-item > img {
    animation-name: cf3FadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-direction: alternate;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/* ---------------------------------- IMAGE GALLERY ------------------------------------- */

.swiper-container1 {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #000000;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper_holder {
    position: relative;
    height: 100%;
    z-index: 9999999;
}

#sorry_gallery,
#izm_gallery,
#mco_gallery,
#evo_gallery {
    height: 124px;
    cursor: pointer;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/