/************** Kristian Lev ****************/
/*colors

green: #b3d335;
black: #000000;
*/

/* RESET CSS
---------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary, time, mark, audio, video
{margin: 0; padding: 0;	border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}

/* HTML5 display-role reset for older browsers
---------------------------------------------------------------------------*/
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none; margin: 0; padding: 0;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {	border-collapse: collapse;	border-spacing: 0; vertical-align: top;}


/* RESET CSS
---------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary, time, mark, audio, video
{margin: 0; padding: 0;	border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}

/* CLEAR
---------------------------------------------------------------------------*/
body:after, .clear:after, .wp1300:after, ul:after, ul li:after {content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden;}

/* BODY -------------------------------------------------------------------------------*/
body {
    width: auto; height: auto; margin: 0; padding: 0;
	color: #222222; font-family: 'Roboto Condensed', sans-serif; font-size: 21px; line-height: normal; letter-spacing: 0px; word-spacing: 0px;
	text-align: left; text-indent: 0px;	font-weight: 300; text-decoration: none; text-transform: none; font-variant: normal; padding-top: 80px;
    
}
html, body{width: 100%; height: 100%}
.wp1300 {min-width: 300px; width: 100%; max-width: 1300px;  margin: 0 auto; padding: 0; position: relative;}
/* LINKS
---------------------------------------------------------------------------*/
a {color: #e31414; text-decoration: none;}
a:visited,
a:active { font-family: inherit; color: #e31414; text-decoration: none;}
a:hover {text-decoration: underline; color: #e31414; }
strong, b {font-weight: bold;}
img {max-width: 100%;}
.default-text-color {color: #222222;}
.col1_3 {width: 33%; float: right;}
.col1_5 {width: 20%; float: left; text-align: center;}

.col2_3 {width: 60%; float: left;}

.col1_2 {width: 55%;}
.col1_2.L {float: left;}
.col1_2.R {float: right;width: 40%;}

.text-center { text-align: center; }

/*header*/
#header {width: 100%; height: auto; /*padding-top: 11px; padding-bottom:8px;*/ background: #141414; border-bottom: 5px solid #ed1c24;}
#header {position: fixed; top: 0; z-index: 9999;}
#header #logo {float: left;}
#nav ul {float: right; margin-top: 40px;}
#nav ul li {float: left; margin-left: 30px;}
#nav ul li a {font-weight: 400; font-size: 17px; color: #fff; text-transform: uppercase;}
#nav ul li.active a,
#nav ul li:hover a {color: #e31414;}

#nav span#openMenu {width: 65px; height: 75px; background:#ed1c24 url(../images/menu.svg) no-repeat center -51px; display: none; text-indent: -123456px;}
#nav span#openMenu:hover,
#nav span#openMenu.open{ cursor: pointer; }

.contact-email { background:#fff url(../images/email-symbol.svg); width: 19px; height: 20px; color: #141414; }
.contact-ig { background:#fff url(../images/ig-instagram.svg); width: 19px; height: 20px; color: #141414; }

#videoSlider {height: 600px; overflow: hidden; position: relative;}
#videoText {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(../images/videoBack.png) repeat 0 0; padding-top: 100px;}
#videoText h1 {font-size: 50px; color: #fff; font-weight: 300; text-transform: uppercase; text-align: center; display: block;}
#videoText h2{font-size: 70px; color: #ed1c24; font-weight: 700;text-transform: uppercase; text-align: center; display: block; margin-top: 50px;}
#videoText span#line {width: 1px; height: 65px; margin: 40px auto;  display: block; /*background: #fff;*/ }
#videoText a#more {width: 170px; height: 55px; line-height: 55px; color: #fff; text-decoration: none; margin: 0 auto; display: block; text-align: center; border: 3px solid #fff;} 
#videoText a#more:hover {border: 3px solid #ed1c24;}
span#notice {background: #e31414; color: #fff; display: block; width: 100%; text-align: center; padding: 15px 0;}

/*treningi*/
#training {width: 100%; /* background: url(../images/leftMan.png) no-repeat left bottom;*/}
#training #rightImage{ /*background: url(../images/rightMan.png) no-repeat right bottom;*/}
#training .wp1300 {min-height: 380px; padding-top: 60px;}
#training .wp1300 h1 {font-size: 30px; font-weight: 300; text-align: center; margin: 40px 0; margin-top: 0;}
#training .wp1300 h1 span {color: #ed1c24; font-weight: 400;}
#training .wp1300 ul {margin-bottom: 60px;}
#training .wp1300 ul li {float: left; width: 25%;}
#training .wp1300 ul li .time {width: 180px; font-size: 25px; display: block; padding: 20px; text-align: center; background: #212020; color: #fff; margin: 0 auto;}
#training .wp1300 ul li:nth-child(2) .time,
#training .wp1300 ul li:last-child .time {background: #ed1c24;}
#training .wp1300 ul li .time span {font-size: 20px; margin-bottom: 20px; display: block;}

#training .wp1300 .col1_2 {width: 50%; float: left; padding: 50px; padding-top: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
#training .wp1300 .col1_2 h2 {font-size: 25px; color: #ed1c24; margin-bottom: 5px;}
#training .wp1300 .col1_2:first-child {border-right: 1px solid #212020;}

#contact {text-align: center; font-size: 20px; background: #212020; color: #fff; margin-bottom: 20px;}
#contact span {display: block; padding: 10px;}
#contact span strong {color: #fff;}

#training span#notice2 {font-style: italic; font-size: 15px;}
#training span#notice2 strong {color: #ed1c24;}
#contact.red {background: #ed1c24;}

#contact2 {text-align: center; font-size: 35px; border-top: 1px solid #212020; border-bottom: 1px solid #212020; margin: 0 50px; padding: 20px 0;}
#contact2 span {display: block; margin-bottom: 10px;}

/*geroge*/
#george {width:100%; height: 400px; padding-top: 60px; background: url(../images/george.jpg) no-repeat top center; background-size: cover;}
#george ul {width: 50%; float: right;}
#george ul li {color: #fff;  font-size: 30px; margin-bottom: 10px; list-style-type: disc; margin-left: 28px;}
#george ul li#title {font-size:50px; color: #fff; font-weight: 400; margin: 0; padding: 0; background: none;margin-bottom: 25px; list-style-type: none;}
#george ul li#title span {font-size: 30px;}

#aboutGeorge {padding-top: 50px;}
#aboutGeorge ul {list-style-type: disc; margin: 30px 0;}
#aboutGeorge ul li {margin-left: 20px;}
#aboutGeorge strong {display: block; text-align: center; }
#aboutGeorge strong span.red {color: #ed1c24; font-size: 30px; line-height: 45px; font-weight: 300; }

span#ostaliTekmovalci {width: 450px; display: block; margin: 30px auto; border: 3px solid #212020; background: #212020; padding: 20px 0; text-align: center;color: #fff;}
span#ostaliTekmovalci:hover {text-decoration: none; background: none; border: 3px solid #212020; color: #212020; cursor: pointer;}
#gray {background: #f6f6f6; padding: 40px 0; display: none;}
#gray h1 {font-size: 30px; font-weight: 300; text-align: center; margin: 60px 0; margin-top: 0;}


#gray ul {margin-bottom: 30px; width: 45%; float: left; }
#gray ul:nth-child(2n+1) {clear: both;}
#gray ul.R {float: right}
#gray ul li {list-style: disc; margin-left: 20px;}
#gray ul li.name {list-style-type: none; margin-left: 0; color: #ed1c24; text-transform: uppercase;}

.info-line {text-align: center; font-size: 20px; margin: 0 50px; padding: 20px 0;}
.box .col1_2 {width: 50%; float: left; padding: 50px;  box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
.box .col1_2 .wrapperBox {border: 3px solid #212020; padding: 20px;min-height: 180px; text-align: center;}
.box .col1_2 .wrapperBox.red {border: 3px solid #ed1c24;}
.box .col1_2 .wrapperBox h2 {font-weight: 700; margin-bottom: 10px; font-size: 27px;}
.box .col1_2 .wrapperBox.red h2 {color: #ed1c24}

.box .col1_1 {width: 100%; float: left; padding: 50px;  box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}

.margin-bottom-5 { margin-bottom: 5px; }
.margin-bottom-15 { margin-bottom: 15px; }

#map {width: 100%; height: auto;}
/* RESPONSIVE
---------------------------------------------------------------------------*/

.video-container {
    overflow: hidden;
    position: relative;
    width:100%;
	margin-bottom:50px;
}

.video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*responsive 1100px */



@media all and (max-width : 1700px) {
    #topTitle,
    #topTitle2 {background: rgba(255,255,255,0.7);}
    

}

@media all and (max-width : 1550px) {
    /*#training #rightImage {background: url(../images/rightMan.png) no-repeat right 280px; background-size: 150px;}   
    #training {background: url(../images/leftMan.png) no-repeat left 280px; background-size: 150px;}   */
    

}

@media all and (max-width : 1370px) {
    #videoSlider video {margin-top: 0!important;}
    }

@media all and (max-width : 1310px) {
    .col1_2 {width: 53%;}
    .col1_2.R {float: right;width: 45%;}
    
    .wp1300 {width: 95%}
    #header .wp1300,
    #training .wp1300 {width: 100%;}

}


@media all and (max-width : 1160px) {
    .col1_2 {width: 100%; float: none}
    .col1_2.R {float: none;width: 100%;}
    
    #videoSlider { height: 460px}
    #videoText {padding-top: 50px;}
    #videoText h1 {font-size: 40px;}
    #videoText h2 {font-size: 60px; margin-top: 20px;}
    
    #george {background: url(../images/george.jpg) no-repeat -220px top; padding-top: 20px;}
    #george ul li#title {font-size: 40px;}
    #george ul li {font-size: 21px;}

}

@media all and (max-width : 950px) {
    #training .wp1300 h1 {margin-bottom: 30px;}
    #training .wp1300 {padding-top: 30px;}
    #training .wp1300 ul li {width: 50%; margin-bottom: 30px;}
   /* #training #rightImage {background: url(../images/rightMan.png) no-repeat right 360px; background-size: 150px;}   
    #training {background: url(../images/leftMan.png) no-repeat left 360px; background-size: 150px;}  */ 
    #training .wp1300 .col1_2,
    .box .col1_2 {width: 100%;}
    .box .col1_2 {padding-top: 0;}
    .box .col1_2:first-child {padding-top: 50px;}

}

@media all and (max-width : 900px) {
    #header {padding: 0;}
    #header #logo {margin-top: 10px; margin-bottom: 5px; margin-left: 10px;}
    #nav span#openMenu  {display: block; float: right;}
    #nav ul#openMenuToggle {display: none;}
    #nav ul {width: 250px; position: absolute; top: 65px; right: 0; background: #ed1c24;}
    #nav ul li {float: none; margin: 0; text-align: right; padding: 10px 20px; border-bottom: 1px solid #f03e45;}
    #nav ul li:last-child {border: none;}
    #nav ul li:hover,
    #nav ul li.active {background: #212020;}
    #nav ul li a {display: block;}
    }

@media all and (max-width : 850px) {
    #videoSlider video {margin-top: 40px;}
    #videoSlider { height: auto}
    #videoText span#line {height: 35px; margin: 20px auto;}

}
@media all and (max-width : 800px) {
  #topTitle {font-size: 40px; padding: 12px 0;}
  
  #george {padding-top: 480px; height: auto;}
  
  #george ul {width: 100%; float: none;}
  #george ul li#title {color: #ed1c24;}
  #george ul li {color: #222222;}
  #aboutGeorge {padding-top: 10px;}

}


@media all and (max-width : 740px) {
    .ui-tabs .ui-tabs-nav li ,
    .ui-tabs .ui-tabs-nav .ui-tabs-anchor{float: none !important; display: block;}
    .ui-tabs .ui-tabs-nav li{margin-bottom: 10px !important;}
    
    .ui-tabs .ui-tabs-nav {width: auto !important; max-width: 695px; width: 90% !important; padding: 0 !important;}
    
    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {border: 1px solid #dddddd !important;text-align: center !important;}
    .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {border: 1px dotted #e31414 !important;}

    #gray ul {margin-bottom: 30px; width: auto; display: block; float: none; margin-left: 20px;}
    #gray ul.R {float: none;}
}


@media all and (max-width : 630px) {
    #topTitle {font-size: 25px; font-weight: 400; padding: 12px 0; top: 0;padding-top: 20px;}
    #topTitle2 {font-size: 20px; top: 98px;}
    #videoText span#line, 
    #videoText a#more {display: none;}
}

@media all and (max-width : 550px) {
    #videoText h1 {font-size: 30px;}
    #videoText h2 {font-size: 40px;}
    #training .wp1300 ul li {width: 100%; margin-bottom: 30px; float: none;}
    #training .wp1300 ul li .time {width: auto; padding: 15px; display: block; font-size: 20px;}
    #training .wp1300 ul li .time span {display: inline-block;  margin: 0;}
    #training .wp1300 ul li {margin: 0;}
    #training .wp1300 ul {margin-bottom: 30px;}
    #training #rightImage {background: none;}   
    #training {background: none;}   
    #contact {margin-bottom: 30px;}

}

@media all and (max-width : 500px) {
    span#ostaliTekmovalci {width: 290px; line-height: 30px;}    
    #george { background: url(../images/george.jpg) no-repeat -100px top; padding-top: 20px; background-size: auto 300px; padding-top: 320px;}


}
@media all and (max-width : 400px) {
    #header #logo {width: 230px}
    #header #logo img { margin-top: 6px;}
    
    #george { background: url(../images/george.jpg) no-repeat -150px top; padding-top: 20px; background-size: auto 300px; padding-top: 320px;}
}


/*fade in page*/
body{
    animation: fadein 1s;
    -moz-animation: fadein 1s; /* Firefox */
    -webkit-animation: fadein 1s; /* Safari and Chrome */
    -o-animation: fadein 1s; /* Opera */
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}