.nomer{

  color:white;
}
     
     
      .vopros {


  font-size:30px;
}


.otvet {


  font-size:15px;
}


.kartinka {

 width: 400px;
   height:auto;
}



.ssilka {
  margin-left: 50px;
  font-size:25px;
}


.ssilkaResult {
  margin-left: 50px;
  font-size:25px;
}

.textArea{
 width:80%;
  padding:20px;
   margin:20px 0;
  font-size:25px;
  

  border:0;
  box-shadow:0 0 15px 4px rgba(0,0,0,0.2);
border-radius:10px;
  
}

.form-control{
 width:80%;
  padding:20px;
   margin:20px 0;
  font-size:25px;

  border:0;
  box-shadow:0 0 15px 4px rgba(0,0,0,0.3);

  border-radius:10px;
}

.ramka1{
border-top: 3px solid black;
border-color: green;
}


#ramka1{
border-top: 3px solid black;
border-color: green;
}


#ramka2{
border-top: 3px solid black;
border-color: green;
display:none;
}



#ramka3{
border-top: 3px solid black;
border-color: green;
display:none;
}


#GotovoRamka2{
  
margin-left:20%;   
display:none;
}


#Gotovo{

display:none;
}

.kartinka {


}


.kol_variantov {
font-size:25px;

}




#podskazka1 {
  position: relative ;
}

#podskazka1:hover::after {  

 content: "Enter the question you want to put to the vote. If you need to attach an image to the question, click on the "Select file" button and download the corresponding image from your computer." ;
  position: absolute ;
  top: 1.1em ;
  left: 1em ;
  min-width: 200px ;
  border: 1px #808080 solid ;
  padding: 8px ;
  color: black ;
  background-color: #cfc ;
  z-index: 1 ;
}


#podskazka2 {
  position: relative ;
}

#podskazka2:hover::after {  


 content: "Enter the answer option. If you need to attach an image to the question, click on the «Select file» button and download the corresponding image from your computer. To add an answer option, click «The answer option is ready»." ;
  position: absolute ;
  top: 1.1em ;
  left: 1em ;
  min-width: 200px ;
  border: 1px #808080 solid ;
  padding: 8px ;
  color: black ;
  background-color: #cfc ;
  z-index: 1 ;
}



#podskazka3 {
  position: relative ;
}

#podskazka3:hover::after {  

 content: "If you want to allow the user to vote for an unlimited number of options, check the box here." ;
  position: absolute ;
  top: 1.1em ;
  left: 1em ;
  min-width: 200px ;
  border: 1px #808080 solid ;
  padding: 8px ;
  color: black ;
  background-color: #cfc ;
  z-index: 1 ;
}


.ManyOptions{

}











/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */




::-moz-selection {
    background:#b3d4fc;
    text-shadow:none
}

::selection {
    background:#b3d4fc;
    text-shadow:none
}



audio,canvas,img,video {
    vertical-align:middle
}

fieldset {
    border:0;
    margin:0;
    padding:0
}


/***********************************************************************************************/
/* GENERAL */
/***********************************************************************************************/


nav.demo-nav {
    width:350px;
    margin:0 auto;
    display:block
}

nav.demo-nav a {
    font-size:19px;
    display:inline-block;
    text-align:center;
    font-family:'Lato',sans-serif;
    color:#27ae60;
    font-weight:400;
    padding:5px 15px;
    text-transform:uppercase;
    border-radius:2px;
    letter-spacing:1px;
    text-decoration:none;
    margin-right:10px;
    border:2px solid #ecf0f1;
    border-radius:none
}

nav a.active,nav a:hover {
    background:#ecf0f1;
    color:#27ae60
}

/***********************************************************************************************/
/* HEADER AND NAV */
/***********************************************************************************************/
header {
    position:relative;
    height:250px;
    background:#2ecc71;
    padding:23px 0
   
}

nav.main-nav {
    background:#fff;
    height:60px;
    border-bottom:1px solid #dadada;
    text-align: center;
}

nav.main-nav a {
    font-family:'Lato',sans-serif;
    font-size:20px;
    text-decoration:none;
    display:inline-block;
    padding:15px 19px;
    color:#27ae60;

}


nav.main-nav.stickytop {
    position:fixed;
    top:0;
    width: 100%; 
}



/***********************************************************************************************/
/* CONTENT */
/***********************************************************************************************/
.content {
    color:#222;
    padding:50px;
    -webkit-column-count:3;
/* Chrome, Safari, Opera */
    -moz-column-count:3;
/* Firefox */
    column-count:3;
    -webkit-column-gap:40;
    column-gap:40px;
}

.content h2 {
    margin:0;
}

/***********************************************************************************************/
/* RESPONSIVE */
/***********************************************************************************************/

@media all and (min-width: 360px) and (max-width: 480px) { 
    header {
        padding:5px 0 55px;
       
    }
    
    nav.main-nav a {
        font-size:17px;
    }
    
    nav.main-nav {
        height:55px;
    }
    
    .container {
        margin:0 auto;
        width:50%;
      


    }
    
    .content {
        -webkit-column-count:1;
        /* Chrome, Safari, Opera */
        -moz-column-count:1;
        /* Firefox */
        column-count:1;
    }
}




@media screen and (max-width: 480px) {
    header {
        padding:5px 0 55px;
      
    }
    
    nav.main-nav a {
        font-size:17px;
    }
    
    nav.main-nav {
        height:55px;
    }
    
    .container {
        width:92%;
    
    }
    
    .content {
        -webkit-column-count:1;
        /* Chrome, Safari, Opera */
        -moz-column-count:1;
        /* Firefox */
        column-count:1
    }
}


@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

.zagolovok {
  /*font-family: 'Bebas Neue', cursive; */
  text-shadow: 10px 10px 10px #000;
  color: #673c63;
  font-size: 3em;
  position: absolute;
  top: 15%;
  left: 25%;
  transform: translate(-50%,-50%);
  background-image: linear-gradient(gold, gold);
  background-size: 100% 10px;
  background-repeat: no-repeat;
  background-position: 100% 100%;
   transition: background-size .7s, background-position .5s ease-in-out;
}

.zagolovok:hover {
  background-size: 100% 100%;
  background-position: 0% 100%;
  transition: background-position .7s, background-size .5s ease-in-out;
  
  }




.zagolovok2 {
  cursor: pointer;
  margin: auto;
  font-size: 5vmin;
  font-weight: 450;
  transition: font-weight 250ms ease-in-out;
  margin-top:2%;
  margin-left:3%;
  color:white;
  text-shadow: 10px 10px 10px #000;
   text-decoration: none;

}




.zagolovok2:hover {
   font-weight: 450;
  color:#673c63;
  text-shadow: 10px 10px 10px white;
}




#zanovo{

display:none;


width: 150px;
height: 150px;
position: fixed;
right: 3%;
top: 70%;
z-index: 99999;
}


@media screen and (max-width: 980px) {
#zanovo {
top: 90% !important;
}
}