body{font-family:'Oswald', sans-serif;}

 body ul li{ font-size: 14px; line-height: 24px !important; }



#mainHeader{width: 100%;
    height: 70px;
    min-height: 70px;
    color: #757575;
    padding: 1rem 0;
    position: absolute;
    z-index: 50;}

#headLine01{top: 10%; left:-63%;} /*  final left: 7%; ** gorro right: -370px;*/
#headLine01 h6{color: #2662a6; }

#headLine02{bottom: 14%; right: -63%;} /* final right: 7%; ** gorro top: -58%; right: 310px; */
#headLine02 h6{color:#8e14b8; }

#headLine03{bottom:13%; left: -63%;} /* final left: 9%; ** gorro top: -45%; right: -330px; */
#headLine03 h6{color: #ff9f11; }

.descriptioncard{display: block; width: 480px; position: absolute; background-color: #fff; padding: 1rem 1.5rem; z-index: 50;}
.descriptioncard p{font-size: 1.25rem; color: #374443;}

#mainHeader.fix-mainNav{ position: fixed; z-index: 55; top: -6px; background-color: #313140;}
#mainHeader.fix-mainNav #logo img{ height: 82%; }

#mobileico{ position: absolute; right:1.5rem; top: 1rem; color:#fff; cursor: pointer; }
#mobileico i{ font-size:40px; }

.menuList{overflow: hidden; width:380px; position: absolute; right: 0; margin-top: 8px;}


#logo{ position: absolute; left:1.5rem; top: 1rem; height: 46px;}
#logo img{ height: 100%; -webkit-transition: height .5s; transition: height .5s;}


#topMain{ padding: 70px 0 2rem 0; background-color:#F6F6F6; height:740px; position: relative; overflow: hidden; background-image: url(../img/backmain.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat;}


.top-ico{ width: 24px;} 

.topmain-text{ width: 60%; float: left;}
.topimg{ /*background-image: url(../img/main-top-image.png);*/ position: relative;}
.topimg img{ width: 100%; }

.numberone{ position: absolute; margin: 0 auto; left:0; right:0; top:0; width:700px; height: 100%;
background-image: url(../img/onepainted.png); background-repeat: no-repeat; background-position: center 30%; /*background-attachment:fixed;*/ background-size: 80% auto;
}

.logoonblue{position: absolute;
    color: #fff;
    top: 40%;
    width: 400px;
    right: 2rem;}

.logoonblue img{ width: 150px;}
.logoonblue p{ font-size: 28px; line-height: 38px; }

/*.numberone img{ width: 100%;}*/

#continueDown{ position:absolute; width:80px; height:80px; bottom:1rem; right:0; left: 0; margin: 0 auto; cursor:pointer; display: block; opacity: 1;
background-image: url(../img/arrowDown.png); background-repeat: no-repeat; background-position: 50% 0%; background-size: 60px;
-webkit-animation: goDown 1.35s infinite linear; /* Safari 4+ */
-moz-animation:    goDown 1.35s infinite linear; /* Fx 5+ */
-o-animation:      goDown 1.35s infinite linear; /* Opera 12+ */
animation:         goDown 1.35s infinite linear; /* IE 10+, Fx 29+ */
}



@-webkit-keyframes goDown {
  0% {
    background-position: 50% 0%;
  }
  50% {
    background-position: 50% 15px;
  }
  100% {
    background-position: 50% 0%;
  }
}
@keyframes goDown {
  0% {
    background-position: 50% 0%;
  }
  50% {
    background-position: 50% 15px;
  }
  100% {
    background-position: 50% 0%;
  }
}

#videosection{ width: 100%; position: relative; max-height: 100vh; overflow: hidden;}

.miniInfoVideo { margin-top: 4rem;}
.allYouNeed{ font-size: 26px; text-align: center; color: #1c2f4e; }
.allYouNeed span{ text-decoration: underline; }

.flexFix{ display: flex;}
.celtoFlex{ flex: 1; line-height: 0;}
.celtoFlex img{ width: 100%; line-height: 0; font-size: 0;}

.mailBtn{ position: fixed; left: 0; top: 20%; width:50px; height:50px; background-color:#d74838; cursor: pointer; z-index: 99; display: none;}
.mailBtn a{ display: block; width: 100%; height: 100%; color: #fff; text-align: center;}
.mailBtn a .material-icons{ font-size: 40px; line-height: 50px;}

/*#aboutUs{ width: 100%; position: relative; height: 90vh; overflow: hidden; 
    background-image: url(../img/blueguy-splash.png), url(../img/whiteTextile.png); 
    background-position: left bottom, left center; 
    background-repeat: no-repeat; 
    background-size: auto 90%, contain; 
    padding-top: 4rem;  }*/

#aboutUs{ width: 100%; position: relative; ,min-height: 90vh; overflow: hidden; 
    background-image: url(../img/whiteTextile.png); 
    background-position: left center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    padding-top: 4rem;  }

#aboutUs .limitCont .row{ margin-bottom: 0;}

.aboutCard{ width: 80%; margin: 0 auto; background: #fff; padding: 2.5rem 1.5rem;}

.bluesection{ width: 100%; height: 100%;  background-color: #001328; position: absolute; top: 0; left: 0; z-index: 10; display: none;
/*background-image: url(../img/blueandwhite.png);*/ background-repeat: repeat-x; background-size: contain;
}
.guycontent{ width: 100%; height: 100%; position: relative;}
.blueguy{ position: absolute; bottom: 0; width: 80%;}

.redLine{height: 250px; width: 100%; position: absolute; top: calc(50% - 125px); /*background-image: url(../img/bckgrd-red.png);  background-position: center; background-attachment: fixed;*/ }
.cont-reset{ width: 100%; height: 100%; position: relative;}
.diago{width: 100%; height: 100%; margin: 0 auto; background-image: url(../img/diago.png); background-repeat: no-repeat; background-position: center; }
.darkredline{ height: 6px; width: 100%; position: absolute; top: 0; background-color: #730303; }
.bluecap{position: absolute; top: -8%; height: 300px; z-index: 10; margin: 0 auto; left: 0; right: 0; width:456px;}
.bluecap img{ width: 100%; }

#videoGallery{min-height: 200px; height: auto; width: 100%; background-color:#f9f9f9; background-image:url(../img/background-b.jpg); background-position:center; background-size:cover; padding:4rem 0;}
/*.videoList .col iframe{ width: 100%; height: auto; }*/

#section3{ padding: 10rem 2rem 2rem 2rem;}
#section3 .row{ margin-bottom:6rem;}
#section3 p{ font-size: 34px; width: 90%;}


#singleCircle{ width: 400px; height: 400px; margin: 0 auto; background-image: url(../img/circlelines.png); background-position: center; background-repeat: no-repeat; background-size: contain; position: relative;}

#capIndex{position: absolute; top:0; left:0; width:370px; height:370px; margin: 0 auto; background-image: url(../img/indexCap.png); background-position: center; background-repeat: no-repeat; background-size: contain; z-index: 20; }


.singleRing{ width: 300px; height:300px; border-radius: 50%; border: solid 26px #0189C2; margin: 0 auto; top: 50px; position: absolute; left: 0; right: 0;
-webkit-transition: border-color .5s; /* Safari */
transition: border-color .5s;}

/*#cirani{ position: absolute; }*/

.limitCont{ width: 90%; max-width: 1400px; margin: 0 auto;}
.limitContCatalogue{ width: 90%; max-width: 1000px; margin: 0 auto;}

footer{ background-color: #333333; color: #fff; overflow: hidden; padding: 2rem 0; position: relative;}
.submenucont{ float: left; overflow:hidden; }
.submenucont article{ float: left; margin-right: 2rem; }


.submenucont li{ float:left; margin-right:1rem;}

.submenucont li a{ color: #fff; text-transform: uppercase;}

.logoFooter{width: 80px; margin-top: 2rem; position: absolute; left: 0; right: 0; margin: 0 auto;}
.logoFooter img{ width: 100%;}

.scrolldown{ width: 50px; height: 50px; margin: 0 auto; left: 0; right: 0; bottom: 10%; position: absolute; background-repeat: no-repeat; background-image: url(../img/scroll-down.png); background-size: contain; cursor: pointer;}

.capbullets{ width: 84px; margin: 0 auto; left: 0; right: 0; bottom: 6%; position: absolute; }
.capbullets li{float: left; margin: 0 .25rem;}
.capbullets li a{ border-radius:50%; border: solid 2px #fff; width: 20px; height: 20px; background-color: red; display: block; cursor: pointer;}
.capbullets li:nth-child(1) a{ background-image: url(../img/bluebullet.png);}
.capbullets li:nth-child(2) a{ background-image: url(../img/orangebullet.png);}
.capbullets li:nth-child(3) a{ background-image: url(../img/blackbullet.png);}

#arrowTri{ width: 344px; height: 40px; bottom:4%; position: absolute; overflow: hidden; margin: 0 auto; left: 0; right: 0;}
.triArrowBtn{width: 60px; background-size: contain; background-repeat: no-repeat; background-position: center;  background-image: url(../img/arrowTri.png); display: block; height: 100%; float: left; cursor: pointer;}

#prev{ margin-right: 0px; }
#next{ -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);}

.viewBtn{ width: 40px; height: 40px; background-position: center; background-size: contain; cursor: pointer; display: block; float: left; margin: 0 8px;}
#view-1{ background-image: url(../img/menu360-1.png);}
#view-2{ background-image: url(../img/menu360-2.png);}
#view-3{ background-image: url(../img/menu360-3.png);}
#view-4{ background-image: url(../img/menu360-4.png);}

.typelist{ width: 300px;}
.typelist li { font-size: 1.5rem; line-height: 2.8rem !important; cursor: pointer; display: inline-block;
-webkit-transition: margin-left 1s; /* Safari */
    transition: margin-left 1s;
}
.typelist li span{ font-weight: 700;}

.typelist li:hover {margin-left: 20px;}


.sizeText{ font-size: 20px; }
.fabricText { font-size: 20px; font-weight: 700;}
.fabricShow{ font-size: 20px; }

.colorsoptions { overflow: hidden; padding-left: 10px !important; }
.colorsoptions li{ width: 65px; height: 32px; float:left; margin-right: 4px; cursor: pointer; background-size: contain;
-ms-transform: skewX(-18deg); /* IE 9 */
    -webkit-transform: skewX(-18deg); /* Safari */
    transform: skewX(-18deg);
}

.showcap{ background-size: contain; background-repeat: no-repeat; width: 438px; height: 210px; z-index: 10; position: absolute; margin: 0 auto; left: 0; right: 0; top: 95px;}

.gray-a{ /* background-image: -webkit-linear-gradient(85deg, #fff 24%, #F9F9F9 24%);*/ background-color: #f9f9f9; }
.gray-b{ background-image: -webkit-linear-gradient(85deg, #ffffff 75%, #f9f9f9 75%);}
.gray-c{ background-image: -webkit-linear-gradient(95deg, #f9f9f9 75%, #ffffff 75%); padding-top: 2rem;}

#catalogueCont{ overflow: hidden; position: relative; }
#splashBlue{ width: 15%; position: absolute; top: 0; left: 0; }
#splashYellow{width: 10%; position: absolute; top: 35%; right: 0; }
#splashPurple{width: 8%; position: absolute; top: 68%; left: 0; }

#splashBlue img, #splashYellow img, #splashPurple img{width: 100%;}

#perfork{padding-bottom: 7rem;}

.colorRing{ width: 280px; height: 280px; border-radius: 50%; border: solid 26px #0189C2; margin: 0 auto; top: 50px; position: absolute; left: 0; right: 0;
-webkit-transition: border-color .5s; /* Safari */
transition: border-color .5s;}
.typesection{ padding:4rem 0 1rem 0; margin-bottom: 0px !important; }
.colorShowing{ position: absolute; width: 100%; text-align: center; bottom: -30px; font-size: 22px; font-weight: 700; color: #333333; }

#menu_mobile {
    position: fixed;
    height: 100%;
    //top: 0;
    width: 100%;
    background: #fff;
    z-index: 92;
    color: #3E3E3E;
    top: -100%;
    background-image: url(../img/splash-menu.png);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 300px;
}
#menu_mobile ul{ margin-top: 6rem;}
#menu_mobile li{ width: 100%; text-align: center; }
#menu_mobile a{ color:#3E3E3E; font-size: 3em; text-align: center; line-height: 2.6em; position: relative;}
#menu_mobile a:after{ content: ""; width:0; height: 4px; position: absolute; background-color: #333; bottom: 0; left: 0; 
    -webkit-transition: background-color 1s, width .5s; /* Safari */
    transition: background-color 1s, width .5s;
}
#menu_mobile a:hover:after{ width: 100%; }
.close-menu{ position: absolute; right: 2rem; top: 2rem; width: 30px; height: 20px; background-image: url(../img/closemenu.jpg); background-repeat: no-repeat; background-size: contain; background-position: center; cursor: pointer;}

h2{font-weight: 700 !important; font-size: 2.6rem !important; text-transform: uppercase;}
h3{font-size: 18px !important; margin: 0 !important; font-weight: 800 !important;}
h4{font-size: 42px !important;    font-weight: 700 !important;    text-transform: uppercase;}
h5{font-size: 18px !important; font-weight: 800 !important; }
h6{font-weight: 700 !important; margin-bottom: 1rem !important; font-size: 2.5rem !important;}

h4.ligthTxt{ width: 400px; position: relative; padding-left: 58px; color: #628ca2;}
h4.ligthTxt::before{ content: ""; width:56px; height: 100%; background-image: url(../img/feather.png); background-repeat: no-repeat; background-position: center left; background-size: contain; position: absolute; left: 0; top: 0; }

#mainMenu{ float: right; }

#mainHeader ul{ margin: 0; }
#mainHeader ul li {float: left; font-size: 16px; padding: 0 .5rem;}
#mainHeader ul li a{color: #fff; cursor: pointer;}

.greenback{ width: 100%; min-height:100px; background: #77CECA; color: #fff;}

.bold{ font-weight: 700;}

.softGreen{color: #CBFFFF;}
.greeHashTag{ color: #339999; font-weight: 700; }

.circleCap{ width:380px; height:380px; position: relative; background-image: url(../img/circlelines.png); background-size: contain; background-position: center; margin: 0 auto;}

#circleA{border-color: #0189C2;}
#circleB{border-color: #2d4571;}
#circleC{border-color: #9da3af;}
#circleD{border-color: #9C0200;}
#circleE{border-color: #999999;}

@keyframes poligonRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#ourModel{ padding:2rem 0 1rem 0; opacity: 0; }

.ourmodel-text{ width: 60%; color: #339999;}
.ourmodel-text p span{ font-size: 18px; font-weight: 700;}

#capabilities{ padding: 1rem 0; overflow: hidden;}
.ioscode{width: 60%; height: 360px; margin-top: 20px; float: left; background-image: url(../img/code.png); background-attachment: fixed;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;}

.whiteblur{width: 100%; height: 100%; position: relative;}
.whiteblur img{height: 100%; -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);}

.capabilities-text{ /*margin-left: 60%;*/ width: 40%; float: left; color: #339999; opacity: 0; }
.capabilities-text ul > li{ font-weight: 700; }

.bttnmarg{ margin-bottom: 24px !important; font-size: 48px !important; color: #fff; font-weight: 400 !important;}
.bttnmarg span{ font-weight: 600; font-size: 54px !important;}
.capabilities-text ul li ul  { margin-bottom: .5rem; }
.capabilities-text ul li ul li{ margin-left: 2rem; font-weight: 100; }

#differenciation{padding:1rem 0 3rem 0; opacity: 0;}
#differenciation p{ margin-top: 0;}
.diff-text{color: #339999 ;}

.difTittle{ font-size: 16px; margin: 0; font-weight: 700;}

.grid-backg{ background-image: url(../img/grid-2.png); background-repeat: repeat; position: relative; padding: 1rem;}

.grid-w-quote{ padding:5.5rem 0 1rem 0;}

#clients{ padding: 2rem 0;}
.clients-grid{ width: 100%; min-height: 300px; margin-bottom: 2rem; padding-bottom: 2rem; color: #339999; font-style: italic; overflow: hidden;}
.clients-grid blockquote, .just-quote blockquote{ width: 90%; margin: 0 auto; text-align: center; }
.client-title{ position: absolute; top:0; left: 0; width: 130px; height: 40px; background-size: contain; background-repeat: repeat-x; background-position: center center;}

.bajititle{ background-image: url(../img/logo-baji.png); }
.leijastitle{ background-image: url(../img/logo-leijas.png);}
.just-quote{ width: 100%; min-height: 100px; margin-bottom: 2rem; color: #339999; font-style: italic; padding: 3rem 0;}
.feed-quote { text-align: center; font-style: normal; font-size: 18px; margin: 1rem 0;}
.floatajust{float: left; text-align: center;}
.line-one{ width: 90%; margin: 1rem auto; overflow: hidden;}
.line-two{ margin: 1rem auto; overflow: hidden;}

.small-size{ width: 15%; }
.small-size img{ width: 66%; }

.mid-size{ width: 20%; }
.mid-size img{ width: 100%; }

.big-size{ width: 33.3%; }
.big-size img{ width: 88%; }

.imgs-baji, .imgs-leijas{ margin: 3rem 0; overflow: hidden; text-align: center;}
.imgs-leijas img{ width: 100%; }

.imgs-more{ overflow: hidden; width:86%; margin: 0 auto;}
.imgs-more li{ width: 16.6%; line-height:0;}
.imgs-more li img{ width: 100%;}

.more-title{ font-weight: 800; font-style: normal; margin-left:2rem; }
.oscarsub{color: #77ceca; margin: 0;}

.cont-oscar{ position: relative; overflow: hidden; padding-left: 2.5rem; }

.text-oscar{ width: 65%; float: left; opacity: 0; }
.oscar-pic { width: 35%; float: left; text-align: right; opacity: 0;/* margin-top: 40px;*/ position: relative; top: 40px;}
.oscar-pic img { width:230px; max-width:100%; }

#oscar{ overflow: hidden; padding:4rem 0 5rem 0; background-image: url(../img/oscar-pic.png); background-size:auto 100%; background-position: bottom right; background-repeat: no-repeat; background-color: #f8f2f1; color: #339999; }

.logos-img { float: left; margin-right: 2rem;}
.logos-img img{height: 50px; }
.logos-img p{ margin: 0; color: #77ceca;}

p.lastp{ margin-bottom: 2rem;}

#contact { padding:3rem 0 0px 0; position: relative; background-image: url(../img/contac-back.jpg); background-size: cover; background-attachment: fixed; background-position: top;}
#contact input[type='text']{
    border: solid 2px rgba(255, 255, 255, 0.75);
    color: #fff;
    height: 30px;
    line-height: 30px;
    padding: 0 .5rem;
    width: calc(100% - 1rem);
    max-width: 450px;
    margin-bottom: 12px;
}
#contact textarea{ border: solid 2px rgba(255, 255, 255, 0.75); color: #fff; resize: none; width:calc(100% + 3px); height:90px; padding: .5rem; margin-bottom: 1rem; max-width: 464px;  -webkit-appearance: none; -moz-appearance:none; appearance:none; border-radius:0;}
#contact .row{ margin-bottom: 0;}
#contact-woman{
height: 580px;
    margin: 0 auto;
    width: 100%;
    max-width: 1230px;
    background-image: url(../img/contact-girl.png);
    background-size: auto 94%;
    background-position: bottom left;
    background-repeat: no-repeat;
}

.formCont{ width:320px; float: right; margin-top:2rem;}
.overflowtofloat{ overflow: hidden; }

#form-box{width: 100%; max-width: 584px;}
#form-box p{ margin: 0; line-height: 30px;}
#form-box label{ color: #fff;}

#submitform{ display: block;
    padding: 0.25rem 2rem;
    background-color: #e3381d;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
    text-align: center;
    font-weight: 700;
-webkit-transition: background-color 1s, color 1s; /* Safari */
transition: background-color 1s, color 1s;
}

.inputcont{ position: relative; padding: 0 !important; width: calc(100% - 4px)!important;}
label.error{ position: absolute; bottom: 2px; left: 10px; color: #e90505;}

#submitform:hover{ background-color: #f3a422; color: #ecd286; }

footer p{ margin: 0 auto; font-size: 14px; line-height: 100px; text-align: center; }

.LeijasCl01, .LeijasCl02{ opacity: 0; }
.imgs-more li{ opacity: 0; }

.space-inntext{padding-left: 2rem; position: relative;}

.verticalLine{height: 0%; width: 10px; position: absolute; top:3px; left: 0;}
.softpink{ background-color: #FF9999; }
.softyellow{ background-color: #FFFF99; }

.formrow{ display: flex;}
.formlist{ flex: 1;}
.formrow > .col{ padding: 0 !important;}

.formlist ul{ height: 75%; position: relative; margin: 0; padding-top: 15%; padding-left: 2.5rem !important;}
.formlist ul li{ margin-bottom: 1rem; opacity: 0;}
#experience{ padding: 4rem 0; position: relative; }

.poligon03{ position: absolute; width:210px; height: 238px; top: -12%; right: 4%; background-image: url(../img/poligon03.png); background-repeat: no-repeat; background-position: 96% 0%; background-size: contain;
-webkit-animation: poligonRotate 75s infinite linear; /* Safari 4+ */
-moz-animation:    poligonRotate 75s infinite linear; /* Fx 5+ */
-o-animation:      poligonRotate 75s infinite linear; /* Opera 12+ */
animation:         poligonRotate 75s infinite linear; /* IE 10+, Fx 29+ */
}

#experience ul li{font-size: 14px; margin-bottom: 1rem;}
#experience ul li span{ font-size: 28px; color: #CBFFFF; font-weight: 700;}

#experience-01, #experience-02, #experience-03{ opacity: 0; padding-left: 40px; }

.side-nav li a{ text-transform: uppercase;}
.side-nav{ width: 420px; }


#bajiImg01, #bajiImg02, #bajiImg03, #bajiImg04, #bajiImg05, #bajiImg06, #bajiImg07, #bajiImg08, #bajiImg09 { opacity: 0;}

input:not([type]):focus:not([readonly])+label, input[type=text]:not(.browser-default):focus:not([readonly])+label, input[type=password]:not(.browser-default):focus:not([readonly])+label, input[type=email]:not(.browser-default):focus:not([readonly])+label, input[type=url]:not(.browser-default):focus:not([readonly])+label, input[type=time]:not(.browser-default):focus:not([readonly])+label, input[type=date]:not(.browser-default):focus:not([readonly])+label, input[type=datetime]:not(.browser-default):focus:not([readonly])+label, input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label, input[type=tel]:not(.browser-default):focus:not([readonly])+label, input[type=number]:not(.browser-default):focus:not([readonly])+label, input[type=search]:not(.browser-default):focus:not([readonly])+label, textarea.materialize-textarea:focus:not([readonly])+label{color: #c3f5ee;}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fff !important;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #fff !important;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #fff !important;
}
:-moz-placeholder { /* Firefox 18- */
  color: #fff !important;
}


#topCollection {
    padding: 70px 0 2rem 0;
    background-color: #F6F6F6;
    height: calc(100vh - 39px);
    position: relative;
    background-image: url(../img/womanCapTopv2.png);
    background-size: cover;
    background-position: center;
    /* overflow: hidden; */
}

.touchArea{ width: 230px; height: 278px; position: absolute; bottom: 14%; left: 6%; cursor: pointer;}
.touchArea a{ width: 100%;}
.touchArea a img{ width: 100%;}

.selectCapType{ padding-left: 0 !important; }
.selectCapType .select-wrapper{ width: 314px; }
.selectCapType .select-wrapper input.select-dropdown{ font-size:20px; margin-top: 8px; border: 1px solid #313140; padding-left: .8rem;}
#performance .select-wrapper span.caret{border-left: solid 1px #313140; height: 35px !important; padding-left: 12px; line-height: 35px !important;}

.selectCapType.input-field.col label{left: 0 !important; font-size: 18px !important; top: -34px !important;}

#categories-bar{ width: 100%; background-color:#313140; height: 39px; -webkit-transition: height .5s; /* Safari */ transition: height .5s; }

#categories-bar ul{ overflow: hidden; margin: 0 auto; width: 878px; }
#categories-bar ul li { float: left; margin: 0 2rem;}
#categories-bar a{ text-transform: uppercase; color: #fff; font-size: 18px; line-height: 38px;  -webkit-transition: line-height .5s; /* Safari */ transition: line-height .5s; }

#categories-bar.fix-nav{ position: fixed; top: 0; z-index: 60; height: 60px; max-width: 878px; margin: 0 auto; left: 0; right: 0;}

#categories-bar.fix-nav a {line-height:55px;}


input:not([type]):focus:not([readonly]), input[type=text]:not(.browser-default):focus:not([readonly]), input[type=password]:not(.browser-default):focus:not([readonly]), input[type=email]:not(.browser-default):focus:not([readonly]), input[type=url]:not(.browser-default):focus:not([readonly]), input[type=time]:not(.browser-default):focus:not([readonly]), input[type=date]:not(.browser-default):focus:not([readonly]), input[type=datetime]:not(.browser-default):focus:not([readonly]), input[type=datetime-local]:not(.browser-default):focus:not([readonly]), input[type=tel]:not(.browser-default):focus:not([readonly]), input[type=number]:not(.browser-default):focus:not([readonly]), input[type=search]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]){
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
input.valid:not([type]), input.valid:not([type]):focus, input[type=text].valid:not(.browser-default), input[type=text].valid:not(.browser-default):focus, input[type=password].valid:not(.browser-default), input[type=password].valid:not(.browser-default):focus, input[type=email].valid:not(.browser-default), input[type=email].valid:not(.browser-default):focus, input[type=url].valid:not(.browser-default), input[type=url].valid:not(.browser-default):focus, input[type=time].valid:not(.browser-default), input[type=time].valid:not(.browser-default):focus, input[type=date].valid:not(.browser-default), input[type=date].valid:not(.browser-default):focus, input[type=datetime].valid:not(.browser-default), input[type=datetime].valid:not(.browser-default):focus, input[type=datetime-local].valid:not(.browser-default), input[type=datetime-local].valid:not(.browser-default):focus, input[type=tel].valid:not(.browser-default), input[type=tel].valid:not(.browser-default):focus, input[type=number].valid:not(.browser-default), input[type=number].valid:not(.browser-default):focus, input[type=search].valid:not(.browser-default), input[type=search].valid:not(.browser-default):focus, textarea.materialize-textarea.valid, textarea.materialize-textarea.valid:focus, .select-wrapper.valid>input.select-dropdown{
    
        -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
.dropdown-content li>a, .dropdown-content li>span{ color: #757575 !important; text-transform: uppercase; }


#interactiVid{ width: 100%; position: relative;}
#interactiVid video{ width: 100%; }
.timeline {
  width: 80%;
  max-width: 250px;
  height: 10px;
  background-color: black;
  cursor: pointer;
  position: absolute;
  left: 0;
  right: 0;
    bottom: 5%;
  margin: 0 auto;
}

.timeline .contTimeLine{ position: relative; width: 100%; height: 100%;}

.timeline__drag {
  width: 1px;
  height: 20px;
  top: -10px;
  background-color: yellow;
  position: absolute;
  z-index: 2;
  transform-origin: 0 0;
}

.timeline__progress {
  display: block;
  width: 100%;
  height: 100%;
  background-color: green;
  transform: scaleX(0);
  transform-origin: 0 0;
  position: relative;
  z-index: 1;
}

button {
  margin-top: 2em;
}

.linkContact{  font-size:22px; color: #80b9c6; float: right;}

/* ************* 360 VIEW ****************** */

    .detail{ position: absolute; width: 400px; z-index:50; }
    .detail-0{top : 20px; left: 20px;}
    .detail-10{right : 20px; top: 20px;}
    .detail-22{left : 20px; top: 20px;}    
    .detail-35{right : 20px; bottom: 20px;}
    .detail-49{left : 20px; bottom: 20px;}

    #spritespin{width: 992px;  margin: 0 auto; position: relative; cursor: url(../img/cursor-move.png), move;  }
    .detail img{ width: 100%; }

    .points{ position: absolute; border-radius: 50%; width: 20px; height: 20px; }
    .rings{position: absolute; border-radius: 50%; width: 30px; height: 30px; border: solid 4px; cursor: pointer;}

    .pntring-1{ right: 576px; top: 228px; border-color: #fb9e0e; }
    .point-1 { right: 581px; top: 233px; background-color: #fb9e0e; }

    .pntring-2{ left: 514px; top: 200px; border-color: #fb9e0e; }
    .point-2{ left: 519px; top: 205px; background-color: #fb9e0e; }

    .pntring-3{ right: 320px; bottom: 390px; border-color: #fb9e0e; }
    .point-3{ right: 325px; bottom: 395px; background-color: #fb9e0e; }

    .pntring-4{left: 570px; bottom: 190px; border-color: #fb9e0e; }
    .point-4{ left: 575px; bottom: 195px; background-color: #fb9e0e; }

/* ******************************* */

.homeImg{ width: 100%; }
.homeImg img{ width: 100%; }

#distributorBtn{ float: right; width: 173px; color: #fff; font-size: 14px; background-color: #e3381d;}

#DownloadsCollection {
    padding: 70px 0 2rem 0;
    background-color: #F6F6F6;
    height: calc(100vh - 130px);
    position: relative;
    /* overflow: hidden; */
}

.dowloadList{ width:412px; margin: 0 auto; padding: 1rem;}
.dowloadList li{ margin-bottom: 1rem;}
.dowloadList a{ text-transform: uppercase; font-size: 18px; }

#mainHeader .downmenu ul li a{ color: #333;}

.loginBox{ max-width: 400px; width: 84%; margin: 0 auto; padding: 1.5rem 1rem 1rem 1rem; background-color: #333; margin-top: 2rem; }
.loginBox input{ font-size: 20px !important; color: #fff;}
.loginBox .input-field label { color: #fff;}

.loginBox input[type=text]:not(.browser-default):focus:not([readonly])+label, .loginBox input[type=password]:not(.browser-default):focus:not([readonly])+label{ color: aqua; }

.loginBox input[type=text].valid:not(.browser-default), .loginBox input[type=password].valid:not(.browser-default){ border-bottom: 1px solid aqua;
    -webkit-box-shadow: 0 1px 0 0 aqua;
    box-shadow: 0 1px 0 0 aqua;}

.loginBox input[type=text].valid:not(.browser-default), .loginBox input[type=text].valid:not(.browser-default):focus,.loginBox input[type=password].valid:not(.browser-default), .loginBox input[type=password].valid:not(.browser-default):focus{border-bottom: 1px solid aqua;
    -webkit-box-shadow: 0 1px 0 0 aqua;
    box-shadow: 0 1px 0 0 aqua;}

.sendForm{float:right; margin-bottom: 1rem; }

.signoutbtn{ margin: 0 auto; left: 0; right: 0; }

.limit2Footer{ overflow: hidden; position: relative;}

@media screen and (max-width: 992px) {
    
    .mid-size { width: 40%; margin-bottom: 2rem}
    .mid-size img {width: 94%;}
    .small-size { width: 30%; margin-bottom: 2rem}
    .imgs-more { max-width: 520px;}
    .imgs-more li{ width: 33.33%; }
    
    .line-two > div:last-child{ width: 100%; margin-bottom: 0;}
    .line-two > div:last-child img{ width: 50%;}
    
    .big-size { width: 50%; margin-bottom: 2rem;}
    .big-size img{ max-width: 400px;}
    
    .imgs-baji, .imgs-leijas { margin: 2rem 0;}
    .ourmodel-text { width: 80%;}
    .ioscode {width: 100%; height: 280px; margin-top: 0px; margin-bottom: 1rem;}
    .poligon02 { width: 220px; height: 216px; top:120%; right: 10px;}
    .capabilities-text{width: 100%; }
    #experience .limitCont ul{max-width: 60%;}
    
    .text-oscar {width:58%; margin-right: 2%; opacity: 0; }
    .oscar-pic {width: 40%; opacity: 0;}
    .logos-img img { height: 70px;}
    #oscar {padding: 4rem 0 18rem 0;
    background-size: auto 42%;
    background-position: bottom center;}
    
    .formrow {display: block;}
    
    .formlist ul{padding-top: 30px; margin: 2rem 0; text-align: center; padding-left: 0rem !important;}
    .formlist ul li {margin-bottom: .5rem;}
    .tolands{ width: 100% !important; height: 10px; }
    
    .imgs-more li{ width: 25%;}
    
    #topMain {height: 480px; padding:0; padding-bottom: 1rem; padding-top: 20px;}
    
/* ************* 360 VIEW ****************** */

    .detail{ width: 240px;}
    .detail-0{top : 20px; left: 20px;}
    .detail-10{right : 20px; top: 20px;}
    .detail-22{left : 20px; top: 20px;}    
    .detail-35{right : 20px; bottom: 20px;}
    .detail-49{left : 20px; bottom: 20px;}

    #spritespin{width: 600px;  margin: 0 auto; position: relative; cursor: url(../img/cursor-move.png), move;  }
    .detail img{ width: 100%; }

    .points{ width: 14px; height: 14px; }
    .rings{width: 24px; height: 24px; border: solid #fb9e0e 3px;}

    .pntring-1{ right: 331px; top: 105px; }
    .point-1 { right: 336px; top: 110px; }

    .pntring-2{ left: 304px; top: 80px; }
    .point-2{ left: 309px; top: 85px; }

    .pntring-3{ right: 187px; bottom: 227px; }
    .point-3{ right: 192px; bottom: 232px; }

    .pntring-4{left: 347px; bottom: 89px; }
    .point-4{ left: 352px; bottom: 94px; }
/* ******************************* */    
    .videoList .col{ margin-bottom: 2rem;}
}

@media screen and (max-width:600px) {
    
    #slide-out{ text-align: right; }
    #mainHeader{ min-height: 60px; height: 60px; padding: 1rem 0; }
    #topMain {height: 320px; padding:0; padding-bottom: 1rem; padding-top: 20px;}
    #spritespin {margin: 1.5rem auto 0 auto;}
    .verticalLine{ width: 6px; }
    .viewBtn {width: 36px; height: 36px; margin: 0 6px;}
    #arrowTri {width: 312px; height: 36px; bottom: 5%;}
    .detail-10 {right: -6px; top: 0px;}
    .point-1 {right: 209px; top: 76px;}
    .pntring-1 {right: 204px; top: 71px;}
    .detail-22 {left: 0px; top: 0px;}
    .point-2 {left: 202px; top: 65px;}
    .pntring-2 {left: 197px; top: 60px;}
    
    .detail-35 {right: 10px; bottom: -5px;}
    .pntring-3 {right: 112px; bottom: 141px;}
    .point-3 {right: 117px; bottom: 146px;}
    
    .detail-49 {left: 0px; bottom: -6px;}
    .pntring-4 {left: 214px; bottom: 60px;}
    .point-4 {left: 219px; bottom: 65px;}
    
    .points {width: 10px; height: 10px;}
    .rings {width: 20px; height: 20px;}
    .detail {width: 200px;}
    .space-inntext { padding-left: 1.5rem; margin-top: 1.5rem;}
    .ourmodel-text { width: 96%;}
    .ioscode{ /*background: none;*/ height: 150px; background-attachment: initial; background-position: 10% center; background-size: 180%;}
    #capabilities{ padding: 0; }
    .poligon02 {width: 160px; height: 158px; top: 0; right: 0px;}
    blockquote::before, blockquote::after {width: 20px; height: 19px;}
    blockquote{font-size: 17px; padding: .35rem 1.3rem 0 1.3rem !important; }
    .feed-quote { font-size: 17px; width: 90%; margin: 1rem auto; }
    #contact input[type='text']{ margin-bottom: 0;}
    #oscar{ position: relative; padding-top: 0; }
    .cont-oscar {position: inherit; overflow: initial; padding-left: 0; padding-top: 30px;}
    .text-oscar {width: 100%; margin: 0 auto; text-align: center;}
    #submitform{ width: 100%; }
    .oscar-pic{ position: absolute; top: 40px; left: 0; overflow: hidden; width: 100%; background-color: #f8f3f2; height: 180px; text-align: center;}
    .oscar-pic img {width: 300px; max-width: 100%; margin-top: -12%;}
    .logos-img{text-align: center; float: none; margin-right: 0;}
    .logos-img img{ max-width: 90%;}
    .limitCont {width: 100%;}
    
    #experience {padding: 1.5rem 0; background-position: 100% 100%; background-size: 40%;}
    #experience ul li span { font-size: 18px;}
    #experience .limitCont ul { max-width: 90%;}
    .user-view{ height:60px;}
    .user-view img{ margin: 16px 40px; }
    
    .poligon01{width: 110px; height: 115px; bottom: -100px; right: -180%;}
    
    .poligon03{ width: 110px; height: 128px; top: -14%; right: 10%;}
    
    .imgs-more li{  width: 50%; }
    label.error{bottom: -18px; left: calc(100% - 214px); width: 200px; text-align: right;}
    #fmessage-error{bottom: 2px;}
    
    .formCont{ float: none; width: 96%; margin: 0 auto;}
    #mainHeader {min-height: 54px; height: 54px;}
    #logo {left: 1rem; top: 1rem; height: 34px;}
    #mobileico {right: 1rem; top:.75rem;}
    #mobileico i {font-size: 36px;}

    #continueDown {position: absolute width: 34px; height: 34px; background-size: 30px;}

    .aboutCard { width: 100%; padding:1.5rem 1.5rem 2.5rem 1.5rem;}
    #aboutUs { padding-top: 0;}
    .flexFix { display: block;}
    .linkContact {font-size: 18px;}

    .mailBtn { width: 40px; height: 40px;}
    .mailBtn a .material-icons { font-size: 30px; line-height: 40px;}

    #section3 {padding: 2rem 1rem 2rem 1rem;}
    #section3 p {font-size: 28px; line-height: 40px; width: 100%;}
    #section3 .row {margin-bottom: 2rem;}

    #singleCircle{ width: 290px; height: 290px;} 
    #singleCircle img{ width: 100%; }

    h4 {font-size: 38px !important; }
    .colCircle{ padding: 0 !important;  }

    .singleRing {width: 214px; height: 214px; top: 39px; }

    #capIndex{ width: 280px; height: 280px; }

    form#form-box .inputcont{margin-bottom: 1rem; }
    form#form-box .inputcont input{-webkit-appearance: none; -moz-appearance:none; appearance:none;}
    .submenucont {margin-left: 1rem; float: none;}
    .submenucont article ul{ overflow: hidden; }
    .logoFooter {width: 80px; position: relative; margin: 2rem auto  0rem auto;}

    .submenucont article{ text-align: center;}
    
    #menu_mobile{ background-size: 150px; }
    #menu_mobile ul { margin-top: 8rem;}
    #menu_mobile a {font-size: 2em; line-height: 2em;}

    .close-menu {right: 1rem; top: 1rem;}

    h2 {font-size: 2.2rem !important; margin: 0 0 1rem 0 !important; }

    .selectCapType .select-wrapper {width: 100%;}
    .selectCapType .select-wrapper input.select-dropdown {font-size: 16px;}
    .sizeText, .fabricShow, .fabricText {font-size: 18px; margin: .5rem 0;}
    .colorsoptions li { width: calc(20% - 3px); height: 26px; margin-right: 2px;}
    .circleCap {width: 250px; height: 250px;}
    .colorRing {width: 190px; height: 190px; border: solid 17px #0189C2; top: 30px;}

    
    #splashBlue{ width: 20%;  }
    #splashYellow, #splashPurple {width: 34%;}

    .showcap {width: 258px; height: 140px; top: 60px; }

    .typesection{z-index: 10; position: relative; }

    #categories-bar ul{ width: 100%; }
    #categories-bar ul li{float: none; width: 100%; margin: 0; text-align: center;}
    section#categories-bar {height: auto;}
    .touchArea {width: 90px; height: 110px; position: absolute; bottom: 3%; left: 4%;}
    #distributorBtn {float: none; margin: 1rem auto; display: block;}
    .dowloadList{ width:300px;}
    .dowloadList li{ margin-bottom: .5rem;}
    .dowloadList a{ font-size: 12px; }
    
}

@media screen and (min-width:1400px) {
    
    .redLine {height: 300px; top: calc(50% - 150px);}
    .numberone{width: 900px;}
    .especialSize{ width: 100% !important;}
    .aboutCard {width:90%;  background-color: rgba(255, 255, 255, 0); padding: 1.5rem 2.5rem;}
    .aboutCard p {font-size: 1.45rem;}
     h6 { margin-bottom: 1.2rem !important; font-size: 3.5rem !important;}
    
}

@media screen and (min-width:2560px) {
    .limitCont{ max-width: 1900px;}
    #mainHeader{ height: 150px;}
    #logo { left: 3.5rem; top: 3rem; height: 90px;}
    #mobileico{right: 2.5rem; top: 1.5rem;}
    #mobileico i{font-size: 110px;}
    .redLine { height: 460px; top: calc(50% - 230px);}
    .numberone { width: 1320px;}
    .darkredline { height: 22px;}
    .bluecap{height: 580px; width: 866px;}
    
    .especialSize{ width: 100% !important;}
    .aboutCard { width: 100%;  padding: 2.5rem 3.5rem;}
    .aboutCard p{ font-size: 2.15rem;}
    h6 {margin-bottom: 2.2rem !important; font-size: 5rem !important;}
    #menu_mobile{ zoom: 2;}

    .touchArea { width: 375px; height: 450px;}
    .limitContCatalogue { width: 90%; max-width: 1680px;}
    h2 {font-size: 5rem !important; }
    
    .selectCapType .select-wrapper input.select-dropdown { font-size: 2.1rem; margin-top: 1.5rem; padding: 1rem 6px 1rem 1rem;}
    .selectCapType .select-wrapper {width: 526px;}
    .colorsoptions li{width: 130px; height: 60px; margin-right: 6px;}
    
    #performance .select-wrapper span.caret { height: 58px !important; padding-left: 20px; line-height: 58px !important; font-size: 26px !important;}
    
    .selectCapType.input-field.col label {font-size: 28px !important; }
    .sizeText { font-size: 36px; }
    .fabricShow {font-size: 36px; }
    .fabricText { font-size: 36px;}
    .typesection { padding: 8rem 0 5rem 0;}
    .circleCap{ zoom:1.5;}
    
    .menuList { zoom: 2; width: 380px; margin-top: 16px;}
    #categories-bar ul { width: 730px; }
    #mainHeader ul li a { font-size: 18px; padding: 0 2rem; }
    #categories-bar.fix-nav{ max-width: 730px; }
    #categories-bar{ zoom: 2; }
    /*#contact{ zoom: 1.75; }*/
    footer{ zoom: 1.5; padding: 5rem 0; }
    #section3 .limitCont{ zoom: 1.5;}
    #spritespin{ zoom: 2; }
    #continueDown{ zoom: 1.75; }
    .linkContact { font-size: 40px;}
    #contact-woman{zoom:1.75;}
    
    #topMain { height: 1270px; }
    #arrowTri{ zoom:1.75;}
    .submenucont{ zoom:1.25;}
    .logoFooter { zoom: 1.5;}
    #topCollection{ height: calc(100vh - 80px); }
    #DownloadsCollection{ height: calc(100vh - 80px); }
    
    .dropdown-content{ zoom: 2; max-width: 410px; }
    #aboutUs{padding-top: 12rem;}
    #contact{ padding-top: 5rem; }
    .mailBtn{zoom: 1.75; }
}